@aloudata/aloudata-design 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/Tree/Tree.js

@@ -1,4 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -42,6 +45,8 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showTabLeader = props.showTabLeader,
     _props$handlerRender = props.handlerRender,
     handlerRender = _props$handlerRender === void 0 ? noop : _props$handlerRender,
+    filterTreeNode = props.filterTreeNode,
+    treeData = props.treeData,
     _props$motion = props.motion,
     motion = _props$motion === void 0 ? _objectSpread(_objectSpread({}, collapseMotion), {}, {
       motionAppear: false
@@ -105,13 +110,71 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   };
+  var newTreeData = React.useMemo(function () {
+    if (!filterTreeNode) return treeData;
+    var processNode = function processNode(node) {
+      // 初始化一个标志来表示是否需要为当前节点及其所有子节点添加className
+      var shouldAddDisabled = true;
+      // 检查当前节点的title是否包含目标字符串，包含则不需要添加className
+      if (filterTreeNode(node)) {
+        shouldAddDisabled = false;
+      }
+      if (node.children) {
+        // 遍历当前节点的子节点
+        var _iterator = _createForOfIteratorHelper(node.children),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var child = _step.value;
+            // 递归调用processNode函数来处理子节点，判断子节点是否需要添加className
+            var childShouldAddDisabled = processNode(child);
+            shouldAddDisabled = shouldAddDisabled && childShouldAddDisabled;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+
+      // 如果shouldAddDisabled为true，就为当前节点添加className
+      if (shouldAddDisabled) {
+        node.className = classNames(node.className, 'ald-tree-node-disabled');
+      }
+      return shouldAddDisabled;
+    };
+    if (!treeData) return treeData;
+    var _iterator2 = _createForOfIteratorHelper(treeData),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var rootNode = _step2.value;
+        processNode(rootNode);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return treeData;
+  }, [filterTreeNode, treeData]);
+  var noChildren = React.useMemo(function () {
+    if (newTreeData !== null && newTreeData !== void 0 && newTreeData.length) {
+      return newTreeData.every(function (node) {
+        var _node$children;
+        return !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length);
+      });
+    }
+    return true;
+  }, [newTreeData]);
   return /*#__PURE__*/React.createElement(RcTree, _extends({
     itemHeight: 20,
     ref: ref,
     virtual: virtual
   }, newProps, {
     prefixCls: prefixCls,
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _classNames), className),
+    treeData: newTreeData,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _defineProperty(_classNames, "".concat(prefixCls, "-no-children"), noChildren), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")
@@ -122,7 +185,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     switcherIcon: function switcherIcon(nodeProps) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
         size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
-        color: '#a2a2a2'
+        color: '#9CA3AF'
       }, "\u5C55\u5F00"), showLine, nodeProps, size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE));
     },
     draggable: draggableConfig

package/dist/Tree/demo/basic/index.js

@@ -33,6 +33,9 @@ export default (function () {
           disabled: true
         }]
       }]
+    }, {
+      title: 'Parent 2',
+      key: '1-1'
     }]
   }));
 });

package/dist/Tree/demo/filter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Tree/demo/filter/index.js

@@ -0,0 +1,63 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { App, Input, Tree } from "../../..";
+import React from 'react';
+export default (function () {
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filterKey = _React$useState2[0],
+    setFilterKey = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    expandedKeys = _React$useState4[0],
+    setExpandedKeys = _React$useState4[1];
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Input, {
+    onChange: function onChange(v) {
+      setFilterKey(v.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    showIcon: true,
+    icon: 'icon',
+    filterTreeNode: function filterTreeNode(node) {
+      var title = node.title;
+      if (typeof title === 'string') {
+        return title.includes(filterKey);
+      }
+      return false;
+    },
+    expandedKeys: expandedKeys,
+    onExpand: function onExpand(keys) {
+      setExpandedKeys(keys);
+    },
+    treeData: [{
+      title: 'Parent 1',
+      key: '0-0',
+      children: [{
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          title: 'leaf',
+          key: '0-0-0-0',
+          isLeaf: true
+        }, {
+          title: 'leaf',
+          key: '0-0-0-1',
+          isLeaf: true
+        }]
+      }, {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          title: 'ssss',
+          key: '0-0-1-0',
+          disabled: true
+        }]
+      }]
+    }]
+  }));
+});

package/dist/Tree/style/index.less

@@ -31,6 +31,12 @@
       opacity: 1;
     }
   }
+
+  &.ald-tree-no-children {
+    .ald-tree-switcher {
+      display: none;
+    }
+  }
 }
 
 .ald-tree-treenode {
@@ -40,6 +46,10 @@
   font-weight: 400;
   color: var(--alias-colors-text-default, #1f2937);
 
+  &.ald-tree-node-disabled {
+    display: none;
+  }
+
   .ald-tree-draggable-icon {
     display: inline-flex;
     align-items: center;

package/dist/Tree/style/mixin.less

@@ -85,8 +85,12 @@
     &-disabled {
       // >>> Title
       .@{custom-tree-prefix-cls}-node-content-wrapper {
-        color: @disabled-color;
-        cursor: not-allowed;
+        color: var(--alias-colors-text-default, #1f2937);
+        cursor: default;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
 
         &:hover {
           background: transparent;
@@ -99,8 +103,8 @@
     }
 
     &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
-      color: @tree-node-highlight-color;
       font-weight: 500;
+      color: var(--alias-colors-text-danger);
     }
 
     &-draggable {