@zat-design/sisyphus-react 3.13.13-beta.1 → 3.13.13-beta.2

package/dist/index.esm.css

@@ -2405,6 +2405,44 @@ div.pro-textarea-view::after {
 .pro-form-list-action .ant-btn-text:hover {
   background: transparent;
 }
+.pro-form-list-empty {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.pro-form-list-empty .pro-form-list-empty-img {
+  width: 80px;
+  height: 80px;
+}
+.pro-form-list-empty .pro-form-list-empty-content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: var(--zaui-space-size-md, 16px);
+  color: var(--zaui-aide-text, #909090);
+}
+.pro-form-list-empty .pro-form-list-empty-content .ant-btn-link {
+  padding: 0;
+}
 .ant-form-item-has-error .ant-picker-status-error ~ .forever-checkbox:not(.ant-input-disabled):not( .ant-input-borderless).ant-input {
   border-color: var(--ant-error-color);
 }

package/dist/less.esm.css

@@ -2405,6 +2405,44 @@ div.pro-textarea-view::after {
 .pro-form-list-action .ant-btn-text:hover {
   background: transparent;
 }
+.pro-form-list-empty {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.pro-form-list-empty .pro-form-list-empty-img {
+  width: 80px;
+  height: 80px;
+}
+.pro-form-list-empty .pro-form-list-empty-content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: var(--zaui-space-size-md, 16px);
+  color: var(--zaui-aide-text, #909090);
+}
+.pro-form-list-empty .pro-form-list-empty-content .ant-btn-link {
+  padding: 0;
+}
 .ant-form-item-has-error .ant-picker-status-error ~ .forever-checkbox:not(.ant-input-disabled):not( .ant-input-borderless).ant-input {
   border-color: var(--ant-error-color);
 }

package/es/ProForm/components/combination/FormList/components/Empty.d.ts

@@ -0,0 +1,13 @@
+import type { FormInstance, FormListOperation } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { ToolbarActionType } from '../propsType';
+interface EmptyProps {
+    disabled?: boolean;
+    toolbarProps?: ToolbarActionType[] | false;
+    operation?: FormListOperation;
+    form?: FormInstance;
+    namePath?: InternalNamePath;
+    emptyBtnText?: string;
+}
+declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export default Empty;

package/es/ProForm/components/combination/FormList/components/Empty.js

@@ -0,0 +1,90 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import EmptyImg from '../../../../../assets/empty.png';
+import locale from '../../../../../locale';
+// 空列表状态
+var Empty = function Empty(_ref) {
+  var disabled = _ref.disabled,
+    toolbarProps = _ref.toolbarProps,
+    operation = _ref.operation,
+    form = _ref.form,
+    namePath = _ref.namePath,
+    emptyBtnText = _ref.emptyBtnText;
+  // 找到type为'add'的配置
+  var addConfig = Array.isArray(toolbarProps) ? toolbarProps.find(function (item) {
+    return item.type === 'add';
+  }) : null;
+  var handleAddClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _addConfig$onClick;
+      var value, data;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!operation || !form || !namePath)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            value = form.getFieldValue(namePath);
+            _context.next = 5;
+            return addConfig === null || addConfig === void 0 ? void 0 : (_addConfig$onClick = addConfig.onClick) === null || _addConfig$onClick === void 0 ? void 0 : _addConfig$onClick.call(addConfig, value, {
+              operation: operation,
+              form: form,
+              namePath: namePath
+            });
+          case 5:
+            data = _context.sent;
+            if (!(!(addConfig === null || addConfig === void 0 ? void 0 : addConfig.onClick) || data === true)) {
+              _context.next = 9;
+              break;
+            }
+            operation.add({});
+            return _context.abrupt("return");
+          case 9:
+            if (data) {
+              operation.add(data);
+            }
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleAddClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  // 获取按钮文案
+  var getBtnText = function getBtnText() {
+    return emptyBtnText || (addConfig === null || addConfig === void 0 ? void 0 : addConfig.label) || locale.ProForm.formListActions[6];
+  };
+  return _jsxs("div", {
+    className: "pro-form-list-empty",
+    children: [_jsx("img", {
+      className: "pro-form-list-empty-img",
+      src: EmptyImg,
+      alt: "Empty"
+    }), _jsx("div", {
+      className: "pro-form-list-empty-content",
+      children: disabled ? locale.ProForm.noData : _jsxs(_Fragment, {
+        children: [locale.ProForm.noData, !disabled && _jsxs(_Fragment, {
+          children: ["\uFF0C", _jsx(_Button, {
+            type: "link",
+            onClick: handleAddClick,
+            style: {
+              padding: 0,
+              height: 'auto'
+            },
+            children: getBtnText()
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default Empty;

package/es/ProForm/components/combination/FormList/index.js

@@ -12,6 +12,7 @@ import { namesPathTransform } from './utils';
 import ToolbarButton from './components/ToolbarButton';
 import BlockFields from './components/BlockFields';
 import LineFields from './components/LineFields';
+import Empty from './components/Empty';
 import ProForm from '../../../../ProForm';
 import { useProConfig } from '../../../../ProConfigProvider';
 var FormList = function FormList(props, ref) {
@@ -26,7 +27,8 @@ var FormList = function FormList(props, ref) {
     meta = props.meta,
     _props$span = props.span,
     span = _props$span === void 0 ? 8 : _props$span,
-    disabled = props.disabled;
+    disabled = props.disabled,
+    emptyBtnText = props.emptyBtnText;
   var _fields = fields.map(function (item) {
     return _objectSpread(_objectSpread({}, item), {}, {
       key: String(item.key)
@@ -125,9 +127,16 @@ var FormList = function FormList(props, ref) {
           form: form,
           diffConfig: _diffConfig
         }), field.key);
+      }), _fields.length === 0 && _jsx(Empty, {
+        disabled: disabled,
+        toolbarProps: toolbarProps,
+        operation: operation,
+        form: form,
+        namePath: _namePath,
+        emptyBtnText: emptyBtnText
       }), _jsx(_Form.ErrorList, {
         errors: errors
-      }), toolbarProps !== false && _jsx(ToolbarButton, {
+      }), toolbarProps !== false && _fields.length > 0 && _jsx(ToolbarButton, {
         disabled: disabled,
         isView: isView,
         min: min,

package/es/ProForm/components/combination/FormList/propsType.d.ts

@@ -55,6 +55,7 @@ export interface FormListType {
     };
     draggable?: boolean;
     id?: string;
+    emptyBtnText?: string;
 }
 export type TypeWithRef = FormListType & React.RefAttributes<FormListRefType>;
 export interface FormListRefType {

package/es/ProForm/components/combination/FormList/style/index.less

@@ -70,3 +70,26 @@
     background: transparent;
   }
 }
+
+.pro-form-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .pro-form-list-empty-img {
+    width: 80px;
+    height: 80px;
+  }
+
+  .pro-form-list-empty-content {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--zaui-space-size-md, 16px);
+    color: @zaui-aide-text;
+
+    .@{ant-prefix}-btn-link {
+      padding: 0;
+    }
+  }
+}

package/es/ProForm/utils/index.js

@@ -285,10 +285,6 @@ export function initialValuesToNames() {
         values[key] = formInitialValue;
       }
     }
-    // 给FormList默认增加一行
-    if (item.type === 'FormList' && !item.initialValue && !_get(values, item.name)) {
-      item.initialValue = [{}];
-    }
   });
   return values;
 }

package/es/locale/en_US.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
         halfRuleText: string;
         formListActions: string[];
         formListConfirmMessage: string;
+        noData: string;
     };
     ProAction: {
         errorMessage: string;

package/es/locale/en_US.js

@@ -34,8 +34,9 @@ export default {
     ruleText: 'correct',
     completeText: 'enter in full',
     halfRuleText: 'Enter the value of ({total})',
-    formListActions: ['Add', 'Delete', 'Copy', 'Move up', 'Move down', 'Add a new line'],
-    formListConfirmMessage: 'Are you sure delete it?'
+    formListActions: ['Add', 'Delete', 'Copy', 'Move up', 'Move down', 'Add a new line', 'Click add'],
+    formListConfirmMessage: 'Are you sure delete it?',
+    noData: 'No data'
   },
   ProAction: {
     errorMessage: 'The configuration config for ProAction must be data',

package/es/locale/zh_CN.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
         halfRuleText: string;
         formListActions: string[];
         formListConfirmMessage: string;
+        noData: string;
     };
     ProAction: {
         errorMessage: string;

package/es/locale/zh_CN.js

@@ -34,8 +34,9 @@ export default {
     ruleText: '正确的',
     completeText: '请完整输入',
     halfRuleText: '请输入第({total})个表单的值',
-    formListActions: ['新增', '删除', '复制', '上移', '下移', '新增一行'],
-    formListConfirmMessage: '确认删除吗?'
+    formListActions: ['新增', '删除', '复制', '上移', '下移', '新增一行', '点击添加'],
+    formListConfirmMessage: '确认删除吗?',
+    noData: '暂无数据'
   },
   ProAction: {
     errorMessage: 'ProAction 配置 config 必须为数据',

package/lib/ProForm/components/combination/FormList/components/Empty.d.ts

@@ -0,0 +1,13 @@
+import type { FormInstance, FormListOperation } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { ToolbarActionType } from '../propsType';
+interface EmptyProps {
+    disabled?: boolean;
+    toolbarProps?: ToolbarActionType[] | false;
+    operation?: FormListOperation;
+    form?: FormInstance;
+    namePath?: InternalNamePath;
+    emptyBtnText?: string;
+}
+declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export default Empty;

package/lib/ProForm/components/combination/FormList/components/Empty.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("antd/es/button/style");
+var _button = _interopRequireDefault(require("antd/es/button"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _empty = _interopRequireDefault(require("../../../../../assets/empty.png"));
+var _locale = _interopRequireDefault(require("../../../../../locale"));
+// 空列表状态
+var Empty = function Empty(_ref) {
+  var disabled = _ref.disabled,
+    toolbarProps = _ref.toolbarProps,
+    operation = _ref.operation,
+    form = _ref.form,
+    namePath = _ref.namePath,
+    emptyBtnText = _ref.emptyBtnText;
+  // 找到type为'add'的配置
+  var addConfig = Array.isArray(toolbarProps) ? toolbarProps.find(function (item) {
+    return item.type === 'add';
+  }) : null;
+  var handleAddClick = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var _addConfig$onClick;
+      var value, data;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!operation || !form || !namePath)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            value = form.getFieldValue(namePath);
+            _context.next = 5;
+            return addConfig === null || addConfig === void 0 ? void 0 : (_addConfig$onClick = addConfig.onClick) === null || _addConfig$onClick === void 0 ? void 0 : _addConfig$onClick.call(addConfig, value, {
+              operation: operation,
+              form: form,
+              namePath: namePath
+            });
+          case 5:
+            data = _context.sent;
+            if (!(!(addConfig === null || addConfig === void 0 ? void 0 : addConfig.onClick) || data === true)) {
+              _context.next = 9;
+              break;
+            }
+            operation.add({});
+            return _context.abrupt("return");
+          case 9:
+            if (data) {
+              operation.add(data);
+            }
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleAddClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  // 获取按钮文案
+  var getBtnText = function getBtnText() {
+    return emptyBtnText || (addConfig === null || addConfig === void 0 ? void 0 : addConfig.label) || _locale.default.ProForm.formListActions[6];
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "pro-form-list-empty",
+    children: [(0, _jsxRuntime.jsx)("img", {
+      className: "pro-form-list-empty-img",
+      src: _empty.default,
+      alt: "Empty"
+    }), (0, _jsxRuntime.jsx)("div", {
+      className: "pro-form-list-empty-content",
+      children: disabled ? _locale.default.ProForm.noData : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [_locale.default.ProForm.noData, !disabled && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: ["\uFF0C", (0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            onClick: handleAddClick,
+            style: {
+              padding: 0,
+              height: 'auto'
+            },
+            children: getBtnText()
+          })]
+        })]
+      })
+    })]
+  });
+};
+var _default = exports.default = Empty;

package/lib/ProForm/components/combination/FormList/index.js

@@ -19,6 +19,7 @@ var _utils2 = require("./utils");
 var _ToolbarButton = _interopRequireDefault(require("./components/ToolbarButton"));
 var _BlockFields = _interopRequireDefault(require("./components/BlockFields"));
 var _LineFields = _interopRequireDefault(require("./components/LineFields"));
+var _Empty = _interopRequireDefault(require("./components/Empty"));
 var _ProForm = _interopRequireDefault(require("../../../../ProForm"));
 var _ProConfigProvider = require("../../../../ProConfigProvider");
 var FormList = function FormList(props, ref) {
@@ -33,7 +34,8 @@ var FormList = function FormList(props, ref) {
     meta = props.meta,
     _props$span = props.span,
     span = _props$span === void 0 ? 8 : _props$span,
-    disabled = props.disabled;
+    disabled = props.disabled,
+    emptyBtnText = props.emptyBtnText;
   var _fields = fields.map(function (item) {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
       key: String(item.key)
@@ -132,9 +134,16 @@ var FormList = function FormList(props, ref) {
           form: form,
           diffConfig: _diffConfig
         }), field.key);
+      }), _fields.length === 0 && (0, _jsxRuntime.jsx)(_Empty.default, {
+        disabled: disabled,
+        toolbarProps: toolbarProps,
+        operation: operation,
+        form: form,
+        namePath: _namePath,
+        emptyBtnText: emptyBtnText
       }), (0, _jsxRuntime.jsx)(_form.default.ErrorList, {
         errors: errors
-      }), toolbarProps !== false && (0, _jsxRuntime.jsx)(_ToolbarButton.default, {
+      }), toolbarProps !== false && _fields.length > 0 && (0, _jsxRuntime.jsx)(_ToolbarButton.default, {
         disabled: disabled,
         isView: isView,
         min: min,

package/lib/ProForm/components/combination/FormList/propsType.d.ts

@@ -55,6 +55,7 @@ export interface FormListType {
     };
     draggable?: boolean;
     id?: string;
+    emptyBtnText?: string;
 }
 export type TypeWithRef = FormListType & React.RefAttributes<FormListRefType>;
 export interface FormListRefType {

package/lib/ProForm/components/combination/FormList/style/index.less

@@ -70,3 +70,26 @@
     background: transparent;
   }
 }
+
+.pro-form-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .pro-form-list-empty-img {
+    width: 80px;
+    height: 80px;
+  }
+
+  .pro-form-list-empty-content {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--zaui-space-size-md, 16px);
+    color: @zaui-aide-text;
+
+    .@{ant-prefix}-btn-link {
+      padding: 0;
+    }
+  }
+}

package/lib/ProForm/utils/index.js

@@ -299,10 +299,6 @@ function initialValuesToNames() {
         values[key] = formInitialValue;
       }
     }
-    // 给FormList默认增加一行
-    if (item.type === 'FormList' && !item.initialValue && !(0, _get2.default)(values, item.name)) {
-      item.initialValue = [{}];
-    }
   });
   return values;
 }

package/lib/locale/en_US.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
         halfRuleText: string;
         formListActions: string[];
         formListConfirmMessage: string;
+        noData: string;
     };
     ProAction: {
         errorMessage: string;

package/lib/locale/en_US.js

@@ -40,8 +40,9 @@ var _default = exports.default = {
     ruleText: 'correct',
     completeText: 'enter in full',
     halfRuleText: 'Enter the value of ({total})',
-    formListActions: ['Add', 'Delete', 'Copy', 'Move up', 'Move down', 'Add a new line'],
-    formListConfirmMessage: 'Are you sure delete it?'
+    formListActions: ['Add', 'Delete', 'Copy', 'Move up', 'Move down', 'Add a new line', 'Click add'],
+    formListConfirmMessage: 'Are you sure delete it?',
+    noData: 'No data'
   },
   ProAction: {
     errorMessage: 'The configuration config for ProAction must be data',

package/lib/locale/zh_CN.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
         halfRuleText: string;
         formListActions: string[];
         formListConfirmMessage: string;
+        noData: string;
     };
     ProAction: {
         errorMessage: string;

package/lib/locale/zh_CN.js

@@ -40,8 +40,9 @@ var _default = exports.default = {
     ruleText: '正确的',
     completeText: '请完整输入',
     halfRuleText: '请输入第({total})个表单的值',
-    formListActions: ['新增', '删除', '复制', '上移', '下移', '新增一行'],
-    formListConfirmMessage: '确认删除吗?'
+    formListActions: ['新增', '删除', '复制', '上移', '下移', '新增一行', '点击添加'],
+    formListConfirmMessage: '确认删除吗?',
+    noData: '暂无数据'
   },
   ProAction: {
     errorMessage: 'ProAction 配置 config 必须为数据',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.13.13-beta.1",
+  "version": "3.13.13-beta.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",