@zat-design/sisyphus-react 3.0.13

package/lib/ProSelect/index.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProSelect = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _ahooks = require("ahooks");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _zatDesignProComponent = require("zat-design-pro-component");
+var _Container = _interopRequireDefault(require("../ProForm/components/Container"));
+var _excluded = ["dataSource", "defaultDisableValue", "optionRender", "onChange", "useRequest", "updateDataSource", "transformResponse", "fieldNames", "tooltip", "onSearch", "otherProps", "labelInValue"];
+var Option = _antd.Select.Option;
+var ProSelect = function ProSelect(props, ref) {
+  var _ref = (0, _zatDesignProComponent.useProConfig)('ProSelect') || {},
+    _ref$fieldNames = _ref.fieldNames,
+    proSelectFieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
+  var label = 'label';
+  var code = 'value';
+  if (proSelectFieldNames && Object.keys(proSelectFieldNames).length) {
+    code = proSelectFieldNames.value;
+    label = proSelectFieldNames.label;
+  }
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    defaultDisableValue = props.defaultDisableValue,
+    optionRender = props.optionRender,
+    onChange = props.onChange,
+    useRequest = props.useRequest,
+    updateDataSource = props.updateDataSource,
+    transformResponse = props.transformResponse,
+    fieldNames = props.fieldNames,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? false : _props$tooltip,
+    _onSearch = props.onSearch,
+    otherProps = props.otherProps,
+    labelInValue = props.labelInValue,
+    selectProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var value = props.value;
+  var _ref2 = otherProps || {},
+    isView = _ref2.isView,
+    viewEmpty = _ref2.viewEmpty;
+  if (fieldNames && Object.keys(fieldNames).length) {
+    code = fieldNames.value;
+    label = fieldNames.label;
+  }
+  var _useState = (0, _react.useState)(dataSource || []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectList = _useState2[0],
+    setSelectList = _useState2[1];
+  var OptionRender = optionRender;
+  var defaultOnSuccessFun = function defaultOnSuccessFun(res) {
+    var _res$status = res.status,
+      status = _res$status === void 0 ? 200 : _res$status,
+      msg = res.message,
+      data = res.data;
+    if (status !== 200) {
+      _antd.message.error(msg);
+      return;
+    }
+    setSelectList(data || []);
+  };
+  var fetchFunction = (0, _ahooks.useRequest)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, (0, _objectSpread2.default)({
+    manual: true,
+    onSuccess: function onSuccess(data) {
+      if (transformResponse && typeof transformResponse === 'function') {
+        var responseData = transformResponse(data);
+        setSelectList(responseData);
+      } else {
+        // 接口写死了，无法复用
+        updateDataSource ? updateDataSource(data, setSelectList) : defaultOnSuccessFun(data);
+      }
+    },
+    debounceWait: 300
+  }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
+  var getValueObject = function getValueObject(input) {
+    if (Array.isArray(input) && input.length) {
+      var resArr = [];
+      input.forEach(function (i) {
+        var res = selectList.find(function (item) {
+          return item[code] === i;
+        });
+        if (res) resArr.push(res);
+      });
+      return resArr;
+    }
+    return selectList.find(function (item) {
+      return item[code] === input;
+    });
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getValueObject: getValueObject,
+      useRequestRef: fetchFunction
+    };
+  });
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    setSelectList(dataSource);
+  }, [dataSource]);
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    // 默认disable值时，不查询接口
+    if (defaultDisableValue || !useRequest) {
+      return;
+    }
+    var _ref3 = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
+      defaultParams = _ref3.defaultParams,
+      manual = _ref3.manual;
+    if (manual) {
+      return;
+    }
+    fetchFunction.run(defaultParams);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options, defaultDisableValue]);
+  // disable默认值
+  if (defaultDisableValue) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      title: defaultDisableValue
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      disabled: true,
+      defaultValue: defaultDisableValue,
+      style: props === null || props === void 0 ? void 0 : props.style
+    }));
+  }
+  var transToLabel = function transToLabel(value) {
+    if (!Array.isArray(selectList) || !selectList.length) {
+      return viewEmpty;
+    }
+    var labelList = value.map(function (v) {
+      var option = selectList.find(function (item) {
+        if (labelInValue) {
+          return item[code] === v[code];
+        }
+        return item[code] === v;
+      });
+      return selectProps.showCodeName ? "".concat(option[code], "-").concat(option[label]) : option === null || option === void 0 ? void 0 : option[label];
+    });
+    var record = value.map(function (v) {
+      return selectList.find(function (item) {
+        if (labelInValue) {
+          return item[code] === v[code];
+        }
+        return item[code] === v;
+      });
+    }).filter(function (v) {
+      return !!v;
+    });
+    // 自定义option时，默认取optionRender的值
+    var _optionRender = function _optionRender() {
+      if (!record.length) {
+        return viewEmpty;
+      }
+      var arr = [];
+      record.forEach(function (item) {
+        arr.push(props.optionRender(item));
+      });
+      return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        direction: "vertical",
+        size: 4
+      }, arr.map(function (item) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: item
+        }, item);
+      }));
+    };
+    return (0, _lodash.isFunction)(props.optionRender) && record.length ? _optionRender() : labelList === null || labelList === void 0 ? void 0 : labelList.join('，');
+  };
+  if (isView || props.isView) {
+    if (Array.isArray(value)) {
+      return /*#__PURE__*/_react.default.createElement(_Container.default, {
+        tooltip: true,
+        viewEmpty: viewEmpty
+      }, transToLabel(value));
+    }
+    return /*#__PURE__*/_react.default.createElement(_Container.default, {
+      viewEmpty: viewEmpty
+    }, value ? transToLabel([value]) : null);
+  }
+  var TooltipOption = function TooltipOption(props) {
+    if (tooltip) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        placement: "topLeft",
+        title: /*#__PURE__*/_react.default.createElement("div", {
+          onMouseDown: function onMouseDown(e) {
+            return e.stopPropagation();
+          }
+        }, props.title)
+      }, props.children);
+    }
+    return props.children;
+  };
+  var handleChange = function handleChange(value, option) {
+    if (selectProps.mode && selectProps.mode === 'multiple') {
+      if (Array.isArray(option)) {
+        option.forEach(function (item) {
+          Object.assign(item, item.record);
+          delete item.record;
+          delete item.children;
+        });
+      }
+      if (labelInValue) {
+        onChange && onChange(getValueObject(value), option);
+      } else {
+        onChange && onChange(value, option);
+      }
+    } else if (!selectProps.mode && labelInValue) {
+      onChange(getValueObject(value), option);
+    } else {
+      onChange && onChange(value, option === null || option === void 0 ? void 0 : option.record);
+    }
+  };
+  /**
+   * 处理 labelInValue 模式下值的回填
+   * @returns
+   */
+  var transformValue = function transformValue() {
+    if (labelInValue && !selectProps.mode) {
+      if (!(0, _lodash.isObject)(value)) {
+        console.warn('labelInValue 模式下的值必须为对象');
+        return '';
+      }
+      return value === null || value === void 0 ? void 0 : value[code];
+    }
+    if (labelInValue && selectProps.mode) {
+      // 对传入的值做一些基础判断
+      if (!Array.isArray(value)) {
+        return [];
+      }
+      return value.map(function (item) {
+        return item === null || item === void 0 ? void 0 : item[code];
+      });
+    }
+    // Handling Jialuo's Extreme Demands
+    if (selectProps.mode && value === null) {
+      return undefined;
+    }
+    return value;
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    placeholder: "\u8BF7\u9009\u62E9",
+    allowClear: true,
+    showArrow: true,
+    onChange: handleChange,
+    optionLabelProp: "children" // 解决warning报错，添加默认值
+    ,
+    showSearch: true,
+    filterOption: (0, _lodash.isFunction)(_onSearch) ? false : function (input, option) {
+      var _option$children, _option$children$prop;
+      var value = (0, _lodash.isString)(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
+      return value.toLowerCase().includes(input.toLowerCase());
+    },
+    onSearch: function onSearch(value) {
+      _onSearch && _onSearch(value, (0, _objectSpread2.default)({}, fetchFunction));
+    }
+  }, (0, _lodash.omit)((0, _lodash.cloneDeep)(selectProps), ['isView', 'showCodeName'])), {}, {
+    value: transformValue()
+  }), Array.isArray(selectList) && selectList.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(Option, {
+      key: item[code],
+      value: item[code],
+      record: item,
+      disabled: !!item.disabled
+    }, /*#__PURE__*/_react.default.createElement(TooltipOption, {
+      title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
+      key: item[code]
+    }, OptionRender ? /*#__PURE__*/_react.default.createElement("span", {
+      title: OptionRender(item)
+    }, OptionRender(item)) : /*#__PURE__*/_react.default.createElement("span", {
+      title: "".concat(item[code], "-").concat(item[label])
+    }, selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label])));
+  }));
+};
+exports.ProSelect = ProSelect;
+var _default = /*#__PURE__*/(0, _react.forwardRef)(ProSelect);
+exports.default = _default;

package/lib/ProSelect/propsType.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import type { SelectProps } from 'antd';
+import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
+import { ProFormOtherProps } from '../ProForm/propsType';
+export interface DataOption {
+    label?: string;
+    value?: string;
+    [key: string]: any;
+}
+export interface PropSelectProps extends Omit<SelectProps, 'onSearch'> {
+    /** 是否查看模式 */
+    isView?: boolean;
+    /** 数据源 */
+    dataSource?: DataOption[];
+    /** 兼容 2.0 版本、3.0 使用view 模式 */
+    defaultDisableValue?: string;
+    /** 兼容 2.0 版本、3.0 使用 transformResponse */
+    updateDataSource?: (data: any, setSelectList: any) => void;
+    /** 格式化数据 */
+    transformResponse?: (data: any) => DataOption[];
+    /** 是否展示 tooltip、当 label 特别长的时候使用 */
+    tooltip?: boolean;
+    /** 是否展示 code-label 形式 */
+    showCodeName?: boolean;
+    /** 集成表单 form 的属性 */
+    otherProps?: ProFormOtherProps;
+    onSearch?: (value: string, useRequest: Result<any, any>) => void;
+    /** 自定义展示 */
+    optionRender?: (value: DataOption) => string | ReactNode;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+}
+export interface ProSelectAction {
+    /** 实例方法、根据 code ｜ code[] 批量获取数据 */
+    getValueObject: (code: string | string[], key?: string) => any;
+    /** 获取发生请求的 useRequest 的 ref */
+    useRequestRef: Result<any, any>;
+}

package/lib/ProSelect/propsType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProStep/components/Anchor/index.d.ts

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

package/lib/ProStep/components/Anchor/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../utils");
+var AnchorSvg = function AnchorSvg(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 1097 1024",
+    width: "18",
+    height: "18",
+    style: {
+      fill: color
+    }
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M570.514286 0a512 512 0 1 1 0 1024A512 512 0 0 1 570.514286 0z m0 73.142857a438.857143 438.857143 0 1 0 0 877.714286A438.857143 438.857143 0 0 0 570.514286 73.142857z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M570.514286 512m-365.714286 0a365.714286 365.714286 0 1 0 731.428571 0 365.714286 365.714286 0 1 0-731.428571 0Z"
+  }));
+};
+var SuccessSvg = function SuccessSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 1408 1024",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M496.64 906.24a113.92 113.92 0 0 0 161.28 0l691.2-691.2A113.92 113.92 0 1 0 1187.84 53.76L572.416 659.456 296.96 384a113.92 113.92 0 1 0-161.28 161.28l360.96 360.96z"
+  }));
+};
+var MenuItem = function MenuItem(props) {
+  var name = props.name,
+    code = props.code,
+    onOff = props.onOff,
+    isStart = props.isStart,
+    isEnd = props.isEnd,
+    isDisabled = props.isDisabled,
+    isCurrentStep = props.isCurrentStep,
+    isChecked = props.isChecked,
+    errorNum = props.errorNum,
+    currentNum = props.currentNum,
+    targetOffset = props.targetOffset;
+  var renderMenuIcon = function renderMenuIcon() {
+    if (isCurrentStep) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)('dot-icon', {
+          errored: !!errorNum,
+          disabled: isDisabled
+        })
+      }, currentNum);
+    }
+    var color;
+    !!errorNum && (color = '#ff5050');
+    isDisabled && (color = '#939599');
+    if (isStart) {
+      return /*#__PURE__*/_react.default.createElement(AnchorSvg, {
+        color: color
+      });
+    }
+    if (isEnd) {
+      return /*#__PURE__*/_react.default.createElement(AnchorSvg, {
+        color: isDisabled ? '#939599' : undefined
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('dot', {
+        errored: !!errorNum,
+        disabled: isDisabled
+      })
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('com-menu-item', {
+      errored: !!errorNum,
+      disabled: isDisabled,
+      current: isCurrentStep && onOff
+    }),
+    onClick: function onClick() {
+      (0, _utils.handleScroll)(code, {
+        targetOffset: targetOffset
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menu-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menu-icon"
+  }, renderMenuIcon()), onOff && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('menu-name', {
+      disabled: isDisabled
+    })
+  }, name)), !isDisabled && onOff && /*#__PURE__*/_react.default.createElement("div", {
+    className: "checked-status"
+  }, isChecked && /*#__PURE__*/_react.default.createElement(SuccessSvg, null), errorNum > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "errorDot"
+  }, /*#__PURE__*/_react.default.createElement("span", null, errorNum <= 3 ? errorNum : '!'))));
+};
+exports.MenuItem = MenuItem;
+var _default = MenuItem;
+exports.default = _default;

package/lib/ProStep/components/Item/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ({ id, children, ...restProps }: {
+    [x: string]: any;
+    id: any;
+    children: any;
+}) => JSX.Element;
+export default _default;

package/lib/ProStep/components/Item/index.js

@@ -0,0 +1,26 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _excluded = ["id", "children"];
+var _default = function _default(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useStep = (0, _index.useStep)(),
+    register = _useStep.register;
+  register((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    id: id
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id
+  }, children);
+};
+exports.default = _default;

package/lib/ProStep/components/Listener/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: ({ children, }: any) => React.DetailedReactHTMLElement<{
+    onClick: import("lodash").DebouncedFunc<() => Promise<void>>;
+}, HTMLElement>;
+export default _default;

package/lib/ProStep/components/Listener/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _lodash = require("lodash");
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _default = function _default(_ref) {
+  var children = _ref.children;
+  var _useStep = (0, _index.useStep)(),
+    notify = _useStep.notify;
+  return /*#__PURE__*/_react.default.cloneElement(children, {
+    onClick: (0, _lodash.throttle)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var values;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            localStorage.setItem('cache-pro-step', '');
+            _context.next = 3;
+            return notify === null || notify === void 0 ? void 0 : notify();
+          case 3:
+            values = _context.sent;
+            setTimeout(function () {
+              var localData = localStorage.getItem('cache-pro-step');
+              if (localData !== 'false') {
+                var _children$props, _children$props$onCli;
+                children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : (_children$props$onCli = _children$props.onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, values);
+              }
+            }, 0);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), 3000)
+  });
+};
+exports.default = _default;

package/lib/ProStep/components/Step/index.d.ts

@@ -0,0 +1,5 @@
+import { ProStepPropsType } from '../../propsType';
+export declare const Step: ({ fixedTop, dataSource, activeKey, errorCollection, style, targetOffset, }: ProStepPropsType & {
+    errorCollection: object;
+}) => JSX.Element;
+export default Step;

package/lib/ProStep/components/Step/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Step = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _reactSvg = require("react-svg");
+var _catalog = _interopRequireDefault(require("../../../assets/catalog.svg"));
+var _Anchor = _interopRequireDefault(require("../Anchor"));
+var Step = function Step(_ref) {
+  var fixedTop = _ref.fixedTop,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    activeKey = _ref.activeKey,
+    errorCollection = _ref.errorCollection,
+    style = _ref.style,
+    targetOffset = _ref.targetOffset;
+  var _useToggle = (0, _ahooks.useToggle)(),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    onOff = _useToggle2[0],
+    toggleOnOff = _useToggle2[1].toggle;
+  var options = (0, _react.useMemo)(function () {
+    var nextDataSource = (0, _lodash.cloneDeep)(dataSource);
+    var activeIndex;
+    if (activeKey) {
+      activeIndex = nextDataSource.findIndex(function (item) {
+        return item.code === activeKey;
+      });
+    } else {
+      activeIndex = nextDataSource.length - 1;
+    }
+    nextDataSource.forEach(function (item, index) {
+      var errorNum = errorCollection === null || errorCollection === void 0 ? void 0 : errorCollection[item.code];
+      item.isStart = index === 0;
+      item.isEnd = index === dataSource.length - 1;
+      item.isDisabled = index > activeIndex;
+      item.isCurrentStep = index === activeIndex;
+      item.isChecked = !errorNum;
+      item.currentNum = index + 1;
+      item.errorNum = errorNum;
+      item.targetOffset = targetOffset;
+    });
+    return nextDataSource;
+  }, [dataSource, activeKey, errorCollection]);
+  var handleMouseEvent = function handleMouseEvent() {
+    toggleOnOff();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-step ".concat(onOff ? 'open' : 'closed'),
+    style: (0, _objectSpread2.default)({
+      top: fixedTop !== null && fixedTop !== void 0 ? fixedTop : 0,
+      maxHeight: "calc(100vh - ".concat(fixedTop, "px)")
+    }, style),
+    onMouseEnter: handleMouseEvent,
+    onMouseLeave: handleMouseEvent
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "step-menu"
+  }, /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+    className: "menu-icon",
+    src: _catalog.default
+  }), onOff && /*#__PURE__*/_react.default.createElement("div", null, "\u76EE\u5F55")), options.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: item.code
+    }, /*#__PURE__*/_react.default.createElement(_Anchor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      onOff: onOff
+    })));
+  }));
+};
+exports.Step = Step;
+var _default = Step;
+exports.default = _default;

package/lib/ProStep/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ProStepPropsType } from './propsType';
+import './style/index.less';
+export declare const ProStepContext: React.Context<any>;
+export declare const useStep: () => any;
+declare const ProStep: {
+    ({ children, ...resetProps }: ProStepPropsType): JSX.Element;
+    useStep: () => any;
+    Item: ({ id, children, ...restProps }: {
+        [x: string]: any;
+        id: any;
+        children: any;
+    }) => JSX.Element;
+    Listener: ({ children, }: any) => React.DetailedReactHTMLElement<{
+        onClick: import("lodash").DebouncedFunc<() => Promise<void>>;
+    }, HTMLElement>;
+};
+export default ProStep;