@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProTree/components/ProTree.js

@@ -0,0 +1,446 @@
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import "antd/es/spin/style";
+import _Spin from "antd/es/spin";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "dataSource", "mode", "code", "useRequest", "allValue", "showCodeName", "checkStrictly", "tags", "placeholder", "labelInValue", "fieldNames", "disabled", "isView", "transformResponse", "optionRender", "onSelect", "loading", "style", "className", "showSearch", "title", "footer", "expandedKeys", "showExpand", "selectKey"];
+import { jsx as _jsx, jsxs as _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 { cloneDeep, isFunction } from 'lodash';
+import { ReactSVG } from 'react-svg';
+import { useProConfig } from '../../ProConfigProvider';
+import { TreeView } from './index';
+import { getFlatTreeData, getChildrenKeys, findTreeNodeByKey, getAllKeys } from '../utils';
+import searchSVG from '../../assets/input-search.svg';
+import '../style/index.less';
+var ProTree = function ProTree(props) {
+  var _props$otherProps, _props$otherProps2, _state$innerExpandKey2, _state$innerExpandKey3;
+  var _useProConfig = useProConfig('ProEnum'),
+    _useProConfig$dics = _useProConfig.dics,
+    dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
+  var value = props.value,
+    onChange = props.onChange,
+    dataSource = props.dataSource,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'tree' : _props$mode,
+    enumCode = props.code,
+    useRequest = props.useRequest,
+    allValue = props.allValue,
+    _props$showCodeName = props.showCodeName,
+    showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    _props$checkStrictly = props.checkStrictly,
+    checkStrictly = _props$checkStrictly === void 0 ? false : _props$checkStrictly,
+    tags = props.tags,
+    placeholder = props.placeholder,
+    _props$labelInValue = props.labelInValue,
+    labelInValue = _props$labelInValue === void 0 ? false : _props$labelInValue,
+    _props$fieldNames = props.fieldNames,
+    fieldNames = _props$fieldNames === void 0 ? {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    } : _props$fieldNames,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? props.disabled || (props === null || props === void 0 ? void 0 : (_props$otherProps = props.otherProps) === null || _props$otherProps === void 0 ? void 0 : _props$otherProps.isView) || false : _props$disabled,
+    _props$isView = props.isView,
+    isView = _props$isView === void 0 ? (props === null || props === void 0 ? void 0 : (_props$otherProps2 = props.otherProps) === null || _props$otherProps2 === void 0 ? void 0 : _props$otherProps2.isView) || false : _props$isView,
+    transformResponse = props.transformResponse,
+    optionRender = props.optionRender,
+    onSelect = props.onSelect,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    style = props.style,
+    className = props.className,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
+    title = props.title,
+    footer = props.footer,
+    expandedKeys = props.expandedKeys,
+    _props$showExpand = props.showExpand,
+    showExpand = _props$showExpand === void 0 ? false : _props$showExpand,
+    selectKey = props.selectKey,
+    other = _objectWithoutProperties(props, _excluded);
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
+  var _useSetState = useSetState({
+      open: false,
+      checkedValues: [],
+      treeData: [],
+      treeViewData: [],
+      originalTreeData: [],
+      flatTreeData: [],
+      searchStr: '',
+      checkAll: false,
+      allKeys: [],
+      clickShowLoading: false,
+      innerExpandKeys: []
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
+    manual: true,
+    onSuccess: function onSuccess(res) {
+      if (transformResponse && typeof transformResponse === 'function') {
+        var responseData = transformResponse(res);
+        setState({
+          treeData: responseData,
+          originalTreeData: responseData,
+          flatTreeData: getFlatTreeData(responseData, fieldNames),
+          allKeys: getAllKeys(responseData, fieldNames)
+        });
+      } else {
+        var _res$status = res.status,
+          status = _res$status === void 0 ? 200 : _res$status,
+          msg = res.message,
+          data = res.data;
+        if (status !== 200) {
+          _message.error(msg);
+          return;
+        }
+        setState({
+          treeData: data,
+          originalTreeData: data,
+          flatTreeData: getFlatTreeData(data, fieldNames),
+          allKeys: getAllKeys(data, fieldNames)
+        });
+      }
+    },
+    debounceWait: 300
+  }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
+  useDeepCompareEffect(function () {
+    if (dataSource && dataSource.length) {
+      setState({
+        treeData: dataSource,
+        originalTreeData: cloneDeep(dataSource),
+        flatTreeData: getFlatTreeData(dataSource, fieldNames),
+        allKeys: getAllKeys(dataSource, fieldNames)
+      });
+    } else if (enumCode) {
+      var dictEnum = dics[enumCode] || [];
+      // transform dictEnum
+      if (transformResponse && isFunction(transformResponse)) {
+        dictEnum = transformResponse(dictEnum);
+      }
+      // check dictEnum isArray
+      if (!dictEnum || !Array.isArray(dictEnum)) {
+        console.error('请返回有效的数组');
+        dictEnum = [];
+      }
+      setState({
+        treeData: dictEnum,
+        originalTreeData: cloneDeep(dictEnum),
+        flatTreeData: getFlatTreeData(dictEnum, fieldNames),
+        allKeys: getAllKeys(dictEnum, fieldNames)
+      });
+    }
+  }, [dataSource, enumCode]);
+  useDeepCompareEffect(function () {
+    if (enumCode) {
+      return undefined;
+    }
+    if (dataSource) {
+      return undefined;
+    }
+    var _ref = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
+      defaultParams = _ref.defaultParams,
+      manual = _ref.manual;
+    if (manual) {
+      return;
+    }
+    // 执行用户配置的枚举服务，拉取枚举数据进行更新
+    fetchFunction.run(defaultParams);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
+  useEffect(function () {
+    if (value) {
+      var checkedValues = [];
+      var allKeys = state.allKeys;
+      if (!(other === null || other === void 0 ? void 0 : other.checkable)) {
+        // 单选
+        var innerVal = value;
+        if (labelInValue) {
+          checkedValues = innerVal[fieldNameValue];
+        } else {
+          // 单选值场景为string走到这里
+          checkedValues = innerVal;
+        }
+        setState({
+          checkedValues: checkedValues
+        });
+      } else {
+        // 复选
+        if (allValue && typeof value === 'string') {
+          // 如果value等于allValue那么全选中，否则选中value得值
+          if (value === allValue) {
+            checkedValues = allKeys;
+          } else {
+            checkedValues = [value];
+          }
+        } else {
+          var _innerVal = value;
+          // 开启 labelInValue [{ label:xx, value: ""}] 形式、需要取出来 value
+          if (labelInValue) {
+            var isObjectArray = _innerVal && _innerVal.every(function (element) {
+              return _typeof(element) === 'object' && element !== null;
+            });
+            if (!isObjectArray) {
+              console.error('Please enter an array object');
+              checkedValues = [];
+            }
+            checkedValues = _innerVal && _innerVal.map(function (item) {
+              return item[fieldNameValue];
+            });
+          } else {
+            // 单选值场景为string走到这里
+            checkedValues = _innerVal;
+          }
+        }
+        // treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+        setState({
+          checkedValues: checkedValues,
+          checkAll: checkedValues.length === allKeys.length
+          // treeViewData,
+        });
+      }
+    }
+  }, [value, state.allKeys]);
+  /**
+   * 复选事件处理函数，全选事件处理函数
+   */
+  var handleFinish = function handleFinish(allValue, checkAll, checkedValues) {
+    if (disabled || isView) {
+      return null;
+    }
+    // 全选的时候返回 allValue 标记即可
+    setState({
+      checkedValues: checkedValues
+    });
+    if (allValue !== undefined && checkAll) {
+      onChange && onChange(allValue);
+    } else {
+      var values = checkedValues;
+      if (labelInValue) {
+        values = state.flatTreeData.filter(function (item) {
+          return values.includes(item[fieldNameValue]);
+        });
+      }
+      onChange && onChange(values);
+    }
+  };
+  var onCheck = function onCheck(checkedKeys, info) {
+    if (disabled || isView) {
+      return null;
+    }
+    var checkedValues = _toConsumableArray(state.checkedValues);
+    var originalTreeData = state.originalTreeData;
+    // 此时应该取消掉自身并包含它所有的子集
+    if (!info.checked && !checkStrictly) {
+      // 1. 取消自身
+      // 2. 把所有的子节点也要取消
+      var childrenkeys = [];
+      getChildrenKeys(info.node, childrenkeys, fieldNames, 'treeCheck');
+      checkedValues = checkedValues.filter(function (key) {
+        return !childrenkeys.includes(key);
+      });
+      // 3. 取消父节点
+      var parentNodes = findTreeNodeByKey(originalTreeData, info.node.key, fieldNames);
+      var parentKeys = parentNodes.reduce(function (prev, curr) {
+        return prev.concat(curr[fieldNameValue]);
+      }, []);
+      checkedValues = checkedValues.filter(function (key) {
+        return !parentKeys.includes(key);
+      });
+    } else {
+      // checkStrictly 模式下取 checkedKeys.checked 或者自身的 key
+      if (checkStrictly) {
+        if (!info.checked) {
+          checkedValues = checkedValues.filter(function (key) {
+            return key !== info.node.key;
+          });
+        }
+        checkedKeys = checkedKeys.checked || [];
+      }
+      checkedKeys.forEach(function (key) {
+        var exist = checkedValues.includes(key);
+        if (info.checked && !exist) {
+          checkedValues.push(key);
+        }
+      });
+    }
+    var checkAllTemp = state.allKeys.length === checkedValues.length;
+    setState({
+      checkAll: checkAllTemp
+    });
+    handleFinish(allValue, checkAllTemp, checkedValues);
+    if (other === null || other === void 0 ? void 0 : other.onCheck) {
+      other.onCheck(checkedKeys, {
+        checked: info.checked,
+        checkedNodes: info === null || info === void 0 ? void 0 : info.node,
+        event: info === null || info === void 0 ? void 0 : info.nativeEvent
+      });
+    }
+  };
+  var onSearch = function onSearch(e) {
+    var str = e.target.value;
+    setState({
+      searchStr: str
+    });
+    if (!str) {
+      setState({
+        innerExpandKeys: []
+      });
+    }
+  };
+  /**
+   * 全选操作,改变自身state并将值通过onchange上传到form
+   */
+  var handleAllCheck = function handleAllCheck(e) {
+    if (disabled || isView) {
+      return null;
+    }
+    var checked = e.target.checked;
+    var checkedValues = [];
+    checkedValues = checked ? state.allKeys : [];
+    setState({
+      checkAll: checked
+    });
+    handleFinish(allValue, checked, checkedValues);
+  };
+  /** 点击了树节点开始loading,改变自身state并将值通过onchange上传到form */
+  var onSelectTreeNode = function onSelectTreeNode(props, info) {
+    if (disabled || isView) {
+      return null;
+    }
+    setState({
+      clickShowLoading: loading
+    });
+    if (onSelect) {
+      var _onSelect;
+      (_onSelect = onSelect(props, info)) === null || _onSelect === void 0 ? void 0 : _onSelect.then(function () {
+        setState({
+          clickShowLoading: false
+        });
+      });
+    }
+    if (!(other === null || other === void 0 ? void 0 : other.checkable)) {
+      // 单选将选中节点值冒泡到form
+      var values = props;
+      if (labelInValue) {
+        values = state.flatTreeData.filter(function (item) {
+          return values === item[fieldNameValue];
+        });
+      }
+      onChange && onChange(values);
+    }
+  };
+  var boxClass = classNames(_defineProperty({
+    'pro-tree': true,
+    'footer-shadow': footer
+  }, className, className));
+  var toggleExpand = function toggleExpand() {
+    var _state$innerExpandKey;
+    // expandedKeys
+    if (state === null || state === void 0 ? void 0 : (_state$innerExpandKey = state.innerExpandKeys) === null || _state$innerExpandKey === void 0 ? void 0 : _state$innerExpandKey.length) {
+      setState({
+        innerExpandKeys: []
+      });
+    } else {
+      var expandKeys = [];
+      state === null || state === void 0 ? void 0 : state.flatTreeData.map(function (item) {
+        var val = item[fieldNameValue];
+        expandKeys.push(val);
+        return item;
+      });
+      setState({
+        innerExpandKeys: expandKeys
+      });
+    }
+  };
+  var antIcon = _jsx(Loading3QuartersOutlined, {
+    style: {
+      fontSize: 24
+    },
+    spin: true
+  });
+  return _jsx("div", {
+    className: boxClass,
+    style: style,
+    children: _jsx(_Spin, {
+      spinning: state.clickShowLoading,
+      indicator: antIcon,
+      children: _jsxs("div", {
+        className: "pro-tree-content",
+        children: [_jsxs("div", {
+          className: "pro-tree-header-box",
+          children: [showSearch && _jsx(_Input, {
+            disabled: disabled,
+            allowClear: true,
+            value: state.searchStr,
+            placeholder: placeholder || '请输入',
+            className: "pro-tree-search",
+            onChange: onSearch,
+            prefix: _jsx(ReactSVG, {
+              className: "viewSvg",
+              src: searchSVG
+            })
+          }), (title || showExpand) && _jsxs("div", {
+            className: "tree-title-box",
+            children: [_jsx("div", {
+              className: "tree-title-text",
+              children: title
+            }), showExpand && _jsxs("div", {
+              className: "expand-button ".concat((state === null || state === void 0 ? void 0 : (_state$innerExpandKey2 = state.innerExpandKeys) === null || _state$innerExpandKey2 === void 0 ? void 0 : _state$innerExpandKey2.length) ? 'expand' : ''),
+              onClick: toggleExpand,
+              children: [_jsx("div", {
+                className: "expand-icon",
+                children: _jsx(CaretDownOutlined, {})
+              }), (state === null || state === void 0 ? void 0 : (_state$innerExpandKey3 = state.innerExpandKeys) === null || _state$innerExpandKey3 === void 0 ? void 0 : _state$innerExpandKey3.length) ? '全部收起' : '全部展开']
+            })]
+          })]
+        }), _jsx("div", {
+          className: "pro-tree-tree-warp",
+          children: _jsx(TreeView, _objectSpread(_objectSpread({}, other), {}, {
+            treeData: state.treeData,
+            originalTreeData: state.originalTreeData,
+            flatTreeData: state.flatTreeData,
+            checkedValues: state.checkedValues,
+            innerExpandKeys: state === null || state === void 0 ? void 0 : state.innerExpandKeys,
+            optionRender: optionRender,
+            searchStr: state.searchStr,
+            showCodeName: showCodeName,
+            disabled: disabled || isView,
+            checkStrictly: checkStrictly,
+            tags: tags,
+            fieldNames: fieldNames,
+            onCheck: onCheck,
+            onSelect: onSelectTreeNode
+          }))
+        }), _jsxs("div", {
+          className: allValue || footer ? 'pro-tree-footer-box' : '',
+          children: [_jsx("div", {
+            className: "check-all-box",
+            children: allValue !== undefined ? _jsx(_Checkbox, {
+              checked: state.checkAll,
+              disabled: disabled,
+              onChange: handleAllCheck,
+              children: "\u5168\u9009"
+            }) : null
+          }), footer]
+        })]
+      })
+    })
+  });
+};
+export default ProTree;

package/es/ProTree/components/SearchTitle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare function SearchTitle(props: {
+    searchStr: string;
+    label: string;
+    showEllipse?: boolean;
+    ellipseWidth?: string;
+}): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SearchTitle>;
+export default _default;

package/es/ProTree/components/SearchTitle.js

@@ -0,0 +1,42 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+function SearchTitle(props) {
+  var label = props.label,
+    _props$searchStr = props.searchStr,
+    searchStr = _props$searchStr === void 0 ? '' : _props$searchStr,
+    showEllipse = props.showEllipse,
+    ellipseWidth = props.ellipseWidth;
+  var strTitle = label;
+  var index = strTitle === null || strTitle === void 0 ? void 0 : strTitle.indexOf(searchStr);
+  var beforeStr = strTitle === null || strTitle === void 0 ? void 0 : strTitle.substring(0, index);
+  var afterStr = strTitle === null || strTitle === void 0 ? void 0 : strTitle.slice(index + searchStr.length);
+  var classEllipse;
+  var style = {};
+  if (showEllipse) {
+    classEllipse = 'ellipse';
+    style.width = ellipseWidth;
+  }
+  var title = index > -1 ? _jsxs("span", {
+    className: classEllipse,
+    style: style,
+    children: [beforeStr, searchStr ? _jsx("span", {
+      className: "pro-tree-modal-search-value",
+      children: searchStr
+    }) : null, afterStr]
+  }) : _jsx("span", {
+    className: classEllipse,
+    style: style,
+    children: strTitle
+  });
+  if (classEllipse) {
+    return _jsx(_Tooltip, {
+      title: title,
+      placement: "rightTop",
+      children: title
+    });
+  }
+  return title;
+}
+export default /*#__PURE__*/memo(SearchTitle);

package/es/ProTree/components/Tree.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { FieldNamesType, ProTreeProps } from '../propsType';
+interface ListProps extends ProTreeProps {
+    disabled?: boolean;
+    checkedValues?: any;
+    selectedKey?: string | number | undefined;
+    innerExpandKeys?: any[];
+    originalTreeData?: any[];
+    flatTreeData?: any[];
+    treeData: any[];
+    searchStr?: string;
+    showCodeName?: boolean;
+    checkStrictly?: boolean;
+    fieldNames: FieldNamesType;
+    tags?: string[];
+    showLine?: boolean;
+    switcherIcon?: any;
+    checkable?: boolean;
+    menu?: (key: any, item?: any) => ReactNode[];
+    onCheck?: (checkedKeys: any, info: any) => void;
+    onSelect?: (checkedKeys: any, info?: any) => any;
+    optionRender?: (item: any, searchStr?: string) => string | ReactNode;
+    handleFilterClose?: (code: string, node?: any) => void;
+    [key: string]: any;
+}
+declare function List(props: ListProps): JSX.Element;
+export default List;