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

package/es/ProTree/components/Tree.js

@@ -0,0 +1,344 @@
+import "antd/es/tree/style";
+import _Tree from "antd/es/tree";
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+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 = ["checkedValues", "disabled", "searchStr", "originalTreeData", "showCodeName", "checkStrictly", "flatTreeData", "mode", "fieldNames", "tags", "onCheck", "optionRender", "treeData", "showLine", "switcherIcon", "checkable", "menu", "innerExpandKeys", "selectedKey", "disabledMode"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ *@Date: 2023-07-25 13:49:35
+ *@LastEditTime: 2023-07-25 13:49:35
+ *@Author: liudongliang
+ *@Description: 树每行节点渲染组件，复选时阻止点击事件冒泡，只有点击树节点文本会向上触发onSelect事件
+*/
+/* eslint-disable no-plusplus */
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSetState } from 'ahooks';
+import { CaretDownOutlined } from '@ant-design/icons';
+import SearchTitle from './SearchTitle';
+import { filterCheckedNodes, getParentKey } from '../utils';
+var tagsBgColors = ['rgba(0, 106, 255,0.16)', 'rgba(0, 196, 74,0.16)', 'rgba(255, 140, 0,0.16)', 'rgba(255, 80, 80,0.16)', 'rgba(97, 97, 97, 0.16)'];
+var tagsColors = ['#006AFF', '#00C44A', '#FF8C00', '#FF5050', '#616161'];
+function List(props) {
+  var checkedValues = props.checkedValues,
+    disabled = props.disabled,
+    searchStr = props.searchStr,
+    originalTreeData = props.originalTreeData,
+    _props$showCodeName = props.showCodeName,
+    showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    _props$checkStrictly = props.checkStrictly,
+    checkStrictly = _props$checkStrictly === void 0 ? false : _props$checkStrictly,
+    flatTreeData = props.flatTreeData,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'render' : _props$mode,
+    fieldNames = props.fieldNames,
+    tags = props.tags,
+    onCheck = props.onCheck,
+    optionRender = props.optionRender,
+    treeData = props.treeData,
+    _props$showLine = props.showLine,
+    showLine = _props$showLine === void 0 ? true : _props$showLine,
+    _props$switcherIcon = props.switcherIcon,
+    switcherIcon = _props$switcherIcon === void 0 ? _jsx(CaretDownOutlined, {}) : _props$switcherIcon,
+    _props$checkable = props.checkable,
+    checkable = _props$checkable === void 0 ? false : _props$checkable,
+    menu = props.menu,
+    innerExpandKeys = props.innerExpandKeys,
+    selectedKey = props.selectedKey,
+    disabledMode = props.disabledMode,
+    other = _objectWithoutProperties(props, _excluded);
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
+  var _useSetState = useSetState({
+      expandedKeys: [],
+      autoExpandParent: true,
+      currentClickTreeNode: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    expandedKeys = _useSetState2$.expandedKeys,
+    autoExpandParent = _useSetState2$.autoExpandParent,
+    currentClickTreeNode = _useSetState2$.currentClickTreeNode,
+    setState = _useSetState2[1];
+  useEffect(function () {
+    if (searchStr) {
+      var newExpandedKeys = flatTreeData.map(function (item) {
+        var title = item[fieldNameValue] + item[fieldNameLabel];
+        if ((title === null || title === void 0 ? void 0 : title.indexOf(searchStr)) > -1) {
+          return getParentKey(item[fieldNameValue], originalTreeData, fieldNames);
+        }
+        return null;
+      }).filter(function (item, i, self) {
+        return item && self.indexOf(item) === i;
+      });
+      setState({
+        expandedKeys: newExpandedKeys,
+        autoExpandParent: true
+      });
+    }
+  }, [searchStr]);
+  useEffect(function () {
+    setState({
+      expandedKeys: innerExpandKeys
+    });
+  }, [innerExpandKeys]);
+  useEffect(function () {
+    if (!checkable) {
+      // 单选树，checkedValues为string，选中那个树节点
+      setState({
+        currentClickTreeNode: checkedValues
+      });
+    }
+  }, [checkedValues]);
+  useEffect(function () {
+    if (checkable) {
+      // 复选树，selectedKey，选中那个树节点
+      setState({
+        currentClickTreeNode: selectedKey
+      });
+    }
+  }, [selectedKey]);
+  var onSelect = function onSelect(val, item) {
+    var _props$onSelect;
+    setState({
+      currentClickTreeNode: val
+    });
+    props === null || props === void 0 ? void 0 : (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, val, item);
+  };
+  var TreeNodeRow = function TreeNodeRow(props) {
+    var nodeClass = props.nodeClass,
+      item = props.item,
+      index = props.index,
+      title = props.title,
+      isChecked = props.isChecked,
+      onlyKey = props.onlyKey;
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    var operateButton = menu && menu(item === null || item === void 0 ? void 0 : item.value, item);
+    operateButton === null || operateButton === void 0 ? void 0 : operateButton.map(function (item, i) {
+      return _jsx(React.Fragment, {
+        children: item
+      }, i);
+    });
+    var hide = function hide() {
+      setOpen(false);
+    };
+    var handleOpenChange = function handleOpenChange(newOpen) {
+      setOpen(newOpen);
+    };
+    var expandIcon = _jsx("span", {
+      className: "icon-item",
+      children: _jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        className: "icon-item svg-icon-expand",
+        children: _jsx("g", {
+          id: "\u6811\u7ED3\u6784",
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+          children: _jsx("g", {
+            id: "\u6811\u7ED3\u6784\u4EA4\u4E92",
+            transform: "translate(-2285.000000, -2413.000000)",
+            fill: "currentColor",
+            children: _jsx("g", {
+              id: "\u6570\u636E\u5C55\u793A/\u6811\u5F62\u63A7\u4EF6/\u5E26\u8FDE\u63A5\u7EBF\u5907\u4EFD-3",
+              transform: "translate(2065.000000, 2411.000000)",
+              children: _jsxs("g", {
+                id: "\u7F16\u7EC4-4",
+                transform: "translate(220.000000, 2.000000)",
+                children: [_jsxs("g", {
+                  id: "icon_more\u5907\u4EFD-9",
+                  transform: "translate(7.000000, 3.000000)",
+                  children: [_jsx("rect", {
+                    id: "\u77E9\u5F62",
+                    x: "0",
+                    y: "0",
+                    width: "2",
+                    height: "2"
+                  }), _jsx("rect", {
+                    id: "\u77E9\u5F62\u5907\u4EFD-3",
+                    x: "0",
+                    y: "4",
+                    width: "2",
+                    height: "2"
+                  }), _jsx("rect", {
+                    id: "\u77E9\u5F62\u5907\u4EFD-4",
+                    x: "0",
+                    y: "8",
+                    width: "2",
+                    height: "2"
+                  })]
+                }), _jsxs("g", {
+                  id: "icon_more\u5907\u4EFD-9",
+                  transform: "translate(7.000000, 3.000000)",
+                  children: [_jsx("rect", {
+                    id: "\u77E9\u5F62",
+                    x: "0",
+                    y: "0",
+                    width: "2",
+                    height: "2"
+                  }), _jsx("rect", {
+                    id: "\u77E9\u5F62\u5907\u4EFD-3",
+                    x: "0",
+                    y: "4",
+                    width: "2",
+                    height: "2"
+                  }), _jsx("rect", {
+                    id: "\u77E9\u5F62\u5907\u4EFD-4",
+                    x: "0",
+                    y: "8",
+                    width: "2",
+                    height: "2"
+                  })]
+                })]
+              })
+            })
+          })
+        })
+      })
+    });
+    return _jsxs("div", {
+      className: nodeClass,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      children: [tags && tags.length ? _jsx("div", {
+        className: "pro-tree-tree-node-tag",
+        style: {
+          backgroundColor: tagsBgColors[index],
+          color: tagsColors[index]
+        },
+        children: _jsx("span", {
+          children: tags[index]
+        })
+      }) : null, _jsxs("div", {
+        className: "tree-node-show-text",
+        children: [_jsx("div", {
+          className: "tree-node-show-text-label",
+          onClick: function onClick(e) {
+            return onSelect(item === null || item === void 0 ? void 0 : item[fieldNameValue], {
+              node: e === null || e === void 0 ? void 0 : e.target,
+              event: e,
+              item: item,
+              selected: !isChecked
+            });
+          },
+          children: optionRender ? optionRender(item, searchStr) : _jsx(SearchTitle, _objectSpread({
+            label: title,
+            searchStr: searchStr
+          }, other))
+        }), _jsx("div", {
+          className: "operate-tree-node-btns",
+          children: (operateButton === null || operateButton === void 0 ? void 0 : operateButton.length) > 1 ? _jsx(_Popover, {
+            overlayClassName: "pro-tree-operate-container",
+            content: _jsx("div", {
+              className: "pro-tree-operate-btn-popover",
+              onClick: hide,
+              children: operateButton
+            }),
+            trigger: "click",
+            open: open,
+            onOpenChange: handleOpenChange,
+            placement: "bottomRight",
+            children: expandIcon
+          }) : operateButton
+        })]
+      }), _jsx("div", {
+        className: "brand-bg-opa-ten"
+      })]
+    }, onlyKey);
+  };
+  var _treeData = useMemo(function () {
+    function fn() {
+      var loop = function loop(data, index) {
+        index++;
+        var treeRow = data.map(function (item) {
+          var nodeClass = 'pro-tree-tree-node ';
+          var isChecked = false;
+          if (currentClickTreeNode === item[fieldNameValue]) {
+            nodeClass += ' checked';
+            isChecked = true;
+          }
+          var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+          if (item[fieldNames.children]) {
+            return {
+              title: _jsx(TreeNodeRow, {
+                nodeClass: nodeClass,
+                item: item,
+                index: index,
+                title: title,
+                isChecked: isChecked,
+                onlyKey: item[fieldNameValue]
+              }),
+              key: item[fieldNameValue],
+              children: loop(item[fieldNames.children], index)
+            };
+          }
+          return {
+            title: _jsx(TreeNodeRow, {
+              nodeClass: nodeClass,
+              item: item,
+              index: index,
+              title: title,
+              isChecked: isChecked,
+              onlyKey: item[fieldNameValue]
+            }),
+            key: item[fieldNameValue]
+          };
+        });
+        return treeRow; // .filter((item) => item);
+      };
+
+      if ((other === null || other === void 0 ? void 0 : other.mode) === 'view') {
+        return;
+      }
+      var newTreeData = originalTreeData;
+      if (searchStr) {
+        newTreeData = filterCheckedNodes(originalTreeData, [], searchStr, fieldNames);
+      }
+      return loop(newTreeData, -1);
+    }
+    return fn();
+  }, [searchStr, expandedKeys, showCodeName, originalTreeData, currentClickTreeNode]);
+  var onExpand = function onExpand(newExpandedKeys) {
+    setState({
+      expandedKeys: newExpandedKeys,
+      autoExpandParent: false
+    });
+  };
+  var others = other;
+  return _jsx("div", {
+    className: disabledMode === 'hide' ? 'hide-disable-node' : '',
+    children: (_treeData === null || _treeData === void 0 ? void 0 : _treeData.length) ? _jsx(_Tree, _objectSpread(_objectSpread({}, others), {}, {
+      disabled: disabled,
+      style: {
+        width: '100%'
+      },
+      treeData: _treeData,
+      onExpand: onExpand,
+      expandedKeys: expandedKeys,
+      autoExpandParent: autoExpandParent,
+      selectable: false,
+      onCheck: onCheck,
+      checkedKeys: checkedValues,
+      checkStrictly: checkStrictly,
+      showLine: showLine,
+      switcherIcon: switcherIcon,
+      checkable: checkable,
+      onSelect: onSelect,
+      blockNode: true
+    })) : _jsx("div", {
+      className: "empty-tree",
+      children: "\u8BF6\u5440\uFF0C\u6CA1\u6709\u627E\u5230\u60A8\u8981\u67E5\u8BE2\u7684\u5185\u5BB9"
+    })
+  });
+}
+export default List;

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

@@ -0,0 +1,4 @@
+export { default as CloseIcon } from './CloseIcon';
+export { default as SearchTitle } from './SearchTitle';
+export { default as ListView } from './List';
+export { default as TreeView } from './Tree';

package/es/ProTree/components/index.js

@@ -0,0 +1,5 @@
+export { default as CloseIcon } from './CloseIcon';
+// export { default as Trigger } from './Trigger';
+export { default as SearchTitle } from './SearchTitle';
+export { default as ListView } from './List';
+export { default as TreeView } from './Tree';

package/es/ProTree/index.d.ts

@@ -0,0 +1,3 @@
+import { ProTreeProps } from './propsType';
+declare const ProTreeHandle: (props: ProTreeProps) => JSX.Element;
+export default ProTreeHandle;

package/es/ProTree/index.js

@@ -0,0 +1,25 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/*
+ *@Date: 2023-07-11 16:07:12
+ *@LastEditTime: 2023-07-11 16:07:12
+ *@Author: liudongliang
+ *@Description: ProTree组件，集成了tree和treeSelect
+*/
+import ProTree from './components/ProTree';
+import ProTreeSelect from '../ProTreeSelect';
+var ProTreeHandle = function ProTreeHandle(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'tree' : _props$mode;
+  if (mode === 'treeSelect') {
+    var adaptorProps = _objectSpread(_objectSpread({}, props), {}, {
+      treeCheckable: props === null || props === void 0 ? void 0 : props.checkable
+    });
+    return _jsx(ProTreeSelect, _objectSpread({}, adaptorProps));
+  }
+  return _jsx(ProTree, _objectSpread(_objectSpread({}, props), {}, {
+    checkedValues: props === null || props === void 0 ? void 0 : props.checkedKeys
+  }));
+};
+export default ProTreeHandle;

package/es/ProTree/propsType.d.ts

@@ -0,0 +1,217 @@
+import { ReactNode } from 'react';
+import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
+import type { TreeSelectProps } from 'antd';
+import { ProFormOtherProps } from '../ProForm/propsType';
+export interface TreeDataProps {
+    label?: string;
+    value?: string;
+    children?: TreeDataProps[];
+    [key: string]: any;
+}
+type AllValueType = string | number;
+type Key = string | number;
+export interface FieldNamesType {
+    label?: string;
+    value: string;
+    children?: string;
+}
+export interface ProTreeProps extends PropTreeSelectProps {
+    /** 树标题 */
+    title?: string;
+    /** value */
+    value?: AllValueType | string[];
+    /** 选中的树节点value */
+    checkedValues?: any;
+    /** 是否展示展开全部按钮，默认不展示 */
+    showExpand?: boolean;
+    /** 默认  label、value、children */
+    fieldNames?: FieldNamesType;
+    open?: boolean;
+    /** 展示类型、默认treeSelect 树选择形式 */
+    mode?: 'tree' | 'list' | 'treeSelect';
+    /** 开启后、提交给后端 [{ label:xx, value: ""}] 形式  */
+    labelInValue?: boolean;
+    /** 查看模式、同 disabled 一样 */
+    isView?: boolean;
+    /** 使用ProEnum 的数据源 */
+    code?: string;
+    /** 是否展示 code-label 形式 */
+    showCodeName?: boolean;
+    /** 是否展示搜索输入框 */
+    showSearch?: boolean;
+    /** 静态数据源 */
+    dataSource?: TreeDataProps[];
+    /** 禁用 */
+    disabled?: boolean;
+    /** 复选模式下只读是否全显示节点 hide--隐藏未勾选 */
+    disabledMode?: string;
+    /** 全选的标识给后端 */
+    allValue?: string | number;
+    /** 提示语，treeSelect时使用 */
+    placeholder?: string;
+    /** 父子节点选中状态不再关联 */
+    checkStrictly?: boolean;
+    /** 树底部操作项 */
+    footer?: ReactNode;
+    /** 树容器高度 */
+    height?: string;
+    /** 树节点文本超长是否展示... */
+    showEllipse?: boolean;
+    /** 树节点文本宽度 */
+    ellipseWidth?: string;
+    /** value改变的回调 */
+    onChange?: (values: string[] | AllValueType) => void;
+    /** 点击树节点触发 */
+    onSelect?: (values: string[] | AllValueType, info?: any) => any;
+    /** 复选情况下点击checkbox触发,参照antd */
+    onCheck?: (values: string[] | AllValueType, info?: any) => any;
+    /** 自定义展示 */
+    optionRender?: (item: any, searchStr: string) => string | ReactNode;
+    /** 对后台返回数据进行格式化 */
+    transformResponse?: (data: any) => TreeDataProps[];
+    /** tags 集合 */
+    tags?: string[];
+    otherProps?: ProFormOtherProps;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+    /** 自定义配置操作按钮函数，返回react node节点 */
+    menu?: (key: Key, item?: any) => ReactNode[];
+    /** 点击树节点是否开启loading遮罩，默认false */
+    loading?: boolean;
+    /** antd属性 */
+    showLine?: boolean;
+    className?: string;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** 可勾选 */
+    checkable?: boolean;
+    /** 可勾选 */
+    treeCheckable?: boolean;
+    /** 默认展开所有树节点 */
+    defaultExpandAll?: boolean;
+    /** 默认展开对应树节点 */
+    defaultExpandParent?: boolean;
+    /** 默认展开指定的树节点 */
+    defaultExpandedKeys?: Key[];
+    /** （受控）展开指定的树节点 */
+    expandedKeys?: Key[];
+    /** （受控）选中复选框的树节点 */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认选中复选框的树节点 */
+    defaultCheckedKeys?: Key[];
+    /** （受控）设置选中的树节点 */
+    selectedKeys?: Key[];
+    /** 默认选中的树节点 */
+    defaultSelectedKeys?: Key[];
+    selectable?: boolean;
+    loadedKeys?: Key[];
+    style?: any;
+    showIcon?: boolean;
+    prefixCls?: string;
+    children?: any;
+    blockNode?: boolean;
+    /** 复选模式下，点中的树节点key */
+    selectKey?: string | number | undefined;
+}
+export interface DataProps {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    title?: string;
+}
+export interface DataOption {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    children?: DataProps[];
+    title?: string;
+    [key: string]: any;
+}
+export interface BaseOptionType {
+    disabled?: boolean;
+    checkable?: boolean;
+    disableCheckbox?: boolean;
+    children?: BaseOptionType[];
+    [name: string]: any;
+}
+export interface DefaultOptionType extends BaseOptionType {
+    value?: any;
+    title?: ReactNode;
+    label?: ReactNode;
+    key?: Key;
+    children?: DefaultOptionType[];
+}
+export interface PropTreeSelectProps extends Omit<TreeSelectProps, 'onSearch'> {
+    /** 是否查看模式 */
+    isView?: boolean;
+    /** 是否根据输入项进行筛选, 默认true */
+    filterTreeNode?: boolean;
+    /** 输入项过滤对应的 treeNode 属性, 默认label */
+    treeNodeFilterProp?: string;
+    /** 是否展开所有树 */
+    treeDefaultExpandAll?: boolean;
+    /** 是否支持复选、多选,默认多选 */
+    treeCheckable?: boolean;
+    /** 输入框宽度，默认100% */
+    width?: any;
+    /** 枚举code-从localStorage里面根据次code取枚举值 */
+    code?: string;
+    /** 数据源 */
+    dataSource?: DataOption[];
+    /** 兼容 2.0 版本、3.0 使用view 模式,查看模式值 */
+    defaultDisableValue?: string;
+    /** 格式化接口响应数据 */
+    transformResponse?: (data: any) => DataOption[];
+    /** 是否展示 tooltip、当 label 特别长的时候使用 */
+    tooltip?: boolean;
+    /** 是否展示 code-label 形式 */
+    showCodeName?: boolean;
+    /** 集成表单 form 的属性 */
+    otherProps?: ProFormOtherProps;
+    onSearch?: (value: string, useRequest: Result<any, any>) => void;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+}
+export interface ProSelectAction {
+    /** 获取发生请求的 useRequest 的 ref */
+    useRequestRef: Result<any, any>;
+}
+export interface TreeNodeData extends DataOption {
+    title: string;
+    value: string;
+    children?: TreeNodeData[];
+    icon?: ReactNode;
+    hideNodeClass?: string;
+}
+export interface TreeSelectFormProps {
+    type?: string;
+    label?: string;
+    name?: string;
+    fieldProps?: PropTreeSelectProps;
+    [key: string]: any;
+}
+export interface ResponseData {
+    status: number;
+    message: string;
+    data: any;
+    success?: boolean;
+    code?: number;
+}
+export {};

package/es/ProTree/propsType.js

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