@zat-design/sisyphus-react 3.0.13

package/lib/ProDrawerForm/style/index.less

@@ -0,0 +1,125 @@
+.pro-drawer {
+  .pro-drawer-close {
+    position: absolute;
+    top: 6px;
+    left: -37px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 38px;
+    color: #fff;
+    cursor: pointer;
+    .close-icon {
+      position: relative;
+      left: 4px;
+      z-index: 1;
+      color: #343434;
+      font-size: 16px;
+      transform: translateZ(100px);
+      &:hover {
+        color: var(--zaui-brand);
+      }
+    }
+  }
+
+  .pro-drawer-close::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    border-radius: 4px 0px 0px 4px;
+    transform: perspective(0.15em) rotateY(-2deg);
+    content: '';
+  }
+
+  .pro-drawer-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    color: var(--zaui-text);
+    font-weight: 600;
+    font-size: var(--zaui-font-size-xxl);
+    background-color: var(--zaui-base-bg);
+  }
+
+  .pro-drawer-scrolling {
+    z-index: 1;
+    box-shadow: -12px 15px 15px -18px #d8d8d8;
+  }
+
+  .pro-drawer-content {
+    flex: 1;
+    width: 100%;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    padding-top: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .pro-drawer-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    background-color: var(--zaui-base-bg);
+    box-shadow: 8px 2px 8px 0 rgba(216, 216, 216, 1);
+
+    button {
+      margin-right: var(--zaui-space-size-sm);
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .ant-drawer-body {
+    height: 100vh;
+    padding: 0;
+    overflow-y: hidden;
+  }
+
+  .ant-drawer-content {
+    position: static;
+  }
+
+  .ant-drawer-close {
+    display: none;
+  }
+}
+
+.pro-modal {
+  .ant-modal-header {
+    padding: var(--zaui-space-size-md, 16px);
+    border-bottom: none;
+  }
+
+  .ant-modal-footer {
+    padding: var(--zaui-space-size-md, 16px);
+    border-top: none;
+  }
+
+  .ant-modal-body {
+    max-height: 450px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    padding-top: 0;
+    overflow: auto;
+  }
+
+}
+
+.pro-modal-scrolling {
+  z-index: 1;
+
+  .ant-modal-header {
+    box-shadow: -12px 15px 15px -18px #d8d8d8;
+  }
+}

package/lib/ProDrawerForm/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { DrawerSizePropsType } from '../propsType';
+/**
+ * 将枚举值转成数值px，暴露枚举，隐藏真实数值，暂时不让用户自定义
+ * @param size 设计规范的三个尺寸  460 960 1200 对应 'small' | 'middle' | 'large'
+ */
+export declare const transformBySize: (size: DrawerSizePropsType) => number;

package/lib/ProDrawerForm/utils/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformBySize = void 0;
+/**
+ * 将枚举值转成数值px，暴露枚举，隐藏真实数值，暂时不让用户自定义
+ * @param size 设计规范的三个尺寸  460 960 1200 对应 'small' | 'middle' | 'large'
+ */
+var transformBySize = function transformBySize(size) {
+  switch (size) {
+    case 'small':
+      return 460;
+    case 'middle':
+      return 960;
+    case 'large':
+      return 1200;
+    default:
+      return 960;
+  }
+};
+exports.transformBySize = transformBySize;

package/lib/ProEditLabel/components/RenderForm.d.ts

@@ -0,0 +1,3 @@
+declare const RenderForm: ({ type, onPopChangeHandle, fieldProps, size, value, label, viewEmpty, ...props }: any) => JSX.Element;
+export declare const getNameByCode: ({ dataSource, transform, value }: any) => any;
+export default RenderForm;

package/lib/ProEditLabel/components/RenderForm.js

@@ -0,0 +1,75 @@
+"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.getNameByCode = 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 componentMap = _interopRequireWildcard(require("../../ProForm/components"));
+var _excluded = ["type", "onPopChangeHandle", "fieldProps", "size", "value", "label", "viewEmpty"];
+var getDataSource = function getDataSource(_ref) {
+  var dataSource = _ref.dataSource,
+    transform = _ref.transform;
+  if (transform) {
+    var result;
+    try {
+      result = transform();
+    } catch (error) {
+      result = dataSource;
+      throw new Error(error);
+    }
+    return transform();
+  }
+  return dataSource;
+};
+var RenderForm = function RenderForm(_ref2) {
+  var _componentMap$_type;
+  var _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'Input' : _ref2$type,
+    onPopChangeHandle = _ref2.onPopChangeHandle,
+    fieldProps = _ref2.fieldProps,
+    size = _ref2.size,
+    value = _ref2.value,
+    label = _ref2.label,
+    viewEmpty = _ref2.viewEmpty,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _type = type[0].toUpperCase() + type.substr(1);
+  var Component = (_componentMap$_type = componentMap[_type]) !== null && _componentMap$_type !== void 0 ? _componentMap$_type : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    size: size,
+    otherProps: {
+      isView: props.isView,
+      viewEmpty: viewEmpty
+    }
+  }, fieldProps), props), {}, {
+    value: value,
+    onChange: function onChange(e) {
+      var value = ['Input', 'TextArea'].includes(type || 'Input') ? e.target.value : e;
+      props.onChange(e);
+      onPopChangeHandle && onPopChangeHandle(value);
+    }
+  }));
+};
+var getNameByCode = function getNameByCode(_ref3) {
+  var _newDataSource$find;
+  var dataSource = _ref3.dataSource,
+    transform = _ref3.transform,
+    value = _ref3.value;
+  var newDataSource = getDataSource({
+    dataSource: dataSource,
+    transform: transform
+  });
+  if (!Array.isArray(newDataSource) || !newDataSource.length) {
+    return '-';
+  }
+  return ((_newDataSource$find = newDataSource.find(function (item) {
+    return item.code === value;
+  })) === null || _newDataSource$find === void 0 ? void 0 : _newDataSource$find.name) || '-';
+};
+exports.getNameByCode = getNameByCode;
+var _default = RenderForm;
+exports.default = _default;

package/lib/ProEditLabel/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ContainerProps, LabelProps, PopupConfirmProps } from './propsType';
+declare const ProEditLabel: FC<LabelProps & PopupConfirmProps & ContainerProps>;
+export default ProEditLabel;

package/lib/ProEditLabel/index.js

@@ -0,0 +1,324 @@
+"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 = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _RenderForm = _interopRequireWildcard(require("./components/RenderForm"));
+var _index = require("./utils/index");
+var _excluded = ["open", "disabled", "onOpenChange", "onFinish", "onConfirm", "trigger", "mode", "className", "size", "popupProps", "style", "viewEmpty", "children"];
+var ProEditLabel = function ProEditLabel(_ref) {
+  var _classnames;
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _onOpenChange = _ref.onOpenChange,
+    onFinish = _ref.onFinish,
+    onConfirm = _ref.onConfirm,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'current' : _ref$mode,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    popupProps = _ref.popupProps,
+    style = _ref.style,
+    _ref$viewEmpty = _ref.viewEmpty,
+    viewEmpty = _ref$viewEmpty === void 0 ? '-' : _ref$viewEmpty,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useSetState = (0, _ahooks.useSetState)({
+      popValue: props.value || '',
+      confirmValue: props.value || '' // 确认后value
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    popValue = _useSetState2$.popValue,
+    confirmValue = _useSetState2$.confirmValue,
+    setState = _useSetState2[1];
+  var _useToggle = (0, _ahooks.useToggle)(open),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    status = _useToggle2[0],
+    toggleStatus = _useToggle2[1].toggle;
+  var _Form$useForm = _antd.Form.useForm(),
+    _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var inputRef = (0, _react.useRef)(null);
+  var formItemProps = (0, _objectSpread2.default)({
+    colon: false,
+    labelAlign: 'left',
+    name: (popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input'
+  }, (0, _lodash.omit)(popupProps, ['fieldProps', 'type', 'trim']));
+  var onPress = function onPress(e) {
+    var element = e.target;
+    if (e.key === 'Enter') {
+      onFinish && onFinish(element.value);
+      onConfirm && onConfirm(element.value);
+      toggleStatus();
+    }
+  };
+  var editHandle = function editHandle() {
+    var _inputRef$current;
+    toggleStatus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    if (mode === 'popup') {
+      form.setFieldValue(formItemProps.name, props.value);
+      // 弹窗同步最新value数据，解决Popconfirm空白处关闭数据不同步问题
+      setState({
+        popValue: confirmValue
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var _inputRef$current2;
+    status && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
+  }, [status]);
+  (0, _react.useEffect)(function () {
+    _onOpenChange && _onOpenChange(status);
+  }, [_onOpenChange, status]);
+  (0, _react.useEffect)(function () {
+    if (popValue !== confirmValue) {
+      setState({
+        popValue: confirmValue
+      });
+    }
+  }, [confirmValue]);
+  (0, _react.useEffect)(function () {
+    setState({
+      confirmValue: props.value,
+      popValue: props.value
+    });
+  }, [props.value]);
+  var cls = (0, _classnames2.default)((_classnames = {
+    'pro-edit-label': true
+  }, (0, _defineProperty2.default)(_classnames, "trigger-".concat(trigger), trigger), (0, _defineProperty2.default)(_classnames, 'pro-edit-label-small', size === 'small'), (0, _defineProperty2.default)(_classnames, 'pro-edit-label-middle', size === 'middle'), (0, _defineProperty2.default)(_classnames, 'pro-edit-label-large', size === 'large'), (0, _defineProperty2.default)(_classnames, "".concat(className), className), _classnames));
+  /**
+   * pop确认回调
+   */
+  var onConfirmHandle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var res, value;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return form.validateFields();
+          case 2:
+            res = _context.sent;
+            value = res[formItemProps.name];
+            _context.prev = 4;
+            _context.t0 = onFinish;
+            if (!_context.t0) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 9;
+            return onFinish(value);
+          case 9:
+            _context.t1 = onConfirm;
+            if (!_context.t1) {
+              _context.next = 13;
+              break;
+            }
+            _context.next = 13;
+            return onConfirm(value);
+          case 13:
+            _context.next = 15;
+            return setState({
+              confirmValue: value,
+              popValue: value
+            });
+          case 15:
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t2 = _context["catch"](4);
+            return _context.abrupt("return", Promise.reject());
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 17]]);
+    }));
+    return function onConfirmHandle() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  /**
+   * pop取消回调
+   */
+  var onCancelHandle = function onCancelHandle() {
+    form.setFieldValue(formItemProps.name, props.value);
+    setState({
+      popValue: props.value
+    });
+  };
+  /**
+   * 根据 required 自动添加 rules
+   */
+  var internalRule = (0, _react.useMemo)(function () {
+    if (!popupProps) {
+      return null;
+    }
+    var required = formItemProps.required,
+      rules = formItemProps.rules;
+    var result = {
+      rules: rules
+    };
+    var message = ['Select', 'ProSelect', 'ProEnum', 'DatePicker', 'ProAddressBar', 'ProTimeLimit'].includes(popupProps.type) ? "\u8BF7\u9009\u62E9".concat(formItemProps.label || '') : "\u8BF7\u8F93\u5165".concat(formItemProps.label || '');
+    var rule = {
+      required: required,
+      message: message
+    };
+    var _rules;
+    if (required === true) {
+      if (Array.isArray(rules)) {
+        _rules = rules.filter(function (item) {
+          return !item.required;
+        });
+      }
+      result.rules = rules ? [].concat((0, _toConsumableArray2.default)(_rules), [rule]) : [rule];
+    }
+    if (Array.isArray(rules)) {
+      _rules = rules.map(function (item) {
+        if (item.required && !item.message) {
+          item.message = message;
+        }
+        return item;
+      });
+      result.rules = _rules;
+    }
+    return result;
+  }, [formItemProps.rules, formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.required]);
+  var formCls = (0, _classnames2.default)({
+    'pro-form': true,
+    'pro-form-no-label': !(popupProps === null || popupProps === void 0 ? void 0 : popupProps.label)
+  });
+  (0, _react.useEffect)(function () {
+    // 弹窗模式使用form赋值
+    if (mode === 'popup') {
+      form.setFieldValue(formItemProps.name, props.value);
+    }
+  }, [props.value, formItemProps.name]);
+  var renderPopTitle = function renderPopTitle() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (popupProps === null || popupProps === void 0 ? void 0 : popupProps.title) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "pro-edit-label-title"
+    }, popupProps === null || popupProps === void 0 ? void 0 : popupProps.title), (popupProps === null || popupProps === void 0 ? void 0 : popupProps.tip) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "pro-edit-label-tip"
+    }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+      align: "start"
+    }, /*#__PURE__*/_react.default.createElement(_icons.InfoCircleOutlined, null), popupProps === null || popupProps === void 0 ? void 0 : popupProps.tip)), /*#__PURE__*/_react.default.createElement(_antd.Row, {
+      align: "middle",
+      className: "pro-edit-label-popup"
+    }, /*#__PURE__*/_react.default.createElement(_antd.Form, {
+      form: form,
+      className: formCls
+    }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _index.isTrim)(props.type, popupProps === null || popupProps === void 0 ? void 0 : popupProps.trim)), formItemProps), internalRule), {}, {
+      label: /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          width: popupProps === null || popupProps === void 0 ? void 0 : popupProps.labelWidth
+        }
+      }, popupProps === null || popupProps === void 0 ? void 0 : popupProps.label)
+    }), /*#__PURE__*/_react.default.createElement(_RenderForm.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: props.type,
+      viewEmpty: viewEmpty
+    }, popupProps), {}, {
+      size: size,
+      onPopChangeHandle: props === null || props === void 0 ? void 0 : props.onChange
+    }))))));
+  };
+  /**
+   * 渲染可编辑label
+   * @returns
+   */
+  var renderProEditLabel = function renderProEditLabel() {
+    var TextNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: cls,
+      style: style
+    }, Array.isArray(props.dataSource) ? (0, _RenderForm.getNameByCode)({
+      dataSource: props.dataSource,
+      transform: props.transform,
+      value: props.value
+    }) : props.value, !disabled && /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, {
+      onClick: editHandle
+    }));
+    if (disabled) {
+      if ( /*#__PURE__*/_react.default.isValidElement(children)) {
+        return children;
+      }
+      return TextNode;
+    }
+    // 当前页编辑模式
+    if (mode === 'current') {
+      if (status) {
+        return /*#__PURE__*/_react.default.createElement(_antd.Input, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          ref: inputRef,
+          size: size,
+          onBlur: function onBlur(e) {
+            toggleStatus();
+            onFinish && onFinish(e.target.value);
+            onConfirm && onConfirm(e.target.value);
+          },
+          onKeyDown: onPress
+        }, props), {}, {
+          onChange: function onChange(e) {
+            props.onChange && props.onChange(e.target.value);
+          }
+        }));
+      }
+      return TextNode;
+    }
+    // 弹窗编辑模式
+    if (mode === 'popup') {
+      // 查看时内容渲染
+      var labelRender = function labelRender() {
+        if ( /*#__PURE__*/_react.default.isValidElement(children)) {
+          return children;
+        }
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: cls
+        }, /*#__PURE__*/_react.default.createElement(_RenderForm.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+          type: props.type,
+          viewEmpty: viewEmpty
+        }, popupProps), {}, {
+          size: size,
+          value: confirmValue,
+          isView: true
+        })), /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, {
+          onClick: editHandle
+        }));
+      };
+      return /*#__PURE__*/_react.default.createElement(_antd.Popconfirm, {
+        icon: null,
+        placement: "topRight",
+        title: renderPopTitle(),
+        onConfirm: onConfirmHandle,
+        onCancel: onCancelHandle,
+        onOpenChange: function onOpenChange(open) {
+          _onOpenChange && _onOpenChange(open);
+        }
+      }, labelRender());
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderProEditLabel());
+};
+var _default = ProEditLabel;
+exports.default = _default;

package/lib/ProEditLabel/propsType.d.ts

@@ -0,0 +1,43 @@
+import { InputProps } from 'antd/lib/input';
+import { PopconfirmProps } from 'antd/lib/popconfirm';
+import React from 'react';
+export interface ContainerProps {
+    trigger?: 'click' | 'hover';
+    size?: 'small' | 'middle' | 'large';
+    mode?: 'popup' | 'current';
+    type?: 'input' | 'select';
+}
+export interface StateProps {
+    popValue?: string;
+    confirmValue?: string;
+}
+export interface PopupProps {
+    type?: string;
+    label?: string | React.ReactNode;
+    title?: string | React.ReactNode;
+    tip?: string | React.ReactNode;
+    trim?: boolean;
+    labelWidth?: string | number;
+    fieldProps?: any;
+    [key: string]: any;
+}
+export interface LabelProps extends InputProps {
+    visible?: boolean;
+    open?: boolean;
+    onVisibleChange?: (open: boolean) => void;
+    onChange?: (value: React.ChangeEvent<HTMLInputElement>) => void;
+    editable?: boolean;
+    onEdit?: () => void;
+}
+export interface PopupConfirmProps extends Partial<PopconfirmProps> {
+    popupProps?: PopupProps;
+    viewEmpty?: '-';
+    onConfirm?: (e?: any) => void;
+    onFinish?: (e?: any) => void;
+    tip?: string | React.ReactNode;
+    dataSource?: any[];
+    transform?: () => any[];
+    title?: string | React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
+}

package/lib/ProEditLabel/propsType.js

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