feat: support titleRender (#447)

* ✨ feat: support titleRender

* 🐳 chore: update test case

* 🐳 chore: update prop name

* 🐳 chore: update `label` logic

* 🌈 style: format

Author: huangkairan

examples/basic.tsx

@@ -1,8 +1,8 @@
-import '../assets/index.less';
-import React from 'react';
-import 'rc-dialog/assets/index.css';
 import Dialog from 'rc-dialog';
-import TreeSelect, { TreeNode, SHOW_PARENT } from '../src';
+import 'rc-dialog/assets/index.css';
+import React from 'react';
+import '../assets/index.less';
+import TreeSelect, { SHOW_PARENT, TreeNode } from '../src';
 import { gData } from './utils/dataUtil';
 
 function isLeaf(value) {
@@ -381,6 +381,14 @@ class Demo extends React.Component {
           </TreeNode>
           <TreeNode value="same value3" title="same title" key="0-3" />
         </TreeSelect>
+
+        <h2>title render</h2>
+        <TreeSelect<{ label: string }>
+          open
+          style={{ width: 300 }}
+          treeData={gData}
+          treeTitleRender={node => node.label + 'ok'}
+        />
       </div>
     );
   }

src/OptionList.tsx

@@ -43,6 +43,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
     onSelect,
     dropdownMatchSelectWidth,
     treeExpandAction,
+    treeTitleRender,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -241,6 +242,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
         checkedKeys={mergedCheckedKeys}
         selectedKeys={!checkable ? checkedKeys : []}
         defaultExpandAll={treeDefaultExpandAll}
+        titleRender={treeTitleRender}
         {...treeProps}
         // Proxy event out
         onActiveChange={setActiveKey}

src/TreeSelect.tsx

@@ -161,6 +161,7 @@ export interface TreeSelectProps<
   listItemHeight?: number;
   listItemScrollOffset?: number;
   onDropdownVisibleChange?: (open: boolean) => void;
+  treeTitleRender?: (node: ValueType) => React.ReactNode;
 
   // >>> Tree
   treeLine?: boolean;
@@ -237,6 +238,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     showTreeIcon,
     switcherIcon,
     treeMotion,
+    treeTitleRender,
 
     ...restProps
   } = props;
@@ -438,9 +440,16 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     // Back fill with origin label
     const labeledValues = values.map(val => {
       const targetItem = rawLabeledValues.find(item => item.value === val);
+      let label;
+      // Ensure that when labelInValue is true, if label is undefined, it remains undefined.
+      if (labelInValue && targetItem.label !== undefined) {
+        label = targetItem.label;
+      } else if (!labelInValue && treeTitleRender) {
+        label = treeTitleRender(targetItem);
+      }
       return {
         value: val,
-        label: targetItem?.label,
+        label,
       };
     });
 
@@ -671,6 +680,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       fieldNames: mergedFieldNames,
       onSelect: onOptionSelect,
       treeExpandAction,
+      treeTitleRender,
     }),
     [
       virtual,
@@ -682,6 +692,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       mergedFieldNames,
       onOptionSelect,
       treeExpandAction,
+      treeTitleRender,
     ],
   );
 

src/TreeSelectContext.ts

@@ -12,6 +12,7 @@ export interface TreeSelectContextProps {
   fieldNames: InternalFieldName;
   onSelect: OnInternalSelect;
   treeExpandAction?: ExpandAction;
+  treeTitleRender?: (node: any) => React.ReactNode;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.props.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef, react/no-multi-comp, no-console */
-import React from 'react';
 import { mount } from 'enzyme';
 import Tree, { TreeNode } from 'rc-tree';
+import React from 'react';
 import TreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode as SelectNode } from '../src';
 
 // Promisify timeout to let jest catch works
@@ -612,5 +612,25 @@ describe('TreeSelect.props', () => {
         });
       });
     });
+
+    describe('title render', () => {
+      const treeData = [
+        { label: 'Label 0-0', value: 'Value 0-0', key: 'key 0-0' },
+        { label: 'Label 0-1', value: 'Value 0-1', key: 'key 0-1' },
+        { label: 'Label 1-0', value: 'Value 1-0', key: 'key 1-0' },
+      ];
+      it('basic', () => {
+        const wrapper = mount(
+          <div>
+            <TreeSelect
+              defaultValue={'Value 0-0'}
+              treeTitleRender={node => node.value}
+              treeData={treeData}
+            />
+          </div>,
+        );
+        expect(wrapper.getSelection(0).text()).toBe('Value 0-0');
+      });
+    });
   });
 });