@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/es/form/components/List/index.js

@@ -1,275 +1,218 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/form/components/List/index.tsx
-import {
-  ArrowDownOutlined,
-  ArrowUpOutlined,
-  CopyOutlined,
-  DeleteOutlined
-} from "@ant-design/icons";
-import { ConfigProvider, Form } from "antd";
-import classNames from "classnames";
-import { noteOnce } from "rc-util/lib/warning";
-import React, {
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef
-} from "react";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["transform", "actionRender", "creatorButtonProps", "label", "alwaysShowItemLabel", "tooltip", "creatorRecord", "itemRender", "rules", "itemContainerRender", "fieldExtraRender", "copyIconProps", "children", "deleteIconProps", "arrowSort", "upIconProps", "downIconProps", "actionRef", "style", "prefixCls", "actionGuard", "min", "max", "colProps", "wrapperCol", "rowProps", "onAfterAdd", "onAfterRemove", "isValidateList", "emptyListMessage", "className", "containerClassName", "containerStyle", "readonly"];
+import { ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
+import { warning } from '@rc-component/util';
+import { ConfigProvider, Form } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useIntl } from "../../../provider";
 import { ProFormContext } from "../../../utils";
 import FieldContext from "../../FieldContext";
 import { useGridHelpers } from "../../helpers";
 import { ProFormListContainer } from "./ListContainer";
 import { useStyle } from "./style";
-var FormListContext = React.createContext({});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var noteOnce = warning.noteOnce;
+var FormListContext = /*#__PURE__*/React.createContext({});
 function ProFormList(props) {
-  const actionRefs = useRef();
-  const context = useContext(ConfigProvider.ConfigContext);
-  const listContext = useContext(FormListContext);
-  const baseClassName = context.getPrefixCls("pro-form-list");
-  const intl = useIntl();
-  const { setFieldValueType } = React.useContext(FieldContext);
-  const _a = props, {
-    transform,
-    actionRender,
-    creatorButtonProps,
-    label,
-    alwaysShowItemLabel,
-    tooltip,
-    creatorRecord,
-    itemRender,
-    rules,
-    itemContainerRender,
-    fieldExtraRender,
-    copyIconProps = {
+  var actionRefs = useRef();
+  var context = useContext(ConfigProvider.ConfigContext);
+  var listContext = useContext(FormListContext);
+  var baseClassName = context.getPrefixCls('pro-form-list');
+  // Internationalization
+  var intl = useIntl();
+  /** 从 context 中拿到的值 */
+  var _React$useContext = React.useContext(FieldContext),
+    setFieldValueType = _React$useContext.setFieldValueType;
+  var transform = props.transform,
+    actionRender = props.actionRender,
+    creatorButtonProps = props.creatorButtonProps,
+    label = props.label,
+    alwaysShowItemLabel = props.alwaysShowItemLabel,
+    tooltip = props.tooltip,
+    creatorRecord = props.creatorRecord,
+    itemRender = props.itemRender,
+    rules = props.rules,
+    itemContainerRender = props.itemContainerRender,
+    fieldExtraRender = props.fieldExtraRender,
+    _props$copyIconProps = props.copyIconProps,
+    copyIconProps = _props$copyIconProps === void 0 ? {
       Icon: CopyOutlined,
-      tooltipText: intl.getMessage("copyThisLine", "复制此项")
-    },
-    children,
-    deleteIconProps = {
+      tooltipText: intl.getMessage('copyThisLine', '复制此项')
+    } : _props$copyIconProps,
+    _children = props.children,
+    _props$deleteIconProp = props.deleteIconProps,
+    deleteIconProps = _props$deleteIconProp === void 0 ? {
       Icon: DeleteOutlined,
-      tooltipText: intl.getMessage("deleteThisLine", "删除此项")
-    },
-    arrowSort,
-    upIconProps = {
+      tooltipText: intl.getMessage('deleteThisLine', '删除此项')
+    } : _props$deleteIconProp,
+    arrowSort = props.arrowSort,
+    _props$upIconProps = props.upIconProps,
+    upIconProps = _props$upIconProps === void 0 ? {
       Icon: ArrowUpOutlined,
-      tooltipText: intl.getMessage("sortUpThisLine", "向上排序")
-    },
-    downIconProps = {
+      tooltipText: intl.getMessage('sortUpThisLine', '向上排序')
+    } : _props$upIconProps,
+    _props$downIconProps = props.downIconProps,
+    downIconProps = _props$downIconProps === void 0 ? {
       Icon: ArrowDownOutlined,
-      tooltipText: intl.getMessage("sortDownThisLine", "向下排序")
-    },
-    actionRef,
-    style,
-    prefixCls,
-    actionGuard,
-    min,
-    max,
-    colProps,
-    wrapperCol,
-    rowProps,
-    onAfterAdd,
-    onAfterRemove,
-    isValidateList = false,
-    emptyListMessage = "列表不能为空",
-    className,
-    containerClassName,
-    containerStyle,
-    readonly
-  } = _a, rest = __objRest(_a, [
-    "transform",
-    "actionRender",
-    "creatorButtonProps",
-    "label",
-    "alwaysShowItemLabel",
-    "tooltip",
-    "creatorRecord",
-    "itemRender",
-    "rules",
-    "itemContainerRender",
-    "fieldExtraRender",
-    "copyIconProps",
-    "children",
-    "deleteIconProps",
-    "arrowSort",
-    "upIconProps",
-    "downIconProps",
-    "actionRef",
-    "style",
-    "prefixCls",
-    "actionGuard",
-    "min",
-    "max",
-    "colProps",
-    "wrapperCol",
-    "rowProps",
-    "onAfterAdd",
-    "onAfterRemove",
-    "isValidateList",
-    "emptyListMessage",
-    "className",
-    "containerClassName",
-    "containerStyle",
-    "readonly"
-  ]);
-  const { ColWrapper, RowWrapper } = useGridHelpers({ colProps, rowProps });
-  const proFormContext = useContext(ProFormContext);
-  const name = useMemo(() => {
-    if (listContext.name === void 0) {
+      tooltipText: intl.getMessage('sortDownThisLine', '向下排序')
+    } : _props$downIconProps,
+    actionRef = props.actionRef,
+    style = props.style,
+    prefixCls = props.prefixCls,
+    actionGuard = props.actionGuard,
+    min = props.min,
+    max = props.max,
+    colProps = props.colProps,
+    wrapperCol = props.wrapperCol,
+    rowProps = props.rowProps,
+    _onAfterAdd = props.onAfterAdd,
+    _onAfterRemove = props.onAfterRemove,
+    _props$isValidateList = props.isValidateList,
+    isValidateList = _props$isValidateList === void 0 ? false : _props$isValidateList,
+    _props$emptyListMessa = props.emptyListMessage,
+    emptyListMessage = _props$emptyListMessa === void 0 ? '列表不能为空' : _props$emptyListMessa,
+    className = props.className,
+    containerClassName = props.containerClassName,
+    containerStyle = props.containerStyle,
+    readonly = props.readonly,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useGridHelpers = useGridHelpers({
+      colProps: colProps,
+      rowProps: rowProps
+    }),
+    ColWrapper = _useGridHelpers.ColWrapper,
+    RowWrapper = _useGridHelpers.RowWrapper;
+  var proFormContext = useContext(ProFormContext);
+
+  // 处理 list 的嵌套
+  var name = useMemo(function () {
+    if (listContext.name === undefined) {
       return [rest.name].flat(1);
     }
     return [listContext.name, rest.name].flat(1);
   }, [listContext.name, rest.name]);
-  useImperativeHandle(
-    actionRef,
-    () => __spreadProps(__spreadValues({}, actionRefs.current), {
-      get: (index) => {
-        return proFormContext.formRef.current.getFieldValue([
-          ...name,
-          index
-        ]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(actionRef, function () {
+    return _objectSpread(_objectSpread({}, actionRefs.current), {}, {
+      get: function get(index) {
+        return proFormContext.formRef.current.getFieldValue([].concat(_toConsumableArray(name), [index]));
       },
-      getList: () => proFormContext.formRef.current.getFieldValue([...name])
-    }),
-    [name, proFormContext.formRef]
-  );
-  useEffect(() => {
-    noteOnce(
-      !!proFormContext.formRef,
-      `ProFormList 必须要放到 ProForm 中,否则会造成行为异常。`
-    );
-    noteOnce(
-      !!proFormContext.formRef,
-      `Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.`
-    );
+      getList: function getList() {
+        return proFormContext.formRef.current.getFieldValue(_toConsumableArray(name));
+      }
+    });
+  }, [name, proFormContext.formRef]);
+  useEffect(function () {
+    noteOnce(!!proFormContext.formRef, "ProFormList \u5FC5\u987B\u8981\u653E\u5230 ProForm \u4E2D,\u5426\u5219\u4F1A\u9020\u6210\u884C\u4E3A\u5F02\u5E38\u3002");
+    noteOnce(!!proFormContext.formRef, "Proformlist must be placed in ProForm, otherwise it will cause abnormal behavior.");
   }, [proFormContext.formRef]);
-  useEffect(() => {
+  useEffect(function () {
+    // 如果 setFieldValueType 和 props.name 不存在不存入
     if (!setFieldValueType || !props.name) {
       return;
     }
-    setFieldValueType(
-      [props.name].flat(1).filter((itemName) => itemName !== void 0),
-      {
-        valueType: "formList",
-        transform
-      }
-    );
+
+    // Field.type === 'ProField' 时 props 里面是有 valueType 的，所以要设置一下
+    // 写一个 ts 比较麻烦，用 any 顶一下
+    setFieldValueType([props.name].flat(1).filter(function (itemName) {
+      return itemName !== undefined;
+    }), {
+      valueType: 'formList',
+      transform: transform
+    });
   }, [props.name, setFieldValueType, transform]);
-  const { wrapSSR, hashId } = useStyle(baseClassName);
-  if (!proFormContext.formRef)
-    return null;
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(ColWrapper, null, /* @__PURE__ */ React.createElement("div", { className: classNames(baseClassName, hashId), style }, /* @__PURE__ */ React.createElement(
-      Form.Item,
-      __spreadProps(__spreadValues({
-        label,
-        prefixCls,
-        tooltip,
-        style,
-        required: rules == null ? void 0 : rules.some((rule) => rule.required),
-        wrapperCol,
-        className
-      }, rest), {
-        name: isValidateList ? name : void 0,
-        rules: isValidateList ? [
-          {
-            validator: (rule, value) => {
-              if (!value || value.length === 0) {
-                return Promise.reject(new Error(emptyListMessage));
-              }
-              return Promise.resolve();
-            },
-            required: true
-          }
-        ] : void 0
-      }),
-      /* @__PURE__ */ React.createElement(Form.List, __spreadProps(__spreadValues({ rules }, rest), { name }), (fields, action, meta) => {
-        actionRefs.current = action;
-        return /* @__PURE__ */ React.createElement(RowWrapper, null, /* @__PURE__ */ React.createElement(
-          ProFormListContainer,
-          {
-            name,
-            readonly: !!readonly,
-            originName: rest.name,
-            copyIconProps,
-            deleteIconProps,
-            arrowSort,
-            upIconProps,
-            downIconProps,
-            formInstance: proFormContext.formRef.current,
-            prefixCls: baseClassName,
-            meta,
-            fields,
-            itemContainerRender,
-            itemRender,
-            fieldExtraRender,
-            creatorButtonProps,
-            creatorRecord,
-            actionRender,
-            action,
-            actionGuard,
-            alwaysShowItemLabel,
-            min,
-            max,
-            count: fields.length,
-            onAfterAdd: (defaultValue, insertIndex, count) => {
-              if (isValidateList) {
-                proFormContext.formRef.current.validateFields([name]);
-              }
-              onAfterAdd == null ? void 0 : onAfterAdd(defaultValue, insertIndex, count);
-            },
-            onAfterRemove: (index, count) => {
-              if (isValidateList) {
-                if (count === 0) {
-                  proFormContext.formRef.current.validateFields([
-                    name
-                  ]);
-                }
-              }
-              onAfterRemove == null ? void 0 : onAfterRemove(index, count);
-            },
-            containerClassName,
-            containerStyle
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  if (!proFormContext.formRef) return null;
+  return wrapSSR( /*#__PURE__*/_jsx(ColWrapper, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(baseClassName, hashId),
+      style: style,
+      children: /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+        label: label,
+        prefixCls: prefixCls,
+        tooltip: tooltip,
+        style: style,
+        required: rules === null || rules === void 0 ? void 0 : rules.some(function (rule) {
+          return rule.required;
+        }),
+        wrapperCol: wrapperCol,
+        className: className
+      }, rest), {}, {
+        name: isValidateList ? name : undefined,
+        rules: isValidateList ? [{
+          validator: function validator(rule, value) {
+            if (!value || value.length === 0) {
+              return Promise.reject(new Error(emptyListMessage));
+            }
+            return Promise.resolve();
           },
-          children
-        ), /* @__PURE__ */ React.createElement(Form.ErrorList, { errors: meta.errors }));
-      })
-    )))
-  );
+          required: true
+        }] : undefined,
+        children: /*#__PURE__*/_jsx(Form.List, _objectSpread(_objectSpread({
+          rules: rules
+        }, rest), {}, {
+          name: name,
+          children: function children(fields, action, meta) {
+            // 将 action 暴露给外部
+            actionRefs.current = action;
+            return /*#__PURE__*/_jsxs(RowWrapper, {
+              children: [/*#__PURE__*/_jsx(ProFormListContainer, {
+                name: name,
+                readonly: !!readonly,
+                originName: rest.name,
+                copyIconProps: copyIconProps,
+                deleteIconProps: deleteIconProps,
+                arrowSort: arrowSort,
+                upIconProps: upIconProps,
+                downIconProps: downIconProps,
+                formInstance: proFormContext.formRef.current,
+                prefixCls: baseClassName,
+                meta: meta,
+                fields: fields,
+                itemContainerRender: itemContainerRender,
+                itemRender: itemRender,
+                fieldExtraRender: fieldExtraRender,
+                creatorButtonProps: creatorButtonProps,
+                creatorRecord: creatorRecord,
+                actionRender: actionRender,
+                action: action,
+                actionGuard: actionGuard,
+                alwaysShowItemLabel: alwaysShowItemLabel,
+                min: min,
+                max: max,
+                count: fields.length,
+                onAfterAdd: function onAfterAdd(defaultValue, insertIndex, count) {
+                  if (isValidateList) {
+                    proFormContext.formRef.current.validateFields([name]);
+                  }
+                  _onAfterAdd === null || _onAfterAdd === void 0 || _onAfterAdd(defaultValue, insertIndex, count);
+                },
+                onAfterRemove: function onAfterRemove(index, count) {
+                  if (isValidateList) {
+                    if (count === 0) {
+                      proFormContext.formRef.current.validateFields([name]);
+                    }
+                  }
+                  _onAfterRemove === null || _onAfterRemove === void 0 || _onAfterRemove(index, count);
+                },
+                containerClassName: containerClassName,
+                containerStyle: containerStyle,
+                children: _children
+              }), /*#__PURE__*/_jsx(Form.ErrorList, {
+                errors: meta.errors
+              })]
+            });
+          }
+        }))
+      }))
+    })
+  }));
 }
-export {
-  FormListContext,
-  ProFormList
-};
+export { FormListContext, ProFormList };

package/es/form/components/List/style.js

@@ -1,104 +1,57 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/form/components/List/style.ts
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = (token) => {
-  return {
-    [`${token.antCls}-pro`]: {
-      [`${token.antCls}-form:not(${token.antCls}-form-horizontal)`]: {
-        [token.componentCls]: {
-          [`&-item:not(${token.componentCls}-item-show-label)`]: {
-            [`${token.antCls}-form-item-label`]: {
-              display: "none"
-            }
-          }
-        }
+var genProStyle = function genProStyle(token) {
+  return _defineProperty(_defineProperty({}, "".concat(token.antCls, "-pro"), _defineProperty({}, "".concat(token.antCls, "-form:not(").concat(token.antCls, "-form-horizontal)"), _defineProperty({}, token.componentCls, _defineProperty({}, "&-item:not(".concat(token.componentCls, "-item-show-label)"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
+    display: 'none'
+  }))))), token.componentCls, _defineProperty(_defineProperty({
+    maxWidth: '100%',
+    '&-item': {
+      '&&-show-label': _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
+        display: 'inline-block'
+      }),
+      '&&-default:first-child': {
+        'div:first-of-type': _defineProperty({}, "".concat(token.antCls, "-form-item"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
+          display: 'inline-block'
+        }))
+      },
+      '&&-default:not(:first-child)': {
+        'div:first-of-type': _defineProperty({}, "".concat(token.antCls, "-form-item"), _defineProperty({}, "".concat(token.antCls, "-form-item-label"), {
+          display: 'none'
+        }))
       }
     },
-    [token.componentCls]: {
-      maxWidth: "100%",
-      "&-item": {
-        "&&-show-label": {
-          [`${token.antCls}-form-item-label`]: {
-            display: "inline-block"
-          }
-        },
-        "&&-default:first-child": {
-          "div:first-of-type": {
-            [`${token.antCls}-form-item`]: {
-              [`${token.antCls}-form-item-label`]: {
-                display: "inline-block"
-              }
-            }
-          }
-        },
-        "&&-default:not(:first-child)": {
-          "div:first-of-type": {
-            [`${token.antCls}-form-item`]: {
-              [`${token.antCls}-form-item-label`]: {
-                display: "none"
-              }
-            }
-          }
-        }
-      },
-      "&-action": {
-        display: "flex",
-        height: token.controlHeight,
-        marginBlockEnd: token.marginLG,
-        lineHeight: token.controlHeight + "px",
-        "&-small": {
-          height: token.controlHeightSM,
-          lineHeight: token.controlHeightSM
-        }
-      },
-      "&-action-icon": {
-        marginInlineStart: 8,
-        cursor: "pointer",
-        transition: "color 0.3s ease-in-out",
-        "&:hover": {
-          color: token.colorPrimaryTextHover
-        }
-      },
-      [`${token.proComponentsCls}-card ${token.proComponentsCls}-card-extra`]: {
-        [token.componentCls]: {
-          "&-action": {
-            marginBlockEnd: 0
-          }
-        }
-      },
-      "&-creator-button-top": {
-        marginBlockEnd: 24
+    '&-action': {
+      display: 'flex',
+      height: token.controlHeight,
+      marginBlockEnd: token.marginLG,
+      lineHeight: token.controlHeight + 'px',
+      '&-small': {
+        height: token.controlHeightSM,
+        lineHeight: token.controlHeightSM
+      }
+    },
+    '&-action-icon': {
+      marginInlineStart: 8,
+      cursor: 'pointer',
+      transition: 'color 0.3s ease-in-out',
+      '&:hover': {
+        color: token.colorPrimaryTextHover
       }
     }
-  };
+  }, "".concat(token.proComponentsCls, "-card ").concat(token.proComponentsCls, "-card-extra"), _defineProperty({}, token.componentCls, {
+    '&-action': {
+      marginBlockEnd: 0
+    }
+  })), '&-creator-button-top', {
+    marginBlockEnd: 24
+  }));
 };
-function useStyle(prefixCls) {
-  return useAntdStyle("ProFormList", (token) => {
-    const proToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProFormList', function (token) {
+    var proToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
     });
     return [genProStyle(proToken)];
   });
-}
-export {
-  useStyle
-};
+}