Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support titleRender #447

Merged
merged 5 commits into from
Dec 4, 2023
Merged

feat: support titleRender #447

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea02759
✨ feat: support titleRender
huangkairan Nov 15, 2023
3a7d865
🐳 chore: update test case
huangkairan Nov 15, 2023
26950f5
🐳 chore: update prop name
huangkairan Nov 15, 2023
b621b9d
🐳 chore: update `label` logic
huangkairan Nov 29, 2023
5e51a89
🌈 style: format
huangkairan Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions examples/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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>
);
}
Expand Down
2 changes: 2 additions & 0 deletions src/OptionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
onSelect,
dropdownMatchSelectWidth,
treeExpandAction,
treeTitleRender,
} = React.useContext(TreeSelectContext);

const {
Expand Down Expand Up @@ -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}
Expand Down
7 changes: 6 additions & 1 deletion src/TreeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ export interface TreeSelectProps<
listItemHeight?: number;
listItemScrollOffset?: number;
onDropdownVisibleChange?: (open: boolean) => void;
treeTitleRender?: (node: ValueType) => React.ReactNode;

// >>> Tree
treeLine?: boolean;
Expand Down Expand Up @@ -237,6 +238,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
showTreeIcon,
switcherIcon,
treeMotion,
treeTitleRender,

...restProps
} = props;
Expand Down Expand Up @@ -438,9 +440,10 @@ 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);
const label = treeTitleRender ? treeTitleRender(targetItem) : targetItem?.label;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个看起来会把 labelInValue 给误改掉，有 labelInValue 的时候，没有 label 才能改这个。

Copy link
Contributor Author

@huangkairan huangkairan Nov 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个看起来会把 labelInValue 给误改掉，有 labelInValue 的时候，没有 label 才能改这个。

是我理解的这样吗：

let label = targetItem?.label;
// Ensure that when labelInValue is true, if label is undefined, it remains undefined.
if (treeTitleRender && (!labelInValue || (labelInValue && !label))) {
    label = treeTitleRender(targetItem);
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对，不过这个可以优化一下。labelInValue && .label ~= undefined 就用自己的 label，反之再过一遍 titleRender

return {
value: val,
label: targetItem?.label,
label,
};
});

Expand Down Expand Up @@ -671,6 +674,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
fieldNames: mergedFieldNames,
onSelect: onOptionSelect,
treeExpandAction,
treeTitleRender,
}),
[
virtual,
Expand All @@ -682,6 +686,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
mergedFieldNames,
onOptionSelect,
treeExpandAction,
treeTitleRender,
],
);

Expand Down
1 change: 1 addition & 0 deletions src/TreeSelectContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
22 changes: 21 additions & 1 deletion tests/Select.props.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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');
});
});
});
});
Loading