diff --git a/src/index.tsx b/src/index.tsx
index db48a62..65efdad 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -22,6 +22,11 @@ export interface SegmentedLabeledOption<valuetype = SegmentedRawOption> {
 title?: string;
 }
 
+type ItemRender = (
+ node: React.ReactNode,
+ info: { item: SegmentedLabeledOption },
+) => React.ReactNode;
+
 type SegmentedOptions<t = SegmentedRawOption> = (
 &#124; T
 &#124; SegmentedLabeledOption<t>
@@ -44,6 +49,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) {
@@ -80,6 +86,7 @@ const InternalSegmentedOption: React.FC<{ style?: React.CSSProperties; classNames?: Partial<record<semanticname, string>>;
 styles?: Partial<record<semanticname, React.CSSProperties>>;
+ data: SegmentedLabeledOption;
 disabled?: boolean;
 checked: boolean;
 label: React.ReactNode;
@@ -95,12 +102,14 @@ const InternalSegmentedOption: React.FC<{ onKeyDown: (e: React.KeyboardEvent) => void;
 onKeyUp: (e: React.KeyboardEvent) => void;
 onMouseDown: () => void;
+ itemRender?: ItemRender;
 }> = ({
 prefixCls,
 className,
 style,
 styles,
 classNames: segmentedClassNames,
+ data,
 disabled,
 checked,
 label,
@@ -113,6 +122,7 @@ const InternalSegmentedOption: React.FC<{ onKeyDown, onKeyUp, onMouseDown, + itemRender = (node: React.ReactNode) => node,
 }) => {
 const handleChange = (event: React.ChangeEvent<htmlinputelement>) => {
 if (disabled) {
@@ -120,8 +130,7 @@ const InternalSegmentedOption: React.FC<{ } onChange(event, value); }; - - return ( + const itemContent: React.ReactNode = ( <label className={classNames(className, { [`${prefixCls}-item-disabled`]: disabled, @@ -155,6 +164,7 @@ const InternalSegmentedOption: React.FC<{ </div>
 </label>
 );
+ return itemRender(itemContent, { item: data });
 };
 
 const Segmented = React.forwardRef<htmldivelement, SegmentedProps>(
@@ -174,6 +184,7 @@ const Segmented = React.forwardRef<htmldivelement, SegmentedProps>(
 styles,
 classNames: segmentedClassNames,
 motionName = 'thumb-motion',
+ itemRender,
 ...restProps
 } = props;
 
@@ -258,6 +269,54 @@ const Segmented = React.forwardRef<htmldivelement, SegmentedProps>(
 break;
 }
 };
+
+ const renderOption = (segmentedOption: SegmentedLabeledOption) => {
+ const {
+ label,
+ value: optionValue,
+ disabled: optionDisabled,
+ title,
+ } = segmentedOption;
+ const optionData: SegmentedLabeledOption = {
+ label,
+ value: optionValue,
+ disabled: optionDisabled,
+ title,
+ };
+ return (
+ <internalsegmentedoption + {...segmentedOption} + name={name} + data={optionData} + itemRender={itemRender} + key={optionValue} + prefixCls={prefixCls} + className={classNames( + segmentedOption.className, + `${prefixCls}-item`, + segmentedClassNames?.item, + { + [`${prefixCls}-item-selected`]: + optionValue === rawValue && !thumbShow, + [`${prefixCls}-item-focused`]: + isFocused && isKeyboard && optionValue === rawValue, + }, + )} + style={styles?.item} + classNames={segmentedClassNames} + styles={styles} + checked={optionValue === rawValue} + + + + + + + disabled={!!disabled &#124;&#124; !!optionDisabled} + />
+ );
+ };
+
 return (
 <div role="radiogroup" @@ -294,38 +353,7 @@ const Segmented = React.forwardRef<htmldivelement, SegmentedProps>(
 setThumbShow(false);
 }}
 />
- {segmentedOptions.map((segmentedOption) => (
- <internalsegmentedoption - {...segmentedOption} - name={name} - key={segmentedOption.value} - prefixCls={prefixCls} - className={classNames( - segmentedOption.className, - `${prefixCls}-item`, - segmentedClassNames?.item, - { - [`${prefixCls}-item-selected`]: - segmentedOption.value === rawValue && !thumbShow, - [`${prefixCls}-item-focused`]: - isFocused && - isKeyboard && - segmentedOption.value === rawValue, - }, - )} - style={styles?.item} - classNames={segmentedClassNames} - styles={styles} - checked={segmentedOption.value === rawValue} - - - - - - - disabled={!!disabled &#124;&#124; !!segmentedOption.disabled} - />
- ))}
+ {segmentedOptions.map(renderOption)}
 </div>
 </div>
 );
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index d1d0844..7fff1b4 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -799,4 +799,47 @@ 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);
+ });
+ it('should pass complete params to itemRender', () => {
+ const mockItemRender = jest.fn((node, params) => node);
+ const testData = {
+ label: 'iOS',
+ value: 'iOS',
+ disabled: false,
+ title: 'iOS',
+ };
+ render(
+ <segmented + options={[{ ...testData, className: 'test-class' }, 'Android', 'Web']} + itemRender={mockItemRender} + />,
+ );
+ expect(mockItemRender).toHaveBeenCalledTimes(3);
+ const callArgs = mockItemRender.mock.calls[0];
+ const receivedParams = callArgs[1];
+ expect(receivedParams).toEqual({
+ item: {
+ ...testData,
+ },
+ });
+ expect(React.isValidElement(callArgs[0])).toBeTruthy();
+ });
+ });
 });
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/react-component/segmented/pull/301.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/react-component/segmented/pull/301.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>