From 44d98063d61ee5722744879cd8d9645d4b71a6a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= <pingfj77@gmail.com>
Date: Wed, 25 Oct 2023 15:24:23 +0800
Subject: [PATCH] feat: Implement  `optionRender` API (#987)

* feat: implement  optionRender api

* chore: clean code

* docs: update md

* refactor: modify api

* refactor: fix type definition
---
 README.md                       |  3 +++
 docs/demo/option-render.md      |  8 ++++++++
 docs/examples/option-render.tsx | 17 +++++++++++++++++
 src/OptionList.tsx              | 13 +++++++++----
 src/Select.tsx                  | 16 ++++++++++++----
 src/SelectContext.ts            | 11 +++++++++--
 tests/Select.test.tsx           | 31 +++++++++++++++++++++++++------
 7 files changed, 83 insertions(+), 16 deletions(-)
 create mode 100644 docs/demo/option-render.md
 create mode 100644 docs/examples/option-render.tsx

diff --git a/README.md b/README.md
index 71d69aea..4e318b24 100644
--- 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
new file mode 100644
index 00000000..d203f935
--- /dev/null
+++ 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
new file mode 100644
index 00000000..216fd110
--- /dev/null
+++ 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
index a28dc86b..a9eee236 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -1,6 +1,6 @@
 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';
@@ -8,11 +8,11 @@ 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
index 4db82807..1b2dc54e 100644
--- 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
index d6cf9372..cd7d5f72 100644
--- 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
index 2825097f..3ff82ec7 100644
--- 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',
+    );
+  });
 });