feat: support labelRender prop

Author: inottn

src/TreeSelect.tsx

@@ -94,6 +94,7 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
   listItemScrollOffset?: number;
   onPopupVisibleChange?: (open: boolean) => void;
   treeTitleRender?: (node: OptionType) => React.ReactNode;
+  labelRender?: (props: LabeledValueType) => React.ReactNode;
 
   // >>> Tree
   treeLine?: boolean;
@@ -161,6 +162,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     listHeight = 200,
     listItemHeight = 20,
     listItemScrollOffset = 0,
+    labelRender,
 
     onPopupVisibleChange,
     popupMatchSelectWidth = true,
@@ -395,7 +397,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
     return rawDisplayValues.map(item => ({
       ...item,
-      label: item.label ?? item.value,
+      label: (typeof labelRender === 'function' ? labelRender(item) : item.label) ?? item.value,
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -406,6 +408,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     convert2LabelValues,
     mergedShowCheckedStrategy,
     keyEntities,
+    labelRender,
   ]);
 
   const [cachedDisplayValues] = useCache(displayValues);

tests/Select.spec.tsx

@@ -705,4 +705,45 @@ describe('TreeSelect.basic', () => {
     expect(itemTitle).toHaveStyle(customStyles.itemTitle);
     expect(item).toHaveStyle(customStyles.item);
   });
+
+  it('labelRender', () => {
+    const onLabelRender = jest.fn();
+    const labelRender = props => {
+      const { label, value } = props;
+      onLabelRender();
+      return `${label}-${value}`;
+    };
+    const { container } = render(
+      <TreeSelect
+        treeData={[{ label: 'realLabel', value: 'a' }]}
+        value="a"
+        labelRender={labelRender}
+      />,
+    );
+
+    expect(onLabelRender).toHaveBeenCalled();
+    expect(container.querySelector('.rc-tree-select-selector').textContent).toEqual('realLabel-a');
+  });
+
+  it('labelRender when value is not in treeData', () => {
+    const onLabelRender = jest.fn();
+    const treeData = [{ label: 'realLabel', value: 'b' }];
+    const labelRender = props => {
+      const { label, value } = props;
+      // current value is in treeData
+      if (treeData.find(item => item.value === value)) {
+        return label;
+      } else {
+        // current value is not in treeData
+        onLabelRender();
+        return `${label || 'fakeLabel'}-${value}`;
+      }
+    };
+    const { container } = render(
+      <TreeSelect value="a" labelRender={labelRender} treeData={treeData} />,
+    );
+
+    expect(onLabelRender).toHaveBeenCalled();
+    expect(container.querySelector('.rc-tree-select-selector').textContent).toEqual('fakeLabel-a');
+  });
 });