feat: support custom label render

README.md

@@ -130,6 +130,7 @@ export default () => (
 | 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 | - |
+| labelRender  | Custom rendering label   |  (props: LabelInValueType) => React.ReactNode   | - |
 
 ### Methods
 

docs/demo/custom-label.md

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

docs/examples/custom-label.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable no-console */
+import React from 'react';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
+
+
+const children = [];
+for (let i = 10; i < 36; i += 1) {
+    children.push(
+        <Option key={i.toString(36) + i} test={i}>
+            {i.toString(36) + i}
+        </Option>,
+    );
+}
+
+const Test: React.FC = () => {
+    const [disabled, setDisabled] = React.useState(false);
+    const [value, setValue] = React.useState<string>('test');
+
+    return (
+        <div>
+            <h2>tags select with custom renderer（scroll the menu）</h2>
+
+            <div>
+                <Select
+                    placeholder="placeholder"
+                    style={{ width: 500 }}
+                    disabled={disabled}
+                    value={value}
+                    onChange={(val: string, option) => {
+                        setValue(val);
+                    }}
+                    onSelect={(val, option) => {
+                        console.log('selected', val, option);
+                    }}
+                    onDeselect={(val, option) => {
+                        console.log('deselected', val, option);
+                    }}
+                    tokenSeparators={[',']}
+                    labelRender={(props) => {
+                        const { label, value } = props;
+                        const style: React.CSSProperties = { backgroundColor: 'red' };
+                        if (label) {
+                            return value
+                        } else return (
+                            <span style={style}>
+                        no this value in options
+                      </span>
+                        );
+                    }}
+                    onFocus={() => console.log('focus')}
+                    onBlur={() => console.log('blur')}
+                >
+                    {children}
+                </Select>
+            </div>
+            <p>
+                <button
+                    type="button"
+                    onClick={() => {
+                        setValue('test');
+                    }}
+                >
+                    set value as 'test'
+                </button>
+            </p>
+        </div>
+    );
+};
+
+export default Test;
+/* eslint-enable */

src/Select.tsx

@@ -148,6 +148,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   direction?: 'ltr' | 'rtl';
   listHeight?: number;
   listItemHeight?: number;
+  labelRender?: (props: LabelInValueType) => React.ReactNode;
 
   // >>> Icon
   menuItemSelectedIcon?: RenderNode;
@@ -197,6 +198,7 @@ const Select = React.forwardRef(
       direction,
       listHeight = 200,
       listItemHeight = 20,
+      labelRender,
 
       // Value
       value,
@@ -323,7 +325,7 @@ const Select = React.forwardRef(
 
     // Fill label with cache to avoid option remove
     const [mergedValues, getMixedOption] = useCache(rawLabeledValues, valueOptions);
-
+    
     const displayValues = React.useMemo(() => {
       // `null` need show as placeholder instead
       // https://github.com/ant-design/ant-design/issues/25057
@@ -339,7 +341,7 @@ const Select = React.forwardRef(
 
       return mergedValues.map((item) => ({
         ...item,
-        label: item.label ?? item.value,
+        label: labelRender ? labelRender(item) : item.label ?? item.value,
       }));
     }, [mode, mergedValues]);
 

tests/Select.test.tsx

@@ -2114,4 +2114,32 @@ describe('Select.Basic', () => {
       'test1 - 0',
     );
   });
+
+  it('labelRender', () => {
+    const onLabelRender = jest.fn();
+    const labelRender = (props: any) => {
+      const { label, value } = props;
+      onLabelRender();
+      return `${label}-${value}`;
+    };
+    const wrapper = mount(
+        <Select options={[{ label: 'realLabel', value: 'a' }]} value="a" labelRender={labelRender} />,
+    );
+
+    expect(onLabelRender).toHaveBeenCalled();
+    expect(findSelection(wrapper).text()).toEqual('realLabel-a');
+  });
+
+  it('labelRender when value is not in options', () => {
+    const onLabelRender = jest.fn();
+    const labelRender = (props: any) => {
+      const { label, value } = props;
+      onLabelRender();
+      return `${label || 'fakeLabel'}-${value}`;
+    };
+    const wrapper = mount(<Select value="a" labelRender={labelRender} options={[{ label: 'realLabel', value: 'b' }]} />);
+
+    expect(onLabelRender).toHaveBeenCalled();
+    expect(findSelection(wrapper).text()).toEqual('fakeLabel-a');
+  });
 });