wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/TreeSelect/index.js

@@ -0,0 +1,369 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import "./style.less";
+
+// ============ TreeSelect 数据节点 ============
+
+// ============ TreeSelect Props ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ TreeSelect Component ============
+export var TreeSelect = function TreeSelect(_ref) {
+  var treeData = _ref.treeData,
+    controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$treeCheckable = _ref.treeCheckable,
+    treeCheckable = _ref$treeCheckable === void 0 ? false : _ref$treeCheckable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    status = _ref.status,
+    _ref$defaultExpandAll = _ref.defaultExpandAll,
+    defaultExpandAll = _ref$defaultExpandAll === void 0 ? false : _ref$defaultExpandAll,
+    _ref$defaultExpandedK = _ref.defaultExpandedKeys,
+    defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
+    filterTreeNode = _ref.filterTreeNode,
+    onChange = _ref.onChange,
+    onDropdownVisibleChange = _ref.onDropdownVisibleChange,
+    onSearch = _ref.onSearch,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var _useState7 = useState(defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys),
+    _useState8 = _slicedToArray(_useState7, 2),
+    expandedKeys = _useState8[0],
+    setExpandedKeys = _useState8[1];
+  var containerRef = useRef(null);
+  var value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // 获取所有节点的 key
+  function getAllKeys(nodes) {
+    var keys = [];
+    var traverse = function traverse(nodes) {
+      nodes.forEach(function (node) {
+        keys.push(node.key);
+        if (node.children) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(nodes);
+    return keys;
+  }
+
+  // 根据 key 查找节点
+  var findNodeByKey = useCallback(function (key) {
+    var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : treeData;
+    var _iterator = _createForOfIteratorHelper(nodes),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _node = _step.value;
+        if (_node.key === key) return _node;
+        if (_node.children) {
+          var found = findNodeByKey(key, _node.children);
+          if (found) return found;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return null;
+  }, [treeData]);
+
+  // 获取显示的标签
+  var getDisplayLabel = useMemo(function () {
+    if (multiple && Array.isArray(value)) {
+      return value.map(function (v) {
+        var _findNodeByKey;
+        return ((_findNodeByKey = findNodeByKey(v)) === null || _findNodeByKey === void 0 ? void 0 : _findNodeByKey.title) || v;
+      });
+    }
+    if (!multiple && typeof value === 'string') {
+      var _findNodeByKey2;
+      return ((_findNodeByKey2 = findNodeByKey(value)) === null || _findNodeByKey2 === void 0 ? void 0 : _findNodeByKey2.title) || '';
+    }
+    return '';
+  }, [value, multiple, findNodeByKey]);
+
+  // 打开/关闭下拉
+  var setOpen = useCallback(function (open) {
+    if (disabled) return;
+    setIsOpen(open);
+    onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(open);
+  }, [disabled, onDropdownVisibleChange]);
+
+  // 点击外部关闭
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setOpen]);
+
+  // 切换展开状态
+  var toggleExpand = useCallback(function (key) {
+    setExpandedKeys(function (prev) {
+      if (prev.includes(key)) {
+        return prev.filter(function (k) {
+          return k !== key;
+        });
+      } else {
+        return [].concat(_toConsumableArray(prev), [key]);
+      }
+    });
+  }, []);
+
+  // 选择节点
+  var handleSelect = useCallback(function (node) {
+    if (node.disabled || node.selectable === false) return;
+    var newValue;
+    var newLabel;
+    var selectedNode;
+    if (multiple) {
+      var currentValue = Array.isArray(value) ? value : [];
+      if (currentValue.includes(node.value)) {
+        newValue = currentValue.filter(function (v) {
+          return v !== node.value;
+        });
+      } else {
+        newValue = [].concat(_toConsumableArray(currentValue), [node.value]);
+      }
+      newLabel = newValue.map(function (v) {
+        var _findNodeByKey3;
+        return ((_findNodeByKey3 = findNodeByKey(v)) === null || _findNodeByKey3 === void 0 ? void 0 : _findNodeByKey3.title) || v;
+      });
+      selectedNode = newValue.map(function (v) {
+        return findNodeByKey(v);
+      }).filter(Boolean);
+    } else {
+      newValue = node.value;
+      newLabel = node.title;
+      selectedNode = node;
+      setOpen(false);
+    }
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    onChange === null || onChange === void 0 || onChange(newValue, newLabel, selectedNode);
+  }, [multiple, value, controlledValue, findNodeByKey, onChange, setOpen]);
+
+  // 清除
+  var handleClear = useCallback(function (e) {
+    e.stopPropagation();
+    var newValue = multiple ? [] : '';
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    onChange === null || onChange === void 0 || onChange(newValue, newValue, multiple ? [] : {});
+  }, [multiple, controlledValue, onChange]);
+
+  // 搜索
+  var handleSearch = useCallback(function (e) {
+    var val = e.target.value;
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 || onSearch(val);
+
+    // 搜索时展开所有匹配节点的父节点
+    if (val) {
+      var matchedKeys = getAllKeys(treeData).filter(function (key) {
+        var node = findNodeByKey(key);
+        if (!node) return false;
+        if (filterTreeNode) {
+          return filterTreeNode(val, node);
+        }
+        return node.title.toLowerCase().includes(val.toLowerCase());
+      });
+
+      // 收集所有匹配节点的父节点
+      var parentsToExpand = [];
+      var collectParents = function collectParents(nodes) {
+        var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+        nodes.forEach(function (node) {
+          var currentPath = [].concat(_toConsumableArray(path), [node.key]);
+          if (matchedKeys.includes(node.key) && path.length > 0) {
+            parentsToExpand.push.apply(parentsToExpand, _toConsumableArray(path));
+          }
+          if (node.children) {
+            collectParents(node.children, currentPath);
+          }
+        });
+      };
+      collectParents(treeData);
+      setExpandedKeys(_toConsumableArray(new Set([].concat(_toConsumableArray(expandedKeys), parentsToExpand))));
+    }
+  }, [treeData, expandedKeys, filterTreeNode, findNodeByKey, onSearch]);
+
+  // 过滤树节点
+  var filterTree = useCallback(function (nodes) {
+    if (!searchValue) return nodes;
+    var filter = function filter(nodes) {
+      return nodes.reduce(function (acc, node) {
+        var matches = filterTreeNode ? filterTreeNode(searchValue, node) : node.title.toLowerCase().includes(searchValue.toLowerCase());
+        if (node.children) {
+          var filteredChildren = filter(node.children);
+          if (filteredChildren.length > 0 || matches) {
+            acc.push(_objectSpread(_objectSpread({}, node), {}, {
+              children: filteredChildren
+            }));
+          }
+        } else if (matches) {
+          acc.push(node);
+        }
+        return acc;
+      }, []);
+    };
+    return filter(nodes);
+  }, [searchValue, filterTreeNode]);
+  var filteredTreeData = useMemo(function () {
+    return filterTree(treeData);
+  }, [treeData, filterTree]);
+
+  // 渲染树节点
+  var renderTreeNode = function renderTreeNode(node) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var hasChildren = node.children && node.children.length > 0;
+    var isExpanded = expandedKeys.includes(node.key);
+    var isSelected = multiple ? Array.isArray(value) && value.includes(node.value) : value === node.value;
+    var isDisabled = node.disabled || node.selectable === false;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "kage-treeselect-node",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-treeselect-node-content ".concat(isSelected ? 'kage-treeselect-node-selected' : '', " ").concat(isDisabled ? 'kage-treeselect-node-disabled' : ''),
+        style: {
+          paddingLeft: "".concat(level * 24 + 8, "px")
+        },
+        children: [hasChildren && /*#__PURE__*/_jsx("span", {
+          className: "kage-treeselect-switcher ".concat(isExpanded ? 'kage-treeselect-switcher-open' : ''),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            toggleExpand(node.key);
+          },
+          children: "\u25B8"
+        }), !hasChildren && /*#__PURE__*/_jsx("span", {
+          className: "kage-treeselect-switcher-noop"
+        }), treeCheckable && /*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          className: "kage-treeselect-checkbox",
+          checked: isSelected,
+          disabled: isDisabled,
+          onChange: function onChange() {
+            return handleSelect(node);
+          }
+        }), /*#__PURE__*/_jsx("span", {
+          className: "kage-treeselect-node-title",
+          onClick: function onClick() {
+            return !treeCheckable && handleSelect(node);
+          },
+          children: node.title
+        })]
+      }), hasChildren && isExpanded && /*#__PURE__*/_jsx("div", {
+        className: "kage-treeselect-node-children",
+        children: node.children.map(function (child) {
+          return renderTreeNode(child, level + 1);
+        })
+      })]
+    }, node.key);
+  };
+  var classNames = ['kage-treeselect', "kage-treeselect-".concat(size), disabled && 'kage-treeselect-disabled', status && "kage-treeselect-status-".concat(status), isOpen && 'kage-treeselect-open', className].filter(Boolean).join(' ');
+  var displayText = useMemo(function () {
+    if (multiple && Array.isArray(getDisplayLabel) && getDisplayLabel.length > 0) {
+      return getDisplayLabel.join(', ');
+    }
+    if (!multiple && getDisplayLabel) {
+      return getDisplayLabel;
+    }
+    return '';
+  }, [multiple, getDisplayLabel]);
+  var showClearIcon = allowClear && !disabled && displayText;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-treeselect-selector",
+      onClick: function onClick() {
+        return setOpen(!isOpen);
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-treeselect-selection ".concat(!displayText ? 'kage-treeselect-placeholder' : ''),
+        children: displayText || placeholder
+      }), showClearIcon && /*#__PURE__*/_jsx("span", {
+        className: "kage-treeselect-clear",
+        onClick: handleClear,
+        children: "\xD7"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "kage-treeselect-arrow ".concat(isOpen ? 'kage-treeselect-arrow-open' : ''),
+        children: "\u25BC"
+      })]
+    }), isOpen && /*#__PURE__*/_jsxs("div", {
+      className: "kage-treeselect-dropdown",
+      children: [showSearch && /*#__PURE__*/_jsx("div", {
+        className: "kage-treeselect-search",
+        children: /*#__PURE__*/_jsx("input", {
+          type: "text",
+          className: "kage-treeselect-search-input",
+          placeholder: "\u641C\u7D22",
+          value: searchValue,
+          onChange: handleSearch,
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-treeselect-tree",
+        children: filteredTreeData.length > 0 ? filteredTreeData.map(function (node) {
+          return renderTreeNode(node);
+        }) : /*#__PURE__*/_jsx("div", {
+          className: "kage-treeselect-empty",
+          children: "\u6682\u65E0\u6570\u636E"
+        })
+      })]
+    })]
+  });
+};
+export default TreeSelect;