@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/lib/ProEditLabel/index.js

@@ -1,159 +1,246 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProEditLabel/index.tsx
-var ProEditLabel_exports = {};
-__export(ProEditLabel_exports, {
-  default: () => ProEditLabel_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ProEditLabel_exports);
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
-var import_ahooks = require("ahooks");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_lodash = require("lodash");
-var import_RenderProForm = __toESM(require("./components/RenderProForm"));
-var import_utils = require("./utils");
-var ProEditLabel = ({
-  open = false,
-  disabled = false,
-  onOpenChange,
-  onFinish,
-  onConfirm,
-  trigger = "click",
-  mode = "current",
-  className,
-  size = "middle",
-  popupProps,
-  style,
-  viewEmpty = "-",
-  children,
-  form: OriginForm,
-  ...props
-}) => {
-  const [{ confirmValue }, setState] = (0, import_ahooks.useSetState)({
-    popValue: props.value || "",
-    // 临时value
-    confirmValue: props.value || ""
-    // 确认后value
-  });
-  const [status, { toggle: toggleStatus }] = (0, import_ahooks.useToggle)(open);
-  const [form] = import_antd.Form.useForm(OriginForm);
-  const [viewForm] = import_antd.Form.useForm();
-  const inputRef = (0, import_react.useRef)(null);
-  const onPress = (e) => {
-    const element = e.target;
-    if (e.key === "Enter") {
+exports.default = void 0;
+require("antd/es/popconfirm/style");
+var _popconfirm = _interopRequireDefault(require("antd/es/popconfirm"));
+require("antd/es/input/style");
+var _input = _interopRequireDefault(require("antd/es/input"));
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+require("antd/es/form/style");
+var _form = _interopRequireDefault(require("antd/es/form"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _icons = require("@ant-design/icons");
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _RenderProForm = _interopRequireDefault(require("./components/RenderProForm"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["open", "disabled", "onOpenChange", "onFinish", "onConfirm", "trigger", "mode", "className", "size", "popupProps", "style", "viewEmpty", "children", "form"];
+var ProEditLabel = _ref => {
+  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,
+    OriginForm = _ref.form,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useSetState = (0, _ahooks.useSetState)({
+      popValue: props.value || '',
+      // 临时value
+      confirmValue: props.value || '' // 确认后value
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    confirmValue = _useSetState2[0].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 = _form.default.useForm(OriginForm),
+    _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _Form$useForm3 = _form.default.useForm(),
+    _Form$useForm4 = (0, _slicedToArray2.default)(_Form$useForm3, 1),
+    viewForm = _Form$useForm4[0];
+  var inputRef = (0, _react.useRef)(null);
+  var onPress = e => {
+    var element = e.target;
+    if (e.key === 'Enter') {
       onFinish && onFinish(element.value);
       onConfirm && onConfirm(element.value);
       toggleStatus();
     }
   };
-  const editHandle = () => {
-    var _a;
+  var editHandle = () => {
+    var _inputRef$current;
     toggleStatus();
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    if (mode === "popup") {
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    if (mode === 'popup') {
+      // 兼容老写法
       if (!popupProps.columns) {
-        form.setFieldValue((popupProps == null ? void 0 : popupProps.type) || "Input", confirmValue);
+        form.setFieldValue((popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input', confirmValue);
       } else {
         form.setFieldsValue(confirmValue || {});
       }
-      setState({ popValue: confirmValue });
+      // 弹窗同步最新value数据，解决Popconfirm空白处关闭数据不同步问题
+      setState({
+        popValue: confirmValue
+      });
     }
   };
-  (0, import_react.useEffect)(() => {
-    var _a;
-    status && ((_a = inputRef.current) == null ? void 0 : _a.focus());
+  (0, _react.useEffect)(() => {
+    var _inputRef$current2;
+    status && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
   }, [status]);
-  (0, import_react.useEffect)(() => {
-    onOpenChange && onOpenChange(status);
-  }, [onOpenChange, status]);
-  (0, import_react.useEffect)(() => {
-    setState({ confirmValue: props.value, popValue: props.value });
+  (0, _react.useEffect)(() => {
+    _onOpenChange && _onOpenChange(status);
+  }, [_onOpenChange, status]);
+  (0, _react.useEffect)(() => {
+    setState({
+      confirmValue: props.value,
+      popValue: props.value
+    });
   }, [props.value]);
-  (0, import_react.useEffect)(() => {
-    if (mode === "popup" && props.value) {
+
+  // 初始化同步数据或者同步外部数据源
+  (0, _react.useEffect)(() => {
+    // 弹窗模式使用form赋值
+    if (mode === 'popup' && props.value) {
+      // 兼容老写法
       if (!popupProps.columns) {
-        form.setFieldValue((popupProps == null ? void 0 : popupProps.type) || "Input", props.value);
-        viewForm.setFieldValue((popupProps == null ? void 0 : popupProps.type) || "Input", props.value);
+        form.setFieldValue((popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input', props.value);
+        // 文本模式初始化赋值
+        viewForm.setFieldValue((popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input', props.value);
       } else {
-        form.setFieldsValue((0, import_utils.matchFormValue)(props.value, popupProps.columns) || {});
-        viewForm.setFieldsValue((0, import_utils.matchFormValue)(props.value, popupProps.columns) || {});
+        form.setFieldsValue((0, _utils.matchFormValue)(props.value, popupProps.columns) || {});
+        // 文本模式初始化赋值
+        viewForm.setFieldsValue((0, _utils.matchFormValue)(props.value, popupProps.columns) || {});
       }
     }
   }, [props.value, mode]);
-  (0, import_react.useEffect)(() => {
-    if (mode === "popup" && confirmValue !== props.value) {
+
+  // 文本模式同步
+  (0, _react.useEffect)(() => {
+    // 弹窗模式使用form赋值
+    if (mode === 'popup' && confirmValue !== props.value) {
+      // 兼容老写法
       if (!popupProps.columns) {
-        viewForm.setFieldValue((popupProps == null ? void 0 : popupProps.type) || "Input", confirmValue);
+        viewForm.setFieldValue((popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input', confirmValue);
       } else {
-        viewForm.setFieldsValue((0, import_utils.matchFormValue)(confirmValue, popupProps.columns) || {});
+        viewForm.setFieldsValue((0, _utils.matchFormValue)(confirmValue, popupProps.columns) || {});
       }
     }
   }, [confirmValue, mode]);
-  const cls = (0, import_classnames.default)({
-    "pro-edit-label": true,
+  var cls = (0, _classnames.default)({
+    'pro-edit-label': true,
     [`trigger-${trigger}`]: trigger,
-    "pro-edit-label-small": size === "small",
-    "pro-edit-label-middle": size === "middle",
+    'pro-edit-label-small': size === 'small',
+    'pro-edit-label-middle': size === 'middle',
     // 默认middle
-    "pro-edit-label-large": size === "large",
+    'pro-edit-label-large': size === 'large',
     [`${className}`]: className
   });
-  const onConfirmHandle = async () => {
-    const res = await form.validateFields();
-    let value;
-    if (!popupProps.columns) {
-      value = res[(popupProps == null ? void 0 : popupProps.type) || "Input"];
-    }
-    value = res;
-    try {
-      onFinish && await onFinish(value);
-      onConfirm && await onConfirm(value);
-      await setState({ confirmValue: value, popValue: value });
-    } catch (error) {
-      return Promise.reject();
-    }
-  };
-  const onCancelHandle = () => {
+
+  /**
+   * 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;
+            // 兼容老写法
+            if (!popupProps.columns) {
+              value = res[(popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input'];
+            }
+            value = res;
+            _context.prev = 5;
+            _context.t0 = onFinish;
+            if (!_context.t0) {
+              _context.next = 10;
+              break;
+            }
+            _context.next = 10;
+            return onFinish(value);
+          case 10:
+            _context.t1 = onConfirm;
+            if (!_context.t1) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 14;
+            return onConfirm(value);
+          case 14:
+            _context.next = 16;
+            return setState({
+              confirmValue: value,
+              popValue: value
+            });
+          case 16:
+            _context.next = 21;
+            break;
+          case 18:
+            _context.prev = 18;
+            _context.t2 = _context["catch"](5);
+            return _context.abrupt("return", Promise.reject());
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 18]]);
+    }));
+    return function onConfirmHandle() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  /**
+   * pop取消回调
+   */
+  var onCancelHandle = () => {
+    // 兼容老写法
     if (!popupProps.columns) {
-      form.setFieldValue((popupProps == null ? void 0 : popupProps.type) || "Input", props.value);
+      form.setFieldValue((popupProps === null || popupProps === void 0 ? void 0 : popupProps.type) || 'Input', props.value);
     } else {
-      form.setFieldsValue((0, import_utils.matchFormValue)(props.value, popupProps.columns) || {});
+      form.setFieldsValue((0, _utils.matchFormValue)(props.value, popupProps.columns) || {});
     }
-    setState({ popValue: props.value });
+    setState({
+      popValue: props.value
+    });
   };
-  const renderProEditLabel = () => {
-    const TextNode = /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { align: "start" }, mode === "current" ? props.value : /* @__PURE__ */ import_react.default.createElement(import_RenderProForm.default, { value: confirmValue, isView: true, form: viewForm, ...popupProps }), !disabled && /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, { onClick: editHandle })));
+
+  /**
+   * 渲染可编辑label
+   * @returns
+   */
+  var renderProEditLabel = () => {
+    var TextNode = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cls,
+      style: style,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
+        align: "start",
+        children: [mode === 'current' ? props.value : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderProForm.default, (0, _objectSpread2.default)({
+          value: confirmValue,
+          isView: true,
+          form: viewForm
+        }, popupProps)), !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditOutlined, {
+          onClick: editHandle
+        })]
+      })
+    });
     if (disabled) {
-      if (import_react.default.isValidElement(children)) {
+      if ( /*#__PURE__*/_react.default.isValidElement(children)) {
         return children;
       }
       if (props.value && !popupProps) {
@@ -161,73 +248,59 @@ var ProEditLabel = ({
       }
       return TextNode;
     }
-    if (mode === "current") {
+    // 当前页编辑模式
+    if (mode === 'current') {
       if (status) {
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_antd.Input,
-          {
-            ref: inputRef,
-            size,
-            onBlur: (e) => {
-              toggleStatus();
-              onFinish && onFinish(e.target.value);
-              onConfirm && onConfirm(e.target.value);
-            },
-            onKeyDown: onPress,
-            ...props,
-            onChange: (e) => {
-              props.onChange && props.onChange(e.target.value);
-            }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          ref: inputRef,
+          size: size,
+          onBlur: e => {
+            toggleStatus();
+            onFinish && onFinish(e.target.value);
+            onConfirm && onConfirm(e.target.value);
+          },
+          onKeyDown: onPress
+        }, props), {}, {
+          onChange: e => {
+            props.onChange && props.onChange(e.target.value);
           }
-        );
+        }));
       }
       return TextNode;
     }
-    if (mode === "popup") {
-      const labelRender = () => {
-        if (import_react.default.isValidElement(children)) {
+    // 弹窗编辑模式
+    if (mode === 'popup') {
+      // 查看时内容渲染
+      var labelRender = () => {
+        if ( /*#__PURE__*/_react.default.isValidElement(children)) {
           return children;
         }
         return TextNode;
       };
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Popconfirm,
-        {
-          classNames: {
-            root: "pro-edit-label-popconfirm"
-          },
-          icon: null,
-          destroyOnHidden: true,
-          title: /* @__PURE__ */ import_react.default.createElement(
-            import_RenderProForm.default,
-            {
-              form,
-              value: confirmValue,
-              onChange: props.onChange,
-              isNode: import_react.default.isValidElement(children),
-              ...popupProps
-            }
-          ),
-          onConfirm: onConfirmHandle,
-          onCancel: onCancelHandle,
-          onOpenChange: (open2) => {
-            onOpenChange && onOpenChange(open2);
-          },
-          ...(0, import_lodash.omit)(popupProps, [
-            "type",
-            "label",
-            "title",
-            "tip",
-            "trim",
-            "labelWidth",
-            "fieldProps",
-            "columns"
-          ])
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popconfirm.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        classNames: {
+          root: 'pro-edit-label-popconfirm'
         },
-        labelRender()
-      );
+        icon: null,
+        destroyOnHidden: true,
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderProForm.default, (0, _objectSpread2.default)({
+          form: form,
+          value: confirmValue,
+          onChange: props.onChange,
+          isNode: /*#__PURE__*/_react.default.isValidElement(children)
+        }, popupProps)),
+        onConfirm: onConfirmHandle,
+        onCancel: onCancelHandle,
+        onOpenChange: open => {
+          _onOpenChange && _onOpenChange(open);
+        }
+      }, (0, _lodash.omit)(popupProps, ['type', 'label', 'title', 'tip', 'trim', 'labelWidth', 'fieldProps', 'columns'])), {}, {
+        children: labelRender()
+      }));
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderProEditLabel());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: renderProEditLabel()
+  });
 };
-var ProEditLabel_default = ProEditLabel;
+var _default = exports.default = ProEditLabel;

package/lib/ProEditLabel/propsType.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProEditLabel/propsType.ts
-var propsType_exports = {};
-module.exports = __toCommonJS(propsType_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProEditLabel/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-edit-label {
   display: inline-block;

package/lib/ProEditLabel/utils/index.js

@@ -1,27 +1,15 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProEditLabel/utils/index.ts
-var utils_exports = {};
-__export(utils_exports, {
-  matchFormValue: () => matchFormValue
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(utils_exports);
+exports.matchFormValue = void 0;
+/**
+ * 判断columns的length是否为1，给表单赋值，默认匹配到value上
+ * @param value 表单值
+ * @param columns 表单配置项
+ * @returns value
+ */
 var matchFormValue = (value, columns) => {
   if (!Array.isArray(columns)) {
     return value;
@@ -33,7 +21,4 @@ var matchFormValue = (value, columns) => {
   }
   return value;
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  matchFormValue
-});
+exports.matchFormValue = matchFormValue;