@qsxy/element-plus-react 1.0.0-next.1

package/dist/Cascader/useCascader.js

@@ -0,0 +1,614 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Cascader/useCascader.ts
+var useCascader_exports = {};
+__export(useCascader_exports, {
+  useCascader: () => useCascader
+});
+module.exports = __toCommonJS(useCascader_exports);
+var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
+var import_find = __toESM(require("lodash/find"));
+var import_isEqual = __toESM(require("lodash/isEqual"));
+var import_last = __toESM(require("lodash/last"));
+var import_react = require("react");
+var import_Util = require("../Util");
+var import_Utils = require("./Utils");
+var useCascader = (initialData, props, value) => {
+  const { props: menuProps, treeMenuProps, showAllLevels, separator, expandedKeys = [] } = props;
+  const { childrenKey = "children", valueKey = "value", labelKey = "label", leafKey = "leaf", lazy } = menuProps;
+  const [allLevel, setAllLevel] = (0, import_react.useState)(0);
+  const [treeData, setTreeData] = (0, import_react.useState)({});
+  const [dataTypes, setDataTypes] = (0, import_react.useState)([]);
+  const _dataTypes = (0, import_react.useRef)([]);
+  const [optionData, setOptionData] = (0, import_react.useState)({});
+  const _optionData = (0, import_react.useRef)({});
+  const selectedValue = (0, import_react.useRef)([]);
+  const selectedLabel = (0, import_react.useRef)([]);
+  const selectedNode = (0, import_react.useRef)([]);
+  const checkedNodes = (0, import_react.useRef)([]);
+  const expandKeys = (0, import_react.useRef)({});
+  const init = (0, import_react.useCallback)(
+    (nodes = [], level, pid = "0") => {
+      nodes.forEach((item) => {
+        const __id = (0, import_Util.randomCode)(11);
+        if (Object.prototype.hasOwnProperty.call(item, childrenKey)) {
+          init(item[childrenKey], level + 1, __id);
+        }
+        if (_optionData.current[`level${level}`] === void 0) {
+          _optionData.current[`level${level}`] = [];
+        }
+        Object.assign(item, {
+          __level: level,
+          __id,
+          __pId: pid,
+          __leaf: item[leafKey] ?? !Object.prototype.hasOwnProperty.call(item, childrenKey) ?? false,
+          __checked: false,
+          __indeterminate: false
+        });
+        _optionData.current[`level${level}`].push(item);
+      });
+      return _optionData.current;
+    },
+    [childrenKey, leafKey]
+  );
+  const setSelectedValue = (0, import_react.useCallback)((level, val) => {
+    selectedValue.current = selectedValue.current.map((item, l) => {
+      if (l < level) {
+        return item;
+      } else if (level === l) {
+        return val;
+      } else {
+        return null;
+      }
+    });
+  }, []);
+  const setSelectedLabel = (0, import_react.useCallback)((level, val) => {
+    selectedLabel.current = selectedLabel.current.map((item, l) => {
+      if (l < level) {
+        return item;
+      } else if (level === l) {
+        return val;
+      } else {
+        return null;
+      }
+    });
+  }, []);
+  const setSelectedNode = (0, import_react.useCallback)(
+    (level, node) => {
+      selectedNode.current = selectedNode.current.map((item, l) => {
+        if (l < level) {
+          return item;
+        } else if (level === l) {
+          return node;
+        } else {
+          return null;
+        }
+      });
+      setSelectedValue(level, node[valueKey]);
+      setSelectedLabel(level, node[labelKey]);
+    },
+    [labelKey, setSelectedLabel, setSelectedValue, valueKey]
+  );
+  const getSelectedValue = (0, import_react.useCallback)(() => {
+    const res = selectedValue.current.filter((item) => (0, import_Util.isNotEmpty)(item));
+    return (0, import_cloneDeep.default)(res);
+  }, []);
+  const getValueOfLevel = (0, import_react.useCallback)((level) => {
+    if ((0, import_Util.isNotEmpty)(level)) {
+      return selectedValue.current[level];
+    }
+  }, []);
+  const getSelectedLabel = (0, import_react.useCallback)(
+    (labelFormatter) => {
+      const res = selectedLabel.current.filter((item) => (0, import_Util.isNotEmpty)(item));
+      if (showAllLevels) {
+        return labelFormatter ? labelFormatter(selectedNode.current.filter((item) => (0, import_Util.isNotEmpty)(item))) : res.join(separator);
+      } else {
+        return labelFormatter ? labelFormatter(selectedNode.current.slice(res.length - 1)) : (0, import_last.default)(res);
+      }
+    },
+    [separator, showAllLevels]
+  );
+  const loopCheckedNodes = (0, import_react.useCallback)((level, node, checked) => {
+    var _a, _b;
+    _optionData.current = {
+      ..._optionData.current,
+      [`level${level}`]: (((_a = _optionData.current) == null ? void 0 : _a[`level${level}`]) ?? []).map((item) => {
+        var _a2;
+        if (item.__id === node.__id) {
+          if (((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) > 0) {
+            return {
+              ...item,
+              __checked: checked,
+              __indeterminate: false,
+              // 子节点状态同步
+              children: item.children.map((child) => ({ ...child, __checked: checked, __indeterminate: false }))
+            };
+          }
+          return { ...item, __checked: checked, __indeterminate: false };
+        }
+        return item;
+      })
+    };
+    if (((_b = node == null ? void 0 : node.children) == null ? void 0 : _b.length) > 0) {
+      node.children.forEach((child) => {
+        loopCheckedNodes(level + 1, child, checked);
+      });
+    }
+  }, []);
+  const getParent = (0, import_react.useCallback)(
+    (level, node) => {
+      var _a;
+      const options = (_a = (0, import_Util.isNotEmpty)(optionData) ? optionData : _optionData.current) == null ? void 0 : _a[`level${level - 1}`];
+      if (options) {
+        const _parent = options.find((item) => item.__id === node.__pId);
+        return _parent;
+      }
+      return null;
+    },
+    [optionData]
+  );
+  const loopGetParent = (0, import_react.useCallback)(
+    (level, node, result = []) => {
+      const _parent = getParent(level, node);
+      if (_parent) {
+        result.push(_parent);
+        loopGetParent(level - 1, _parent, result);
+      }
+      return result;
+    },
+    [getParent]
+  );
+  const loopParentStatus = (0, import_react.useCallback)(
+    (level, node, checked, indeterminate) => {
+      var _a;
+      const val = selectedValue.current[level - 1];
+      let parentChecked = checked;
+      let parentInterminate = indeterminate;
+      if (val) {
+        const parent = getParent(level, node);
+        if (parent) {
+          _optionData.current = {
+            ..._optionData.current,
+            [`level${level - 1}`]: (((_a = _optionData.current) == null ? void 0 : _a[`level${level - 1}`]) ?? []).map((item) => {
+              if (item.__id === parent.__id) {
+                const _children = item.children.map((child) => {
+                  if (child.__id === node.__id) {
+                    return { ...child, __checked: checked, __indeterminate: indeterminate };
+                  }
+                  return child;
+                });
+                const checkCount = _children.filter((child) => child.__checked).length;
+                const indeterminateCount = _children.filter((child) => child.__indeterminate).length;
+                parentChecked = checkCount === _children.length;
+                parentInterminate = indeterminateCount > 0 || checkCount > 0 && checkCount < _children.length;
+                return {
+                  ...item,
+                  __checked: parentChecked,
+                  __indeterminate: parentInterminate,
+                  children: _children
+                };
+              }
+              return item;
+            })
+          };
+          loopParentStatus(level - 1, parent, parentChecked, parentInterminate);
+        }
+      }
+    },
+    [getParent]
+  );
+  const loopGetCheckedNodes = (0, import_react.useCallback)((level, nodes, path, result) => {
+    nodes == null ? void 0 : nodes.forEach((item) => {
+      if (item.__checked && (!Object.prototype.hasOwnProperty.call(item, "children") || item.children.length === 0)) {
+        result.push([...path, item]);
+      } else if (item.__checked || item.__indeterminate) {
+        loopGetCheckedNodes(
+          level + 1,
+          item.children.map((child) => {
+            var _a, _b;
+            return (_b = (_a = _optionData.current) == null ? void 0 : _a[`level${level + 1}`]) == null ? void 0 : _b.find((node) => node.__id === child.__id);
+          }) ?? [],
+          [...path, item],
+          result
+        );
+      }
+    });
+    return result;
+  }, []);
+  const getCheckedNodes = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    const result = [];
+    (_b = (_a = _optionData.current) == null ? void 0 : _a["level0"]) == null ? void 0 : _b.forEach((item) => {
+      if (item.__checked && (!Object.prototype.hasOwnProperty.call(item, "children") || item.children.length === 0)) {
+        result.push([item]);
+      } else if (item.__checked || item.__indeterminate) {
+        loopGetCheckedNodes(1, item.children.map((child) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = _optionData.current) == null ? void 0 : _a2["level1"]) == null ? void 0 : _b2.find((node) => node.__id === child.__id);
+        }) ?? [], [item], result);
+      }
+    });
+    return result;
+  }, [loopGetCheckedNodes]);
+  const setCheckedNode = (0, import_react.useCallback)(
+    (level, node, checked) => {
+      if ((0, import_Util.isEmpty)(_optionData.current)) {
+        _optionData.current = optionData;
+      }
+      loopCheckedNodes(level, node, checked);
+      loopParentStatus(level, node, checked, false);
+      checkedNodes.current = getCheckedNodes();
+      setOptionData(_optionData.current);
+    },
+    [getCheckedNodes, loopCheckedNodes, loopParentStatus, optionData]
+  );
+  const getCheckedValue = (0, import_react.useCallback)(() => {
+    return checkedNodes.current.map((nodes) => nodes.map((item) => item[valueKey]));
+  }, [valueKey]);
+  const getCheckedLabel = (0, import_react.useCallback)(() => {
+    return checkedNodes.current.map((nodes) => nodes.map((item) => item[labelKey]));
+  }, [labelKey]);
+  const clearSelected = (0, import_react.useCallback)(() => {
+    selectedValue.current = new Array(allLevel + 1).fill(null);
+    selectedLabel.current = new Array(allLevel + 1).fill(null);
+    selectedNode.current = new Array(allLevel + 1).fill(null);
+    checkedNodes.current = [];
+    for (let i = 0; i <= allLevel; i++) {
+      _optionData.current = {
+        ..._optionData.current,
+        [`level${i}`]: _optionData.current[`level${i}`].map((item) => ({ ...item, __checked: false, __indeterminate: false }))
+      };
+    }
+    setOptionData(_optionData.current);
+  }, [allLevel]);
+  const getOptions = (0, import_react.useCallback)((level) => {
+    var _a, _b, _c;
+    if (level === 0) {
+      return _optionData.current[`level${level}`];
+    } else {
+      const parent = (_a = selectedNode.current) == null ? void 0 : _a[level - 1];
+      if (parent) {
+        return (_c = (_b = _optionData.current) == null ? void 0 : _b[`level${level}`]) == null ? void 0 : _c.filter((item) => item.__pId === parent.__id);
+      }
+      return null;
+    }
+  }, []);
+  const storeOptionData = (0, import_react.useCallback)(
+    (nodes, level, parent, { isTree, isCover }) => {
+      let data = (0, import_cloneDeep.default)(_optionData.current);
+      let newNodes = [];
+      if (isTree) {
+        const treeNodes = (0, import_Utils.reOrgTree)(nodes, level, menuProps, treeMenuProps, newNodes);
+        setTreeData({
+          ...treeData,
+          [`level${level}`]: treeNodes
+        });
+      } else {
+        newNodes = nodes.map((node) => ({
+          ...node,
+          __level: level,
+          __id: (0, import_Util.randomCode)(11),
+          __pId: (parent == null ? void 0 : parent.__id) ?? "0",
+          __leaf: node[leafKey] ?? false,
+          __checked: false,
+          __indeterminate: false
+        }));
+      }
+      if ((0, import_Util.isEmpty)(data[`level${level}`])) {
+        data = {
+          ...data,
+          [`level${level}`]: newNodes
+        };
+      } else {
+        data[`level${level}`] = isCover ? newNodes : data[`level${level}`].concat(newNodes);
+      }
+      if (level > 0 && parent) {
+        const p = (0, import_find.default)(data[`level${level - 1}`], { __id: parent.__id });
+        if (p) {
+          if ((0, import_Util.isEmpty)(p == null ? void 0 : p[childrenKey])) {
+            p[childrenKey] = newNodes;
+            if (newNodes.length === 0) {
+              p.__leaf = true;
+            }
+          } else {
+            p[childrenKey] = isCover ? newNodes : p[childrenKey].concat(newNodes);
+          }
+        }
+      }
+      setOptionData(data);
+      _optionData.current = data;
+      if (level > allLevel) {
+        setAllLevel(level);
+        for (let i = 0; i < level - allLevel; i++) {
+          selectedValue.current.push(null);
+          selectedLabel.current.push(null);
+          selectedNode.current.push(null);
+          setDataTypes(_dataTypes.current = [..._dataTypes.current, isTree ? true : false]);
+        }
+      } else {
+        selectedValue.current[level] = null;
+        selectedLabel.current[level] = null;
+        selectedNode.current[level] = null;
+        const _types = (0, import_cloneDeep.default)(_dataTypes.current);
+        _types[level] = isTree ? true : false;
+        setDataTypes(_dataTypes.current = _types);
+      }
+      return data[`level${level}`];
+    },
+    [allLevel, childrenKey, leafKey, menuProps, treeData, treeMenuProps]
+  );
+  const setNodeLeaf = (0, import_react.useCallback)(
+    (node, isLeaf) => {
+      const data = (0, import_cloneDeep.default)(optionData);
+      const _node = (0, import_find.default)(data[`level${node["__level"]}`], { __id: node.__id });
+      _node[leafKey] = isLeaf;
+      setOptionData(data);
+      _optionData.current = data;
+    },
+    [leafKey, optionData]
+  );
+  const getDataType = (0, import_react.useCallback)(
+    (level) => {
+      return lazy && dataTypes[level];
+    },
+    [dataTypes, lazy]
+  );
+  const getTreeData = (0, import_react.useCallback)(
+    (level) => {
+      return lazy && treeData[`level${level}`];
+    },
+    [lazy, treeData]
+  );
+  const getExpandedKeys = (0, import_react.useCallback)((level) => {
+    return expandKeys.current[`level${level}`] ?? [];
+  }, []);
+  const setExpandedKeys = (0, import_react.useCallback)((level, keys) => {
+    expandKeys.current[`level${level}`] = keys;
+  }, []);
+  const handleSearch = (0, import_react.useCallback)(
+    (searchText) => {
+      const result = [];
+      if ((0, import_Util.isNotEmpty)(searchText)) {
+        const options = (0, import_cloneDeep.default)(_optionData.current);
+        const regex = new RegExp(searchText, "gi");
+        const loopGetMatchNodes = (level, nodes, path) => {
+          for (let index = 0; index < nodes.length; index++) {
+            const item = nodes[index];
+            if (!Object.prototype.hasOwnProperty.call(item, "children") || item.children.length === 0) {
+              result.push([...path, item]);
+            } else if (item.children.length > 0) {
+              loopGetMatchNodes(level + 1, item.children ?? [], [...path, item]);
+            }
+            nodes.splice(index, 1);
+            options[`level${level}`].splice(
+              options[`level${level}`].findIndex((node) => node.__id === item.__id),
+              1
+            );
+            index--;
+          }
+          return result;
+        };
+        for (let i = 0; i <= allLevel; i++) {
+          for (let index = 0; index < options[`level${i}`].length; index++) {
+            const item = options[`level${i}`][index];
+            const res = null !== (item[labelKey] ?? item[valueKey].toString()).match(regex);
+            if (res) {
+              const current = i > 0 ? loopGetParent(i, item, [item]).reverse() : [item];
+              options[`level${i}`].splice(index, 1);
+              if (!Object.prototype.hasOwnProperty.call(item, "children") || item.children.length === 0) {
+                result.push(current);
+              } else if (item.children.length > 0) {
+                loopGetMatchNodes(i + 1, item.children ?? [], current);
+              }
+              options[`level${i}`].splice(index, 1);
+              options[`level${i}`].splice(
+                options[`level${i}`].findIndex((node) => node.__id === item.__id),
+                1
+              );
+              index--;
+            }
+          }
+        }
+      }
+      return result;
+    },
+    [allLevel, labelKey, loopGetParent, valueKey]
+  );
+  const resetNodes = (0, import_react.useCallback)(() => {
+    _optionData.current = Object.keys(_optionData.current).reduce((prev, item) => ({ ...prev, [item]: [] }), {});
+    setOptionData(_optionData.current);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const data = init((0, import_cloneDeep.default)(initialData), 0);
+    setOptionData(data);
+    const l = Object.keys(data).length;
+    if (l > 0) {
+      setAllLevel(l - 1);
+    }
+    setDataTypes(new Array(l).fill(null));
+  }, [props.options]);
+  const initSelectedValue = (_value) => {
+    var _a, _b;
+    selectedValue.current = new Array(allLevel + 1).fill(null);
+    selectedLabel.current = new Array(allLevel + 1).fill(null);
+    selectedNode.current = new Array(allLevel + 1).fill(null);
+    if (_value.length > 0) {
+      const _level = _value.length - 1;
+      const res = (_b = (_a = _optionData.current) == null ? void 0 : _a[`level${_level}`]) == null ? void 0 : _b.filter((option) => option[valueKey] === _value[_level]);
+      if ((res == null ? void 0 : res.length) > 1) {
+        res.forEach((node) => {
+          const parents = loopGetParent(node.__level, node, [node]);
+          const path = parents.reverse().map((pa) => pa[valueKey]);
+          if ((0, import_isEqual.default)(path, _value)) {
+            selectedNode.current = parents;
+          }
+        });
+      } else if ((res == null ? void 0 : res.length) === 1) {
+        selectedNode.current = loopGetParent(_level, res[0], res).reverse();
+      }
+    }
+    selectedValue.current.splice(0, _value.length, ..._value);
+    selectedLabel.current.splice(0, _value.length, ...selectedNode.current.map((item) => item && item[labelKey] ? item[labelKey] : null));
+  };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (!lazy && allLevel >= 0) {
+      if ((_a = props == null ? void 0 : props.props) == null ? void 0 : _a.multiple) {
+        const _value = value.length > 0 ? value[0] : [];
+        initSelectedValue(_value);
+        if ((0, import_Util.isEmpty)(_optionData.current)) {
+          _optionData.current = (0, import_cloneDeep.default)(optionData);
+        }
+        value.forEach((item) => {
+          const { length } = item;
+          const _level = length - 1;
+          const res = _optionData.current[`level${_level}`].filter((option) => option[valueKey] === item[_level]);
+          if (res.length > 1) {
+            res.forEach((node) => {
+              const parents = loopGetParent(node.__level, node, [node]);
+              const path = parents.reverse().map((pa) => pa[valueKey]);
+              if ((0, import_isEqual.default)(path, item)) {
+                loopCheckedNodes(_level, node, true);
+                loopParentStatus(_level, node, true, false);
+              }
+            });
+          } else if (res.length === 1) {
+            loopCheckedNodes(_level, res[0], true);
+            loopParentStatus(_level, res[0], true, false);
+          }
+        });
+        checkedNodes.current = getCheckedNodes();
+        setOptionData(_optionData.current);
+      } else {
+        initSelectedValue(value);
+      }
+    }
+  }, [value, allLevel, props.options]);
+  (0, import_react.useEffect)(() => {
+    expandedKeys.forEach((keys, level) => {
+      setExpandedKeys(level, keys);
+    });
+  }, [expandedKeys, setExpandedKeys]);
+  return {
+    // eslint-disable-next-line lines-around-comment
+    /** 最高层级 */
+    allLevel,
+    /** 选项数据 */
+    optionData,
+    /**
+     * 懒加载时存储option
+     * @param nodes
+     * @param level 层级
+     */
+    storeOptionData,
+    /**
+     * 获取选中的值
+     * @param level 层级
+     * @returns
+     */
+    getSelectedValue,
+    /**
+     * 获取任意层级选中的值
+     * @param level 层级
+     * @returns
+     */
+    getValueOfLevel,
+    /**
+     * 获取选中的文本
+     * @param level 层级
+     * @returns
+     */
+    getSelectedLabel,
+    /**
+     * 设置任意层级节点的标签
+     * @param level 层级
+     * @param value
+     */
+    setSelectedNode,
+    setSelectedValue,
+    getSelectedNode: () => selectedNode.current,
+    /**
+     * 设置选中节点
+     * @param level 层级
+     * @param node 当前节点
+     * @param checked 是否选中
+     */
+    setCheckedNode,
+    getCheckedNodes: () => checkedNodes.current,
+    getCheckedValue,
+    getCheckedLabel,
+    loopGetParent,
+    /**
+     * 获取任意节点的option数据
+     * @param level 层级
+     * @returns
+     */
+    getOptions,
+    /** 清空值 */
+    clearSelected,
+    /**
+     * 设置节点是否为叶子节点
+     * @param node
+     * @param isLeaf
+     */
+    setNodeLeaf,
+    /**
+     * 获取数据类型
+     * @param level 层级
+     * @returns
+     */
+    getDataType,
+    /**
+     * 获取树数据
+     * @param level 层级
+     * @returns
+     */
+    getTreeData,
+    /**
+     * 获取扩展key
+     * @param level 层级
+     * @returns
+     */
+    getExpandedKeys,
+    /**
+     * 设置扩展key
+     * @param level 层级
+     * @param keys
+     * @returns
+     */
+    setExpandedKeys,
+    handleSearch,
+    resetNodes
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCascader
+});

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CheckboxProps } from './typings';
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;