diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index 7d3493f6..794604dd 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -94,6 +94,7 @@ export interface TreeSelectProps void; treeTitleRender?: (node: OptionType) => React.ReactNode; + labelRender?: (props: LabeledValueType) => React.ReactNode; // >>> Tree treeLine?: boolean; @@ -161,6 +162,7 @@ const TreeSelect = React.forwardRef((props, ref) listHeight = 200, listItemHeight = 20, listItemScrollOffset = 0, + labelRender, onPopupVisibleChange, popupMatchSelectWidth = true, @@ -395,7 +397,7 @@ const TreeSelect = React.forwardRef((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((props, ref) convert2LabelValues, mergedShowCheckedStrategy, keyEntities, + labelRender, ]); const [cachedDisplayValues] = useCache(displayValues); diff --git a/tests/Select.spec.tsx b/tests/Select.spec.tsx index 2d8ad430..d3ff2cd6 100644 --- a/tests/Select.spec.tsx +++ b/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( + , + ); + + 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( + , + ); + + expect(onLabelRender).toHaveBeenCalled(); + expect(container.querySelector('.rc-tree-select-selector').textContent).toEqual('fakeLabel-a'); + }); });