@zat-design/sisyphus-react 3.0.13

package/es/ProSelect/index.js

@@ -0,0 +1,278 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+var _excluded = ["dataSource", "defaultDisableValue", "optionRender", "onChange", "useRequest", "updateDataSource", "transformResponse", "fieldNames", "tooltip", "onSearch", "otherProps", "labelInValue"];
+import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
+import React, { useImperativeHandle, useState, forwardRef } from 'react';
+import { isFunction, isObject, isString, omit, cloneDeep } from 'lodash';
+import { useProConfig } from 'zat-design-pro-component';
+import Container from '../ProForm/components/Container';
+var Option = _Select.Option;
+export var ProSelect = function ProSelect(props, ref) {
+  var _ref = 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 = _objectWithoutProperties(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 = useState(dataSource || []),
+    _useState2 = _slicedToArray(_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) {
+      _message.error(msg);
+      return;
+    }
+    setSelectList(data || []);
+  };
+  var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
+    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;
+    });
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      getValueObject: getValueObject,
+      useRequestRef: fetchFunction
+    };
+  });
+  useDeepCompareEffect(function () {
+    setSelectList(dataSource);
+  }, [dataSource]);
+  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.createElement("span", {
+      title: defaultDisableValue
+    }, /*#__PURE__*/React.createElement(_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.createElement(_Space, {
+        direction: "vertical",
+        size: 4
+      }, arr.map(function (item) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: item
+        }, item);
+      }));
+    };
+    return 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.createElement(Container, {
+        tooltip: true,
+        viewEmpty: viewEmpty
+      }, transToLabel(value));
+    }
+    return /*#__PURE__*/React.createElement(Container, {
+      viewEmpty: viewEmpty
+    }, value ? transToLabel([value]) : null);
+  }
+  var TooltipOption = function TooltipOption(props) {
+    if (tooltip) {
+      return /*#__PURE__*/React.createElement(_Tooltip, {
+        placement: "topLeft",
+        title: /*#__PURE__*/React.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 (!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.createElement(_Select, _objectSpread(_objectSpread({
+    placeholder: "\u8BF7\u9009\u62E9",
+    allowClear: true,
+    showArrow: true,
+    onChange: handleChange,
+    optionLabelProp: "children" // 解决warning报错，添加默认值
+    ,
+    showSearch: true,
+    filterOption: isFunction(_onSearch) ? false : function (input, option) {
+      var _option$children, _option$children$prop;
+      var value = 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, _objectSpread({}, fetchFunction));
+    }
+  }, omit(cloneDeep(selectProps), ['isView', 'showCodeName'])), {}, {
+    value: transformValue()
+  }), Array.isArray(selectList) && selectList.map(function (item) {
+    return /*#__PURE__*/React.createElement(Option, {
+      key: item[code],
+      value: item[code],
+      record: item,
+      disabled: !!item.disabled
+    }, /*#__PURE__*/React.createElement(TooltipOption, {
+      title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
+      key: item[code]
+    }, OptionRender ? /*#__PURE__*/React.createElement("span", {
+      title: OptionRender(item)
+    }, OptionRender(item)) : /*#__PURE__*/React.createElement("span", {
+      title: "".concat(item[code], "-").concat(item[label])
+    }, selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label])));
+  }));
+};
+export default /*#__PURE__*/forwardRef(ProSelect);

package/es/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/es/ProSelect/propsType.js

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

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

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

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import cn from 'classnames';
+import { handleScroll } from '../../utils';
+var AnchorSvg = function AnchorSvg(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1097 1024",
+    width: "18",
+    height: "18",
+    style: {
+      fill: color
+    }
+  }, /*#__PURE__*/React.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.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.createElement("svg", {
+    viewBox: "0 0 1408 1024",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/React.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"
+  }));
+};
+export 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.createElement("span", {
+        className: cn('dot-icon', {
+          errored: !!errorNum,
+          disabled: isDisabled
+        })
+      }, currentNum);
+    }
+    var color;
+    !!errorNum && (color = '#ff5050');
+    isDisabled && (color = '#939599');
+    if (isStart) {
+      return /*#__PURE__*/React.createElement(AnchorSvg, {
+        color: color
+      });
+    }
+    if (isEnd) {
+      return /*#__PURE__*/React.createElement(AnchorSvg, {
+        color: isDisabled ? '#939599' : undefined
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('dot', {
+        errored: !!errorNum,
+        disabled: isDisabled
+      })
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('com-menu-item', {
+      errored: !!errorNum,
+      disabled: isDisabled,
+      current: isCurrentStep && onOff
+    }),
+    onClick: function onClick() {
+      handleScroll(code, {
+        targetOffset: targetOffset
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-icon"
+  }, renderMenuIcon()), onOff && /*#__PURE__*/React.createElement("div", {
+    className: cn('menu-name', {
+      disabled: isDisabled
+    })
+  }, name)), !isDisabled && onOff && /*#__PURE__*/React.createElement("div", {
+    className: "checked-status"
+  }, isChecked && /*#__PURE__*/React.createElement(SuccessSvg, null), errorNum > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "errorDot"
+  }, /*#__PURE__*/React.createElement("span", null, errorNum <= 3 ? errorNum : '!'))));
+};
+export default MenuItem;

package/es/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/es/ProStep/components/Item/index.js

@@ -0,0 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
+import React from 'react';
+import { useStep } from '../../index';
+export default (function (_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useStep = useStep(),
+    register = _useStep.register;
+  register(_objectSpread(_objectSpread({}, restProps), {}, {
+    id: id
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id
+  }, children);
+});

package/es/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/es/ProStep/components/Listener/index.js

@@ -0,0 +1,35 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { throttle } from 'lodash';
+import React from 'react';
+import { useStep } from '../../index';
+export default (function (_ref) {
+  var children = _ref.children;
+  var _useStep = useStep(),
+    notify = _useStep.notify;
+  return /*#__PURE__*/React.cloneElement(children, {
+    onClick: throttle( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var values;
+      return _regeneratorRuntime().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)
+  });
+});

package/es/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/es/ProStep/components/Step/index.js

@@ -0,0 +1,68 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo } from 'react';
+import { cloneDeep } from 'lodash';
+import { useToggle } from 'ahooks';
+import { ReactSVG } from 'react-svg';
+import catalogSvg from '../../../assets/catalog.svg';
+import Anchor from '../Anchor';
+export 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 = useToggle(),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    onOff = _useToggle2[0],
+    toggleOnOff = _useToggle2[1].toggle;
+  var options = useMemo(function () {
+    var nextDataSource = 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.createElement("div", {
+    className: "pro-step ".concat(onOff ? 'open' : 'closed'),
+    style: _objectSpread({
+      top: fixedTop !== null && fixedTop !== void 0 ? fixedTop : 0,
+      maxHeight: "calc(100vh - ".concat(fixedTop, "px)")
+    }, style),
+    onMouseEnter: handleMouseEvent,
+    onMouseLeave: handleMouseEvent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "step-menu"
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "menu-icon",
+    src: catalogSvg
+  }), onOff && /*#__PURE__*/React.createElement("div", null, "\u76EE\u5F55")), options.map(function (item) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: item.code
+    }, /*#__PURE__*/React.createElement(Anchor, _objectSpread(_objectSpread({}, item), {}, {
+      onOff: onOff
+    })));
+  }));
+};
+export default Step;

package/es/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;