From ea02759ab37d986749f8ca947222535841a01289 Mon Sep 17 00:00:00 2001 From: huangkairan <18757128360@163.com> Date: Wed, 15 Nov 2023 16:33:52 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20titleRender?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/basic.tsx | 16 ++++++++++++---- src/OptionList.tsx | 2 ++ src/TreeSelect.tsx | 7 ++++++- src/TreeSelectContext.ts | 1 + tests/Select.props.spec.js | 23 ++++++++++++++++++++++- 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/examples/basic.tsx b/examples/basic.tsx index bc96622e..449f3aab 100644 --- a/examples/basic.tsx +++ b/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 { + +

title render

+ + open + style={{ width: 300 }} + treeData={gData} + titleRender={node => node.label + 'ok'} + /> ); } diff --git a/src/OptionList.tsx b/src/OptionList.tsx index d96ac542..2ee23f47 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -43,6 +43,7 @@ const OptionList: React.RefForwardingComponent = (_, r onSelect, dropdownMatchSelectWidth, treeExpandAction, + titleRender, } = React.useContext(TreeSelectContext); const { @@ -241,6 +242,7 @@ const OptionList: React.RefForwardingComponent = (_, r checkedKeys={mergedCheckedKeys} selectedKeys={!checkable ? checkedKeys : []} defaultExpandAll={treeDefaultExpandAll} + titleRender={titleRender} {...treeProps} // Proxy event out onActiveChange={setActiveKey} diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index 1fb27b85..a2afcf97 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -161,6 +161,7 @@ export interface TreeSelectProps< listItemHeight?: number; listItemScrollOffset?: number; onDropdownVisibleChange?: (open: boolean) => void; + titleRender?: (node: ValueType) => React.ReactNode; // >>> Tree treeLine?: boolean; @@ -237,6 +238,7 @@ const TreeSelect = React.forwardRef((props, ref) showTreeIcon, switcherIcon, treeMotion, + titleRender, ...restProps } = props; @@ -438,9 +440,10 @@ const TreeSelect = React.forwardRef((props, ref) // Back fill with origin label const labeledValues = values.map(val => { const targetItem = rawLabeledValues.find(item => item.value === val); + const label = titleRender ? titleRender(targetItem) : targetItem?.label; return { value: val, - label: targetItem?.label, + label, }; }); @@ -671,6 +674,7 @@ const TreeSelect = React.forwardRef((props, ref) fieldNames: mergedFieldNames, onSelect: onOptionSelect, treeExpandAction, + titleRender, }), [ virtual, @@ -682,6 +686,7 @@ const TreeSelect = React.forwardRef((props, ref) mergedFieldNames, onOptionSelect, treeExpandAction, + titleRender, ], ); diff --git a/src/TreeSelectContext.ts b/src/TreeSelectContext.ts index bcdb223a..f583ff5d 100644 --- a/src/TreeSelectContext.ts +++ b/src/TreeSelectContext.ts @@ -12,6 +12,7 @@ export interface TreeSelectContextProps { fieldNames: InternalFieldName; onSelect: OnInternalSelect; treeExpandAction?: ExpandAction; + titleRender?: (node: any) => React.ReactNode; } const TreeSelectContext = React.createContext(null as any); diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js index cb5c38dc..445bf185 100644 --- a/tests/Select.props.spec.js +++ b/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,26 @@ 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( +
+ node.value} + treeData={treeData} + /> +
, + ); + // expect(wrapper.find('.rc-tree-select-tree-title').text()).toEqual('Value 0-0'); + expect(wrapper.getSelection(0).text()).toBe('Value 0-0'); + }); + }); }); }); From 3a7d865dd3dc3ac0ad311bd056bf9833dac1f656 Mon Sep 17 00:00:00 2001 From: huangkairan <18757128360@163.com> Date: Wed, 15 Nov 2023 16:35:57 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=90=B3=20chore:=20update=20test=20cas?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/Select.props.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js index 445bf185..10d38e65 100644 --- a/tests/Select.props.spec.js +++ b/tests/Select.props.spec.js @@ -629,7 +629,6 @@ describe('TreeSelect.props', () => { /> , ); - // expect(wrapper.find('.rc-tree-select-tree-title').text()).toEqual('Value 0-0'); expect(wrapper.getSelection(0).text()).toBe('Value 0-0'); }); }); From 26950f52d545f59af5765d9ef30181c9cba4d3be Mon Sep 17 00:00:00 2001 From: huangkairan <18757128360@163.com> Date: Wed, 15 Nov 2023 16:54:29 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=90=B3=20chore:=20update=20prop=20nam?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/basic.tsx | 2 +- src/OptionList.tsx | 4 ++-- src/TreeSelect.tsx | 10 +++++----- src/TreeSelectContext.ts | 2 +- tests/Select.props.spec.js | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/basic.tsx b/examples/basic.tsx index 449f3aab..a0d97993 100644 --- a/examples/basic.tsx +++ b/examples/basic.tsx @@ -387,7 +387,7 @@ class Demo extends React.Component { open style={{ width: 300 }} treeData={gData} - titleRender={node => node.label + 'ok'} + treeTitleRender={node => node.label + 'ok'} /> ); diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 2ee23f47..6c83c982 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -43,7 +43,7 @@ const OptionList: React.RefForwardingComponent = (_, r onSelect, dropdownMatchSelectWidth, treeExpandAction, - titleRender, + treeTitleRender, } = React.useContext(TreeSelectContext); const { @@ -242,7 +242,7 @@ const OptionList: React.RefForwardingComponent = (_, r checkedKeys={mergedCheckedKeys} selectedKeys={!checkable ? checkedKeys : []} defaultExpandAll={treeDefaultExpandAll} - titleRender={titleRender} + titleRender={treeTitleRender} {...treeProps} // Proxy event out onActiveChange={setActiveKey} diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index a2afcf97..5aa841b8 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -161,7 +161,7 @@ export interface TreeSelectProps< listItemHeight?: number; listItemScrollOffset?: number; onDropdownVisibleChange?: (open: boolean) => void; - titleRender?: (node: ValueType) => React.ReactNode; + treeTitleRender?: (node: ValueType) => React.ReactNode; // >>> Tree treeLine?: boolean; @@ -238,7 +238,7 @@ const TreeSelect = React.forwardRef((props, ref) showTreeIcon, switcherIcon, treeMotion, - titleRender, + treeTitleRender, ...restProps } = props; @@ -440,7 +440,7 @@ const TreeSelect = React.forwardRef((props, ref) // Back fill with origin label const labeledValues = values.map(val => { const targetItem = rawLabeledValues.find(item => item.value === val); - const label = titleRender ? titleRender(targetItem) : targetItem?.label; + const label = treeTitleRender ? treeTitleRender(targetItem) : targetItem?.label; return { value: val, label, @@ -674,7 +674,7 @@ const TreeSelect = React.forwardRef((props, ref) fieldNames: mergedFieldNames, onSelect: onOptionSelect, treeExpandAction, - titleRender, + treeTitleRender, }), [ virtual, @@ -686,7 +686,7 @@ const TreeSelect = React.forwardRef((props, ref) mergedFieldNames, onOptionSelect, treeExpandAction, - titleRender, + treeTitleRender, ], ); diff --git a/src/TreeSelectContext.ts b/src/TreeSelectContext.ts index f583ff5d..344f71de 100644 --- a/src/TreeSelectContext.ts +++ b/src/TreeSelectContext.ts @@ -12,7 +12,7 @@ export interface TreeSelectContextProps { fieldNames: InternalFieldName; onSelect: OnInternalSelect; treeExpandAction?: ExpandAction; - titleRender?: (node: any) => React.ReactNode; + treeTitleRender?: (node: any) => React.ReactNode; } const TreeSelectContext = React.createContext(null as any); diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js index 10d38e65..81ef4fe7 100644 --- a/tests/Select.props.spec.js +++ b/tests/Select.props.spec.js @@ -624,7 +624,7 @@ describe('TreeSelect.props', () => {
node.value} + treeTitleRender={node => node.value} treeData={treeData} />
, From b621b9db72736a1be5dfc3157230fc1bf1bdbc80 Mon Sep 17 00:00:00 2001 From: huangkairan <18757128360@163.com> Date: Wed, 29 Nov 2023 14:49:19 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=B3=20chore:=20update=20`label`=20?= =?UTF-8?q?logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TreeSelect.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index 5aa841b8..84877af6 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -440,7 +440,13 @@ const TreeSelect = React.forwardRef((props, ref) // Back fill with origin label const labeledValues = values.map(val => { const targetItem = rawLabeledValues.find(item => item.value === val); - const label = treeTitleRender ? treeTitleRender(targetItem) : targetItem?.label; + 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, From 5e51a89fa0dc5c0f6a5ce7a4ad97b76533b15b3c Mon Sep 17 00:00:00 2001 From: huangkairan <18757128360@163.com> Date: Wed, 29 Nov 2023 14:50:19 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8C=88=20style:=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TreeSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index 84877af6..051cdddf 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -443,7 +443,7 @@ const TreeSelect = React.forwardRef((props, ref) let label; // Ensure that when labelInValue is true, if label is undefined, it remains undefined. if (labelInValue && targetItem.label !== undefined) { - label = targetItem.label + label = targetItem.label; } else if (!labelInValue && treeTitleRender) { label = treeTitleRender(targetItem); }