From e58e90da1ced6068e012205f2a9694b907536835 Mon Sep 17 00:00:00 2001 From: BrianHung Date: Sat, 22 Jun 2024 18:34:04 -0700 Subject: [PATCH 1/3] expose renderers prop to allow custom internal renderers --- packages/core/src/data-editor-all.tsx | 8 +++++-- packages/core/src/index.ts | 1 + packages/core/test/data-editor.test.tsx | 28 +++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/core/src/data-editor-all.tsx b/packages/core/src/data-editor-all.tsx index 8cdd822c5..11ca5848c 100644 --- a/packages/core/src/data-editor-all.tsx +++ b/packages/core/src/data-editor-all.tsx @@ -5,7 +5,7 @@ import { sprites } from "./internal/data-grid/sprites.js"; import ImageWindowLoaderImpl from "./common/image-window-loader.js"; import type { ImageWindowLoader } from "./internal/data-grid/image-window-loader-interface.js"; -export interface DataEditorAllProps extends Omit { +export interface DataEditorAllProps extends Omit { imageWindowLoader?: ImageWindowLoader; } @@ -14,6 +14,10 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction { + return p.renderers ?? AllCellRenderers; + }, [p.renderers]) + const imageWindowLoader = React.useMemo(() => { return p.imageWindowLoader ?? new ImageWindowLoaderImpl(); }, [p.imageWindowLoader]); @@ -21,7 +25,7 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction { expect(onClickSpy).not.toBeCalled(); }); + test("renderers can override internal cells", async () => { + const spy = vi.fn(); + + vi.useFakeTimers(); + render( + , + ]} + rowMarkers="both" + />, + { + wrapper: Context, + } + ); + prep(); + expect(spy).toHaveBeenCalledTimes(31); // Math.ceil((height - headerHeight) / rowHeight) + }); + test("onCellsEdited blocks onCellEdited", async () => { const spy = vi.fn(); vi.useFakeTimers(); From 9bd2fa549871f0142e43f8d16813d02d40a81178 Mon Sep 17 00:00:00 2001 From: BrianHung Date: Sat, 22 Jun 2024 20:13:07 -0700 Subject: [PATCH 2/3] fix react 18 test --- setup-react-18-test.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup-react-18-test.sh b/setup-react-18-test.sh index f68e8f92a..18bab1a5e 100755 --- a/setup-react-18-test.sh +++ b/setup-react-18-test.sh @@ -1,3 +1,3 @@ #!/bin/bash -npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest \ No newline at end of file +npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest @testing-library/dom \ No newline at end of file From 78d3af3d2a7831f30b4558e2eb60166bbafd579e Mon Sep 17 00:00:00 2001 From: Brian Hung Date: Wed, 18 Jun 2025 23:50:05 -0700 Subject: [PATCH 3/3] add story and document --- packages/core/API.md | 13 +++- .../examples/custom-renderers.stories.tsx | 67 +++++++++++++++++++ packages/core/src/index.ts | 2 +- 3 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 packages/core/src/docs/examples/custom-renderers.stories.tsx diff --git a/packages/core/API.md b/packages/core/API.md index 44fb12bc4..30e18b7fb 100644 --- a/packages/core/API.md +++ b/packages/core/API.md @@ -189,7 +189,8 @@ Most data grids will want to set the majority of these props one way or another. | Name | Description | | ---------------------------------- | ------------------------------------------------------ | -| [customRenderers](#customRenderer) | FIXME | +| [customRenderers](#customRenderer) | Custom renderers for `GridCellKind.Custom`. | +| [renderers](#renderers) | Overrides built-in cell renderers. | | [drawCell](#drawcell) | Callback used to override the rendering of any cell. | | [drawHeader](#drawheader) | Callback used to override the rendering of any header. | @@ -728,6 +729,16 @@ It is possible to return `false` after rendering just a background and the regul --- +## renderers + +```ts +readonly renderers?: readonly InternalCellRenderer[]; +``` + +An array of cell renderers used when drawing built-in cell types. Provide this prop to override default cell renderers. If omitted, `AllCellRenderers` is used. + +--- + ## getGroupDetails ```ts diff --git a/packages/core/src/docs/examples/custom-renderers.stories.tsx b/packages/core/src/docs/examples/custom-renderers.stories.tsx new file mode 100644 index 000000000..66cdddf1c --- /dev/null +++ b/packages/core/src/docs/examples/custom-renderers.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { DataEditorAll as DataEditor } from "../../data-editor-all.js"; +import { + BeautifulWrapper, + Description, + PropName, + defaultProps, + useMockDataGenerator, +} from "../../data-editor/stories/utils.js"; +import { SimpleThemeWrapper } from "../../stories/story-utils.js"; +import { + markerCellRenderer, + AllCellRenderers, + type InternalCellRenderer, + type InnerGridCell, +} from "../../index.js"; + +export default { + title: "Glide-Data-Grid/DataEditor Demos", + decorators: [ + (Story: React.ComponentType) => ( + + + Override internal cell renderers by passing the {" "} + renderers prop. + + } + > + + + + ), + ], +}; + +export const OverrideMarkerRenderer: React.VFC = () => { + const { cols, getCellContent } = useMockDataGenerator(100, true, true); + + const renderers = React.useMemo[]>(() => { + return [ + ...AllCellRenderers, + { + ...markerCellRenderer, + draw: args => { + const { ctx, rect } = args; + ctx.fillStyle = "#ffe0e0"; + ctx.fillRect(rect.x, rect.y, rect.width, rect.height); + markerCellRenderer.draw(args as any); + }, + } as InternalCellRenderer, + ]; + }, []); + + return ( + + ); +}; \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index b5ef03c68..3d7b0bdb2 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -61,7 +61,7 @@ export { markerCellRenderer } from "./cells/marker-cell.js"; export { bubbleCellRenderer } from "./cells/bubble-cell.js"; export { protectedCellRenderer } from "./cells/protected-cell.js"; export { rowIDCellRenderer } from "./cells/row-id-cell.js"; -export type { InternalCellRenderer } from "./cells/cell-types.js" +export type { InternalCellRenderer } from "./cells/cell-types.js"; export { AllCellRenderers } from "./cells/index.js"; export { sprites } from "./internal/data-grid/sprites.js"; export { default as ImageWindowLoaderImpl } from "./common/image-window-loader.js";