@cloudbase/weda-ui 3.18.8 → 3.19.0

package/dist/web/components/wd-tree/wd-tree.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useEffect, useState, useCallback, } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect, useState, useCallback, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
 import WdCheckbox from '../wd-checkbox';
 import WdIcon from '../wd-icon';
-import { TREE_INFO_GOT, initData, initTreeState, dealCheck, getTreeInfo, } from './utils';
+import { TREE_INFO_GOT, initData, initTreeState, dealCheck, getTreeInfo } from './utils';
 import { deepClone } from '../../utils/tool';
+import isObjectEqual from '../../utils/isObjectEqual';
+const TreeNodeSlot = React.memo(function TreeNodeSlot({ Slot, item, itemIndex }) {
+    if (typeof Slot === 'function') {
+        return _jsx(Slot, { item: item, itemIndex: itemIndex });
+    }
+    return Slot !== null && Slot !== void 0 ? Slot : null;
+});
 export const WdTree = forwardRef(function WdTree(props, ref) {
     var _a;
-    const { className = '', style, id, events, data, checkable, checkedCustom, expandType, expandCustom, showIcon, foldIcon, expendIcon, leafIcon, line, } = props;
+    const { className = '', style, id, events, data, checkable, checkedCustom, expandType, expandCustom, showIcon, foldIcon, expendIcon, leafIcon, line, enableSearchText = true, isSupportSlot, } = props;
     const platform = usePlatform();
     // 样式
     const { classPrefix } = useConfig();
@@ -28,6 +35,8 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
     const [selected, setSelected] = useState(((_a = props.checkedCustom) === null || _a === void 0 ? void 0 : _a.length) ? props.checkedCustom[0] : '');
     // 搜索内容
     const [searchKey, setSearchKey] = useState('');
+    const [treeNodeList, setTreeNodeList] = useState([]);
+    const showDataRef = useRef(null);
     /**
      * 组件搜索节点方法
      */
@@ -47,6 +56,7 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
             methods: {
                 searchNode,
             },
+            treeNodeList,
             treeInfo,
             data,
             checkable,
@@ -62,6 +72,7 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
             expandedNodes: treeInfo === null || treeInfo === void 0 ? void 0 : treeInfo.expandedNodes,
         };
     }, [
+        treeNodeList,
         checkable,
         checkedCustom,
         data,
@@ -124,7 +135,7 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
             check: () => {
                 treeNode.checked = state ? 'checked' : '';
                 // 处理节点的父/子节点选中状态
-                dealCheck(treeNode);
+                dealCheck(treeNode, showData);
             },
             select: () => {
                 state = selectedKey !== treeNode.value;
@@ -160,41 +171,55 @@ export const WdTree = forwardRef(function WdTree(props, ref) {
         }, 0);
         event !== 'select' && setShowData([...showData]);
     };
-    const list = [];
-    const renderNode = (d, count) => {
-        if (!Array.isArray(d))
-            return [];
-        // @ts-ignore const 会报错，应该是let
-        count = count || 0;
-        const STEP = 1;
-        d.filter((item) => item === null || item === void 0 ? void 0 : item.value).forEach((item, index) => {
-            var _a;
-            const subTree = ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? item.children : undefined;
-            const spaceDom = [];
-            const disableStyle = item.disabled
-                ? { cursor: 'not-allowed', color: 'rgba(0,0,0,.26)' }
-                : {};
-            for (let i = 0; i < count; i++) {
-                spaceDom.push(_jsx("span", { className: `${classPrefix}-tree__space` }, Math.random()));
-            }
-            list.push(_jsxs("div", { 
-                // 叶子节点 加 `${classPrefix}-tree-node--leaf` 为了连线的时候，对横线特殊处理
-                // 选中态，加 is-selected
-                className: `${nodeClassName} ${subTree ? '' : `${classPrefix}-tree-node--leaf`} ${selected === item.value && !props.checkable ? 'is-selected' : ''}`, "data-testid": nodeClassName, children: [spaceDom, _jsx("div", { className: `${classPrefix}-tree__switcher`, onClick: () => change(item, 'expand', !item.isExpand), children: subTree && (
-                        // 展开/收起的图标
-                        _jsx(WdIcon, { className: `${classPrefix}-tree__switcher-icon`, name: item.isExpand ? 'td:caret-down-small' : 'td:caret-right-small', size: "sm" })) }), _jsxs("div", { className: `${classPrefix}-tree__label`, onClick: () => change(item, 'select'), children: [props.checkable && (_jsx(WdCheckbox, { index: index + count, option: { value: item.value }, isAll: item.checked === 'childChecked', size: "md", disabled: item.disabled, getChangeHandler: () => {
-                                    if (item.disabled)
-                                        return;
-                                    change(item, 'check', item.checked !== 'checked');
-                                }, checkedItemValue: { [item.value]: item.checked === 'checked' }, ...{} })), item.iconShow && (_jsx(WdIcon, { "data-testid": "wd-tree-icon-test", className: `${classPrefix}-tree__label-icon `, name: item.iconShow, src: item.iconShow, type: item.iconShow.startsWith('http') ||
-                                    item.iconShow.startsWith('data:')
-                                    ? 'custom'
-                                    : 'inner', size: "sm" })), _jsx("label", { className: `${classPrefix}-tree__label-text`, htmlFor: "", style: disableStyle, children: searchKey
-                                    ? item.label.split(searchKey).map((v, i) => (_jsxs("span", { children: [i !== 0 && (_jsx("span", { className: `${classPrefix}-tree__label-text-search`, children: searchKey })), v] }, i)))
-                                    : item.label })] })] }, item.value));
-            subTree && item.isExpand && renderNode(subTree, count + STEP);
-        });
-        return list;
+    const renderTreeNode = ({ item, count, index, itemIndex }) => {
+        var _a;
+        const subTree = ((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? true : false;
+        const spaceDom = [];
+        const disableStyle = (item === null || item === void 0 ? void 0 : item.disabled) ? { cursor: 'not-allowed', color: 'rgba(0,0,0,.26)' } : {};
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { children, parent, ...rest } = item;
+        const nodeItem = { ...rest };
+        for (let i = 0; i < count; i++) {
+            spaceDom.push(_jsx("span", { className: `${classPrefix}-tree__space` }, Math.random()));
+        }
+        return (_jsxs("div", { 
+            // 叶子节点 加 `${classPrefix}-tree-node--leaf` 为了连线的时候，对横线特殊处理
+            // 选中态，加 is-selected
+            className: `${nodeClassName} ${subTree ? '' : `${classPrefix}-tree-node--leaf`} ${selected === item.value && !props.checkable ? 'is-selected' : ''}`, "data-testid": nodeClassName, children: [spaceDom, _jsx("div", { className: `${classPrefix}-tree__switcher`, onClick: () => change(item, 'expand', !item.isExpand), children: subTree && (
+                    // 展开/收起的图标
+                    _jsx(WdIcon, { className: `${classPrefix}-tree__switcher-icon`, name: item.isExpand ? 'td:caret-down-small' : 'td:caret-right-small', size: "sm" })) }), _jsxs("div", { className: `${classPrefix}-tree__label`, onClick: () => change(item, 'select'), children: [props.checkable && (_jsx(WdCheckbox, { index: index + count, option: { value: item.value }, isAll: item.checked === 'childChecked', size: "md", disabled: item.disabled, getChangeHandler: () => {
+                                if (item.disabled)
+                                    return;
+                                change(item, 'check', item.checked !== 'checked');
+                            }, checkedItemValue: { [item.value]: item.checked === 'checked' }, ...{} })), item.iconShow && (_jsx(WdIcon, { "data-testid": "wd-tree-icon-test", className: `${classPrefix}-tree__label-icon `, name: item.iconShow, src: item.iconShow, type: item.iconShow.startsWith('http') || item.iconShow.startsWith('data:') ? 'custom' : 'inner', size: "sm" })), enableSearchText && (_jsx("label", { className: `${classPrefix}-tree__label-text`, htmlFor: "", style: disableStyle, children: searchKey
+                                ? item.label.split(searchKey).map((v, i) => (_jsxs("span", { children: [i !== 0 && _jsx("span", { className: `${classPrefix}-tree__label-text-search`, children: searchKey }), v] }, i)))
+                                : item.label })), isSupportSlot && nodeItem && (_jsx("label", { className: `${classPrefix}-tree__label-text`, htmlFor: "", style: disableStyle, children: _jsx(TreeNodeSlot, { item: nodeItem, Slot: props.contentSlot_treeNode, itemIndex: itemIndex }) }))] })] }, item.value));
     };
-    return (_jsx("div", { id: id, style: style, className: classNames(classes, className), "data-testid": "wd-tree-test", children: renderNode(showData, 0) }));
+    useEffect(() => {
+        if (!isObjectEqual(showDataRef.current, showData)) {
+            const list = [];
+            const renderNode = (d, count) => {
+                if (!Array.isArray(d))
+                    return [];
+                // @ts-ignore const 会报错，应该是let
+                count = count || 0;
+                const STEP = 1;
+                d.filter((item) => item === null || item === void 0 ? void 0 : item.value).forEach((item, index) => {
+                    var _a;
+                    const hasChildren = ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
+                    const subTree = hasChildren ? [...item.children] : undefined;
+                    list.push({ item, count, index });
+                    subTree && item.isExpand && renderNode(subTree, count + STEP);
+                });
+                return list;
+            };
+            let _treeNode = renderNode(showData, 0);
+            _treeNode = (_treeNode === null || _treeNode === void 0 ? void 0 : _treeNode.length) > 0 ? _treeNode === null || _treeNode === void 0 ? void 0 : _treeNode.map((i, index) => ({ ...i, itemIndex: index })) : [];
+            setTreeNodeList(_treeNode);
+            showDataRef.current = { ...showData };
+        }
+    }, [showData]);
+    return (_jsx("div", { id: id, style: style, className: classNames(classes, className), "data-testid": "wd-tree-test", children: treeNodeList === null || treeNodeList === void 0 ? void 0 : treeNodeList.map((i, index) => {
+            return _jsxs(React.Fragment, { children: [" ", renderTreeNode(i), " "] }, index);
+        }) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "3.18.8",
+  "version": "3.19.0",
   "main": "./dist/index.js",
   "module": "./dist/index",
   "miniprogram": "mpdist",
@@ -85,7 +85,7 @@
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
     "@antv/g6": "^4.8.5",
-    "@cloudbase/weda-client": "^1.1.32",
+    "@cloudbase/weda-client": "^1.1.33",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -147,9 +147,9 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
-    "@cloudbase/cals": "^1.2.14",
-    "@cloudbase/lowcode-cli": "^0.22.2",
-    "@cloudbase/weda-cloud-sdk": "^1.0.102",
+    "@cloudbase/cals": "^1.2.15",
+    "@cloudbase/lowcode-cli": "^0.22.3",
+    "@cloudbase/weda-cloud-sdk": "^1.0.104",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@craco/craco": "^7.1.0",