feat: Add attribute itemRender to 'segmented'

src/index.tsx

@@ -44,6 +44,7 @@ export interface SegmentedProps<ValueType = SegmentedValue>
   name?: string;
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  itemRender?: (node: React.ReactNode, itemInfo: ItemInfo) => React.ReactNode;
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -74,7 +75,7 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
   });
 }
 
-const InternalSegmentedOption: React.FC<{
+interface ItemInfo {
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
@@ -95,33 +96,40 @@ const InternalSegmentedOption: React.FC<{
   onKeyDown: (e: React.KeyboardEvent) => void;
   onKeyUp: (e: React.KeyboardEvent) => void;
   onMouseDown: () => void;
-}> = ({
-  prefixCls,
-  className,
-  style,
-  styles,
-  classNames: segmentedClassNames,
-  disabled,
-  checked,
-  label,
-  title,
-  value,
-  name,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  onKeyUp,
-  onMouseDown,
-}) => {
+}
+
+const InternalSegmentedOption: React.FC<
+  {
+    itemRender?: (node: React.ReactNode, itemInfo: ItemInfo) => React.ReactNode;
+  } & ItemInfo
+> = (props) => {
+  const {
+    prefixCls,
+    className,
+    style,
+    styles,
+    classNames: segmentedClassNames,
+    disabled,
+    checked,
+    label,
+    title,
+    value,
+    name,
+    itemRender = (node: React.ReactNode) => node,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+  } = props;
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) {
       return;
     }
     onChange(event, value);
   };
-
-  return (
+  const ItemContent = (
     <label
       className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
@@ -155,6 +163,10 @@ const InternalSegmentedOption: React.FC<{
       </div>
     </label>
   );
+
+  const renderProps = { ...props };
+  delete renderProps.itemRender;
+  return itemRender(ItemContent, renderProps);
 };
 
 const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
@@ -174,6 +186,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       styles,
       classNames: segmentedClassNames,
       motionName = 'thumb-motion',
+      itemRender,
       ...restProps
     } = props;
 
@@ -298,6 +311,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
             <InternalSegmentedOption
               {...segmentedOption}
               name={name}
+              itemRender={itemRender}
               key={segmentedOption.value}
               prefixCls={prefixCls}
               className={classNames(

tests/index.test.tsx

@@ -799,4 +799,23 @@ describe('Segmented keyboard navigation', () => {
     expect(itemElement.style.color).toBe('yellow');
     expect(labelElement.style.backgroundColor).toBe('black');
   });
+  describe('itemRender', () => {
+    it('When "itemRender" is not configured, render the original "label"', () => {
+      const { container } = render(
+        <Segmented options={['iOS', 'Android', 'Web']} />,
+      );
+      const label = container.querySelector('.rc-segmented-item-label');
+      expect(label).toHaveTextContent('iOS');
+    });
+    it('Configure "itemRender" to render the return value', () => {
+      const { container } = render(
+        <Segmented
+          options={['iOS', 'Android', 'Web']}
+          itemRender={(node) => <div className="test-title">{node}</div>}
+        />,
+      );
+      const labels = container.querySelectorAll('.test-title');
+      expect(labels).toHaveLength(3);
+    });
+  });
 });