feat: Implement optionRender API

README.md

@@ -4,6 +4,7 @@
 
 React Select
 
+<!-- prettier-ignore -->
 [![NPM version][npm-image]][npm-url]
 [![npm download][download-image]][download-url]
 [![build status][github-actions-image]][github-actions-url]
@@ -67,6 +68,7 @@ export default () => (
 
 ### Select props
 
+<!-- prettier-ignore -->
 | name | description | type | default |
 | --- | --- | --- | --- |
 | id | html id to set on the component wrapper | String | '' |
@@ -126,6 +128,7 @@ export default () => (
 | loading | show loading icon in arrow | boolean | false |
 | virtual | Disable virtual scroll | boolean | true |
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
+| optionRender | Custom rendering options | (params: OptionRenderParams) => React.ReactNode | - |
 
 ### Methods
 

docs/demo/option-render.md

@@ -0,0 +1,8 @@
+---
+title: optionRender
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/option-render.tsx"></code>

docs/examples/option-render.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable no-console */
+import Select from 'rc-select';
+import '../../assets/index.less';
+
+export default () => {
+  return (
+    <Select
+      options={[
+        { label: 'test1', value: '1' },
+        { label: 'test2', value: '2' },
+      ]}
+      optionRender={({ option, index }) => {
+        return <div>{`${option.label} - ${index}`}</div>;
+      }}
+    />
+  );
+};

src/OptionList.tsx

@@ -56,6 +56,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     direction,
     listHeight,
     listItemHeight,
+    optionRender,
   } = React.useContext(SelectContext);
 
   const itemPrefixCls = `${prefixCls}-item`;
@@ -366,7 +367,18 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
               }}
               style={style}
             >
-              <div className={`${optionPrefixCls}-content`}>{content}</div>
+              <div className={`${optionPrefixCls}-content`}>
+                {typeof optionRender === 'function'
+                  ? optionRender({
+                      option: { ...item.data, label: item.label },
+                      index: itemIndex,
+                      options: memoFlattenOptions.map((flattenItem) => ({
+                        ...flattenItem.data,
+                        label: flattenItem.label,
+                      })),
+                    })
+                  : content}
+              </div>
               {React.isValidElement(menuItemSelectedIcon) || selected}
               {iconVisible && (
                 <TransBtn

src/Select.tsx

@@ -103,6 +103,12 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
   option: OptionType,
 ) => void;
 
+export type OptionRenderParams = {
+  option: DefaultOptionType;
+  index: number;
+  options: DefaultOptionType[];
+};
+
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>
@@ -138,6 +144,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   optionLabelProp?: string;
   children?: React.ReactNode;
   options?: OptionType[];
+  optionRender?: (params: OptionRenderParams) => React.ReactNode;
   defaultActiveFirstOption?: boolean;
   virtual?: boolean;
   direction?: 'ltr' | 'rtl';
@@ -184,6 +191,7 @@ const Select = React.forwardRef(
       optionFilterProp,
       optionLabelProp,
       options,
+      optionRender,
       children,
       defaultActiveFirstOption,
       menuItemSelectedIcon,
@@ -605,6 +613,7 @@ const Select = React.forwardRef(
         listHeight,
         listItemHeight,
         childrenAsData,
+        optionRender,
       };
     }, [
       parsedOptions,
@@ -620,6 +629,7 @@ const Select = React.forwardRef(
       listHeight,
       listItemHeight,
       childrenAsData,
+      optionRender,
     ]);
 
     // ========================== Warning ===========================

src/SelectContext.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
 import type { FlattenOptionData } from './interface';
-import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect } from './Select';
+import type {
+  BaseOptionType,
+  FieldNames,
+  OnActiveValue,
+  OnInternalSelect,
+  SelectProps,
+} from './Select';
 
 // Use any here since we do not get the type during compilation
 export interface SelectContextProps {
   options: BaseOptionType[];
+  optionRender?: SelectProps['optionRender'];
   flattenOptions: FlattenOptionData<BaseOptionType>[];
   onActiveValue: OnActiveValue;
   defaultActiveFirstOption?: boolean;
@@ -14,7 +21,7 @@ export interface SelectContextProps {
   rawValues: Set<RawValueType>;
   fieldNames?: FieldNames;
   virtual?: boolean;
-  direction?: "ltr" | "rtl";
+  direction?: 'ltr' | 'rtl';
   listHeight?: number;
   listItemHeight?: number;
   childrenAsData?: boolean;

tests/Select.test.tsx

@@ -268,7 +268,7 @@ describe('Select.Basic', () => {
     expect(wrapper2.find('.rc-select-clear-icon').length).toBeFalsy();
 
     const wrapper3 = mount(
-      <Select allowClear={{ clearIcon: <div className='custom-clear-icon'>x</div> }} value="1">
+      <Select allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }} value="1">
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -277,17 +277,16 @@ describe('Select.Basic', () => {
     expect(wrapper3.find('.custom-clear-icon').text()).toBe('x');
 
     const wrapper4 = mount(
-      <Select allowClear={{ clearIcon: <div className='custom-clear-icon'>x</div> }}>
+      <Select allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }}>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
     );
     expect(wrapper4.find('.custom-clear-icon').length).toBeFalsy();
 
-
     resetWarned();
     const wrapper5 = mount(
-      <Select allowClear clearIcon={<div className='custom-clear-icon'>x</div>} value="1">
+      <Select allowClear clearIcon={<div className="custom-clear-icon">x</div>} value="1">
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -296,7 +295,7 @@ describe('Select.Basic', () => {
     expect(wrapper5.find('.custom-clear-icon').text()).toBe('x');
 
     const wrapper6 = mount(
-      <Select allowClear clearIcon={<div className='custom-clear-icon'>x</div>}>
+      <Select allowClear clearIcon={<div className="custom-clear-icon">x</div>}>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -1361,7 +1360,7 @@ describe('Select.Basic', () => {
     beforeAll(() => {
       domHook = spyElementPrototypes(HTMLElement, {
         getBoundingClientRect: () => ({
-          width: 1000
+          width: 1000,
         }),
       });
     });
@@ -2095,4 +2094,24 @@ describe('Select.Basic', () => {
     const { container } = testingRender(<Select open direction="rtl" options={options} />);
     expect(container.querySelector('.rc-virtual-list-rtl')).toBeTruthy();
   });
+
+  it('Should optionRender work', () => {
+    const options = [
+      { label: 'test1', value: '1' },
+      { label: 'test2', value: '2' },
+    ];
+
+    const { container } = testingRender(
+      <Select
+        open
+        options={options}
+        optionRender={({ option, index }) => {
+          return `${option.label} - ${index}`
+        }}
+      />,
+    );
+    expect(container.querySelector('.rc-select-item-option-content').innerHTML).toEqual(
+      'test1 - 0',
+    );
+  });
 });