@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProTree/components/ProTree.js

@@ -1,26 +1,25 @@
-import _isFunction from "lodash/isFunction";
-import _cloneDeep from "lodash/cloneDeep";
-import { useEffect } from 'react';
-import classNames from 'classnames';
-import { CaretDownOutlined, Loading3QuartersOutlined } from '@ant-design/icons';
-import { useDeepCompareEffect, useSetState, useRequest as useRequestFunc } from 'ahooks';
-import { Checkbox, Input, message, Spin } from 'antd';
-import { ReactSVG } from 'react-svg';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import classNames from "classnames";
+import { CaretDownOutlined, Loading3QuartersOutlined } from "@ant-design/icons";
+import { useDeepCompareEffect, useSetState, useRequest as useRequestFunc } from "ahooks";
+import { Checkbox, Input, message, Spin } from "antd";
+import cloneDeep from "lodash/cloneDeep";
+import isFunction from "lodash/isFunction";
+import { ReactSVG } from "react-svg";
 import { useProConfig } from "../../ProConfigProvider";
 import { TreeView } from "./index";
 import locale from "../../locale";
 import { getFlatTreeData, getChildrenKeys, findTreeNodeByKey, getAllKeys } from "../utils";
 import searchSVG from "../../assets/input-search.svg";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ProTree = props => {
-  const {
-    dics = {}
-  } = useProConfig('ProEnum');
+const ProTree = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const { dics = {} } = useProConfig("ProEnum");
   const {
     value,
     onChange,
     dataSource,
-    mode = 'tree',
+    mode = "tree",
     code: enumCode,
     useRequest,
     allValue,
@@ -30,12 +29,12 @@ const ProTree = props => {
     placeholder,
     labelInValue = false,
     fieldNames = {
-      label: 'label',
-      value: 'value',
-      children: 'children'
+      label: "label",
+      value: "value",
+      children: "children"
     },
-    disabled = props.disabled || props?.otherProps?.isView || false,
-    isView = props?.otherProps?.isView || false,
+    disabled = props.disabled || ((_a = props == null ? void 0 : props.otherProps) == null ? void 0 : _a.isView) || false,
+    isView = ((_b = props == null ? void 0 : props.otherProps) == null ? void 0 : _b.isView) || false,
     transformResponse,
     optionRender,
     onSelect,
@@ -59,11 +58,12 @@ const ProTree = props => {
     treeViewData: [],
     originalTreeData: [],
     flatTreeData: [],
-    searchStr: '',
+    searchStr: "",
     checkAll: false,
     allKeys: [],
     clickShowLoading: false,
-    innerExpandKeys: undefined // 将传入德默认展开德节点传入内部state德innerExpandKeys上面，后续由innerExpandKeys控制展开节点
+    innerExpandKeys: void 0
+    // 将传入德默认展开德节点传入内部state德innerExpandKeys上面，后续由innerExpandKeys控制展开节点
   });
   useEffect(() => {
     if (expandedKeys) {
@@ -72,10 +72,10 @@ const ProTree = props => {
       });
     }
   }, [expandedKeys]);
-  const fetchFunction = useRequestFunc(useRequest?.service, {
+  const fetchFunction = useRequestFunc(useRequest == null ? void 0 : useRequest.service, {
     manual: true,
-    onSuccess: res => {
-      if (transformResponse && typeof transformResponse === 'function') {
+    onSuccess: (res) => {
+      if (transformResponse && typeof transformResponse === "function") {
         const responseData = transformResponse(res);
         const flatTrees = getFlatTreeData(responseData, fieldNames);
         const allKey = getAllKeys(responseData, fieldNames);
@@ -87,11 +87,7 @@ const ProTree = props => {
           // innerExpandKeys: props?.expandedKeys ? props?.expandedKeys : getDefaultExpandKeys(defaultExpandAll, allKey),
         });
       } else {
-        const {
-          status = 200,
-          message: msg,
-          data
-        } = res;
+        const { status = 200, message: msg, data } = res;
         if (status !== 200) {
           message.error(msg);
           return;
@@ -108,35 +104,31 @@ const ProTree = props => {
       }
     },
     debounceWait: 300,
-    ...useRequest?.options
+    ...useRequest == null ? void 0 : useRequest.options
   });
   useDeepCompareEffect(() => {
-    // 显式传入数组（含空数组 []）时都同步到内部 state，
-    // 否则删除最后一个节点后 dataSource 变为 [] 时树数据不会被清空。
     if (Array.isArray(dataSource)) {
       const allKey = getAllKeys(dataSource, fieldNames);
       setState({
         treeData: dataSource,
-        originalTreeData: _cloneDeep(dataSource),
+        originalTreeData: cloneDeep(dataSource),
         flatTreeData: getFlatTreeData(dataSource, fieldNames),
         allKeys: allKey
         // innerExpandKeys: props?.expandedKeys ? props?.expandedKeys : getDefaultExpandKeys(defaultExpandAll, allKey),
       });
     } else if (enumCode) {
       let dictEnum = dics[enumCode] || [];
-      // transform dictEnum
-      if (transformResponse && _isFunction(transformResponse)) {
+      if (transformResponse && isFunction(transformResponse)) {
         dictEnum = transformResponse(dictEnum);
       }
-      // check dictEnum isArray
       if (!dictEnum || !Array.isArray(dictEnum)) {
-        console.error('请返回有效的数组');
+        console.error("请返回有效的数组");
         dictEnum = [];
       }
       const allKey = getAllKeys(dictEnum, fieldNames);
       setState({
         treeData: dictEnum,
-        originalTreeData: _cloneDeep(dictEnum),
+        originalTreeData: cloneDeep(dictEnum),
         flatTreeData: getFlatTreeData(dictEnum, fieldNames),
         allKeys: getAllKeys(dictEnum, fieldNames)
         // innerExpandKeys: props?.expandedKeys ? props?.expandedKeys : getDefaultExpandKeys(defaultExpandAll, allKey),
@@ -145,36 +137,30 @@ const ProTree = props => {
   }, [dataSource, enumCode]);
   useDeepCompareEffect(() => {
     if (enumCode || dataSource) {
-      return undefined;
+      return void 0;
     }
-    const {
-      defaultParams,
-      manual
-    } = useRequest?.options || {};
-    const params = Array.isArray(defaultParams) ? defaultParams?.[0] : defaultParams || {};
+    const { defaultParams, manual } = (useRequest == null ? void 0 : useRequest.options) || {};
+    const params = Array.isArray(defaultParams) ? defaultParams == null ? void 0 : defaultParams[0] : defaultParams || {};
     if (manual) {
       return;
     }
-    // 执行用户配置的枚举服务，拉取枚举数据进行更新
     fetchFunction.run(params);
-  }, [useRequest?.options]);
-  const handleSignalSelect = value => {
+  }, [useRequest == null ? void 0 : useRequest.options]);
+  const handleSignalSelect = (value2) => {
     let checkedValues = [];
-    const innerVal = value;
+    const innerVal = value2;
     if (labelInValue) {
       checkedValues = innerVal[fieldNameValue];
     } else {
-      // 单选值场景为string走到这里
       checkedValues = innerVal;
     }
     setState({
       checkedValues
     });
   };
-  const handleCheckSelect = allKeys => {
+  const handleCheckSelect = (allKeys) => {
     let checkedValues = [];
-    if (allValue && typeof value === 'string') {
-      // 如果value等于allValue那么全选中，否则选中value得值
+    if (allValue && typeof value === "string") {
       if (value === allValue) {
         checkedValues = allKeys;
       } else {
@@ -182,15 +168,13 @@ const ProTree = props => {
       }
     } else {
       const innerVal = value;
-      // 开启 labelInValue [{ label:xx, value: ""}] 形式、需要取出来 value
       if (labelInValue) {
-        const isObjectArray = innerVal && innerVal.every(element => typeof element === 'object' && element !== null);
+        const isObjectArray = innerVal && innerVal.every((element) => typeof element === "object" && element !== null);
         if (!isObjectArray) {
-          console.error('Please enter an array object');
+          console.error("Please enter an array object");
         }
-        checkedValues = innerVal && innerVal.map(item => item[fieldNameValue]);
+        checkedValues = innerVal && innerVal.map((item) => item[fieldNameValue]);
       } else {
-        // 复选，单纯value数组场景
         checkedValues = innerVal;
       }
     }
@@ -201,82 +185,63 @@ const ProTree = props => {
   };
   useEffect(() => {
     if (value) {
-      const {
-        allKeys
-      } = state;
-      if (!other?.checkable) {
-        // 单选
+      const { allKeys } = state;
+      if (!(other == null ? void 0 : other.checkable)) {
         handleSignalSelect(value);
       } else {
-        // 复选
         handleCheckSelect(allKeys);
       }
-    } else if (!other?.checkable) {
-      // 单选--场景-->如果表单的value没有值，那么配置的selectedKey就起作用了，选中树节点
+    } else if (!(other == null ? void 0 : other.checkable)) {
       setState({
-        checkedValues: props?.selectedKey
+        checkedValues: props == null ? void 0 : props.selectedKey
       });
     }
   }, [value, state.allKeys]);
-
-  /**
-   * 复选事件处理函数，全选事件处理函数
-   */
-  const handleFinish = (allValue, checkAll, checkedValues, checkedNode) => {
+  const handleFinish = (allValue2, checkAll, checkedValues, checkedNode) => {
     if (disabled || isView) {
       return null;
     }
-    // 全选的时候返回 allValue 标记即可
-    setState({
-      checkedValues
-    });
-    if (allValue !== undefined && checkAll) {
-      onChange && onChange(allValue);
+    setState({ checkedValues });
+    if (allValue2 !== void 0 && checkAll) {
+      onChange && onChange(allValue2);
     } else {
       let values = checkedValues;
-      let options = state.flatTreeData.filter(item => values.includes(item[fieldNameValue]));
+      let options = state.flatTreeData.filter((item) => values.includes(item[fieldNameValue]));
       if (checkedNode) {
         options = checkedNode;
-        delete options[fieldNames?.children || 'children'];
+        delete options[(fieldNames == null ? void 0 : fieldNames.children) || "children"];
       }
       if (labelInValue) {
-        values = state.flatTreeData.filter(item => values.includes(item[fieldNameValue]));
+        values = state.flatTreeData.filter((item) => values.includes(item[fieldNameValue]));
       }
       onChange && onChange(values, options);
     }
   };
-
-  // 该方法只有复选框，在勾中checkbox后才会走到这个方法
   const onCheck = (checkedKeys, info) => {
+    var _a2;
     if (disabled || isView) {
       return null;
     }
     let checkedValues = [...state.checkedValues];
-    const {
-      originalTreeData
-    } = state;
-
-    // 此时应该取消掉自身并包含它所有的子集
+    const { originalTreeData } = state;
     if (!info.checked && !checkStrictly) {
-      // 1. 取消自身
-      // 2. 把所有的子节点也要取消
       const childrenkeys = [];
-      getChildrenKeys(info.node, childrenkeys, fieldNames, 'treeCheck');
-      checkedValues = checkedValues.filter(key => !childrenkeys.includes(key));
-
-      // 3. 取消父节点
+      getChildrenKeys(info.node, childrenkeys, fieldNames, "treeCheck");
+      checkedValues = checkedValues.filter((key) => !childrenkeys.includes(key));
       const parentNodes = findTreeNodeByKey(originalTreeData, info.node.key, fieldNames);
-      const parentKeys = parentNodes.reduce((prev, curr) => prev.concat(curr[fieldNameValue]), []);
-      checkedValues = checkedValues.filter(key => !parentKeys.includes(key));
+      const parentKeys = parentNodes.reduce(
+        (prev, curr) => prev.concat(curr[fieldNameValue]),
+        []
+      );
+      checkedValues = checkedValues.filter((key) => !parentKeys.includes(key));
     } else {
-      // checkStrictly 模式下取 checkedKeys.checked 或者自身的 key
       if (checkStrictly) {
         if (!info.checked) {
-          checkedValues = checkedValues.filter(key => key !== info.node.key);
+          checkedValues = checkedValues.filter((key) => key !== info.node.key);
         }
         checkedKeys = checkedKeys.checked || [];
       }
-      checkedKeys.forEach(key => {
+      checkedKeys.forEach((key) => {
         const exist = checkedValues.includes(key);
         if (info.checked && !exist) {
           checkedValues.push(key);
@@ -287,18 +252,23 @@ const ProTree = props => {
     setState({
       checkAll: checkAllTemp
     });
-    const checkNodeValue = info?.node?.[fieldNameValue];
-    const options = state.flatTreeData.filter(item => checkNodeValue === item[fieldNameValue]);
-    handleFinish(allValue, checkAllTemp, checkedValues, Array.isArray(options) ? options?.[0] : options);
-    if (other?.onCheck) {
+    const checkNodeValue = (_a2 = info == null ? void 0 : info.node) == null ? void 0 : _a2[fieldNameValue];
+    const options = state.flatTreeData.filter((item) => checkNodeValue === item[fieldNameValue]);
+    handleFinish(
+      allValue,
+      checkAllTemp,
+      checkedValues,
+      Array.isArray(options) ? options == null ? void 0 : options[0] : options
+    );
+    if (other == null ? void 0 : other.onCheck) {
       other.onCheck(checkedKeys, {
         checked: info.checked,
-        checkedNodes: info?.node,
-        event: info?.nativeEvent
+        checkedNodes: info == null ? void 0 : info.node,
+        event: info == null ? void 0 : info.nativeEvent
       });
     }
   };
-  const onSearch = e => {
+  const onSearch = (e) => {
     const str = e.target.value;
     setState({
       searchStr: str
@@ -309,17 +279,11 @@ const ProTree = props => {
       });
     }
   };
-
-  /**
-   * 全选操作,改变自身state并将值通过onchange上传到form
-   */
-  const handleAllCheck = e => {
+  const handleAllCheck = (e) => {
     if (disabled || isView) {
       return null;
     }
-    const {
-      checked
-    } = e.target;
+    const { checked } = e.target;
     let checkedValues = [];
     checkedValues = checked ? state.allKeys : [];
     setState({
@@ -327,48 +291,42 @@ const ProTree = props => {
     });
     handleFinish(allValue, checked, checkedValues, null);
   };
-
-  /** 点击了树节点开始loading,改变自身state并将值通过onchange上传到form */
-  const onSelectTreeNode = async (props, info) => {
+  const onSelectTreeNode = async (props2, info) => {
     if (disabled || isView) {
       return null;
     }
-    setState({
-      clickShowLoading: loading
-    });
+    setState({ clickShowLoading: loading });
     if (onSelect) {
-      await onSelect(props, info);
-      setState({
-        clickShowLoading: false
-      });
+      await onSelect(props2, info);
+      setState({ clickShowLoading: false });
     }
-    let values = props;
-    const options = state.flatTreeData.filter(item => values === item[fieldNameValue]);
+    let values = props2;
+    const options = state.flatTreeData.filter((item) => values === item[fieldNameValue]);
     if (labelInValue) {
-      values = state.flatTreeData.filter(item => values === item[fieldNameValue]);
+      values = state.flatTreeData.filter((item) => values === item[fieldNameValue]);
     }
-    const option = options?.[0] ?? {};
-    delete option[fieldNames?.children || 'children'];
-    if (!other?.checkable) {
-      // 单选将选中节点值冒泡到form, 给onFieldChange添加options
+    const option = (options == null ? void 0 : options[0]) ?? {};
+    delete option[(fieldNames == null ? void 0 : fieldNames.children) || "children"];
+    if (!(other == null ? void 0 : other.checkable)) {
       onChange && onChange(values, option);
     } else {
       onChange && onChange(value, option);
     }
   };
   const boxClass = classNames({
-    'pro-tree': true,
-    'footer-shadow': footer,
+    "pro-tree": true,
+    "footer-shadow": footer,
     [className]: className
   });
   const toggleExpand = () => {
-    if (state?.innerExpandKeys?.length) {
+    var _a2;
+    if ((_a2 = state == null ? void 0 : state.innerExpandKeys) == null ? void 0 : _a2.length) {
       setState({
         innerExpandKeys: []
       });
     } else {
       const expandKeys = [];
-      state?.flatTreeData.map(item => {
+      state == null ? void 0 : state.flatTreeData.map((item) => {
         const val = item[fieldNameValue];
         expandKeys.push(val);
         return item;
@@ -378,81 +336,64 @@ const ProTree = props => {
       });
     }
   };
-  const antIcon = /*#__PURE__*/_jsx(Loading3QuartersOutlined, {
-    style: {
-      fontSize: 24
-    },
-    spin: true
-  });
-  return /*#__PURE__*/_jsx("div", {
-    className: boxClass,
-    style: style,
-    children: /*#__PURE__*/_jsx(Spin, {
-      spinning: state.clickShowLoading,
-      indicator: antIcon,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: "pro-tree-content",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "pro-tree-header-box",
-          children: [showSearch && /*#__PURE__*/_jsx(Input, {
-            disabled: disabled,
-            allowClear: true,
-            value: state.searchStr,
-            placeholder: placeholder || locale?.ProTree?.inputPlaceholder,
-            className: "pro-tree-search",
-            onChange: onSearch,
-            prefix: /*#__PURE__*/_jsx(ReactSVG, {
-              className: "viewSvg",
-              src: searchSVG
-            })
-          }), (title || showExpand) && /*#__PURE__*/_jsxs("div", {
-            className: "tree-title-box",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: "tree-title-text",
-              children: title
-            }), showExpand && /*#__PURE__*/_jsxs("div", {
-              className: `expand-button ${state?.innerExpandKeys?.length ? 'expand' : ''}`,
-              onClick: toggleExpand,
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "expand-icon",
-                children: /*#__PURE__*/_jsx(CaretDownOutlined, {})
-              }), state?.innerExpandKeys?.length ? locale?.ProTree?.unExpand : locale?.ProTree?.expand]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx("div", {
-          className: "pro-tree-tree-warp",
-          children: /*#__PURE__*/_jsx(TreeView, {
-            ...other,
-            treeData: state.treeData,
-            originalTreeData: state.originalTreeData,
-            flatTreeData: state.flatTreeData,
-            checkedValues: state.checkedValues,
-            defaultExpandAll: defaultExpandAll,
-            innerExpandKeys: state?.innerExpandKeys,
-            optionRender: optionRender,
-            searchStr: state.searchStr,
-            showCodeName: showCodeName,
-            disabled: disabled || isView,
-            checkStrictly: checkStrictly,
-            tags: tags,
-            fieldNames: fieldNames,
-            onCheck: onCheck,
-            onSelect: onSelectTreeNode
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: allValue || footer ? 'pro-tree-footer-box' : '',
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "check-all-box",
-            children: allValue !== undefined ? /*#__PURE__*/_jsx(Checkbox, {
-              checked: state.checkAll,
-              disabled: disabled,
-              onChange: handleAllCheck,
-              children: locale?.ProTree?.all
-            }) : null
-          }), footer]
-        })]
-      })
-    })
-  });
+  const antIcon = /* @__PURE__ */ jsx(Loading3QuartersOutlined, { style: { fontSize: 24 }, spin: true });
+  return /* @__PURE__ */ jsx("div", { className: boxClass, style, children: /* @__PURE__ */ jsx(Spin, { spinning: state.clickShowLoading, indicator: antIcon, children: /* @__PURE__ */ jsxs("div", { className: "pro-tree-content", children: [
+    /* @__PURE__ */ jsxs("div", { className: "pro-tree-header-box", children: [
+      showSearch && /* @__PURE__ */ jsx(
+        Input,
+        {
+          disabled,
+          allowClear: true,
+          value: state.searchStr,
+          placeholder: placeholder || ((_d = (_c = locale) == null ? void 0 : _c.ProTree) == null ? void 0 : _d.inputPlaceholder),
+          className: "pro-tree-search",
+          onChange: onSearch,
+          prefix: /* @__PURE__ */ jsx(ReactSVG, { className: "viewSvg", src: searchSVG })
+        }
+      ),
+      (title || showExpand) && /* @__PURE__ */ jsxs("div", { className: "tree-title-box", children: [
+        /* @__PURE__ */ jsx("div", { className: "tree-title-text", children: title }),
+        showExpand && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `expand-button ${((_e = state == null ? void 0 : state.innerExpandKeys) == null ? void 0 : _e.length) ? "expand" : ""}`,
+            onClick: toggleExpand,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "expand-icon", children: /* @__PURE__ */ jsx(CaretDownOutlined, {}) }),
+              ((_f = state == null ? void 0 : state.innerExpandKeys) == null ? void 0 : _f.length) ? (_h = (_g = locale) == null ? void 0 : _g.ProTree) == null ? void 0 : _h.unExpand : (_j = (_i = locale) == null ? void 0 : _i.ProTree) == null ? void 0 : _j.expand
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pro-tree-tree-warp", children: /* @__PURE__ */ jsx(
+      TreeView,
+      {
+        ...other,
+        treeData: state.treeData,
+        originalTreeData: state.originalTreeData,
+        flatTreeData: state.flatTreeData,
+        checkedValues: state.checkedValues,
+        defaultExpandAll,
+        innerExpandKeys: state == null ? void 0 : state.innerExpandKeys,
+        optionRender,
+        searchStr: state.searchStr,
+        showCodeName,
+        disabled: disabled || isView,
+        checkStrictly,
+        tags,
+        fieldNames,
+        onCheck,
+        onSelect: onSelectTreeNode
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: allValue || footer ? "pro-tree-footer-box" : "", children: [
+      /* @__PURE__ */ jsx("div", { className: "check-all-box", children: allValue !== void 0 ? /* @__PURE__ */ jsx(Checkbox, { checked: state.checkAll, disabled, onChange: handleAllCheck, children: (_l = (_k = locale) == null ? void 0 : _k.ProTree) == null ? void 0 : _l.all }) : null }),
+      footer
+    ] })
+  ] }) }) });
+};
+var ProTree_default = ProTree;
+export {
+  ProTree_default as default
 };
-export default ProTree;