Browse Source

feat: [Tree][TreeSelect] Add filtered and searchWord parameters to renderFullLabel callback (#1798)

YyumeiZhang 2 years ago
parent
commit
4100db5355

+ 40 - 18
content/navigation/tree/index-en-US.md

@@ -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;
 }
 ```
 

+ 45 - 0
content/navigation/tree/index.md

@@ -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>

+ 5 - 1
packages/semi-foundation/tree/foundation.ts

@@ -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 {

+ 2 - 0
packages/semi-ui/tree/treeNode.tsx

@@ -366,6 +366,8 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                 expanded,
                 loading,
             },
+            filtered,
+            searchWord: rest.keyword,
         };
 
         const dragProps = {