@cloudbase/weda-ui 3.18.6 → 3.19.0

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

@@ -74,19 +74,20 @@ const judgeCheck = (treeNode, checkedCustom) => {
  * @param {IInitData} param0
  * @returns
  */
-const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos = '', }) => {
+const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos = '' }) => {
     if (!Array.isArray(data))
         return [];
     return data
         .filter((item) => item === null || item === void 0 ? void 0 : item.value)
-        .map((item, index) => {
+        .map((_item, index) => {
         var _a;
+        const item = { ..._item };
         item.pos = `${pos ? `${pos}-` : ''}${index}`;
         item.root = item.root || { ...deepClone(item), pos: item.pos };
         if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
             item.children = initData({
-                data: item.children,
-                parent: item,
+                data: _item.children,
+                parent: { ...item },
                 showIcon,
                 expendIcon,
                 foldIcon,
@@ -98,7 +99,7 @@ const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos
         item.foldIcon = item.foldIcon || foldIcon;
         item.leafIcon = item.leafIcon || leafIcon;
         item.showIcon = showIcon;
-        item.parent = parent;
+        item.parent = { ...parent };
         return item;
     });
 };
@@ -107,7 +108,7 @@ const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos
  * @param {IGetStateOfChildrenParams} param0
  * @returns
  */
-const getStateOfChildren = ({ treeNode, key, state, }) => {
+const getStateOfChildren = ({ treeNode, key, state }) => {
     var _a, _b, _c;
     const notHas = (_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.map((v) => v[key]).includes(state.notHas);
     const has = (_b = treeNode.children) === null || _b === void 0 ? void 0 : _b.map((v) => v[key]).includes(state.has);
@@ -194,9 +195,7 @@ const initTreeState = ({ data, checkedCustom, expandType, expandCustom, searchKe
             item.expanded = item.searched ? 'expand' : '';
         }
         // 被搜索到的或根据输入判断需要展开的都认为要展开
-        item.isExpand =
-            !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) &&
-                (searchKey ? !!item.searched : !!item.expanded);
+        item.isExpand = !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && (searchKey ? !!item.searched : !!item.expanded);
         if (item.showIcon) {
             if ((_c = item.children) === null || _c === void 0 ? void 0 : _c.length) {
                 item.iconShow = item.isExpand ? item.expendIcon : item.foldIcon;
@@ -212,9 +211,10 @@ const initTreeState = ({ data, checkedCustom, expandType, expandCustom, searchKe
  * 当某节点的选择状态变化时，处理该节点的父和子的选择状态
  * @param treeNode
  */
-const dealCheck = (treeNode) => {
+const dealCheck = (_treeNode, showData) => {
     var _a;
-    let parent = treeNode.parent;
+    const treeNode = getTreeNode(showData, _treeNode);
+    let parent = getTreeNode(showData, treeNode.parent);
     const adjust = (arr, checked) => {
         arr.forEach((item) => {
             var _a;
@@ -231,6 +231,7 @@ const dealCheck = (treeNode) => {
     if ((_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.length) {
         adjust(treeNode.children, treeNode.checked);
     }
+    return treeNode;
 };
 /**
  * 查找满足要求的节点
@@ -286,4 +287,17 @@ const getTreeInfo = (params, checkable) => {
     delete info.selectedPositions;
     return info;
 };
-export { TREE_INFO_GOT, initData, initTreeState, dealCheck, findNode, getTreeInfo, };
+export const getTreeNode = (tree = [], node) => {
+    var _a;
+    for (const item of tree) {
+        if (item.value === (node === null || node === void 0 ? void 0 : node.value))
+            return item;
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            const found = getTreeNode(item.children, node);
+            if (found)
+                return found; // 立即返回已找到的节点
+        }
+    }
+    return null; // 明确返回null表示未找到
+};
+export { TREE_INFO_GOT, initData, initTreeState, dealCheck, findNode, getTreeInfo };

package/dist/web/components/wd-tree/wd-tree.d.ts

@@ -3,4 +3,5 @@ import type { CommonPropsType } from '../../types';
 import type { DataType } from '../../../configs/components/wd-tree';
 export declare const WdTree: React.ForwardRefExoticComponent<WdTreeProps & React.RefAttributes<unknown>>;
 export interface WdTreeProps extends CommonPropsType, DataType {
+    contentSlot_treeNode?: any;
 }

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.6",
+  "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",