add a sample usecase for onRenderContent

microsoft · Jun 1, 2023 · bc93086 · bc93086
1 parent ce15b62
commit bc93086
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx b/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId } from '@fluentui/react-hooks';
-import { SwatchColorPicker } from '@fluentui/react/lib/SwatchColorPicker';
+import { IColorCellProps, SwatchColorPicker } from '@fluentui/react/lib/SwatchColorPicker';
 
 const colorCellsExample1 = [
   { id: 'a', label: 'orange', color: '#ca5010' },
@@ -24,6 +24,17 @@ const colorCellsExample2 = [
   { id: 'l', label: 'gray20', color: '#69797e' },
 ];
 
+const colorCellsExample3 = [
+  { id: 'a', label: 'redBlueGradient', color: 'linear-gradient(0, red, blue)' },
+  { id: 'b', label: 'greenGradient', color: 'linear-gradient(0, grey, green)' },
+  { id: 'c', label: 'yellowGradient', color: 'linear-gradient(0, grey, yellow)' },
+  { id: 'd', label: 'magentaGradient', color: 'linear-gradient(0, grey, magenta)' },
+  { id: 'e', label: 'cyanGradient', color: 'linear-gradient(0, #038387, #ca5010)' },
+  { id: 'f', label: 'ygGradient', color: 'linear-gradient(0, #8cbd18, #69797e)' },
+  { id: 'g', label: 'grayGreen', color: 'linear-gradient(0, #0b6a0b, #69797e)' },
+  { id: 'h', label: 'gray', color: '#7a7574' },
+];
+
 export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
   const [previewColor, setPreviewColor] = React.useState<string>();
   const baseId = useId('colorpicker');
@@ -32,6 +43,19 @@ export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
     setPreviewColor(color!);
   };
 
+  const renderCustomCellContent = (cellProps: IColorCellProps) => {
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '50%',
+          background: cellProps.color,
+        }}
+      />
+    );
+  };
+
   return (
     <div>
       <div id={`${baseId}-circle`}>Simple circle swatch color picker:</div>
@@ -82,6 +106,17 @@ export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
         colorCells={colorCellsExample2}
         aria-labelledby={`${baseId}-grid`}
       />
+      <div id={`${baseId}-custom-content`}>Swatch color picker with gradient colors:</div>
+      <SwatchColorPicker
+        columnCount={4}
+        cellHeight={40}
+        cellWidth={40}
+        cellShape={'circle'}
+        colorCells={colorCellsExample3}
+        aria-labelledby={`${baseId}-custom-content`}
+        // eslint-disable-next-line react/jsx-no-bind
+        onRenderColorCellContent={renderCustomCellContent}
+      />
       <div id={`${baseId}-disabled`}>Simple disabled circle swatch color picker:</div>
       <SwatchColorPicker
         disabled

diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -3582,7 +3582,7 @@ export interface IColorPickerGridCellProps {
     // (undocumented)
     onMouseLeave?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
     onMouseMove?: (ev: React_2.MouseEvent<HTMLButtonElement>) => boolean;
-    onRenderCellContent?: IRenderFunction<IColorCellProps>;
+    onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
     // (undocumented)
     onWheel?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
     selected: boolean;

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
@@ -120,8 +120,8 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
   };
 
   const onRenderItem = (option: IColorCellProps): JSX.Element => {
-    const { onRenderCellContent = renderColorOption } = props;
-    return onRenderCellContent(option, renderColorOption) as JSX.Element;
+    const { onRenderColorCellContent = renderColorOption } = props;
+    return onRenderColorCellContent(option, renderColorOption) as JSX.Element;
   };
 
   const cellSemantics = isRadio

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
@@ -115,9 +115,9 @@ export interface IColorPickerGridCellProps {
   onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
 
   /**
-   * Custom content render function for rendering core of cell
+   * Custom render function for rendering internal content of the color cell.
    */
-  onRenderCellContent?: IRenderFunction<IColorCellProps>;
+  onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
 }
 
 /**

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -322,7 +322,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
         onMouseLeave={onMouseLeave}
         onWheel={setNavigationTimeout}
         onKeyDown={onKeyDown}
-        onRenderCellContent={onRenderColorCellContent}
+        onRenderColorCellContent={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
@@ -84,12 +84,14 @@ export interface ISwatchColorPickerProps extends React.RefAttributes<HTMLElement
   onCellFocused?: (id?: string, color?: string, event?: React.FormEvent<HTMLButtonElement>) => void;
 
   /**
-   * Custom render function for the color cell
+   * Custom render function for the color cell.
+   * This can replace the entire button element, including the default focus and hover states.
    */
   onRenderColorCell?: IRenderFunction<IColorCellProps>;
 
   /**
-   * Custom render function for button/cell content area
+   * Custom render function for inner content of the color cell.
+   * This will retain the cell's default button behavior and overrides just the inner content.
    */
   onRenderColorCellContent?: IRenderFunction<IColorCellProps>;