feat: Implement optionRender API (#987)

* feat: implement optionRender api * chore: clean code * docs: update md * refactor: modify api * refactor: fix type definition
react-component · Oct 25, 2023 · 44d9806 · 44d9806 · vercel · Oct 25, 2023
1 parent eda3dca
commit 44d9806
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 16 deletions.
diff --git a/README.md b/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 | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
 
 ### Methods
 

diff --git a/docs/demo/option-render.md b/docs/demo/option-render.md
@@ -0,0 +1,8 @@
+---
+title: optionRender
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/option-render.tsx"></code>
diff --git a/docs/examples/option-render.tsx b/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 `${option.label} - ${index}`;
+      }}
+    />
+  );
+};
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -1,18 +1,18 @@
 import classNames from 'classnames';
-import useMemo from 'rc-util/lib/hooks/useMemo';
 import KeyCode from 'rc-util/lib/KeyCode';
+import useMemo from 'rc-util/lib/hooks/useMemo';
 import omit from 'rc-util/lib/omit';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { ListRef } from 'rc-virtual-list';
 import List from 'rc-virtual-list';
 import type { ScrollConfig } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import { useEffect } from 'react';
-import useBaseProps from './hooks/useBaseProps';
-import type { FlattenOptionData } from './interface';
 import type { BaseOptionType, RawValueType } from './Select';
 import SelectContext from './SelectContext';
 import TransBtn from './TransBtn';
+import useBaseProps from './hooks/useBaseProps';
+import type { FlattenOptionData } from './interface';
 import { isPlatformMac } from './utils/platformUtil';
 
 // export interface OptionListProps<OptionsType extends object[]> {
@@ -56,6 +56,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     direction,
     listHeight,
     listItemHeight,
+    optionRender,
   } = React.useContext(SelectContext);
 
   const itemPrefixCls = `${prefixCls}-item`;
@@ -366,7 +367,11 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
               }}
               style={style}
             >
-              <div className={`${optionPrefixCls}-content`}>{content}</div>
+              <div className={`${optionPrefixCls}-content`}>
+                {typeof optionRender === 'function'
+                  ? optionRender(item, { index: itemIndex })
+                  : content}
+              </div>
               {React.isValidElement(menuItemSelectedIcon) || selected}
               {iconVisible && (
                 <TransBtn

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -41,15 +41,16 @@ import type {
   RenderNode,
 } from './BaseSelect';
 import BaseSelect, { isMultiple } from './BaseSelect';
+import OptGroup from './OptGroup';
+import Option from './Option';
+import OptionList from './OptionList';
+import SelectContext from './SelectContext';
 import useCache from './hooks/useCache';
 import useFilterOptions from './hooks/useFilterOptions';
 import useId from './hooks/useId';
 import useOptions from './hooks/useOptions';
 import useRefFunc from './hooks/useRefFunc';
-import OptGroup from './OptGroup';
-import Option from './Option';
-import OptionList from './OptionList';
-import SelectContext from './SelectContext';
+import type { FlattenOptionData } from './interface';
 import { hasValue, isComboNoValue, toArray } from './utils/commonUtil';
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
@@ -138,6 +139,10 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   optionLabelProp?: string;
   children?: React.ReactNode;
   options?: OptionType[];
+  optionRender?: (
+    oriOption: FlattenOptionData<BaseOptionType>,
+    info: { index: number },
+  ) => React.ReactNode;
   defaultActiveFirstOption?: boolean;
   virtual?: boolean;
   direction?: 'ltr' | 'rtl';
@@ -184,6 +189,7 @@ const Select = React.forwardRef(
       optionFilterProp,
       optionLabelProp,
       options,
+      optionRender,
       children,
       defaultActiveFirstOption,
       menuItemSelectedIcon,
@@ -605,6 +611,7 @@ const Select = React.forwardRef(
         listHeight,
         listItemHeight,
         childrenAsData,
+        optionRender,
       };
     }, [
       parsedOptions,
@@ -620,6 +627,7 @@ const Select = React.forwardRef(
       listHeight,
       listItemHeight,
       childrenAsData,
+      optionRender,
     ]);
 
     // ========================== Warning ===========================

diff --git a/src/SelectContext.ts b/src/SelectContext.ts
@@ -1,11 +1,18 @@
 import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
+import type {
+  BaseOptionType,
+  FieldNames,
+  OnActiveValue,
+  OnInternalSelect,
+  SelectProps,
+} from './Select';
 import type { FlattenOptionData } from './interface';
-import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect } 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;

diff --git a/tests/Select.test.tsx b/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',
+    );
+  });
 });