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.

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

feat: [Tree][TreeSelect] Add filtered and searchWord parameters to re… #1798

Merged
merged 1 commit into from
Sep 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
58 changes: 40 additions & 18 deletions content/navigation/tree/index-en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -1613,26 +1613,48 @@ import { Tree } from '@douyinfe/semi-ui';

You could use `renderFullLabel` for advanced rendering to render the entire option on you own.

```
{
onClick: Function, // Click the callback of the entire row to control the expansion behavior and selection
onContextMenu: Function, // Callback for right-clicking the entire row
onDoubleClick: Function, // Callback for double-clicking the entire row
className: strings, // Class name, including built-in styles such as indent, expand button, filter, disable, check, etc.
onExpand: Function, // Expand callback
data: object, // The original data of the row
level: number, // The level where the line is located, which can be used to customize the indentation value
style: object, // The style required for virtualization, if virtualization is used, the style must be assigned to the DOM element
onCheck: Function, // Multiple selection click callback
expandIcon: ReactNode, // Expand button
The parameter types of renderFullLabel are as follows:

```ts
type RenderFullLabelProps = {
/* The original data of the row */
data: BasicTreeNodeData;
/* The level of the line can be used to customize the indentation value */
level: number;
/* The style required for virtualization, if virtualization is used, the style must be assigned to the DOM element */
style: any;
/* Class name, including built-in styles such as indentation, expand button, filter, disable, select, etc. */
className: string;
/* icon of Expand button */
expandIcon: any;
/* Selected state */
checkStatus: {
checked: Boolean, // Whether it is selected in the multi-select state
halfChecked: Boolean, // Whether half-selected in multi-select state
},
/* Whether to select in the multi-select state */
checked: boolean;
/* Whether to half-select in the multi-select state */
halfChecked: boolean
};
/* Expand status */
expandStatus: {
expanded,
loading,
},
/* Has it been expanded */
expanded: boolean;
/* Is it unfolding */
loading: boolean
};
/* Whether the node meets the search conditions */
filtered: boolean | undefined;
/* Current search box input */
searchWord: string | undefined;
/* Click the callback of the entire row to control the expansion behavior and selection */
onClick: (e: MouseEvent) => void;
/* Multi-select click callback */
onCheck: (e: MouseEvent) => void;
/* Right-click the callback for the entire row */
onContextMenu: (e: MouseEvent) => void;
/* Double-click the entire line of callback */
onDoubleClick: (e: MouseEvent) => void;
/* 展开回调 */
onExpand: (e: MouseEvent) => void;
}
```

Expand Down
45 changes: 45 additions & 0 deletions content/navigation/tree/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -1638,6 +1638,51 @@ import { Tree } from '@douyinfe/semi-ui';

Tree 组件的 api 支持了大部分的渲染需求,但是如果有非常特殊的定制要求的话,可以使用 `renderFullLabel` 来接管整行 option 的渲染效果。

renderFullLabel 参数类型如下:

```ts
type RenderFullLabelProps = {
/* 节点数据 */
data: BasicTreeNodeData;
/* 层级 */
level: number;
/* 虚拟化情况下,该 style 必须给到 DOM 节点上*/
style: any;
/* 样式类名,包括内置样式,如缩进、展开按钮、过滤器、禁用、选择等。 */
className: string;
/* 展开按钮 */
expandIcon: any;
/* 选中状态 */
checkStatus: {
/* 是否选中 */
checked: boolean;
/* 是否半选 */
halfChecked: boolean
};
/* 展开状态 */
expandStatus: {
/* 是否展开 */
expanded: boolean;
/* 是否加载中 */
loading: boolean
};
/* 该节点是否符合筛选条件 */
filtered: boolean | undefined;
/* 当前搜索框输入值 */
searchWord: string | undefined;
/* 点击回调 */
onClick: (e: MouseEvent) => void;
/* 多选点击回调 */
onCheck: (e: MouseEvent) => void;
/* 右键点击回调 */
onContextMenu: (e: MouseEvent) => void;
/* 二次点击回调 */
onDoubleClick: (e: MouseEvent) => void;
/* 展开回调 */
onExpand: (e: MouseEvent) => void;
}
```

<Notice type="primary" title="注意事项">
<div>如果开启了虚拟化,需要将 style (虚拟化相关样式)赋予给渲染的 DOM 节点</div>
</Notice>
Expand Down
6 changes: 5 additions & 1 deletion packages/semi-foundation/tree/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,11 @@ export interface BasicRenderFullLabelProps {
expanded: boolean;
/* Is it unfolding */
loading: boolean
}
};
/* Whether the node meets the search conditions */
filtered: boolean | undefined;
/* Current search box input */
searchWord: string | undefined
}

export interface BasicSearchRenderProps {
Expand Down
2 changes: 2 additions & 0 deletions packages/semi-ui/tree/treeNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,8 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
expanded,
loading,
},
filtered,
searchWord: rest.keyword,
};

const dragProps = {
Expand Down