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

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

@@ -0,0 +1,129 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { toArray } from '../../../utils';
+import { namesPathTransform } from './utils';
+import ToolbarButton from './components/ToolbarButton';
+import BlockFields from './components/BlockFields';
+import LineFields from './components/LineFields';
+var FormList = function FormList(props, ref) {
+  var columns = props.columns,
+    otherProps = props.otherProps,
+    min = props.min,
+    max = props.max,
+    toolbarProps = props.toolbarProps,
+    fields = props.fields,
+    operation = props.operation,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'line' : _props$mode,
+    meta = props.meta,
+    _props$span = props.span,
+    span = _props$span === void 0 ? 8 : _props$span;
+  var _fields = fields.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      key: String(item.key)
+    });
+  });
+  var form = otherProps.form,
+    name = otherProps.name,
+    isView = otherProps.isView,
+    disabled = otherProps.disabled;
+  var errors = meta.errors;
+  var _namePath = toArray(name);
+  var processColumns = useCallback(function (fieldName, namePath) {
+    return columns.map(function (item) {
+      // names的name处理
+      var _name = Array.isArray(item === null || item === void 0 ? void 0 : item.names) ? [fieldName, namesPathTransform({
+        names: item === null || item === void 0 ? void 0 : item.names,
+        prefixNamePath: namePath
+      })] : [fieldName].concat(_toConsumableArray(toArray(item.name)));
+      return _objectSpread(_objectSpread({}, item), {}, {
+        name: _name,
+        names: (item === null || item === void 0 ? void 0 : item.names) ? item.names.map(function (nameItem) {
+          return [].concat(_toConsumableArray(namePath), _toConsumableArray(toArray(nameItem)));
+        }) : item.names,
+        index: fieldName,
+        namePath: namePath,
+        label: mode === 'less' ? undefined : item.label
+      });
+    });
+  }, [columns]);
+  useImperativeHandle(ref, function () {
+    return {
+      operation: operation
+    };
+  });
+  var handleDragEnd = function handleDragEnd(drag) {
+    var active = drag.active,
+      over = drag.over;
+    if (active.id !== over.id) {
+      var activeIndex = _fields.findIndex(function (item) {
+        return item.key === active.id;
+      });
+      var overIndex = _fields.findIndex(function (item) {
+        return item.key === over.id;
+      });
+      props.operation.move(activeIndex, overIndex);
+    }
+  };
+  return _jsx(DndContext, {
+    onDragEnd: handleDragEnd,
+    children: _jsxs(SortableContext, {
+      items: _fields.map(function (item) {
+        return {
+          id: item.key
+        };
+      }),
+      strategy: verticalListSortingStrategy,
+      children: [_fields.map(function (field, index) {
+        var namePath = [].concat(_toConsumableArray(_namePath), [index]);
+        var _columns = processColumns(index, namePath);
+        return mode === 'block' ? _jsx(BlockFields, _objectSpread(_objectSpread({}, props), {}, {
+          columns: _columns,
+          disabled: disabled || (props === null || props === void 0 ? void 0 : props.disabled),
+          isView: isView,
+          namePath: namePath,
+          index: index,
+          field: field,
+          colProps: {
+            span: span
+          },
+          form: form
+        }), field.key) : _jsx(LineFields, _objectSpread(_objectSpread({
+          className: _fields.length === index + 1 ? 'pro-form-list-last' : ''
+        }, props), {}, {
+          mode: mode,
+          columns: _columns,
+          disabled: disabled || (props === null || props === void 0 ? void 0 : props.disabled),
+          isView: isView,
+          namePath: namePath,
+          index: index,
+          field: field,
+          colProps: {
+            span: mode === 'less' ? 24 : span
+          },
+          form: form
+        }), field.key);
+      }), _jsx(_Form.ErrorList, {
+        errors: errors
+      }), toolbarProps !== false && _jsx(ToolbarButton, {
+        disabled: disabled,
+        isView: isView,
+        min: min,
+        max: max,
+        length: fields.length,
+        operation: operation,
+        namePath: _namePath,
+        form: form,
+        fields: fields,
+        toolbarProps: toolbarProps
+      })]
+    })
+  });
+};
+export default /*#__PURE__*/forwardRef(FormList);

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { FormInstance } from 'antd/es/form/Form';
+import type { ButtonProps, FormListFieldData, FormListOperation, PopconfirmProps } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { levelType } from '@/ProLayout/components/ProCollapse/PropTypes';
+import type { ProColumnProps, ProFormOtherProps } from '../../../propsType';
+export type TitleRender = (record: Record<string, any>, index: number, form: FormInstance) => any;
+export type TitleType = string | React.ReactNode | TitleRender;
+type Callback = (record: any, option: Pick<Option, 'namePath' | 'index' | 'operation' | 'form'>) => any | void;
+export type ToolbarCallback = (record: any, option: Pick<Option, 'namePath' | 'form' | 'operation'>) => any | void;
+export interface Option {
+    index: number;
+    namePath: InternalNamePath;
+    form: FormInstance;
+    operation: FormListOperation;
+}
+export interface ActionProps extends Omit<ButtonProps, 'onClick'> {
+    actionType?: 'add' | 'delete' | 'copy' | 'moveUp' | 'moveDown';
+    onHandle?: Callback;
+    onClick?: Callback;
+    label?: string;
+    needConfirm?: boolean;
+    confirmProps?: boolean | PopconfirmProps;
+    title?: string;
+    show?: boolean | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath'>) => boolean);
+}
+export interface ToolbarActionProps extends Omit<ActionProps, 'actionType' | 'onHandle' | 'onClick' | 'show'> {
+    actionType?: 'add';
+    onHandle?: ToolbarCallback;
+    onClick?: ToolbarCallback;
+    show?: boolean | ((record: any, option: Pick<Option, 'form' | 'namePath'>) => boolean);
+}
+export type FormListMode = 'block' | 'line' | 'less';
+export interface FormListProps {
+    columns: ProColumnProps[];
+    otherProps?: ProFormOtherProps;
+    form?: FormInstance;
+    min?: number;
+    max?: number;
+    actionProps?: ActionProps[] | false;
+    toolbarProps?: ToolbarActionProps[] | false;
+    value?: any[];
+    onChange?: (record: any[], option: Pick<Option, 'namePath' | 'form'>) => void;
+    fields: FormListFieldData[];
+    operation: FormListOperation;
+    title?: string | TitleType;
+    mode?: FormListMode;
+    level?: levelType;
+    disabled?: boolean;
+    span?: number;
+    towCollapse?: boolean;
+    meta: {
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    };
+    draggable?: boolean;
+}
+export type PropsWithRef = FormListProps & React.RefAttributes<FormListRef>;
+export interface FormListRef {
+    operation: FormListOperation;
+}
+export {};

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

@@ -0,0 +1,71 @@
+.pro-form-list-block-title {
+  height: 14px;
+  margin: 3px 0;
+  padding-left: 7px;
+  font-weight: 600;
+  line-height: 14px;
+  border-left: 4px solid #006aff;
+}
+
+.pro-form-list {
+  display: flex;
+  padding-bottom: 0;
+
+  &.pro-form-list-last {
+    .pro-form-list-drag-handle,
+    .ant-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .single-delete {
+    width: 14px !important;
+    height: 14px !important;
+    color: #939599;
+
+    &:hover {
+      color: #8f8c8c;
+    }
+  }
+
+  &:nth-child(1) {
+    flex: 1;
+  }
+
+  .pro-form-list-action {
+    padding-bottom: var(--zaui-height-size-md, 16px);
+
+    & > .ant-space-item:first-child > .ant-btn-link {
+      margin-left: 8px;
+    }
+  }
+
+  .pro-form-list-drag-handle {
+    display: flex;
+    align-items: center;
+    height: @zaui-height-size-lg;
+    margin-bottom: 22px;
+    padding: 0;
+    padding-right: @zaui-space-size-sm;
+    border: none;
+  }
+}
+
+.pro-form-list-line {
+  padding: var(--zaui-height-size-md, 16px);
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.018);
+  }
+}
+
+.pro-form-list-toolbar,
+.pro-form-list-action {
+  .ant-btn-link {
+    padding: 4px 0;
+  }
+
+  .ant-btn-text:hover {
+    background: transparent;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GroupProps } from './propsType';
+declare const Group: React.FC<GroupProps>;
+export default Group;

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

@@ -0,0 +1,71 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { omit } from 'lodash';
+import classnames from 'classnames';
+import RenderFields from '../../render/RenderFields';
+import { insertSeparator, parseName } from './utils';
+var Group = function Group(props) {
+  var columns = props.children,
+    otherProps = props.otherProps,
+    className = props.className,
+    _props$space = props.space,
+    space = _props$space === void 0 ? {
+      size: 12
+    } : _props$space,
+    id = props.id;
+  var name = otherProps.name,
+    form = otherProps.form;
+  if (!Array.isArray(otherProps === null || otherProps === void 0 ? void 0 : otherProps.names)) {
+    console.error('Warning: Composite form components whose type is Group must be configured with names');
+  }
+  var _parentNames = parseName(id);
+  var data = useMemo(function () {
+    var fieldList = [];
+    var result = columns.map(function (item) {
+      return _objectSpread(_objectSpread({
+        disabled: props === null || props === void 0 ? void 0 : props.disabled
+      }, item), {}, {
+        noStyle: (space === null || space === void 0 ? void 0 : space.compact) || (space === null || space === void 0 ? void 0 : space.separator),
+        parentNames: _parentNames
+      });
+    });
+    var node = _jsx(_Button, {
+      className: "group-separator",
+      children: space.separator
+    });
+    return {
+      columns: insertSeparator(result, space, node, otherProps),
+      fieldList: fieldList
+    };
+  }, [name, columns, space]);
+  var _className = classnames(_defineProperty({
+    '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;
+    })
+  }, "".concat(className), className));
+  return _jsx("div", {
+    className: _className,
+    children: space.compact || (space === null || space === void 0 ? void 0 : space.separator) ? _jsx(_Space.Compact, {
+      children: _jsx(RenderFields, _objectSpread({
+        columns: data.columns,
+        form: form
+      }, omit(otherProps, ['colProps'])))
+    }) : _jsx(_Space, _objectSpread(_objectSpread({}, omit(space, ['separator', 'compact'])), {}, {
+      children: data.columns.map(function (column, index) {
+        return _jsx(RenderFields, _objectSpread({
+          columns: [column],
+          form: form
+        }, omit(otherProps, ['colProps'])), (column === null || column === void 0 ? void 0 : column.name) || index);
+      })
+    }))
+  });
+};
+export default Group;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RowProps, SpaceProps } from 'antd';
+import { ProColumnProps, ProFormOtherProps } from '../../../propsType';
+export interface SpaceType extends SpaceProps {
+    /**
+     * 是否紧凑合并
+     */
+    compact?: Boolean;
+    /**
+     * 分隔符
+     */
+    separator?: string | React.ReactNode;
+    /** 间隔距离 */
+    size?: number;
+}
+export interface GroupProps {
+    children?: ProColumnProps[];
+    space?: SpaceType;
+    otherProps?: ProFormOtherProps;
+    rowProps?: RowProps;
+    className?: string;
+    value?: any;
+    id?: string;
+    disabled?: boolean | (() => void);
+}

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

@@ -0,0 +1,107 @@
+.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: var(--zaui-border-radius, 4px);
+  border-end-start-radius  : var(--zaui-border-radius, 4px);
+}
+
+.end-radius() {
+  border-start-end-radius: var(--zaui-border-radius, 4px);
+  border-end-end-radius  : var(--zaui-border-radius, 4px);
+}
+
+.pro-group {
+  width: unset !important;
+
+  &.pro-group-diy-width {
+    .ant-space .ant-space-item {
+      width: auto;
+
+      .ant-space-item {
+        width: auto;
+      }
+    }
+  }
+
+  .ant-space {
+    width: 100%;
+
+    .ant-space-item {
+      width: 100%;
+    }
+
+    .ant-form-item {
+
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .ant-form-item-label {
+    display: none;
+  }
+
+  .ant-space-compact {
+    align-items: center;
+    flex       : auto;
+    width      : 100%;
+
+    .ant-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;
+    }
+
+    // 定制内敛合并样式
+    .ant-input-affix-wrapper,
+    .ant-select {
+      .border-radius(0, 0, 0, 0);
+
+      &:nth-child(n+2) {
+        margin-inline-start: -1px
+      }
+
+      &:first-child {
+        .start-radius()
+      }
+
+      &:last-child {
+        .end-radius()
+      }
+    }
+
+    .ant-select {
+      .ant-select-selector {
+        .border-radius(0, 0, 0, 0);
+      }
+
+      &:first-child {
+        .ant-select-selector {
+          .start-radius()
+        }
+      }
+
+      &:last-child {
+        .ant-select-selector {
+          .end-radius()
+        }
+      }
+
+    }
+
+    // 报错样式定制
+    .ant-input-affix-wrapper-status-error~.group-separator {
+      border-color: var(--ant-error-color);
+      color       : var(--ant-error-color);
+    }
+  }
+}

package/es/ProForm/components/combination/Group/utils.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SpaceType } from './propsType';
+/**
+* 插入间隔符
+* @param columns 表单配置数组
+* @returns
+*/
+export declare const insertSeparator: (columns: any, space?: SpaceType, separatorNode?: ReactNode, otherProps?: any) => any;
+/** 解析name */
+export declare const parseName: (name: string) => any[];

package/es/ProForm/components/combination/Group/utils.js

@@ -0,0 +1,49 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+/**
+* 插入间隔符
+* @param columns 表单配置数组
+* @returns
+*/
+export var insertSeparator = function insertSeparator(columns, space, separatorNode, otherProps) {
+  var _columns = columns;
+  var _ref = otherProps || {},
+    names = _ref.names;
+  // 紧凑模式存在names时，自动给下级拆解name
+  if (names) {
+    _columns = _columns.map(function (column, index) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        name: names[index]
+      });
+    });
+  }
+  if (!(space === null || space === void 0 ? void 0 : space.separator)) {
+    return _columns;
+  }
+  return _columns.reduce(function (result, current, index, array) {
+    // 将当前元素添加到结果数组中
+    result.push(current);
+    // 如果当前元素不是最后一个元素，则添加间隔符
+    if (index < array.length - 1) {
+      result.push({
+        component: separatorNode,
+        fieldProps: {
+          disabled: true
+        }
+      });
+    }
+    return result;
+  }, []);
+};
+/** 解析name */
+export var parseName = function parseName(name) {
+  var result = [];
+  var parts = name.split('_');
+  parts.forEach(function (part) {
+    if (!Number.isNaN(Number(part))) {
+      result.push(Number(part));
+    } else {
+      result.push(part);
+    }
+  });
+  return result;
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { AddressProps } from './propsType';
-declare const _default: React.MemoExoticComponent<(props: AddressProps) => React.JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<(props: AddressProps) => JSX.Element>;
 export default _default;