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

package/es/ProTreeModal/index.js

@@ -0,0 +1,333 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 "antd/es/input/style";
+import _Input from "antd/es/input";
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useEffect } from 'react';
+import { useDeepCompareEffect, useSetState, useRequest as useRequestFunc } from 'ahooks';
+import { ProDrawerForm, useProConfig } from 'zat-design-pro-component';
+import { cloneDeep, isFunction } from 'lodash';
+import { Trigger, ListView, TreeView } from './components';
+import { getFlatTreeData, filterCheckedNodes, getChildrenKeys, findTreeNodeByKey } from './utils';
+import './style/index.less';
+var Search = _Input.Search;
+var ProTreeModal = function ProTreeModal(props) {
+  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,
+    trigger = props.trigger,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'list' : _props$mode,
+    enumCode = props.code,
+    _props$title = props.title,
+    title = _props$title === void 0 ? '请选择' : _props$title,
+    useRequest = props.useRequest,
+    _props$showCodeName = props.showCodeName,
+    showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? !!props.isView || !!props.disabled : _props$disabled,
+    transformResponse = props.transformResponse;
+  var _useSetState = useSetState({
+      open: false,
+      checkedValues: [],
+      treeData: [],
+      treeViewData: [],
+      originalTreeData: [],
+      flatTreeData: [],
+      searchStr: ''
+    }),
+    _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)
+        });
+      } 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)
+        });
+      }
+    },
+    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)
+      });
+    } 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)
+      });
+    }
+  }, [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 () {
+    setState({
+      checkedValues: value || []
+    });
+  }, [value]);
+  var handleClick = function handleClick() {
+    setState({
+      open: true
+    });
+  };
+  var handleClearValue = function handleClearValue() {};
+  /**
+   * close Drawer and onChange(values)
+   */
+  var handleFinish = function handleFinish() {
+    onChange && onChange(state.checkedValues);
+    setState({
+      open: false
+    });
+  };
+  /**
+   * Drawer close
+   */
+  var handleClose = function handleClose() {
+    setState({
+      open: false
+    });
+  };
+  /**
+   * checkbox/tree selected change values
+   * @param values
+   */
+  var handleOnChange = function handleOnChange(e, code) {
+    var checkedValues = _toConsumableArray(state.checkedValues);
+    var checked = e.target.checked;
+    if (!checked) {
+      checkedValues = checkedValues.filter(function (value) {
+        return value !== code;
+      });
+    } else {
+      checkedValues.push(code);
+    }
+    setState({
+      checkedValues: checkedValues
+    });
+  };
+  var onCheck = function onCheck(checkedKeys, info) {
+    var checkedValues = _toConsumableArray(state.checkedValues);
+    // 此时应该取消掉自身并包含它所有的子集
+    if (!info.checked) {
+      checkedValues = checkedValues.filter(function (key) {
+        return key !== info.node.key && !info.halfCheckedKeys.includes(key);
+      });
+      // 把所有的子节点也要取消
+      var childrenkeys = [];
+      getChildrenKeys(info.node, childrenkeys);
+      checkedValues = checkedValues.filter(function (key) {
+        return !childrenkeys.includes(key);
+      });
+    } else {
+      checkedKeys.forEach(function (key) {
+        var exist = checkedValues.includes(key);
+        if (info.checked && !exist) {
+          checkedValues.push(key);
+        }
+      });
+    }
+    // 根据选中的筛选出 viewTreeData
+    var originalTreeData = state.originalTreeData;
+    var treeViewData = filterCheckedNodes(originalTreeData, checkedValues);
+    setState({
+      checkedValues: checkedValues,
+      treeViewData: treeViewData
+    });
+  };
+  /**
+   * filter checkbox by fileNameValue
+   * @param fileNameValue
+   */
+  var handleFilterClose = function handleFilterClose(fileNameValue) {
+    setState({
+      checkedValues: state.checkedValues.filter(function (value) {
+        return value !== fileNameValue;
+      })
+    });
+  };
+  /**
+   * tree close
+   * @param fileNamekey
+   * @param node
+   */
+  var treeFilterClose = function treeFilterClose(fileNamekey, node) {
+    var checkedValues = _toConsumableArray(state.checkedValues);
+    var originalTreeData = state.originalTreeData;
+    // 1. 取消自身
+    // checkedValues = checkedValues.filter((key) => key !== fileNamekey);
+    // 2. 把所有的子节点也要取消
+    var childrenkeys = [];
+    getChildrenKeys(node, childrenkeys);
+    checkedValues = checkedValues.filter(function (key) {
+      return !childrenkeys.includes(key);
+    });
+    // 3. 取消父节点
+    var parentNodes = findTreeNodeByKey(originalTreeData, fileNamekey);
+    var parentKeys = parentNodes.reduce(function (prev, curr) {
+      return prev.concat(curr.key);
+    }, []);
+    checkedValues = checkedValues.filter(function (key) {
+      return !parentKeys.includes(key);
+    });
+    // 根据选中的筛选出 viewTreeData
+    var treeViewData = filterCheckedNodes(originalTreeData, checkedValues);
+    setState({
+      checkedValues: checkedValues,
+      treeViewData: treeViewData
+    });
+  };
+  /**
+   * clear all checked
+   */
+  var handleClearAll = function handleClearAll() {
+    setState({
+      checkedValues: [],
+      treeViewData: []
+    });
+  };
+  var onSearch = function onSearch(str) {
+    if (mode === 'list') {
+      var data = state.originalTreeData.filter(function (item) {
+        return item.title.includes(str);
+      });
+      setState({
+        searchStr: str,
+        treeData: data
+      });
+    } else {
+      setState({
+        searchStr: str
+      });
+    }
+  };
+  /**
+   * Trigger the container opened by Drawer
+   * default example and you can customize trigger={<Button>打开</Button>}
+   * @returns
+   */
+  var renderTrigger = function renderTrigger() {
+    if (trigger && /*#__PURE__*/React.isValidElement(trigger)) {
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: handleClick
+      }, trigger);
+    }
+    return /*#__PURE__*/React.createElement(Trigger, {
+      checkedValues: state.checkedValues,
+      value: value,
+      handleClick: handleClick,
+      handleClearAll: handleClearAll
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal"
+  }, renderTrigger(), /*#__PURE__*/React.createElement(ProDrawerForm, {
+    onOk: handleFinish,
+    onCancel: handleClose,
+    open: state.open,
+    title: title,
+    showType: "Modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-box"
+  }, /*#__PURE__*/React.createElement(Search, {
+    disabled: disabled,
+    allowClear: true,
+    className: "pro-tree-modal-search",
+    onSearch: onSearch
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-tree-warp"
+  }, mode === 'list' ? /*#__PURE__*/React.createElement(ListView, {
+    treeData: state.treeData,
+    checkedValues: state.checkedValues,
+    handleOnChange: handleOnChange,
+    searchStr: state.searchStr,
+    showCodeName: showCodeName,
+    disabled: disabled
+  }) : /*#__PURE__*/React.createElement(TreeView, {
+    treeData: state.treeData,
+    originalTreeData: state.originalTreeData,
+    flatTreeData: state.flatTreeData,
+    checkedValues: state.checkedValues,
+    onCheck: onCheck,
+    searchStr: state.searchStr,
+    showCodeName: showCodeName,
+    disabled: disabled
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-box-header"
+  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 (", state.checkedValues.length, ") "), /*#__PURE__*/React.createElement("a", {
+    onClick: handleClearAll
+  }, "\u6E05\u7A7A\u5168\u90E8")), /*#__PURE__*/React.createElement("div", {
+    className: "pro-tree-modal-tree-warp"
+  }, mode === 'list' ? /*#__PURE__*/React.createElement(ListView, {
+    mode: "view",
+    showCodeName: showCodeName,
+    treeData: state.originalTreeData.filter(function (item) {
+      return state.checkedValues.includes(item.value);
+    }),
+    handleFilterClose: handleFilterClose
+  }) : /*#__PURE__*/React.createElement(TreeView, {
+    mode: "view",
+    showCodeName: showCodeName,
+    treeData: state.treeViewData,
+    handleFilterClose: treeFilterClose
+  }))))));
+};
+export default ProTreeModal;

package/es/ProTreeModal/propsType.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Service, Options } from 'ahooks/lib/useRequest/src/types';
+export interface ProTreeModalProps {
+    value?: string[];
+    open: boolean;
+    mode?: 'tree' | 'list';
+    isView?: string;
+    code?: string;
+    trigger: string | ReactNode;
+    showCodeName?: boolean;
+    dataSource: any[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    title?: string | ReactNode;
+    checkStrictly?: boolean;
+    onChange?: (values: string[]) => void;
+    /** 自定义展示 */
+    optionRender: (item: any) => string | ReactNode;
+    /** 对后台返回数据进行格式化 */
+    transformResponse?: (data: any) => any[];
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+}

package/es/ProTreeModal/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/ProTreeModal/style/index.less

@@ -0,0 +1,105 @@
+.pro-modal .ant-modal-body {
+  max-height: 100%;
+}
+.pro-tree-modal {
+  .ant-input-group-wrapper {
+    .ant-input-suffix {
+      display: none;
+    }
+    &:hover .ant-input-suffix {
+      display: block;
+    }
+  }
+  &-placeholder {
+    color: #939499;
+  }
+  &-content {
+    display: flex;
+    flex-direction: row;
+    height: 482px;
+
+    .ant-tree-checkbox {
+      margin-top: 2px;
+    }
+    .ant-tree-switcher {
+      width: 20px;
+      line-height: 20px;
+    }
+
+    .ant-tree-treenode {
+      width: 100%;
+      padding: 0;
+      padding-bottom: 12px;
+      color: var(--zaui-text);
+      font-size: var(--zaui-font-size);
+      font-family: PingFangSC-Regular, PingFang SC;
+      line-height: 20px;
+    }
+    .ant-tree-node-content-wrapper {
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+    }
+  }
+  &-box {
+    width: 456px;
+    height: 100%;
+    overflow-y: auto;
+    color: var(--zaui-text);
+    font-size: var(--zaui-font-size);
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 20px;
+    border: 1px solid #e6e6e6;
+    border-radius: 5px;
+    &:first-child {
+      margin-right: var(--zaui-space-size-md);
+    }
+  }
+
+  &-search {
+    padding: var(--zaui-space-size-sm);
+    padding-bottom: 0;
+  }
+  &-box-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    padding: 0 12px;
+    background: #fafafa;
+    span {
+      color: #616161;
+    }
+  }
+
+  &-tree-warp {
+    margin: var(--zaui-space-size-md);
+  }
+  &-checkbox-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    line-height: 20px;
+    cursor: pointer;
+    &-look {
+      color: #333;
+    }
+  }
+
+  &-tree-content {
+    margin-bottom: 0;
+  }
+
+  &-search-value {
+    color: var(--zaui-brand);
+  }
+  &-checkbox-close {
+    padding-left: var(--zaui-space-size-sm);
+    font-size: 12px;
+  }
+}

package/es/ProTreeModal/utils.d.ts

@@ -0,0 +1,26 @@
+export declare function getFlatTreeData(originalTreeData: any[]): any[];
+export declare const getParentKey: (key: string, tree: any[]) => string;
+interface TreeNode {
+    title: string;
+    key: string;
+    children?: TreeNode[];
+}
+export declare function findTreeNodeByKey(treeData: TreeNode[], key: string): TreeNode[];
+/**
+ * 根据所选的 checkedKeys 筛选出展示的 treeData
+ * @param data
+ * @param checkedKeys
+ * @returns
+ */
+export declare function filterCheckedNodes(data: any, checkedKeys: any): any[];
+/**
+ * 获取 tree 当前选中节点下的所有子节点的 keys
+ * @param node
+ * @param childrenKeys
+ * @returns
+ */
+export declare function getChildrenKeys<T extends {
+    key: string;
+    children?: T[];
+}>(node: T, childrenKeys: string[]): string[];
+export {};

package/es/ProTreeModal/utils.js

@@ -0,0 +1,136 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+/* eslint-disable no-restricted-syntax */
+export function getFlatTreeData(originalTreeData) {
+  var dataList = [];
+  function loop(data) {
+    for (var i = 0; i < data.length; i++) {
+      var node = data[i];
+      var value = node.value,
+        key = node.key,
+        title = node.title;
+      dataList.push({
+        key: key || value,
+        title: title
+      });
+      if (node.children) {
+        loop(node.children);
+      }
+    }
+  }
+  loop(originalTreeData);
+  return dataList;
+}
+export var getParentKey = function getParentKey(key, tree) {
+  var parentKey;
+  for (var i = 0; i < tree.length; i++) {
+    var node = tree[i];
+    if (node.children) {
+      if (node.children.some(function (item) {
+        return item.key === key;
+      })) {
+        parentKey = node.key;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+export function findTreeNodeByKey(treeData, key) {
+  var result = [];
+  var traverse = function traverse(node, parents) {
+    if (node.key === key) {
+      result.push.apply(result, [node].concat(_toConsumableArray(parents)));
+      return true;
+    }
+    var children = node.children || [];
+    var _iterator = _createForOfIteratorHelper(children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        if (traverse(child, [node].concat(_toConsumableArray(parents)))) {
+          return true;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return false;
+  };
+  var _iterator2 = _createForOfIteratorHelper(treeData),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var node = _step2.value;
+      traverse(node, []);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return result;
+}
+/**
+ * 根据所选的 checkedKeys 筛选出展示的 treeData
+ * @param data
+ * @param checkedKeys
+ * @returns
+ */
+export function filterCheckedNodes(data, checkedKeys) {
+  var result = [];
+  var traverse = function traverse(node) {
+    var _node$children2;
+    if (checkedKeys.includes(node.key)) {
+      var _node$children;
+      var _children = ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map(traverse).filter(Boolean)) || [];
+      return _objectSpread(_objectSpread({}, node), {}, {
+        children: _children
+      });
+    }
+    var children = (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map(traverse).filter(Boolean);
+    if (children && children.length > 0) {
+      return _objectSpread(_objectSpread({}, node), {}, {
+        children: children
+      });
+    }
+    return null;
+  };
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator3 = _createForOfIteratorHelper(data),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var node = _step3.value;
+      var filtered = traverse(node);
+      if (filtered) {
+        result.push(filtered);
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return result;
+}
+/**
+ * 获取 tree 当前选中节点下的所有子节点的 keys
+ * @param node
+ * @param childrenKeys
+ * @returns
+ */
+export function getChildrenKeys(node, childrenKeys) {
+  node.children.forEach(function (item) {
+    childrenKeys.push(item.key);
+    if (item.children && item.children.length > 0) {
+      getChildrenKeys(item, childrenKeys);
+    }
+  });
+  return childrenKeys;
+}

package/es/ProTreeSelect/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PropTreeSelectProps } from './propsType';
+export declare const ProTreeSelect: (props: PropTreeSelectProps, ref: React.Ref<unknown> | undefined) => React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<PropTreeSelectProps & React.RefAttributes<unknown>>;
+export default _default;