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);
}