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

package/lib/ProTree/style/index.less

@@ -0,0 +1,289 @@
+.pro-tree {
+  height: 100%; // tree auto css
+  .ant-spin-nested-loading{
+    height: 100%; // tree auto css
+    .ant-spin-container{
+      height: 100%; // tree auto css
+    }
+  }
+  &-placeholder {
+    color: #939499;
+  }
+  .pro-tree-search{
+    margin-bottom: var(--zaui-space-size-sm);
+  }
+  &-content {
+    display: flex; // tree auto css
+    flex-direction: column; // tree auto css
+    height: 100%;
+    // overflow-y: scroll;
+    .pro-tree-header-box, .pro-tree-footer-box{
+      display: inline-flex;
+      flex-direction: column;
+    }
+    .pro-tree-tree-warp{
+      height: 100%;
+      flex: 1 1;
+      overflow-y: auto;
+      overflow-x: auto;
+    }
+    .tree-title-box{
+      display: flex;
+      padding-top: 10px;
+      justify-content: space-between;
+      .tree-title-text{
+        font-size: var(--zaui-font-size-lg);
+        margin-bottom: var(--zaui-space-size-xs);
+        font-weight: 500;
+        padding-left: 2px;
+      }
+      .expand-button{
+        padding-left: var(--zaui-space-size-sm);
+        display: flex;
+        align-items: baseline;
+        &.expand{
+          .expand-icon{
+            .anticon-caret-down{
+              transform: rotate(180deg);
+            }
+          }
+        }
+        .expand-icon{
+          font-size: 12px;
+          margin-right: var(--zaui-space-size-xs);
+        }
+      }
+    }
+    .ant-tree-checkbox {
+      margin-top: 11px;
+    }
+
+    .ant-tree-switcher {
+      line-height: 44px;
+    }
+    .ant-tree-switcher-leaf-line{
+      display: none;
+    }
+
+    .ant-tree-treenode {
+      align-items: flex-start;
+      width: 100%;
+      padding: 0;
+      color: var(--zaui-text);
+      font-size: var(--zaui-font-size);
+    }
+
+    .ant-tree-node-content-wrapper {
+      min-height: var(--zaui-font-size-xxl);
+      line-height: var(--zaui-font-size-xxl);
+    }
+
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+      .ant-tree-title{
+        display: block;
+        width: 100%;
+      }
+    }
+    // 只读状态下，是否隐藏未勾选行
+    .hide-disable-node{
+      .ant-tree-treenode.ant-tree-treenode-disabled{
+        display: none;
+      }
+      .ant-tree-treenode-checkbox-indeterminate, .ant-tree-treenode-checkbox-checked{
+        &.ant-tree-treenode-disabled{
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &-tree-node {
+    display: flex;
+    flex-direction: row;
+    padding: 9px var(--zaui-space-size-sm);
+    margin-left: -8px;
+    border-radius: var(--zaui-space-size-xs);
+    &:hover{
+      background: #F7F9FC;
+    }
+    &:last-child {
+      flex: 1;
+    }
+    &.checked{
+      position: relative;
+      z-index: 1;
+      color: var(--zaui-brand);
+      .brand-bg-opa-ten{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left:0px;
+        background-color: var(--zaui-brand);
+        opacity: 0.1;
+        z-index: 0;
+        border-radius: var(--zaui-space-size-xs);
+      }
+    }
+    .tree-node-show-text{
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      .tree-node-show-text-label{
+        flex: 1;
+        overflow: hidden;
+        span{
+          width: 100%;
+        }
+        span.ellipse{
+          display: block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          height: 20px;
+          word-break: keep-all;
+          white-space: nowrap;
+        }
+      }
+    }
+    .operate-tree-node-btns{
+      display: flex;
+      z-index: 3;
+      .icon-item{
+        transition-delay: 10s;
+        width: 100%;
+        margin-left: var(--zaui-space-size-xs);
+      }
+      .icon-add{
+        font-size: 12px;
+      }
+      .svg-icon-expand{
+        margin-bottom: -2px;
+      }
+    }
+    .operate-tree-node-btns-absolute{
+      visibility:visible;
+      position: absolute;
+      right: 0px;
+    }
+  }
+  &-tree-node-tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    margin-right: var(--zaui-space-size-sm);
+    padding: 0 var(--zaui-space-size-xs);
+    font-weight: 400;
+    line-height: 24px;
+    white-space: nowrap;
+    border-radius: 2px;
+
+    span {
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      transform: scale(0.83, 0.83);
+    }
+  }
+  // 连接线、箭头宽度
+  .ant-tree-show-line .ant-tree-indent-unit{
+    width: 20px;
+  }
+  .ant-tree-switcher{
+    width: 20px;
+    align-self: flex-start;
+    margin-top: -4px;
+  }
+  .ant-tree-show-line .ant-tree-indent-unit::before{
+    right: 9px;
+  }
+  // 底部样式
+  .pro-tree-footer-box{
+    z-index: 4;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-sm);
+    position: relative;
+    box-shadow:0 -20px 5px -21px rgba(151,151,151,0.32);
+  }
+  // 去除antd白色背景
+  .ant-tree-show-line .ant-tree-switcher, .ant-tree{
+    background-color: transparent;
+  }
+  .empty-tree{
+    color: #939599;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+// 操作按钮样式
+.pro-tree-operate-container{
+  padding-top: 0px;
+  min-width: 120px;
+  .ant-popover-inner-content{
+    padding: 0px;
+    width: 100%;
+  }
+  .ant-popover-arrow{
+    display: none;
+  }
+  .pro-tree-operate-btn-popover{
+    .icon-item{
+      position: relative;
+      z-index: 1;
+      cursor: pointer;
+      padding-left: var(--zaui-space-size-md);
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+    }
+    .icon-item:hover{
+      &:after{
+        position: absolute;
+        display: block;
+        z-index: 0;
+        left:0;
+        top:0;
+        content: '';
+        width: 120px;
+        height: 32px;
+        background-color: var(--zaui-brand);
+        opacity: 0.08;
+      }
+    }
+  }
+}
+.ant-tree .ant-tree-treenode-disabled{
+  .ant-tree-node-content-wrapper{
+    color: var(--zaui-text);
+  }
+  .pro-tree-tree-node.checked{
+    color: var(--zaui-text);
+  }
+  .pro-tree-tree-node.checked .brand-bg-opa-ten{
+    background-color: inherit;
+  }
+}
+// 中意全局样式覆盖
+// .pro-form.pro-form-view .ant-form-item * {
+//   line-height: 1!important;
+//   height: auto!important;
+//   min-height: auto!important;
+// }
+// 重置ant-form view模式样式ant-tree样式
+.pro-form.pro-form-view .ant-form-item .pro-tree * {
+  line-height: 1!important;
+  height: auto!important;
+  min-height: auto!important;
+}
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox{
+  margin-top: var(--zaui-space-size-sm);
+}
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-switcher{
+  padding-top: var(--zaui-font-size-sm);
+}
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox * {
+  height: 16px!important;
+}

package/lib/ProTree/utils.d.ts

@@ -0,0 +1,37 @@
+import { FieldNamesType, TreeDataProps } from './propsType';
+/**
+ * 树转成铺平的数组
+ * @param originalTreeData
+ * @returns
+ */
+export declare function getFlatTreeData(originalTreeData: TreeDataProps[], fieldNames: FieldNamesType): any[];
+/**
+ * 获取 tree 所有的 keys 集合
+ * @param data
+ * @param fieldNames
+ * @returns
+ */
+export declare function getAllKeys(data: TreeDataProps[], fieldNames: FieldNamesType): string[];
+/**
+ * 获取展开的key
+ * @param key
+ * @param tree
+ * @param fieldNames
+ * @returns
+ */
+export declare const getParentKey: (key: string, tree: TreeDataProps[], fieldNames: FieldNamesType) => string;
+export declare function findTreeNodeByKey(treeData: TreeDataProps[], key: string, fieldNames: FieldNamesType): TreeDataProps[];
+/**
+ * 根据所选的 checkedKeys 筛选出展示的 treeData
+ * @param data
+ * @param checkedKeys
+ * @returns
+ */
+export declare function filterCheckedNodes(data: any, checkedKeys: any, searchStr: string, fieldNames: FieldNamesType): any[];
+/**
+ * 获取 tree 当前选中节点下的所有子节点的 keys
+ * @param node
+ * @param childrenKeys
+ * @returns
+ */
+export declare function getChildrenKeys(node: TreeDataProps, childrenKeys: string[], fieldNames: FieldNamesType, type: 'treeClose' | 'treeCheck'): void;

package/lib/ProTree/utils.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterCheckedNodes = filterCheckedNodes;
+exports.findTreeNodeByKey = findTreeNodeByKey;
+exports.getAllKeys = getAllKeys;
+exports.getChildrenKeys = getChildrenKeys;
+exports.getFlatTreeData = getFlatTreeData;
+exports.getParentKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+/**
+ * 树转成铺平的数组
+ * @param originalTreeData
+ * @returns
+ */
+function getFlatTreeData(originalTreeData, fieldNames) {
+  var dataList = [];
+  function loop(data) {
+    for (var i = 0; i < data.length; i++) {
+      var node = (0, _objectSpread4.default)({}, data[i]);
+      // dataList.push({ value: node[fieldNames.value], label: node[fieldNames.label] });
+      delete node[fieldNames.children];
+      dataList.push((0, _objectSpread4.default)({}, node));
+      if (data[i][fieldNames.children]) {
+        loop(data[i][fieldNames.children]);
+      }
+    }
+  }
+  loop(originalTreeData);
+  return dataList;
+}
+/**
+ * 获取 tree 所有的 keys 集合
+ * @param data
+ * @param fieldNames
+ * @returns
+ */
+function getAllKeys(data, fieldNames) {
+  var keys = [];
+  function loop(data) {
+    for (var i = 0; i < data.length; i++) {
+      var node = data[i];
+      keys.push(node[fieldNames.value]);
+      if (node[fieldNames.children]) {
+        loop(node[fieldNames.children]);
+      }
+    }
+  }
+  loop(data);
+  return keys;
+}
+/**
+ * 获取展开的key
+ * @param key
+ * @param tree
+ * @param fieldNames
+ * @returns
+ */
+var getParentKey = exports.getParentKey = function getParentKey(key, tree, fieldNames) {
+  var parentKey;
+  for (var i = 0; i < tree.length; i++) {
+    var node = tree[i];
+    if (node[fieldNames.children]) {
+      if (node[fieldNames.children].some(function (item) {
+        return item[fieldNames.value] === key;
+      })) {
+        parentKey = node[fieldNames.value];
+      } else if (getParentKey(key, node[fieldNames.children], fieldNames)) {
+        parentKey = getParentKey(key, node[fieldNames.children], fieldNames);
+      }
+    }
+  }
+  return parentKey;
+};
+function findTreeNodeByKey(treeData, key, fieldNames) {
+  var result = [];
+  var traverse = function traverse(node, parents) {
+    if (node[fieldNames.value] === key) {
+      result.push.apply(result, [node].concat((0, _toConsumableArray2.default)(parents)));
+      return true;
+    }
+    var children = node[fieldNames.children] || [];
+    var _iterator = (0, _createForOfIteratorHelper2.default)(children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        if (traverse(child, [node].concat((0, _toConsumableArray2.default)(parents)))) {
+          return true;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return false;
+  };
+  var _iterator2 = (0, _createForOfIteratorHelper2.default)(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
+ */
+function filterCheckedNodes(data, checkedKeys) {
+  var searchStr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var fieldNames = arguments.length > 3 ? arguments[3] : undefined;
+  var result = [];
+  var traverse = function traverse(node) {
+    var _node$fieldNames$chil3;
+    var title = node[fieldNames.value] + node[fieldNames.label];
+    if (!searchStr) {
+      if (checkedKeys.includes(node[fieldNames.value])) {
+        var _node$fieldNames$chil;
+        var _children = (node === null || node === void 0 ? void 0 : (_node$fieldNames$chil = node[fieldNames.children]) === null || _node$fieldNames$chil === void 0 ? void 0 : _node$fieldNames$chil.map(traverse).filter(Boolean)) || [];
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, (0, _defineProperty2.default)({}, fieldNames.children, _children));
+      }
+    } else if ((title === null || title === void 0 ? void 0 : title.indexOf(searchStr)) > -1) {
+      var _node$fieldNames$chil2;
+      var _children2 = ((_node$fieldNames$chil2 = node[fieldNames.children]) === null || _node$fieldNames$chil2 === void 0 ? void 0 : _node$fieldNames$chil2.map(traverse).filter(Boolean)) || [];
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, {
+        children: _children2
+      });
+    }
+    var children = (_node$fieldNames$chil3 = node[fieldNames.children]) === null || _node$fieldNames$chil3 === void 0 ? void 0 : _node$fieldNames$chil3.map(traverse).filter(Boolean);
+    if (children && children.length > 0) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, (0, _defineProperty2.default)({}, fieldNames.children, children));
+    }
+    return null;
+  };
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator3 = (0, _createForOfIteratorHelper2.default)(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
+ */
+function getChildrenKeys(node, childrenKeys, fieldNames, type) {
+  // 当为 tree 触发 onChck 此时就是 key 为 children
+  if (type === 'treeCheck') {
+    var _node$children;
+    node === null || node === void 0 ? void 0 : (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.forEach(function (item) {
+      childrenKeys.push(item.key);
+      if (item.children && item.children.length > 0) {
+        getChildrenKeys(item, childrenKeys, fieldNames, type);
+      }
+    });
+  } else {
+    var _node$fieldNames$chil4;
+    // 这个时候的值为我们的值
+    node === null || node === void 0 ? void 0 : (_node$fieldNames$chil4 = node[fieldNames.children]) === null || _node$fieldNames$chil4 === void 0 ? void 0 : _node$fieldNames$chil4.forEach(function (item) {
+      childrenKeys.push(item[fieldNames.value]);
+      if (item[fieldNames.children] && item[fieldNames.children].length > 0) {
+        getChildrenKeys(item, childrenKeys, fieldNames, type);
+      }
+    });
+  }
+}

package/lib/ProTreeModal/components/Cascader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { FieldNamesType, TreeDataProps } from '../propsType';
+interface CascaderProps {
+    dataSource: TreeDataProps[];
+    checkedValues?: any[];
+    showCodeName?: boolean;
+    fieldNames: FieldNamesType;
+    searchStr?: string;
+    disabled?: boolean;
+    handleOnChange?: (e: any, value: string) => void;
+    optionRender?: (item: any, searchStr: string) => string | ReactNode;
+}
+declare const Cascader: (props: CascaderProps) => JSX.Element;
+export default Cascader;

package/lib/ProTreeModal/components/Cascader.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _antd = require("antd");
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SearchTitle = _interopRequireDefault(require("./SearchTitle"));
+var Cascader = function Cascader(props) {
+  var _dataSource$, _dataSource$2, _state$options;
+  var dataSource = props.dataSource,
+    checkedValues = props.checkedValues,
+    showCodeName = props.showCodeName,
+    disabled = props.disabled,
+    fieldNames = props.fieldNames,
+    searchStr = props.searchStr,
+    handleOnChange = props.handleOnChange,
+    optionRender = props.optionRender;
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
+  var fieldNameChildren = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.children) || 'children';
+  var _useSetState = (0, _ahooks.useSetState)({
+      category: dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$[fieldNameValue],
+      options: dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2[fieldNameChildren]
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  (0, _react.useEffect)(function () {
+    if (!state.category && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+      var _dataSource$3, _dataSource$4;
+      setState({
+        category: dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$3 = dataSource[0]) === null || _dataSource$3 === void 0 ? void 0 : _dataSource$3[fieldNameValue],
+        options: dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$4 = dataSource[0]) === null || _dataSource$4 === void 0 ? void 0 : _dataSource$4[fieldNameChildren]
+      });
+    }
+  }, [dataSource]);
+  var handleClick = function handleClick(item) {
+    setState({
+      category: item[fieldNameValue],
+      options: item[fieldNameChildren]
+    });
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsxs)("div", {
+      className: "pro-tree-modal-cascader-flex",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        className: "pro-tree-modal-cascader-warp",
+        children: dataSource.map(function (item) {
+          var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+          return (0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick() {
+              return handleClick(item);
+            },
+            className: (0, _classnames.default)('pro-tree-modal-checkbox-content', 'pro-tree-modal-cascader-content', item[fieldNameValue] === state.category ? 'pro-tree-modal-check-cascader-content' : ''),
+            children: optionRender ? optionRender(item, searchStr) : (0, _jsxRuntime.jsx)(_SearchTitle.default, {
+              label: title,
+              searchStr: searchStr
+            })
+          }, item[fieldNameValue]);
+        })
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: "pro-tree-modal-cascader-warp",
+        children: (0, _jsxRuntime.jsx)(_antd.Checkbox.Group, {
+          disabled: disabled,
+          style: {
+            width: '100%'
+          },
+          value: checkedValues,
+          children: state === null || state === void 0 ? void 0 : (_state$options = state.options) === null || _state$options === void 0 ? void 0 : _state$options.map(function (item) {
+            var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+            return (0, _jsxRuntime.jsx)("div", {
+              className: "pro-tree-modal-checkbox-content pro-tree-modal-cascader-content",
+              children: item.checkable ? (0, _jsxRuntime.jsx)("span", {
+                children: optionRender ? optionRender(item, searchStr) : (0, _jsxRuntime.jsx)(_SearchTitle.default, {
+                  label: title,
+                  searchStr: searchStr
+                })
+              }) : (0, _jsxRuntime.jsx)(_antd.Checkbox, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+                onChange: function onChange(e) {
+                  return handleOnChange(e, item[fieldNameValue]);
+                },
+                value: item[fieldNameValue],
+                children: (0, _jsxRuntime.jsx)("span", {
+                  children: optionRender ? optionRender(item, searchStr) : (0, _jsxRuntime.jsx)(_SearchTitle.default, {
+                    label: title,
+                    searchStr: searchStr
+                  })
+                })
+              }))
+            }, item[fieldNameValue]);
+          })
+        })
+      })]
+    })
+  });
+};
+var _default = exports.default = Cascader;

package/lib/ProTreeModal/components/CloseIcon.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare function CloseIcon(props: any): React.JSX.Element;
+/// <reference types="react" />
+declare function CloseIcon(props: any): JSX.Element;
 export default CloseIcon;