From e58e90da1ced6068e012205f2a9694b907536835 Mon Sep 17 00:00:00 2001
From: BrianHung <brianlhung@gmail.com>
Date: Sat, 22 Jun 2024 18:34:04 -0700
Subject: [PATCH] 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<DataEditorProps, "renderers" | "imageWindowLoader"> {
+export interface DataEditorAllProps extends Omit<DataEditorProps, "imageWindowLoader"> {
     imageWindowLoader?: ImageWindowLoader;
 }
 
@@ -14,6 +14,10 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEdito
         return { ...sprites, ...p.headerIcons };
     }, [p.headerIcons]);
 
+    const renderers = React.useMemo(() => {
+        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<DataEditorRef, DataEdito
     return (
         <DataEditor
             {...p}
-            renderers={AllCellRenderers}
+            renderers={renderers}
             headerIcons={allSprites}
             ref={ref}
             imageWindowLoader={imageWindowLoader}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 0c7a8df84..b5ef03c68 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -61,6 +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 { AllCellRenderers } from "./cells/index.js";
 export { sprites } from "./internal/data-grid/sprites.js";
 export { default as ImageWindowLoaderImpl } from "./common/image-window-loader.js";
diff --git a/packages/core/test/data-editor.test.tsx b/packages/core/test/data-editor.test.tsx
index 097c8e967..c1c0cf050 100644
--- a/packages/core/test/data-editor.test.tsx
+++ b/packages/core/test/data-editor.test.tsx
@@ -8,6 +8,10 @@ import {
     GridCellKind,
     isSizedGridColumn,
     type Item,
+    markerCellRenderer,
+    type InnerGridCell,
+    type InternalCellRenderer,
+    AllCellRenderers,
 } from "../src/index.js";
 import type { CustomCell } from "../src/internal/data-grid/data-grid-types.js";
 import type { DataEditorRef } from "../src/data-editor/data-editor.js";
@@ -2572,6 +2576,30 @@ describe("data-editor", () => {
         expect(onClickSpy).not.toBeCalled();
     });
 
+    test("renderers can override internal cells", async () => {    
+        const spy = vi.fn();
+
+        vi.useFakeTimers();
+        render(
+            <DataEditor
+                {...basicProps}
+                renderers={[
+                    ...AllCellRenderers,
+                    {
+                        ...markerCellRenderer,
+                        draw: spy
+                    } as InternalCellRenderer<InnerGridCell>,
+                ]}
+                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();