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

package/lib/ProTreeModal/components/CloseIcon.js

@@ -6,28 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 function CloseIcon(props) {
-  return /*#__PURE__*/_react.default.createElement("span", (0, _objectSpread2.default)({
+  return (0, _jsxRuntime.jsx)("span", (0, _objectSpread2.default)((0, _objectSpread2.default)({
     className: "ant-input-suffix"
-  }, props), /*#__PURE__*/_react.default.createElement("span", {
-    className: "ant-input-clear-icon pro-tree-modal-checkbox-close",
-    role: "button"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    role: "img",
-    "aria-label": "close-circle",
-    className: "anticon anticon-close-circle"
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "close-circle",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-  })))));
+  }, props), {}, {
+    children: (0, _jsxRuntime.jsx)("span", {
+      className: "ant-input-clear-icon pro-tree-modal-checkbox-close",
+      role: "button",
+      children: (0, _jsxRuntime.jsx)("span", {
+        role: "img",
+        "aria-label": "close-circle",
+        className: "anticon anticon-close-circle",
+        children: (0, _jsxRuntime.jsx)("svg", {
+          viewBox: "64 64 896 896",
+          focusable: "false",
+          "data-icon": "close-circle",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: (0, _jsxRuntime.jsx)("path", {
+            d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          })
+        })
+      })
+    })
+  }));
 }
-var _default = CloseIcon;
-exports.default = _default;
+var _default = exports.default = CloseIcon;

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

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { FieldNamesType, TreeDataProps } from '../propsType';
 interface ListProps {
     disabled?: boolean;
     checkedValues?: any[];
     treeData: any[];
     searchStr?: string;
     showCodeName?: boolean;
+    fieldNames: FieldNamesType;
     mode?: 'render' | 'view';
+    modeType?: string;
+    span?: number;
+    draggable?: boolean;
+    flatTreeData?: TreeDataProps[];
     handleOnChange?: (e: any, value: string) => void;
     handleFilterClose?: (code: string) => void;
+    optionRender?: (item: any, searchStr?: string) => string | ReactNode;
+    handleDragEndChange?: (values: any[]) => void;
 }
-declare function List(props: ListProps): React.JSX.Element;
-export default List;
+declare const _default: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/ProTreeModal/components/List.js

@@ -5,55 +5,199 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _antd = require("antd");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _ahooks = require("ahooks");
 var _SearchTitle = _interopRequireDefault(require("./SearchTitle"));
 var _CloseIcon = _interopRequireDefault(require("./CloseIcon"));
-function List(props) {
+var _SortableItem = _interopRequireDefault(require("./SortableItem"));
+var _ = require("..");
+/* eslint-disable brace-style */
+
+function List(props, ref) {
   var checkedValues = props.checkedValues,
     disabled = props.disabled,
     treeData = props.treeData,
     searchStr = props.searchStr,
     showCodeName = props.showCodeName,
+    span = props.span,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'render' : _props$mode,
+    fieldNames = props.fieldNames,
+    draggable = props.draggable,
+    modeType = props.modeType,
+    flatTreeData = props.flatTreeData,
     handleOnChange = props.handleOnChange,
-    handleFilterClose = props.handleFilterClose;
+    handleFilterClose = props.handleFilterClose,
+    optionRender = props.optionRender,
+    handleDragEndChange = props.handleDragEndChange;
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
+  var _useSetState = (0, _ahooks.useSetState)({
+      checkedList: []
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    checkedList = _useSetState2[0].checkedList,
+    setState = _useSetState2[1];
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      onChange: function onChange() {
+        return checkedList.map(function (item) {
+          return item[fieldNameValue];
+        });
+      }
+    };
+  });
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    setState({
+      checkedList: treeData
+    });
+    // if (!span) {
+    //   setState({
+    //     checkedList: treeData,
+    //   });
+    // }
+    // // 数组长度一样不需要重新 filter、这种情况下属于右侧位置拖动
+    // else if (flatTreeData?.length && checkedList.length !== treeData.length) {
+    //   // 如果开启 span 不用管之前的位置顺序、直接按原数据源的顺序来即可
+    //   setState({
+    //     checkedList: flatTreeData.filter((item) =>
+    //       treeData.find((data) => data[fieldNameValue] === item[fieldNameValue]),
+    //     ),
+    //   });
+    // }
+  }, [treeData]);
+  var _useMemo = (0, _react.useMemo)(function () {
+      var min = -1;
+      var max = (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) || 0;
+      var minFlag = false;
+      var maxFlag = false;
+      checkedList === null || checkedList === void 0 ? void 0 : checkedList.forEach(function (item, index) {
+        if (item.disabled && !minFlag) {
+          min = index;
+        } else {
+          minFlag = true;
+        }
+        if (!item.disabled && !maxFlag) {
+          maxFlag = true;
+        } else if (maxFlag && item.disabled) {
+          max = index;
+          maxFlag = false;
+        }
+      });
+      return {
+        min: min,
+        max: max
+      };
+    }, [checkedList]),
+    min = _useMemo.min,
+    max = _useMemo.max;
+  var handleDragEnd = function handleDragEnd(_ref) {
+    var active = _ref.active,
+      over = _ref.over;
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      var activeIndex = checkedList.findIndex(function (item) {
+        return (item === null || item === void 0 ? void 0 : item[fieldNameValue]) === active.id;
+      });
+      var overIndex = checkedList.findIndex(function (item) {
+        return (item === null || item === void 0 ? void 0 : item[fieldNameValue]) === (over === null || over === void 0 ? void 0 : over.id);
+      });
+      if (overIndex <= min || overIndex >= max) {
+        return;
+      }
+      var newCheckedList = (0, _sortable.arrayMove)(checkedList, activeIndex, overIndex);
+      setState({
+        checkedList: newCheckedList
+      });
+      handleDragEndChange === null || handleDragEndChange === void 0 ? void 0 : handleDragEndChange(newCheckedList.map(function (item) {
+        return item[fieldNameValue];
+      }));
+    }
+  };
+  // 开启 draggable 拖拽模式
+  if (draggable) {
+    return (0, _jsxRuntime.jsx)("div", {
+      className: "checked-container",
+      children: (0, _jsxRuntime.jsx)(_core.DndContext, {
+        onDragEnd: handleDragEnd,
+        children: (0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+          items: checkedList === null || checkedList === void 0 ? void 0 : checkedList.map(function (item) {
+            return item === null || item === void 0 ? void 0 : item[fieldNameValue];
+          }),
+          strategy: _sortable.verticalListSortingStrategy,
+          children: checkedList === null || checkedList === void 0 ? void 0 : checkedList.map(function (item) {
+            return (0, _jsxRuntime.jsx)(_SortableItem.default, {
+              "data-row-key": item === null || item === void 0 ? void 0 : item[fieldNameValue],
+              label: item === null || item === void 0 ? void 0 : item[fieldNameLabel],
+              item: item,
+              drag: draggable,
+              disabled: disabled,
+              onClose: function onClose() {
+                return handleFilterClose(item[fieldNameValue]);
+              }
+            }, "item-".concat(item === null || item === void 0 ? void 0 : item[fieldNameValue]));
+          })
+        })
+      })
+    });
+  }
+  var isCASCADER = modeType === _.CASCADER;
+  // 编辑状态
   if (mode === 'render') {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Checkbox.Group, {
-      disabled: disabled,
-      style: {
-        width: '100%'
-      },
-      value: checkedValues
-    }, treeData.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item.value,
-        className: "pro-tree-modal-checkbox-content"
-      }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
-        onChange: function onChange(e) {
-          return handleOnChange(e, item.value);
+    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _jsxRuntime.jsx)(_antd.Checkbox.Group, {
+        disabled: disabled,
+        style: {
+          width: '100%'
         },
-        value: item.value,
-        disabled: item.disabled
-      }, /*#__PURE__*/_react.default.createElement("span", null, showCodeName ? item.value : '', /*#__PURE__*/_react.default.createElement(_SearchTitle.default, {
-        label: item.title,
-        searchStr: searchStr
-      }))));
-    })));
+        value: checkedValues,
+        children: (0, _jsxRuntime.jsx)(_antd.Row, {
+          children: treeData.map(function (item) {
+            var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(isCASCADER ? item === null || item === void 0 ? void 0 : item.title : item[fieldNameLabel]) : "".concat(isCASCADER ? item === null || item === void 0 ? void 0 : item.title : item[fieldNameLabel]);
+            var content = optionRender ? optionRender(item, searchStr) : (0, _jsxRuntime.jsx)(_SearchTitle.default, {
+              label: title,
+              searchStr: searchStr
+            });
+            return (0, _jsxRuntime.jsx)(_antd.Col, {
+              span: span || 24,
+              className: !span || span === 24 ? 'pro-tree-modal-checkbox-content' : '',
+              style: {
+                marginBottom: span ? 16 : 12
+              },
+              children: (0, _jsxRuntime.jsx)(_antd.Checkbox, {
+                onChange: function onChange(e) {
+                  return handleOnChange(e, item[fieldNameValue]);
+                },
+                value: item[fieldNameValue],
+                disabled: item.disabled,
+                children: content
+              })
+            }, item[fieldNameValue]);
+          })
+        })
+      })
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, treeData.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: item.value,
-      className: "pro-tree-modal-checkbox-content"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "pro-tree-modal-checkbox-content-look"
-    }, item.title), disabled ? null : /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
-      onClick: function onClick() {
-        return handleFilterClose(item.value);
-      }
-    }));
-  }));
+  // 预览状态
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: treeData.map(function (item) {
+      var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+      return (0, _jsxRuntime.jsxs)("div", {
+        className: "pro-tree-modal-checkbox-content",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "pro-tree-modal-checkbox-content-look",
+          children: optionRender ? optionRender(item, searchStr) : title
+        }), disabled ? null : (0, _jsxRuntime.jsx)(_CloseIcon.default, {
+          onClick: function onClick() {
+            return handleFilterClose(item[fieldNameValue]);
+          }
+        })]
+      }, item[fieldNames.value]);
+    })
+  });
 }
-var _default = List;
-exports.default = _default;
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(List);

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

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 declare function SearchTitle(props: {
     searchStr: string;
     label: string;
-}): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof SearchTitle>;
+}): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SearchTitle>;
 export default _default;

package/lib/ProTreeModal/components/SearchTitle.js

@@ -1,22 +1,27 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 function SearchTitle(props) {
-  var searchStr = props.searchStr,
-    label = props.label;
+  var label = props.label,
+    _props$searchStr = props.searchStr,
+    searchStr = _props$searchStr === void 0 ? '' : _props$searchStr;
   var strTitle = label;
-  var index = strTitle.indexOf(searchStr);
-  var beforeStr = strTitle.substring(0, index);
-  var afterStr = strTitle.slice(index + searchStr.length);
-  var title = index > -1 ? /*#__PURE__*/_react.default.createElement("span", null, beforeStr, /*#__PURE__*/_react.default.createElement("span", {
-    className: "pro-tree-modal-search-value"
-  }, searchStr), afterStr) : /*#__PURE__*/_react.default.createElement("span", null, strTitle);
+  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 title = index > -1 ? (0, _jsxRuntime.jsxs)("span", {
+    children: [beforeStr, searchStr ? (0, _jsxRuntime.jsx)("span", {
+      className: "pro-tree-modal-search-value",
+      children: searchStr
+    }) : null, afterStr]
+  }) : (0, _jsxRuntime.jsx)("span", {
+    children: strTitle
+  });
   return title;
 }
-var _default = /*#__PURE__*/(0, _react.memo)(SearchTitle);
-exports.default = _default;
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SearchTitle);

package/lib/{ProTransferModal/components/SortableItem/index.d.ts → ProTreeModal/components/SortableItem.d.ts}

@@ -4,6 +4,7 @@ interface SortableItemProps {
     label: string;
     item: any;
     style?: any;
+    disabled?: boolean;
     onClose: (e: any) => void;
 }
 declare const SortableItem: FC<SortableItemProps>;

package/lib/{ProTransferModal/components/SortableItem/index.js → ProTreeModal/components/SortableItem.js}

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
 var _sortable = require("@dnd-kit/sortable");
 var _utilities = require("@dnd-kit/utilities");
 var _reactSvg = require("react-svg");
-var _index = require("../../../index");
-var _disabled = _interopRequireDefault(require("../../../assets/disabled.svg"));
-var _drag = _interopRequireDefault(require("../../../assets/drag.svg"));
+var _index = require("../../index");
+var _disabled = _interopRequireDefault(require("../../assets/disabled.svg"));
+var _drag = _interopRequireDefault(require("../../assets/drag.svg"));
 var SortableItem = function SortableItem(props) {
   var drag = props.drag,
     label = props.label,
     item = props.item,
-    _onClose = props.onClose;
+    _onClose = props.onClose,
+    disabled = props.disabled;
   var data = (0, _sortable.useSortable)({
     id: props['data-row-key'],
     disabled: item.disabled
@@ -38,26 +39,28 @@ var SortableItem = function SortableItem(props) {
     position: 'relative',
     zIndex: 9999
   } : {});
-  return /*#__PURE__*/_react.default.createElement("li", (0, _objectSpread2.default)({
-    ref: item.disabled ? null : setNodeRef,
+  return (0, _jsxRuntime.jsx)("li", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    ref: item.disabled || disabled ? null : setNodeRef,
     style: style,
-    className: "checked-item ".concat(item.disabled ? 'disabled' : '', " ").concat(drag ? 'dragable' : '')
-  }, item.disabled ? {} : attributes), /*#__PURE__*/_react.default.createElement(_antd.Tag, {
-    closable: true,
-    onClose: function onClose(e) {
-      return _onClose(e);
-    }
-  }, drag ? item.disabled ? /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
-    className: "disabled-icon",
-    src: _disabled.default
-  }) : /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, (0, _objectSpread2.default)({
-    className: "drag-icon",
-    src: _drag.default
-  }, listeners)) : null, /*#__PURE__*/_react.default.createElement(_index.ProTooltip, {
-    isResponsiveWidth: !drag,
-    width: drag ? 110 : undefined,
-    text: label
-  }, label)));
+    className: "checked-item ".concat(item.disabled || disabled ? 'disabled' : '', " ").concat(drag ? 'dragable' : '')
+  }, item.disabled ? {} : attributes), {}, {
+    children: (0, _jsxRuntime.jsxs)(_antd.Tag, {
+      closable: true,
+      onClose: function onClose(e) {
+        return _onClose(e);
+      },
+      children: [drag ? item.disabled || disabled ? (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+        className: "disabled-icon",
+        src: _disabled.default
+      }) : (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, (0, _objectSpread2.default)({
+        className: "drag-icon",
+        src: _drag.default
+      }, listeners)) : null, (0, _jsxRuntime.jsx)(_index.ProTooltip, {
+        mode: "auto",
+        line: 1,
+        text: label
+      })]
+    })
+  }));
 };
-var _default = SortableItem;
-exports.default = _default;
+var _default = exports.default = SortableItem;

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

@@ -1,5 +1,6 @@
-import React from 'react';
-interface ListProps {
+import React, { ReactNode } from 'react';
+import { FieldNamesType } from '../propsType';
+interface TreeViewProps {
     disabled?: boolean;
     checkedValues?: any[];
     originalTreeData?: any[];
@@ -7,9 +8,18 @@ interface ListProps {
     treeData: any[];
     searchStr?: string;
     showCodeName?: boolean;
+    checkStrictly?: boolean;
+    fieldNames: FieldNamesType;
+    tags?: string[];
     mode?: 'render' | 'view';
+    draggable?: boolean;
+    min?: number;
+    max?: number;
+    span?: number;
     onCheck?: (checkedKeys: any, info: any) => void;
+    optionRender?: (item: any, searchStr?: string) => string | ReactNode;
     handleFilterClose?: (code: string, node?: any) => void;
+    handleDragEndChange?: (values: any[]) => void;
 }
-declare function List(props: ListProps): React.JSX.Element;
-export default List;
+declare const _default: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<unknown>>;
+export default _default;