@zat-design/sisyphus-react 3.0.13

package/es/ProStep/index.js

@@ -0,0 +1,130 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { createContext, useContext, useEffect } from 'react';
+import { useEventEmitter, useSetState, useLocalStorageState } from 'ahooks';
+import { handleScroll } from './utils';
+import Step from './components/Step';
+import Item from './components/Item';
+import Listener from './components/Listener';
+import './style/index.less';
+export var ProStepContext = /*#__PURE__*/createContext(null);
+export var useStep = function useStep() {
+  return useContext(ProStepContext) || {};
+};
+var ProStep = function ProStep(_ref) {
+  var children = _ref.children,
+    resetProps = _objectWithoutProperties(_ref, _excluded);
+  var emitter = useEventEmitter();
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    errorCollection = _useSetState2[0],
+    setErrorCollection = _useSetState2[1];
+  var _useLocalStorageState = useLocalStorageState('cache-pro-step'),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
+    setLocalData = _useLocalStorageState2[1];
+  var dataSource = resetProps.dataSource,
+    targetOffset = resetProps.targetOffset;
+  var values = {};
+  // 用来注册form匹配到对应的模块id
+  var register = function register(_ref2) {
+    var id = _ref2.id,
+      form = _ref2.form,
+      validator = _ref2.validator,
+      disabled = _ref2.disabled;
+    if (disabled) {
+      return null;
+    }
+    emitter.useSubscription( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var num, _form$validateFields, _errors$errorFields;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            num = 0;
+            _context.prev = 1;
+            if (!validator) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 5;
+            return validator === null || validator === void 0 ? void 0 : validator();
+          case 5:
+            values[id] = _context.sent;
+            _context.next = 11;
+            break;
+          case 8:
+            _context.next = 10;
+            return form === null || form === void 0 ? void 0 : (_form$validateFields = form.validateFields) === null || _form$validateFields === void 0 ? void 0 : _form$validateFields.call(form);
+          case 10:
+            values[id] = _context.sent;
+          case 11:
+            _context.next = 17;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](1);
+            num = _context.t0 === null || _context.t0 === void 0 ? void 0 : (_errors$errorFields = _context.t0.errorFields) === null || _errors$errorFields === void 0 ? void 0 : _errors$errorFields.length;
+            setLocalData(false);
+          case 17:
+            setErrorCollection(_defineProperty({}, id, num));
+          case 18:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 13]]);
+    })));
+  };
+  var notify = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return emitter.emit();
+          case 2:
+            return _context2.abrupt("return", values);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function notify() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var errorModuleKeys = Object.keys(errorCollection).reverse();
+    if (errorModuleKeys === null || errorModuleKeys === void 0 ? void 0 : errorModuleKeys.length) {
+      var _dataSource$find;
+      var firstErrorModuleKey = (_dataSource$find = dataSource.find(function (item) {
+        var moduleKey = errorModuleKeys.find(function (child) {
+          return child === item.code;
+        });
+        return errorCollection[moduleKey];
+      })) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.code;
+      firstErrorModuleKey && handleScroll(firstErrorModuleKey, {
+        targetOffset: targetOffset
+      });
+    }
+  }, [errorCollection]);
+  return /*#__PURE__*/React.createElement(ProStepContext.Provider, {
+    value: {
+      register: register,
+      notify: notify,
+      handleScroll: handleScroll
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-step-wrapper"
+  }, children, /*#__PURE__*/React.createElement(Step, _objectSpread(_objectSpread({}, resetProps), {}, {
+    errorCollection: errorCollection
+  }))));
+};
+ProStep.useStep = useStep;
+ProStep.Item = Item;
+ProStep.Listener = Listener;
+export default ProStep;

package/es/ProStep/propsType.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface ItemType {
+    name: string;
+    code: string;
+}
+export interface ProStepPropsType {
+    /** @name 步骤条配置项 */
+    dataSource: ItemType[];
+    /** @name 距离顶部的偏移量 */
+    fixedTop: number;
+    /** @name 当前已激活的key */
+    activeKey?: string;
+    /** @name 子组件 */
+    children?: ReactNode;
+    /** @name 子组件 */
+    style?: any;
+    /** @name 滚动偏移量 */
+    targetOffset?: number;
+}

package/es/ProStep/propsType.js

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

package/es/ProStep/style/index.less

@@ -0,0 +1,181 @@
+.pro-step-wrapper {
+  padding-right: 48px;
+}
+
+.pro-step {
+  position        : fixed;
+  right           : 0;
+  z-index         : 999;
+  min-width       : 48px;
+  min-height      : 48px;
+  text-align      : center;
+  background-color: #fff;
+  cursor          : pointer;
+  box-shadow      : -1px 0px 5px 0px rgba(0, 0, 0, 0.1);
+  transition      : width .2s;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  >.step-menu {
+    display      : flex;
+    align-items  : center;
+    width        : 100%;
+    height       : 48px;
+    font-size    : var(--zaui-font-size-lg, 16px);
+    border-bottom: 1px solid #dee0e3;
+
+    >.menu-icon {
+      font-size: 24px;
+      fill     : var(--zaui-brand, #006AFF);
+
+      >div {
+        width          : 48px;
+        height         : 24px;
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .menu-content {
+    overflow: hidden;
+
+    &:hover {
+      overflow-y: auto;
+    }
+  }
+
+  .com-menu-item {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+    width          : 100%;
+    height         : 48px;
+    padding-right  : 16px;
+
+    &:hover {
+      background-color: rgba(185, 185, 189, 0.1);
+    }
+
+    &.current {
+      background-color: var(--ant-primary-1, #e6f4ff);
+
+      &:hover {
+        background-color: var(--ant-primary-1, #e6f4ff);
+      }
+    }
+
+    >.menu-item {
+      display    : flex;
+      align-items: center;
+
+      >.menu-icon {
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+        width          : 48px;
+        height         : 100%;
+
+        >svg {
+          fill: var(--zaui-brand, #006AFF);
+        }
+
+        >.dot {
+          width        : 6px;
+          height       : 6px;
+          background   : var(--zaui-brand, #006AFF);
+          border-radius: 3px;
+
+          &.errored {
+            background: #ff5050;
+            fill      : #ff5050;
+          }
+
+          &.disabled {
+            background: #939599;
+            fill      : #939599;
+          }
+        }
+
+        .dot-icon {
+          display        : flex;
+          align-items    : center;
+          justify-content: center;
+          font-size      : 12px;
+          color          : #ffffff;
+          width          : 18px;
+          height         : 18px;
+          background     : var(--zaui-brand);
+          border-radius  : 8px;
+
+          &.errored {
+            background: #ff5050;
+            fill      : #ff5050;
+          }
+
+          &.disabled {
+            background: #939599;
+            fill      : #939599;
+          }
+        }
+      }
+
+      >.menu-name {
+        color: #0A0A0A;
+
+        &.disabled {
+          color: #626366;
+        }
+      }
+    }
+
+    >.checked-status {
+      height: 18px;
+
+      >svg {
+        fill: var(--zaui-brand, #006AFF);
+      }
+
+      .errorDot {
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+        width          : 16px;
+        height         : 16px;
+        background     : rgba(255, 80, 80, 0.2);
+        border-radius  : 8px;
+
+        >span {
+          color        : #ff5050;
+          font-weight  : 600;
+          font-size    : 10px;
+          font-family  : PingFangSC-Semibold, PingFang SC;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+
+  &.open {
+    width: 200px;
+
+    >.topMulu {
+      color      : #1d2129;
+      font-weight: 500;
+      font-size  : var(--zaui-font-size-xl);
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 25px;
+
+      >div {
+        display    : flex;
+        align-items: center;
+
+      }
+    }
+  }
+
+  &.closed {
+    width: 48px;
+  }
+}

package/es/ProStep/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const handleScroll: (id: any, options: any) => void;
+export default handleScroll;

package/es/ProStep/utils/index.js

@@ -0,0 +1,16 @@
+import { debounce } from 'lodash';
+export var handleScroll = function handleScroll(id, options) {
+  var _ref = options || {},
+    _ref$targetOffset = _ref.targetOffset,
+    targetOffset = _ref$targetOffset === void 0 ? 0 : _ref$targetOffset;
+  var dom = document.querySelector("#".concat(id));
+  if (dom) {
+    setTimeout(debounce(function () {
+      window.scrollTo({
+        top: dom.offsetTop - targetOffset,
+        behavior: 'smooth'
+      });
+    }, 100), 0);
+  }
+};
+export default handleScroll;

package/es/ProTable/components/ResizableLine/index.d.ts

@@ -0,0 +1,2 @@
+declare const ResizableLine: () => JSX.Element;
+export default ResizableLine;

package/es/ProTable/components/ResizableLine/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+var ResizableLine = function ResizableLine() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pro-table-resizable-line",
+    style: {
+      display: 'none'
+    }
+  });
+};
+export default ResizableLine;

package/es/ProTable/components/TableResizable/index.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    components: {
+        header: {
+            cell: (props: {
+                [x: string]: any;
+                onDrag: any;
+                width: number;
+                minwidth?: number;
+            }) => JSX.Element;
+        };
+    };
+};
+export default _default;

package/es/ProTable/components/TableResizable/index.js

@@ -0,0 +1,98 @@
+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 = ["onDrag", "width", "minwidth"];
+/*
+ * @Author: chongyang wanchongyang@zhongan.io
+ * @Date: 2023-02-23 17:47:46
+ * @LastEditors: chongyang wanchongyang@zhongan.io
+ * @LastEditTime: 2023-03-07 20:18:22
+ * @FilePath: /za-material-warehouse/src/ProTable/TableResizable.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useState, useContext } from 'react';
+import { Resizable } from 'react-resizable';
+import classnames from 'classnames';
+import { TableContext } from '../../index';
+import { getParentElement } from '../../utils';
+var ResizableTitle = function ResizableTitle(props) {
+  var _restProps$className;
+  var onDrag = props.onDrag,
+    width = props.width,
+    _props$minwidth = props.minwidth,
+    minwidth = _props$minwidth === void 0 ? 50 : _props$minwidth,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(TableContext),
+    tableConfig = _useContext.tableConfig,
+    Storage = _useContext.Storage;
+  // 添加偏移量
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  if (restProps === null || restProps === void 0 ? void 0 : (_restProps$className = restProps.className) === null || _restProps$className === void 0 ? void 0 : _restProps$className.includes('ant-table-selection-column')) {
+    return /*#__PURE__*/React.createElement("th", _objectSpread({}, restProps));
+  }
+  return /*#__PURE__*/React.createElement(Resizable, {
+    width: Number(width) + Number(offset),
+    minConstraints: [minwidth, 0],
+    height: 0,
+    handle: /*#__PURE__*/React.createElement("span", {
+      className: classnames(['react-resizable-handle', offset && 'active']),
+      style: {
+        transform: "translateX(".concat(offset, "px)")
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    }),
+    onResize: function onResize(e, _ref) {
+      var _parentDom$getElement;
+      var size = _ref.size,
+        node = _ref.node;
+      var parentDom = getParentElement(node, 'pro-table-container');
+      // 获取父元素视窗位置信息
+      var parentClient = parentDom === null || parentDom === void 0 ? void 0 : parentDom.getBoundingClientRect();
+      var subClient = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+      var lineDom = (_parentDom$getElement = parentDom.getElementsByClassName('pro-table-resizable-line')) === null || _parentDom$getElement === void 0 ? void 0 : _parentDom$getElement[0];
+      // 设置辅助线数据
+      if (parentClient && subClient && lineDom) {
+        var height = parentDom.getElementsByTagName('table')[0].clientHeight;
+        lineDom.style.display = 'block';
+        lineDom.style.height = "".concat(height, "px");
+        lineDom.style.left = "".concat(subClient.left - parentClient.left + 6, "px");
+      }
+      setOffset(size.width - width);
+    },
+    onResizeStop: function onResizeStop() {
+      var _parentDom$getElement2;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var parentDom = getParentElement(args[1].node, 'pro-table-container');
+      var lineDom = (_parentDom$getElement2 = parentDom.getElementsByClassName('pro-table-resizable-line')) === null || _parentDom$getElement2 === void 0 ? void 0 : _parentDom$getElement2[0];
+      setOffset(0);
+      onDrag && onDrag.apply(void 0, args);
+      if (lineDom) {
+        lineDom.style.display = 'none';
+      }
+    },
+    draggableOpts: {
+      enableUserSelectHack: false
+    }
+  }, /*#__PURE__*/React.createElement("th", _objectSpread(_objectSpread({}, restProps), {}, {
+    style: _objectSpread({
+      overflow: 'visible'
+    }, restProps.style)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pro-table-th-cell"
+  }, restProps.children)));
+};
+var components = {
+  header: {
+    cell: ResizableTitle
+  }
+};
+export default {
+  components: components
+};

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

@@ -0,0 +1,2 @@
+export { default as ResizableLine } from './ResizableLine';
+export { default as TableResizable } from './TableResizable';

package/es/ProTable/components/index.js

@@ -0,0 +1,2 @@
+export { default as ResizableLine } from './ResizableLine';
+export { default as TableResizable } from './TableResizable';

package/es/ProTable/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ProTableProps } from './propsType';
+export declare const TableContext: React.Context<{}>;
+export declare const defaultPage: {
+    pageNum: number;
+    pageSize: number;
+};
+declare function ProTable(props: ProTableProps): JSX.Element;
+declare namespace ProTable {
+    var defaultProps: {
+        quickConfig: boolean;
+        stripe: boolean;
+    };
+    var useAntdTable: typeof import("./useAntdTable").default;
+}
+export default ProTable;