@zat-design/sisyphus-react 3.4.3 → 3.4.4-beta.2

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

@@ -28,7 +28,7 @@ var getDefaultActions = function getDefaultActions(mode) {
         add(undefined, index + 1);
       },
       type: 'text',
-      label: "".concat(_locale.default.ProForm.formList_actions[0]),
+      label: "".concat(_locale.default.ProForm.formListActions[0]),
       icon: (0, _jsxRuntime.jsx)(_icons.PlusSquareOutlined, {})
     },
     delete: {
@@ -40,7 +40,7 @@ var getDefaultActions = function getDefaultActions(mode) {
         remove(index);
       },
       type: 'text',
-      label: "".concat(_locale.default.ProForm.formList_actions[1]),
+      label: "".concat(_locale.default.ProForm.formListActions[1]),
       icon: mode === 'less' ? (0, _jsxRuntime.jsx)(_ProIcon.default, {
         type: "solid-close",
         className: "single-delete"
@@ -57,7 +57,7 @@ var getDefaultActions = function getDefaultActions(mode) {
         add(record, index + 1);
       },
       type: 'text',
-      label: "".concat(_locale.default.ProForm.formList_actions[2]),
+      label: "".concat(_locale.default.ProForm.formListActions[2]),
       icon: (0, _jsxRuntime.jsx)(_icons.CopyOutlined, {})
     },
     moveUp: {
@@ -69,7 +69,7 @@ var getDefaultActions = function getDefaultActions(mode) {
         move(index, index - 1);
       },
       type: 'text',
-      label: "".concat(_locale.default.ProForm.formList_actions[3]),
+      label: "".concat(_locale.default.ProForm.formListActions[3]),
       icon: (0, _jsxRuntime.jsx)(_icons.UpSquareOutlined, {})
     },
     moveDown: {
@@ -81,13 +81,14 @@ var getDefaultActions = function getDefaultActions(mode) {
         move(index, index + 1);
       },
       type: 'text',
-      label: "".concat(_locale.default.ProForm.formList_actions[4]),
+      label: "".concat(_locale.default.ProForm.formListActions[4]),
       icon: (0, _jsxRuntime.jsx)(_icons.DownSquareOutlined, {})
     }
   };
   if (mode === 'block') {
     Object.keys(originActions).forEach(function (key) {
-      originActions[key].type = 'default';
+      originActions[key].type = 'text';
+      originActions[key].className = 'pro-form-list-tool-btn';
     });
   }
   if (mode === 'line') {
@@ -116,7 +117,8 @@ var ActionButton = function ActionButton(props) {
     fields = props.fields,
     min = props.min,
     max = props.max,
-    mode = props.mode;
+    mode = props.mode,
+    isView = props.isView;
   // 默认显示一个delete
   var actionProps = (0, _react.useMemo)(function () {
     var _props$actionProps;
@@ -167,7 +169,7 @@ var ActionButton = function ActionButton(props) {
       var _onClick = onClick || onHandle;
       if (['add', 'delete', 'copy', 'moveUp', 'moveDown'].includes(actionType)) {
         // 禁用状态默认隐藏内置操作按钮
-        if (disabled) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+        if (disabled || isView) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
         var _defaultActions$actio = defaultActions[actionType],
           internalOnClick = _defaultActions$actio.onClick,
           defaultLabel = _defaultActions$actio.label,
@@ -189,7 +191,7 @@ var ActionButton = function ActionButton(props) {
           return false;
         }
         return _needConfirm ? (0, _jsxRuntime.jsx)(_antd.Popconfirm, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          title: title !== null && title !== void 0 ? title : "".concat(_locale.default.ProForm.formList_confirmMessage),
+          title: title !== null && title !== void 0 ? title : "".concat(_locale.default.ProForm.formListConfirmMessage),
           onCancel: function onCancel(e) {
             return e.stopPropagation();
           },
@@ -212,7 +214,7 @@ var ActionButton = function ActionButton(props) {
         }), "".concat(item === null || item === void 0 ? void 0 : item.actionType).concat(index));
       }
       return needConfirm ? (0, _jsxRuntime.jsx)(_antd.Popconfirm, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        title: title !== null && title !== void 0 ? title : "".concat(_locale.default.ProForm.formList_confirmMessage),
+        title: title !== null && title !== void 0 ? title : "".concat(_locale.default.ProForm.formListConfirmMessage),
         onCancel: function onCancel(e) {
           return e.stopPropagation();
         },

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

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
 var _react = require("react");
 var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _ActionButton = _interopRequireDefault(require("./ActionButton"));
 var _RenderFields = _interopRequireDefault(require("../../../render/RenderFields"));
 var _ProCollapse = _interopRequireDefault(require("../../../../../ProLayout/components/ProCollapse"));
@@ -38,8 +40,10 @@ var BlockFields = function BlockFields(props) {
     }
     return title;
   }, [title, index]);
+  var cls = (0, _classnames.default)((0, _defineProperty2.default)({}, "pro-form-list-mode-".concat(mode), mode === 'block' || mode === 'line' || mode === 'less'));
   return (0, _jsxRuntime.jsx)(_antd.Space, {
     direction: "vertical",
+    className: cls,
     children: (0, _jsxRuntime.jsx)(_ProCollapse.default, {
       title: _title,
       index: index,
@@ -59,7 +63,8 @@ var BlockFields = function BlockFields(props) {
         fields: fields,
         actionProps: actionProps,
         mode: mode,
-        disabled: disabled
+        disabled: disabled,
+        isView: isView
       }),
       children: (0, _jsxRuntime.jsx)(_antd.Row, {
         gutter: 24,

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

@@ -24,7 +24,7 @@ var actions = {
         namePath = _ref.namePath;
       operation.add();
     },
-    label: "".concat(_locale.default.ProForm.formList_actions[5]),
+    label: "".concat(_locale.default.ProForm.formListActions[5]),
     type: 'link',
     icon: (0, _jsxRuntime.jsx)(_icons.PlusOutlined, {})
   }
@@ -63,9 +63,6 @@ var ToolbarButton = function ToolbarButton(props) {
       operation.add(data);
     }
   };
-  if (disabled || isView) {
-    return null;
-  }
   return (0, _jsxRuntime.jsx)(_antd.Space, {
     align: "start",
     className: "pro-form-list-toolbar",
@@ -84,7 +81,7 @@ var ToolbarButton = function ToolbarButton(props) {
         rest = (0, _objectWithoutProperties2.default)(item, _excluded);
       var _onClick = _onClick2 || onHandle;
       if (['add'].includes(actionType)) {
-        if (disabled) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+        if (disabled || isView) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
         var _actions$actionType = actions[actionType],
           internalOnClick = _actions$actionType.onClick,
           defaultLabel = _actions$actionType.label,

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

@@ -90,13 +90,14 @@ var Group = function Group(props) {
       });
     }
   }, [value]);
+  var _otherProps = (0, _lodash.omit)(otherProps, ['colProps', 'required']);
   return (0, _jsxRuntime.jsx)("div", {
     className: _className,
     children: space.compact || (space === null || space === void 0 ? void 0 : space.separator) ? (0, _jsxRuntime.jsx)(_antd.Space.Compact, {
       children: (0, _jsxRuntime.jsx)(_RenderFields.default, (0, _objectSpread2.default)({
         columns: data.columns,
         form: form
-      }, (0, _lodash.omit)(otherProps, ['colProps'])))
+      }, _otherProps))
     }) : (0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       align: "start"
     }, (0, _lodash.omit)(space, ['separator', 'compact'])), {}, {
@@ -104,7 +105,7 @@ var Group = function Group(props) {
         return (0, _jsxRuntime.jsx)(_RenderFields.default, (0, _objectSpread2.default)({
           columns: [column],
           form: form
-        }, (0, _lodash.omit)(otherProps, ['colProps'])), (column === null || column === void 0 ? void 0 : column.name) || index);
+        }, _otherProps), (column === null || column === void 0 ? void 0 : column.name) || index);
       })
     }))
   });

package/lib/ProForm/components/combination/GroupCopy/component/ComRender.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    type: string;
+    component: React.ReactElement;
+    value: any;
+    onChange: any;
+    disabled: any;
+    confirm: any;
+    fieldProps: any;
+    contextProps: any;
+}
+/** 渲染组件 */
+declare const ComRender: React.FC<Props>;
+export default ComRender;

package/lib/ProForm/components/combination/GroupCopy/component/ComRender.js

@@ -0,0 +1,44 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = _interopRequireDefault(require("react"));
+var _ConfirmWrapper = _interopRequireDefault(require("@/ProForm/components/render/ConfirmWrapper"));
+var _useFieldProps = require("@/ProForm/utils/useFieldProps");
+var componentMap = _interopRequireWildcard(require("../../../../../index"));
+var _excluded = ["type", "confirm", "component", "fieldProps", "contextProps"];
+/** 渲染组件 */
+var ComRender = function ComRender(props) {
+  var type = props.type,
+    confirm = props.confirm,
+    component = props.component,
+    fieldProps = props.fieldProps,
+    contextProps = props.contextProps,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var TypeComponent = componentMap[type];
+  var componentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldProps), rest);
+  var Component;
+  if (confirm) {
+    Component = (0, _jsxRuntime.jsx)(_ConfirmWrapper.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      confirm: confirm
+    }, componentProps), {}, {
+      children: component || (0, _jsxRuntime.jsx)(TypeComponent, (0, _objectSpread2.default)({}, componentProps))
+    }));
+  } else {
+    Component = component ? ( /*#__PURE__*/_react.default.cloneElement(component, (0, _objectSpread2.default)({}, componentProps))) : (0, _jsxRuntime.jsx)(TypeComponent, (0, _objectSpread2.default)({}, componentProps));
+  }
+  return (0, _jsxRuntime.jsx)(_useFieldProps.FieldProvider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextProps), {}, {
+      type: type
+    }),
+    children: Component
+  });
+};
+var _default = exports.default = ComRender;

package/lib/ProForm/components/combination/GroupCopy/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GroupProps } from './propsType';
+/**
+ * 1. 外层过滤FormItem相关属性, 但是子元素上的 required [disabled] [show] rules [fieldProps] [component] 需要取到并
+ * 2.
+ *
+ * render内部能力 show, component, value, onChange, disabled, clearNotShow, fieldProps
+ */
+declare const GroupCopy: React.FC<GroupProps>;
+export default GroupCopy;

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

@@ -0,0 +1,91 @@
+"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 = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _utils = require("./utils");
+var _ProForm = _interopRequireDefault(require("../../../../ProForm"));
+var _ComRender = _interopRequireDefault(require("./component/ComRender"));
+/**
+ * 1. 外层过滤FormItem相关属性, 但是子元素上的 required [disabled] [show] rules [fieldProps] [component] 需要取到并
+ * 2.
+ *
+ * render内部能力 show, component, value, onChange, disabled, clearNotShow, fieldProps
+ */
+var GroupCopy = function GroupCopy(props) {
+  var children = props.children,
+    className = props.className,
+    _props$space = props.space,
+    space = _props$space === void 0 ? {
+      size: 12
+    } : _props$space,
+    value = props.value,
+    onChange = props.onChange;
+  var contextProps = _ProForm.default.useFieldProps() || {};
+  var names = contextProps.names,
+    name = contextProps.name,
+    form = contextProps.form,
+    namePath = contextProps.namePath,
+    index = contextProps.index;
+  var _value = value && (0, _toConsumableArray2.default)(value) || [];
+  var _option = _react.default.useRef([]);
+  // 组合onChange
+  var handleChange = function handleChange(value, option, index) {
+    _value[index] = value;
+    _option.current[index] = option;
+    onChange(_value, _option.current);
+  };
+  var columns = (0, _react.useMemo)(function () {
+    var columnsProps = (0, _utils.transformColumns)({
+      columns: children,
+      name: name,
+      names: names,
+      onChange: handleChange,
+      namePath: namePath,
+      form: form,
+      index: index,
+      value: _value
+    });
+    return (0, _utils.insertSeparator)(columnsProps, space);
+  }, [name, value, children, space, names, namePath, index]);
+  var _className = (0, _classnames2.default)((0, _defineProperty2.default)({
+    'pro-group': true,
+    'pro-group-diy-width': columns.some(function (item) {
+      var _item$fieldProps, _item$fieldProps$styl;
+      return item === null || item === void 0 ? void 0 : (_item$fieldProps = item.fieldProps) === null || _item$fieldProps === void 0 ? void 0 : (_item$fieldProps$styl = _item$fieldProps.style) === null || _item$fieldProps$styl === void 0 ? void 0 : _item$fieldProps$styl.width;
+    }),
+    'pro-group-width-auto': columns.some(function (item) {
+      return ['Radio', 'Checkbox', 'Switch'].includes(item.type);
+    })
+  }, "".concat(className), className));
+  return (0, _jsxRuntime.jsx)("div", {
+    className: _className,
+    children: space.compact || (space === null || space === void 0 ? void 0 : space.separator) ? (0, _jsxRuntime.jsx)(_antd.Space.Compact, {
+      children: columns.map(function (column) {
+        return (0, _jsxRuntime.jsx)(_ComRender.default, (0, _objectSpread2.default)({
+          contextProps: contextProps
+        }, column));
+      })
+    }) : (0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      align: "start"
+    }, (0, _lodash.omit)(space, ['separator', 'compact'])), {}, {
+      children: columns.map(function (column, index) {
+        return (0, _jsxRuntime.jsx)(_ComRender.default, (0, _objectSpread2.default)({
+          contextProps: contextProps
+        }, column));
+      })
+    }))
+  });
+};
+var _default = exports.default = GroupCopy;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormItemProps, ModalFuncProps, SpaceProps } from 'antd';
+import { FormInstance } from 'antd/es/form/Form';
+import { NamePath } from 'antd/lib/form/interface';
+import { ColumnPropsMap, FunctionArgs, ProFormValueType, ReactiveFunction, ViewType } from '../../../propsType';
+export interface SpaceType extends SpaceProps {
+    /**
+     * 是否紧凑合并
+     */
+    compact?: Boolean;
+    /**
+     * 分隔符
+     */
+    separator?: string | React.ReactNode;
+    /** 间隔距离 */
+    size?: number;
+}
+export interface GroupProps {
+    children?: GroupColumnProps[];
+    space?: SpaceType;
+    className?: string;
+    id?: string;
+    disabled?: boolean;
+    isView?: boolean;
+    value?: any[];
+    onChange?: (value: any[] | null, options?: any[]) => void;
+}
+export type GroupColumnProps<Values = any> = {
+    component?: React.ReactNode | ReactiveFunction<Values, React.ReactNode>;
+    names?: NamePath[];
+    show?: boolean | ReactiveFunction<Values, boolean>;
+    valueType?: ProFormValueType;
+    switchValue?: [any, any];
+    isView?: boolean;
+    viewRender?: (value: any, record: Values, { form, index, namePath, }: {
+        form: FormInstance<Values>;
+        index?: number | undefined;
+        [key: string]: any;
+    }) => React.ReactElement<any, any> | string | undefined | null;
+    viewType?: ViewType;
+    disabled?: boolean | ReactiveFunction<Values, boolean>;
+    trim?: boolean;
+    upperCase?: boolean;
+    toISOString?: boolean;
+    clearNotShow?: boolean;
+    confirm?: boolean | ModalFuncProps | FunctionArgs<Values, boolean | ModalFuncProps>;
+} & ColumnPropsMap & FormItemProps;

package/lib/ProForm/components/combination/GroupCopy/propsType.js

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

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

@@ -0,0 +1,131 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.border-radius(@start-end: 0, @end-end: 0, @start-start: 0, @end-start: 0) {
+  border-start-end-radius: @start-end;
+  border-end-end-radius: @end-end;
+  border-start-start-radius: @start-start;
+  border-end-start-radius: @end-start;
+}
+
+.start-radius() {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
+
+.end-radius() {
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+}
+
+.pro-group {
+  width: unset !important;
+  
+
+  &.pro-group-diy-width, &.pro-group-width-auto {
+    .@{ant-prefix}-space .@{ant-prefix}-space-item {
+      width: auto;
+
+      .@{ant-prefix}-space-item {
+        width: auto;
+      }
+    }
+  }
+
+  .@{ant-prefix}-space {
+    width: 100%;
+
+    .@{ant-prefix}-space-item {
+      width: 100%;
+    }
+
+    .@{ant-prefix}-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .@{ant-prefix}-form-item-label {
+    display: none;
+  }
+
+  .@{ant-prefix}-space-compact {
+    flex: auto;
+    align-items: center;
+    width: 100%;
+
+    &>.@{ant-prefix}-input-number{
+      &:first-child{
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+      }
+      &:last-child{
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        margin-left: -1px;
+      }
+    }
+
+    .@{ant-prefix}-form-item {
+      margin-bottom: 0 !important;
+    }
+
+    .group-separator {
+      margin-inline-end: -2px;
+      margin-inline-start: -1px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding: 0 12px;
+      background-color: #fff;
+      cursor: default;
+    }
+    .pro-modal-select {
+      margin-left: -1px;
+      .@{ant-prefix}-input{
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    // 定制内敛合并样式
+    .@{ant-prefix}-input-affix-wrapper,
+    .@{ant-prefix}-select {
+      .border-radius(0, 0, 0, 0);
+
+      &:nth-child(n + 2) {
+        margin-inline-start: -1px;
+      }
+
+      &:first-child {
+        .start-radius();
+      }
+
+      &:last-child {
+        .end-radius();
+      }
+    }
+
+    .@{ant-prefix}-select {
+      .@{ant-prefix}-select-selector {
+        .border-radius(0, 0, 0, 0);
+      }
+
+      &:first-child {
+        .@{ant-prefix}-select-selector {
+          .start-radius();
+        }
+      }
+
+      &:last-child {
+        .@{ant-prefix}-select-selector {
+          .end-radius();
+        }
+      }
+    }
+
+    // 报错样式定制
+    .@{ant-prefix}-input-affix-wrapper-status-error ~ .group-separator {
+      color: var(--ant-error-color);
+      border-color: var(--ant-error-color);
+    }
+  }
+}

package/lib/ProForm/components/combination/GroupCopy/utils.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
+import { FormInstance } from 'antd';
+import { GroupColumnProps, SpaceType } from './propsType';
+import { ProFormColumnProps, ReactiveFunction } from '../../render/propsType';
+export type EventArgs = any[];
+/**
+ * 插入间隔符
+ * @param columns 表单配置数组
+ * @returns
+ */
+export declare const insertSeparator: (columns: GroupColumnProps[], space?: SpaceType) => any[];
+/** 带出event的组件默认取值方法 */
+export declare function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs): any;
+/** 转换names */
+export declare const transformNamesString: (arr: (string | string[])[]) => (string | string[])[];
+interface Params {
+    form?: FormInstance;
+    index?: number;
+    type?: string;
+    namePath?: InternalNamePath;
+    disabled?: boolean | ReactiveFunction<any, boolean>;
+    show?: boolean | ReactiveFunction<any, boolean>;
+    component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
+    fieldProps?: boolean | ReactiveFunction<any, boolean>;
+    name?: NamePath;
+}
+/** 计算响应式参数的值 */
+export declare const getReactiveProps: (params: Params) => {
+    disabled: boolean;
+    show: boolean;
+    component: any;
+    fieldProps: boolean;
+};
+type ValueTypeGetterParams = Pick<ProFormColumnProps, 'valueType' | 'switchValue' | 'toISOString'> & {
+    type?: any;
+    mode?: string;
+};
+/** 获取当前字段的转换函数 */
+export declare const getValueTypeTrans: (params: ValueTypeGetterParams) => any;
+interface ColumnsTransformerParams {
+    columns: GroupColumnProps[];
+    name?: NamePath;
+    names?: NamePath[];
+    value?: any[];
+    onChange: any;
+    namePath?: InternalNamePath;
+    form: FormInstance;
+    index?: number;
+}
+/** 转换columns */
+export declare const transformColumns: (params: ColumnsTransformerParams) => any[];
+export {};