feat: Add attribute itemRender to 'segmented'

src/index.tsx

@@ -22,6 +22,20 @@ export interface SegmentedLabeledOption<ValueType = SegmentedRawOption> {
   title?: string;
 }
 
+interface SegementItem {
+  disabled?: boolean;
+  checked: boolean;
+  label: React.ReactNode;
+  title?: string;
+  value: SegmentedRawOption;
+  name?: string;
+}
+
+type ItemRender = (
+  node: React.ReactNode,
+  info: { item: SegementItem },
+) => React.ReactNode;
+
 type SegmentedOptions<T = SegmentedRawOption> = (
   | T
   | SegmentedLabeledOption<T>
@@ -44,6 +58,7 @@ export interface SegmentedProps<ValueType = SegmentedValue>
   name?: string;
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  itemRender?: ItemRender;
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -95,6 +110,7 @@ const InternalSegmentedOption: React.FC<{
   onKeyDown: (e: React.KeyboardEvent) => void;
   onKeyUp: (e: React.KeyboardEvent) => void;
   onMouseDown: () => void;
+  itemRender?: ItemRender;
 }> = ({
   prefixCls,
   className,
@@ -113,15 +129,15 @@ const InternalSegmentedOption: React.FC<{
   onKeyDown,
   onKeyUp,
   onMouseDown,
+  itemRender = (node: React.ReactNode) => node,
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) {
       return;
     }
     onChange(event, value);
   };
-
-  return (
+  const itemContent: React.ReactNode = (
     <label
       className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
@@ -155,6 +171,15 @@ const InternalSegmentedOption: React.FC<{
       </div>
     </label>
   );
+  const itemInfo: SegementItem = {
+    label,
+    title,
+    value,
+    name,
+    disabled,
+    checked,
+  };
+  return itemRender(itemContent, { item: itemInfo });
 };
 
 const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
@@ -174,6 +199,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       styles,
       classNames: segmentedClassNames,
       motionName = 'thumb-motion',
+      itemRender,
       ...restProps
     } = props;
 
@@ -298,6 +324,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);
+    });
+  });
 });