pass renderer as props for cell content

microsoft · May 31, 2023 · ecb9646 · ecb9646
1 parent 17ca96c
commit ecb9646
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/change/@fluentui-react-56abc8fc-36e8-4557-8cd9-2793648f0cba.json b/change/@fluentui-react-56abc8fc-36e8-4557-8cd9-2793648f0cba.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add onRenderCellContent to override cell internals",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
@@ -100,7 +100,7 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
   });
 
   // Render the core of a color cell
-  const onRenderColorOption = (colorOption: IColorCellProps): JSX.Element => {
+  const renderColorOption = (colorOption: IColorCellProps): JSX.Element => {
     const svgClassName = classNames.svg;
 
     // Build an SVG for the cell with the given shape and color properties
@@ -119,6 +119,11 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
     );
   };
 
+  const onRenderItem = (option: IColorCellProps): JSX.Element => {
+    const { onRenderCellContent = renderColorOption } = props;
+    return onRenderCellContent(option, renderColorOption) as JSX.Element;
+  };
+
   const cellSemantics = isRadio
     ? {
         role: 'radio',
@@ -138,7 +143,7 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
       disabled={disabled}
       {...cellSemantics}
       // eslint-disable-next-line react/jsx-no-bind
-      onRenderItem={onRenderColorOption}
+      onRenderItem={onRenderItem}
       onClick={onClick}
       onHover={onHover}
       onFocus={onFocus}

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { IStyle, ITheme } from '../../Styling';
-import type { IStyleFunctionOrObject } from '../../Utilities';
+import type { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
 
 /**
  * {@docCategory SwatchColorPicker}
@@ -113,6 +113,11 @@ export interface IColorPickerGridCellProps {
   onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 
   onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Custom content render function for rendering core of cell
+   */
+  onRenderCellContent?: IRenderFunction<IColorCellProps>;
 }
 
 /**

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -74,6 +74,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
     cellHeight,
     cellWidth,
     cellBorderWidth,
+    onRenderColorCellContent,
   } = props;
 
   /**
@@ -321,6 +322,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
         onMouseLeave={onMouseLeave}
         onWheel={setNavigationTimeout}
         onKeyDown={onKeyDown}
+        onRenderCellContent={onRenderColorCellContent}
         height={cellHeight}
         width={cellWidth}
         borderWidth={cellBorderWidth}

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts
@@ -88,6 +88,11 @@ export interface ISwatchColorPickerProps extends React.RefAttributes<HTMLElement
    */
   onRenderColorCell?: IRenderFunction<IColorCellProps>;
 
+  /**
+   * Custom render function for button/cell content area
+   */
+  onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
+
   /**
    * Whether the control is disabled.
    */