@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/{lib/ProForm/components/base → es/ProForm/components/combination}/FormList/components/ActionButton.d.ts

@@ -1,19 +1,22 @@
 import { FormInstance, FormListFieldData, FormListOperation } from 'antd';
-import { InternalNamePath } from 'antd/lib/form/interface';
+import { InternalNamePath } from 'antd/es/form/interface';
 import React from 'react';
-import { Props as FormListProps, ActionProps, FormListMode } from '../index';
+import { FormListProps, ActionProps, FormListMode } from '../propsType';
 export interface Props {
     min?: FormListProps['min'];
     max?: FormListProps['max'];
     actionProps: ActionProps[];
     namePath: InternalNamePath;
     form: FormInstance;
-    field: FormListFieldData;
+    field: Omit<FormListFieldData, 'key'> & {
+        key: string;
+    };
     operation: FormListOperation;
     index: number;
     length: number;
     fields: FormListFieldData[];
     mode: FormListMode;
+    disabled?: boolean;
 }
 declare const ActionButton: React.FC<Props>;
 export default ActionButton;

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

@@ -0,0 +1,242 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/popconfirm/style";
+import _Popconfirm from "antd/es/popconfirm";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["label", "onClick", "onHandle", "actionType", "needConfirm", "confirmProps", "title"],
+  _excluded2 = ["onClick", "label"];
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isFunction } from 'lodash';
+import { useMemo } from 'react';
+import { CopyOutlined, DownSquareOutlined, PlusSquareOutlined, UpSquareOutlined } from '@ant-design/icons';
+import ProIcon from '../../../../../ProIcon';
+var getDefaultActions = function getDefaultActions(mode) {
+  var originActions = {
+    add: {
+      onClick: function onClick(record, _ref) {
+        var namePath = _ref.namePath,
+          index = _ref.index,
+          operation = _ref.operation,
+          form = _ref.form;
+        var add = operation.add;
+        add(undefined, index + 1);
+      },
+      type: 'text',
+      label: '新增',
+      icon: _jsx(PlusSquareOutlined, {})
+    },
+    delete: {
+      onClick: function onClick(record, _ref2) {
+        var namePath = _ref2.namePath,
+          index = _ref2.index,
+          operation = _ref2.operation,
+          form = _ref2.form;
+        var remove = operation.remove;
+        remove(index);
+      },
+      type: 'text',
+      label: '删除',
+      icon: mode === 'less' ? _jsx(ProIcon, {
+        type: "solid-close",
+        className: "single-delete"
+      }) : _jsx(ProIcon, {
+        type: "delete"
+      })
+    },
+    copy: {
+      onClick: function onClick(record, _ref3) {
+        var namePath = _ref3.namePath,
+          index = _ref3.index,
+          operation = _ref3.operation,
+          form = _ref3.form;
+        var add = operation.add;
+        add(record, index + 1);
+      },
+      type: 'text',
+      label: '复制',
+      icon: _jsx(CopyOutlined, {})
+    },
+    moveUp: {
+      onClick: function onClick(record, _ref4) {
+        var namePath = _ref4.namePath,
+          index = _ref4.index,
+          operation = _ref4.operation,
+          form = _ref4.form;
+        var move = operation.move;
+        move(index, index - 1);
+      },
+      type: 'text',
+      label: '上移',
+      icon: _jsx(UpSquareOutlined, {})
+    },
+    moveDown: {
+      onClick: function onClick(record, _ref5) {
+        var namePath = _ref5.namePath,
+          index = _ref5.index,
+          operation = _ref5.operation,
+          form = _ref5.form;
+        var move = operation.move;
+        move(index, index + 1);
+      },
+      type: 'text',
+      label: '下移',
+      icon: _jsx(DownSquareOutlined, {})
+    }
+  };
+  if (mode === 'block') {
+    Object.keys(originActions).forEach(function (key) {
+      originActions[key].type = 'default';
+    });
+  }
+  if (mode === 'line') {
+    Object.keys(originActions).forEach(function (key) {
+      delete originActions[key].label;
+    });
+  }
+  if (mode === 'less') {
+    Object.keys(originActions).forEach(function (key) {
+      delete originActions[key].label;
+    });
+  }
+  return originActions;
+};
+var defaultActionProps = [{
+  actionType: 'delete'
+}];
+var ActionButton = function ActionButton(props) {
+  var namePath = props.namePath,
+    form = props.form,
+    field = props.field,
+    operation = props.operation,
+    index = props.index,
+    length = props.length,
+    disabled = props.disabled,
+    fields = props.fields,
+    min = props.min,
+    max = props.max,
+    mode = props.mode;
+  // 默认显示一个delete
+  var actionProps = useMemo(function () {
+    var _props$actionProps;
+    if (!((_props$actionProps = props.actionProps) === null || _props$actionProps === void 0 ? void 0 : _props$actionProps.find(function (item) {
+      return item.actionType === 'delete';
+    }))) {
+      return (props === null || props === void 0 ? void 0 : props.actionProps) ? [].concat(_toConsumableArray(props.actionProps), defaultActionProps) : defaultActionProps;
+    }
+    return props.actionProps;
+  }, [props.actionProps]);
+  var handleClick = function handleClick(callback, index, item) {
+    var value = form.getFieldValue(namePath);
+    var data = callback === null || callback === void 0 ? void 0 : callback(value, {
+      namePath: namePath,
+      index: index,
+      operation: operation,
+      form: form
+    });
+    if ((item === null || item === void 0 ? void 0 : item.actionType) === 'add') {
+      operation.add(data, index !== undefined ? index + 1 : undefined);
+    }
+  };
+  var defaultActions = useMemo(function () {
+    return getDefaultActions(mode);
+  }, [mode]);
+  return _jsx(_Space, {
+    align: "start",
+    className: "pro-form-list-action",
+    children: actionProps === null || actionProps === void 0 ? void 0 : actionProps.map(function (item) {
+      if (item.show === false) return _jsx(_Fragment, {});
+      if (isFunction(item.show) && !item.show(form.getFieldValue(namePath), {
+        namePath: namePath,
+        index: index,
+        form: form
+      })) {
+        return _jsx(_Fragment, {});
+      }
+      var label = item.label,
+        onClick = item.onClick,
+        onHandle = item.onHandle,
+        actionType = item.actionType,
+        needConfirm = item.needConfirm,
+        confirmProps = item.confirmProps,
+        title = item.title,
+        rest = _objectWithoutProperties(item, _excluded);
+      var _needConfirm = needConfirm || confirmProps;
+      var _confirmProps = !confirmProps || confirmProps === true ? {} : confirmProps;
+      var _onClick = onClick || onHandle;
+      if (['add', 'delete', 'copy', 'moveUp', 'moveDown'].includes(actionType)) {
+        // 禁用状态默认隐藏内置操作按钮
+        if (disabled) return _jsx(_Fragment, {});
+        var _defaultActions$actio = defaultActions[actionType],
+          internalOnClick = _defaultActions$actio.onClick,
+          defaultLabel = _defaultActions$actio.label,
+          defaultRest = _objectWithoutProperties(_defaultActions$actio, _excluded2);
+        // 小于min不可删除
+        if (min && min >= fields.length && ['delete'].includes(actionType)) {
+          return false;
+        }
+        // 大于等于max不可新增和复制
+        if (max && max <= fields.length && ['add', 'copy'].includes(actionType)) {
+          return false;
+        }
+        // 下标为零 不可向上移动
+        if (index === 0 && ['moveUp'].includes(actionType)) {
+          return false;
+        }
+        // 下标最大 不可向下移动
+        if (index + 1 === fields.length && ['moveDown'].includes(actionType)) {
+          return false;
+        }
+        return _needConfirm ? _jsx(_Popconfirm, _objectSpread(_objectSpread({
+          title: title !== null && title !== void 0 ? title : '您确定要删除该条数据吗?',
+          onCancel: function onCancel(e) {
+            return e.stopPropagation();
+          },
+          onConfirm: function onConfirm(e) {
+            handleClick(_onClick || internalOnClick, index, item);
+          }
+        }, _confirmProps), {}, {
+          children: _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({}, defaultRest), rest), {}, {
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            },
+            children: label || defaultLabel
+          }))
+        }), "".concat(item === null || item === void 0 ? void 0 : item.actionType).concat(index)) : _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({}, defaultRest), rest), {}, {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            handleClick(_onClick || internalOnClick, index, item);
+          },
+          children: label || defaultLabel
+        }), "".concat(item === null || item === void 0 ? void 0 : item.actionType).concat(index));
+      }
+      return needConfirm ? _jsx(_Popconfirm, _objectSpread(_objectSpread({
+        title: title !== null && title !== void 0 ? title : '您确定要删除该条数据吗?',
+        onCancel: function onCancel(e) {
+          return e.stopPropagation();
+        },
+        onConfirm: function onConfirm() {
+          return handleClick(_onClick, index);
+        }
+      }, _confirmProps), {}, {
+        children: _jsx(_Button, _objectSpread(_objectSpread({}, rest), {}, {
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: label
+        }))
+      }), "".concat(item === null || item === void 0 ? void 0 : item.actionType).concat(index)) : /*#__PURE__*/_createElement(_Button, _objectSpread(_objectSpread({}, rest), {}, {
+        key: "".concat(item === null || item === void 0 ? void 0 : item.actionType).concat(index),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          handleClick(_onClick, index);
+        }
+      }), label);
+    })
+  });
+};
+export default ActionButton;

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

@@ -0,0 +1,19 @@
+import { ColProps, FormListFieldData } from 'antd';
+import React from 'react';
+import { InternalNamePath } from 'antd/es/form/interface';
+import type { levelType } from '@/ProLayout/components/ProCollapse/PropTypes';
+import type { FormListProps } from '../propsType';
+interface Props extends Omit<FormListProps, 'toolbarProps'> {
+    index: number;
+    namePath: InternalNamePath;
+    disabled?: boolean;
+    isView?: boolean;
+    colProps: ColProps;
+    field: Omit<FormListFieldData, 'key'> & {
+        key: string;
+    };
+    level?: levelType;
+    towCollapse?: boolean;
+}
+declare const BlockFields: React.FC<Props>;
+export default BlockFields;

package/es/ProForm/components/{base → combination}/FormList/components/BlockFields.js

@@ -2,7 +2,8 @@ import "antd/es/row/style";
 import _Row from "antd/es/row";
 import "antd/es/space/style";
 import _Space from "antd/es/space";
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { isFunction } from 'lodash';
 import ActionButton from './ActionButton';
 import RenderFields from '../../../render/RenderFields';
@@ -33,37 +34,40 @@ var BlockFields = function BlockFields(props) {
     }
     return title;
   }, [title, index]);
-  return /*#__PURE__*/React.createElement(_Space, {
-    direction: "vertical"
-  }, /*#__PURE__*/React.createElement(ProCollapse, {
-    title: _title,
-    index: index,
-    form: form,
-    // namePath={namePath}
-    level: level,
-    towCollapse: towCollapse,
-    extra: /*#__PURE__*/React.createElement(ActionButton, {
-      min: min,
-      max: max,
+  return _jsx(_Space, {
+    direction: "vertical",
+    children: _jsx(ProCollapse, {
+      title: _title,
       index: index,
-      length: fields.length,
-      operation: operation,
-      namePath: namePath,
       form: form,
-      field: field,
-      fields: fields,
-      actionProps: actionProps,
-      mode: mode
+      // namePath={namePath}
+      level: level,
+      towCollapse: towCollapse,
+      extra: actionProps !== false && _jsx(ActionButton, {
+        min: min,
+        max: max,
+        index: index,
+        length: fields.length,
+        operation: operation,
+        namePath: namePath,
+        form: form,
+        field: field,
+        fields: fields,
+        actionProps: actionProps,
+        mode: mode,
+        disabled: disabled
+      }),
+      children: _jsx(_Row, {
+        gutter: 24,
+        children: _jsx(RenderFields, {
+          columns: columns,
+          form: form,
+          colProps: colProps,
+          disabled: disabled,
+          isView: isView
+        })
+      }, field.key)
     })
-  }, /*#__PURE__*/React.createElement(_Row, {
-    key: field.key,
-    gutter: 24
-  }, /*#__PURE__*/React.createElement(RenderFields, {
-    columns: columns,
-    form: form,
-    colProps: colProps,
-    disabled: disabled,
-    isView: isView
-  }))));
+  });
 };
 export default BlockFields;

package/es/ProForm/components/{base → combination}/FormList/components/BlockTitle.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { NamePath } from 'antd/lib/form/interface';
+import { NamePath } from 'antd/es/form/interface';
 import { FormInstance } from 'antd';
-import { FormListMode } from '../index';
-export type TitleRender = (record: Record<string, any>, index: number, form: FormInstance) => any;
-export type TitleType = string | React.ReactNode | TitleRender;
+import type { FormListMode, TitleType } from '../propsType';
 interface Props {
     mode: FormListMode;
     namePath: NamePath;

package/es/ProForm/components/{base → combination}/FormList/components/BlockTitle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { isFunction } from 'lodash';
 var BlockTitle = function BlockTitle(props) {
@@ -10,7 +11,7 @@ var BlockTitle = function BlockTitle(props) {
     return null;
   }
   if (!title) {
-    return /*#__PURE__*/React.createElement("div", null);
+    return _jsx("div", {});
   }
   if ( /*#__PURE__*/React.isValidElement(title)) {
     return title;
@@ -20,8 +21,9 @@ var BlockTitle = function BlockTitle(props) {
     var record = form.getFieldValue(namePath);
     titleContent = title(record, index, form);
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pro-form-list-block-title"
-  }, titleContent);
+  return _jsx("div", {
+    className: "pro-form-list-block-title",
+    children: titleContent
+  });
 };
 export default BlockTitle;

package/es/ProForm/components/{base → combination}/FormList/components/LineFields.d.ts

@@ -1,14 +1,17 @@
 import { ColProps, FormListFieldData } from 'antd';
 import React from 'react';
-import { InternalNamePath } from 'antd/lib/form/interface';
-import { Props as FromListProps } from '../index';
-interface Props extends Omit<FromListProps, 'toolbarProps'> {
+import { InternalNamePath } from 'antd/es/form/interface';
+import { FormListProps } from '../propsType';
+interface Props extends Omit<FormListProps, 'toolbarProps'> {
+    className?: string;
     index: number;
     namePath: InternalNamePath;
     disabled?: boolean;
     isView?: boolean;
     colProps: ColProps;
-    field: FormListFieldData;
+    field: Omit<FormListFieldData, 'key'> & {
+        key: string;
+    };
 }
 declare const LineFields: React.FC<Props>;
 export default LineFields;

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

@@ -0,0 +1,85 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import ProIcon from '../../../../../ProIcon';
+import ActionButton from './ActionButton';
+import RenderFields from '../../../render/RenderFields';
+var LineFields = function LineFields(props) {
+  var mode = props.mode,
+    index = props.index,
+    form = props.form,
+    namePath = props.namePath,
+    min = props.min,
+    max = props.max,
+    fields = props.fields,
+    operation = props.operation,
+    field = props.field,
+    actionProps = props.actionProps,
+    columns = props.columns,
+    colProps = props.colProps,
+    disabled = props.disabled,
+    isView = props.isView,
+    draggable = props.draggable,
+    className = props.className;
+  var isLess = mode === 'less';
+  var _useSortable = useSortable({
+      id: field.key,
+      disabled: disabled
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging,
+    setActivatorNodeRef = _useSortable.setActivatorNodeRef;
+  var classnames = classNames(_defineProperty({
+    'pro-form-list': true,
+    'pro-form-list-line': mode === 'line'
+  }, className, !!className));
+  var style = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+    transition: transition
+  };
+  return _jsxs("div", {
+    className: classnames,
+    ref: setNodeRef,
+    style: style,
+    children: [!disabled && draggable && _jsx("div", _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+      className: "pro-form-list-drag-handle",
+      ref: setActivatorNodeRef,
+      children: _jsx(ProIcon, {
+        type: "drag"
+      })
+    })), _jsx(_Row, {
+      gutter: isLess ? 0 : 24,
+      children: _jsx(RenderFields, {
+        columns: columns,
+        form: form,
+        colProps: colProps,
+        disabled: disabled,
+        isView: isView
+      })
+    }), actionProps !== false && _jsx(ActionButton, {
+      min: min,
+      max: max,
+      index: index,
+      length: fields.length,
+      operation: operation,
+      namePath: namePath,
+      form: form,
+      field: field,
+      fields: fields,
+      actionProps: actionProps,
+      mode: mode,
+      disabled: disabled
+    })]
+  });
+};
+export default LineFields;

package/{lib/ProForm/components/base → es/ProForm/components/combination}/FormList/components/ToolbarButton.d.ts

@@ -1,9 +1,9 @@
-import { InternalNamePath } from 'antd/lib/form/interface';
+import { InternalNamePath } from 'antd/es/form/interface';
 import React from 'react';
-import { ActionProps } from '../index';
+import { ToolbarActionProps } from '../propsType';
 import { Props as ActionButtonProps } from './ActionButton';
 interface Props extends Omit<ActionButtonProps, 'actionProps' | 'field' | 'index' | 'mode' | 'namePath'> {
-    toolbarProps: ActionProps[];
+    toolbarProps: ToolbarActionProps[];
     namePath: InternalNamePath;
     disabled?: boolean;
     isView?: boolean;

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

@@ -0,0 +1,107 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["label", "onClick", "onHandle", "actionType"],
+  _excluded2 = ["onClick", "label"];
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { PlusOutlined } from '@ant-design/icons';
+import { isFunction } from 'lodash';
+import { useMemo } from 'react';
+var actions = {
+  add: {
+    onClick: function onClick(value, _ref) {
+      var operation = _ref.operation,
+        form = _ref.form,
+        namePath = _ref.namePath;
+      operation.add();
+    },
+    label: '新增一行',
+    type: 'link',
+    icon: _jsx(PlusOutlined, {})
+  }
+};
+var defaultActionProps = [{
+  actionType: 'add'
+}];
+var ToolbarButton = function ToolbarButton(props) {
+  var namePath = props.namePath,
+    form = props.form,
+    operation = props.operation,
+    length = props.length,
+    fields = props.fields,
+    min = props.min,
+    max = props.max,
+    disabled = props.disabled,
+    isView = props.isView;
+  // 默认显示一个delete
+  var toolbarProps = useMemo(function () {
+    var _props$toolbarProps;
+    if (!((_props$toolbarProps = props.toolbarProps) === null || _props$toolbarProps === void 0 ? void 0 : _props$toolbarProps.find(function (item) {
+      return item.actionType === 'add';
+    }))) {
+      return (props === null || props === void 0 ? void 0 : props.toolbarProps) ? [].concat(_toConsumableArray(props.toolbarProps), defaultActionProps) : defaultActionProps;
+    }
+    return props.toolbarProps;
+  }, [props.toolbarProps]);
+  var handleClick = function handleClick(callback, item) {
+    var value = form.getFieldValue(namePath);
+    var data = callback === null || callback === void 0 ? void 0 : callback(value, {
+      operation: operation,
+      form: form,
+      namePath: namePath
+    });
+    if ((item === null || item === void 0 ? void 0 : item.actionType) === 'add' && data) {
+      operation.add(data);
+    }
+  };
+  if (disabled || isView) {
+    return null;
+  }
+  return _jsx(_Space, {
+    align: "start",
+    className: "pro-form-list-toolbar",
+    children: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.map(function (item) {
+      if (item.show === false) return _jsx(_Fragment, {});
+      if (isFunction(item.show) && !item.show(form.getFieldValue(namePath), {
+        namePath: namePath,
+        form: form
+      })) {
+        return _jsx(_Fragment, {});
+      }
+      var label = item.label,
+        _onClick2 = item.onClick,
+        onHandle = item.onHandle,
+        actionType = item.actionType,
+        rest = _objectWithoutProperties(item, _excluded);
+      var _onClick = _onClick2 || onHandle;
+      if (['add'].includes(actionType)) {
+        if (disabled) return _jsx(_Fragment, {});
+        var _actions$actionType = actions[actionType],
+          internalOnClick = _actions$actionType.onClick,
+          defaultLabel = _actions$actionType.label,
+          defaultRest = _objectWithoutProperties(_actions$actionType, _excluded2);
+        // 大于等于max不可新增
+        if (max && max <= fields.length && ['add'].includes(actionType)) {
+          return false;
+        }
+        return _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({}, actions[actionType]), rest), {}, {
+          onClick: function onClick() {
+            return handleClick(_onClick || internalOnClick, item);
+          },
+          children: label || defaultLabel
+        }), actionType);
+      }
+      return _jsx(_Button, _objectSpread(_objectSpread({}, rest), {}, {
+        onClick: function onClick() {
+          return handleClick(_onClick2, item);
+        },
+        children: label
+      }), actionType);
+    })
+  });
+};
+export default ToolbarButton;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FormListRef, FormListProps } from './propsType';
+declare const _default: React.ForwardRefExoticComponent<FormListProps & React.RefAttributes<FormListRef>>;
+export default _default;