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

package/es/form/components/FormItem/warpField.js

@@ -0,0 +1,323 @@
+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/FormItem/warpField.tsx
+import classnames from "classnames";
+import { FieldContext as RcFieldContext } from "rc-field-form";
+import React, { useContext, useMemo, useState } from "react";
+import {
+  omitUndefined,
+  pickProFormItemProps,
+  stringify,
+  useDeepCompareMemo,
+  useRefFunction
+} from "../../../utils";
+import FieldContext from "../../FieldContext";
+import { useGridHelpers } from "../../helpers";
+import ProFormDependency from "../Dependency";
+import ProFormItem from "./index";
+var TYPE = Symbol("ProFormComponent");
+var WIDTH_SIZE_ENUM = {
+  // 适用于短数字，短文本或者选项
+  xs: 104,
+  s: 216,
+  // 适用于较短字段录入、如姓名、电话、ID 等。
+  sm: 216,
+  m: 328,
+  // 标准宽度，适用于大部分字段长度。
+  md: 328,
+  l: 440,
+  // 适用于较长字段录入，如长网址、标签组、文件路径等。
+  lg: 440,
+  // 适用于长文本录入，如长链接、描述、备注等，通常搭配自适应多行输入框或定高文本域使用。
+  xl: 552
+};
+var ignoreWidthValueType = ["switch", "radioButton", "radio", "rate"];
+function warpField(Field, config) {
+  Field.displayName = "ProFormComponent";
+  const FieldWithContext = (props) => {
+    const _a = __spreadValues(__spreadValues({}, props == null ? void 0 : props.filedConfig), config), {
+      valueType: tmpValueType,
+      customLightMode,
+      lightFilterLabelFormatter,
+      valuePropName = "value",
+      ignoreWidth,
+      defaultProps
+    } = _a, defaultFormItemProps = __objRest(_a, [
+      "valueType",
+      "customLightMode",
+      "lightFilterLabelFormatter",
+      "valuePropName",
+      "ignoreWidth",
+      "defaultProps"
+    ]);
+    const _b = __spreadValues(__spreadValues({}, defaultProps), props), {
+      label,
+      tooltip,
+      placeholder,
+      width,
+      bordered,
+      messageVariables,
+      ignoreFormItem,
+      transform,
+      convertValue,
+      readonly,
+      allowClear,
+      colSize,
+      getFormItemProps,
+      getFieldProps,
+      filedConfig,
+      cacheForSwr,
+      proFieldProps
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "tooltip",
+      "placeholder",
+      "width",
+      "bordered",
+      "messageVariables",
+      "ignoreFormItem",
+      "transform",
+      "convertValue",
+      "readonly",
+      "allowClear",
+      "colSize",
+      "getFormItemProps",
+      "getFieldProps",
+      "filedConfig",
+      "cacheForSwr",
+      "proFieldProps"
+    ]);
+    const valueType = tmpValueType || rest.valueType;
+    const isIgnoreWidth = useMemo(
+      () => ignoreWidth || ignoreWidthValueType.includes(valueType),
+      [ignoreWidth, valueType]
+    );
+    const [, forceUpdate] = useState();
+    const [onlyChange, forceUpdateByOnChange] = useState();
+    const contextValue = React.useContext(FieldContext);
+    const changedProps = useDeepCompareMemo(
+      () => {
+        return {
+          formItemProps: getFormItemProps == null ? void 0 : getFormItemProps(),
+          fieldProps: getFieldProps == null ? void 0 : getFieldProps()
+        };
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]
+    );
+    const fieldProps = useDeepCompareMemo(() => {
+      const newFieldProps = __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, ignoreFormItem ? omitUndefined({ value: rest.value }) : {}), {
+        placeholder,
+        disabled: props.disabled
+      }), contextValue.fieldProps), changedProps.fieldProps), rest.fieldProps);
+      newFieldProps.style = omitUndefined(newFieldProps == null ? void 0 : newFieldProps.style);
+      return newFieldProps;
+    }, [
+      ignoreFormItem,
+      rest.value,
+      rest.fieldProps,
+      placeholder,
+      props.disabled,
+      contextValue.fieldProps,
+      changedProps.fieldProps
+    ]);
+    const restFormItemProps = pickProFormItemProps(rest);
+    const formItemProps = useDeepCompareMemo(
+      () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, contextValue.formItemProps), restFormItemProps), changedProps.formItemProps), rest.formItemProps),
+      [
+        changedProps.formItemProps,
+        contextValue.formItemProps,
+        rest.formItemProps,
+        restFormItemProps
+      ]
+    );
+    const otherProps = useDeepCompareMemo(
+      () => __spreadValues(__spreadValues({
+        messageVariables
+      }, defaultFormItemProps), formItemProps),
+      [defaultFormItemProps, formItemProps, messageVariables]
+    );
+    const { prefixName } = useContext(RcFieldContext);
+    const proFieldKey = useDeepCompareMemo(() => {
+      var _a2;
+      let name = otherProps == null ? void 0 : otherProps.name;
+      if (Array.isArray(name))
+        name = name.join("_");
+      if (Array.isArray(prefixName) && name)
+        name = `${prefixName.join(".")}.${name}`;
+      const key = name && `form-${(_a2 = contextValue.formKey) != null ? _a2 : ""}-field-${name}`;
+      return key;
+    }, [stringify(otherProps == null ? void 0 : otherProps.name), prefixName, contextValue.formKey]);
+    const onChange = useRefFunction((...restParams) => {
+      var _a2;
+      if (getFormItemProps || getFieldProps) {
+        forceUpdateByOnChange([]);
+      } else if (rest.formItemRender) {
+        forceUpdate([]);
+      }
+      (_a2 = fieldProps == null ? void 0 : fieldProps.onChange) == null ? void 0 : _a2.call(fieldProps, ...restParams);
+    });
+    const style = useDeepCompareMemo(() => {
+      const newStyle = __spreadValues({
+        width: width && !WIDTH_SIZE_ENUM[width] ? width : contextValue.grid ? "100%" : void 0
+      }, fieldProps == null ? void 0 : fieldProps.style);
+      if (isIgnoreWidth)
+        Reflect.deleteProperty(newStyle, "width");
+      return omitUndefined(newStyle);
+    }, [stringify(fieldProps == null ? void 0 : fieldProps.style), contextValue.grid, isIgnoreWidth, width]);
+    const className = useDeepCompareMemo(() => {
+      const isSizeEnum = width && WIDTH_SIZE_ENUM[width];
+      return classnames(fieldProps == null ? void 0 : fieldProps.className, {
+        "pro-field": isSizeEnum,
+        [`pro-field-${width}`]: isSizeEnum && !isIgnoreWidth
+      }) || void 0;
+    }, [width, fieldProps == null ? void 0 : fieldProps.className, isIgnoreWidth]);
+    const fieldProFieldProps = useDeepCompareMemo(() => {
+      return omitUndefined(__spreadValues(__spreadProps(__spreadValues({}, contextValue.proFieldProps), {
+        mode: rest == null ? void 0 : rest.mode,
+        readonly,
+        params: rest.params,
+        proFieldKey,
+        cacheForSwr
+      }), proFieldProps));
+    }, [
+      contextValue.proFieldProps,
+      rest == null ? void 0 : rest.mode,
+      rest.params,
+      readonly,
+      proFieldKey,
+      cacheForSwr,
+      proFieldProps
+    ]);
+    const fieldFieldProps = useDeepCompareMemo(() => {
+      return __spreadProps(__spreadValues({
+        onChange,
+        allowClear
+      }, fieldProps), {
+        style,
+        className
+      });
+    }, [allowClear, className, onChange, fieldProps, style]);
+    const field = useDeepCompareMemo(() => {
+      return /* @__PURE__ */ React.createElement(
+        Field,
+        __spreadProps(__spreadValues({
+          key: props.proFormFieldKey || props.name
+        }, rest), {
+          fieldProps: fieldFieldProps,
+          proFieldProps: fieldProFieldProps,
+          ref: props == null ? void 0 : props.fieldRef
+        })
+      );
+    }, [fieldProFieldProps, fieldFieldProps, rest]);
+    const formItem = useDeepCompareMemo(() => {
+      var _a2, _b2, _c, _d;
+      return /* @__PURE__ */ React.createElement(
+        ProFormItem,
+        __spreadProps(__spreadValues({
+          label: label && (proFieldProps == null ? void 0 : proFieldProps.light) !== true ? label : void 0,
+          tooltip: (proFieldProps == null ? void 0 : proFieldProps.light) !== true && tooltip,
+          valuePropName,
+          key: props.proFormFieldKey || ((_a2 = otherProps.name) == null ? void 0 : _a2.toString())
+        }, otherProps), {
+          ignoreFormItem,
+          transform,
+          dataFormat: fieldProps == null ? void 0 : fieldProps.format,
+          valueType,
+          messageVariables: __spreadValues({
+            label: label || ""
+          }, otherProps == null ? void 0 : otherProps.messageVariables),
+          convertValue,
+          lightProps: omitUndefined(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, fieldProps), {
+            valueType,
+            bordered,
+            allowClear: (_c = (_b2 = field == null ? void 0 : field.props) == null ? void 0 : _b2.allowClear) != null ? _c : allowClear,
+            light: proFieldProps == null ? void 0 : proFieldProps.light,
+            label,
+            customLightMode,
+            labelFormatter: lightFilterLabelFormatter,
+            valuePropName,
+            footerRender: (_d = field == null ? void 0 : field.props) == null ? void 0 : _d.footerRender
+          }), rest.lightProps), otherProps.lightProps))
+        }),
+        field
+      );
+    }, [
+      label,
+      proFieldProps == null ? void 0 : proFieldProps.light,
+      tooltip,
+      valuePropName,
+      props.proFormFieldKey,
+      otherProps,
+      ignoreFormItem,
+      transform,
+      fieldProps,
+      valueType,
+      convertValue,
+      bordered,
+      field,
+      allowClear,
+      customLightMode,
+      lightFilterLabelFormatter,
+      rest.lightProps
+    ]);
+    const { ColWrapper } = useGridHelpers(rest);
+    return /* @__PURE__ */ React.createElement(ColWrapper, null, formItem);
+  };
+  const DependencyWrapper = (props) => {
+    const { dependencies } = props;
+    return dependencies ? /* @__PURE__ */ React.createElement(
+      ProFormDependency,
+      {
+        name: dependencies,
+        originDependencies: props == null ? void 0 : props.originDependencies
+      },
+      (values) => {
+        return /* @__PURE__ */ React.createElement(
+          FieldWithContext,
+          __spreadValues({
+            dependenciesValues: values,
+            dependencies
+          }, props)
+        );
+      }
+    ) : /* @__PURE__ */ React.createElement(FieldWithContext, __spreadValues({ dependencies }, props));
+  };
+  return DependencyWrapper;
+}
+var warpField_default = warpField;
+export {
+  TYPE,
+  warpField_default as default,
+  warpField
+};

package/es/form/components/List/ListContainer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ProFormListItemProps } from './ListItem';
+declare const ProFormListContainer: React.FC<ProFormListItemProps>;
+export { ProFormListContainer };

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

@@ -0,0 +1,199 @@
+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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/form/components/List/ListContainer.tsx
+import { PlusOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+import omit from "rc-util/lib/omit";
+import { useContext, useMemo, useRef, useState } from "react";
+import { ProProvider, useIntl } from "../../../provider";
+import { nanoid, runFunction } from "../../../utils";
+import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
+import { ProFormListItem } from "./ListItem";
+var ProFormListContainer = (props) => {
+  const intl = useIntl();
+  const {
+    creatorButtonProps,
+    prefixCls,
+    children,
+    creatorRecord,
+    action,
+    fields,
+    actionGuard,
+    max,
+    fieldExtraRender,
+    meta,
+    containerClassName,
+    containerStyle,
+    onAfterAdd,
+    onAfterRemove
+  } = props;
+  const { hashId } = useContext(ProProvider);
+  const fieldKeyMap = useRef(/* @__PURE__ */ new Map());
+  const [loading, setLoading] = useState(false);
+  const uuidFields = useMemo(() => {
+    return fields.map((field) => {
+      var _a, _b, _c;
+      if (!((_a = fieldKeyMap.current) == null ? void 0 : _a.has(field.key.toString()))) {
+        (_b = fieldKeyMap.current) == null ? void 0 : _b.set(field.key.toString(), nanoid());
+      }
+      const uuid = (_c = fieldKeyMap.current) == null ? void 0 : _c.get(field.key.toString());
+      return __spreadProps(__spreadValues({}, field), {
+        uuid
+      });
+    });
+  }, [fields]);
+  const wrapperAction = useMemo(() => {
+    const wrapAction = __spreadValues({}, action);
+    const count = uuidFields.length;
+    if (actionGuard == null ? void 0 : actionGuard.beforeAddRow) {
+      wrapAction.add = (...rest) => __async(void 0, null, function* () {
+        const success = yield actionGuard.beforeAddRow(...rest, count);
+        if (success) {
+          const res = action.add(...rest);
+          onAfterAdd == null ? void 0 : onAfterAdd(...rest, count + 1);
+          return res;
+        }
+        return false;
+      });
+    } else {
+      wrapAction.add = (...rest) => __async(void 0, null, function* () {
+        const res = action.add(...rest);
+        onAfterAdd == null ? void 0 : onAfterAdd(...rest, count + 1);
+        return res;
+      });
+    }
+    if (actionGuard == null ? void 0 : actionGuard.beforeRemoveRow) {
+      wrapAction.remove = (...rest) => __async(void 0, null, function* () {
+        const success = yield actionGuard.beforeRemoveRow(...rest, count);
+        if (success) {
+          const res = action.remove(...rest);
+          onAfterRemove == null ? void 0 : onAfterRemove(...rest, count - 1);
+          return res;
+        }
+        return false;
+      });
+    } else {
+      wrapAction.remove = (...rest) => __async(void 0, null, function* () {
+        const res = action.remove(...rest);
+        onAfterRemove == null ? void 0 : onAfterRemove(...rest, count - 1);
+        return res;
+      });
+    }
+    return wrapAction;
+  }, [
+    action,
+    actionGuard == null ? void 0 : actionGuard.beforeAddRow,
+    actionGuard == null ? void 0 : actionGuard.beforeRemoveRow,
+    onAfterAdd,
+    onAfterRemove,
+    uuidFields.length
+  ]);
+  const creatorButton = useMemo(() => {
+    if (creatorButtonProps === false || uuidFields.length === max)
+      return null;
+    const {
+      position = "bottom",
+      creatorButtonText = intl.getMessage(
+        "editableTable.action.add",
+        "添加一行数据"
+      )
+    } = creatorButtonProps || {};
+    return /* @__PURE__ */ React.createElement(
+      Button,
+      __spreadProps(__spreadValues({
+        className: `${prefixCls}-creator-button-${position} ${hashId || ""}`.trim(),
+        type: "dashed",
+        loading,
+        block: true,
+        icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
+      }, omit(creatorButtonProps || {}, ["position", "creatorButtonText"])), {
+        onClick: () => __async(void 0, null, function* () {
+          var _a;
+          setLoading(true);
+          let index = uuidFields.length;
+          if (position === "top")
+            index = 0;
+          yield wrapperAction.add((_a = runFunction(creatorRecord)) != null ? _a : {}, index);
+          setLoading(false);
+        })
+      }),
+      creatorButtonText
+    );
+  }, [
+    creatorButtonProps,
+    uuidFields.length,
+    max,
+    intl,
+    prefixCls,
+    hashId,
+    loading,
+    wrapperAction,
+    creatorRecord
+  ]);
+  const readOnlyContext = useContext(EditOrReadOnlyContext);
+  const defaultStyle = __spreadValues({
+    width: "max-content",
+    maxWidth: "100%",
+    minWidth: "100%"
+  }, containerStyle);
+  const itemList = useMemo(() => {
+    return uuidFields.map((field, index) => {
+      return /* @__PURE__ */ React.createElement(
+        ProFormListItem,
+        __spreadProps(__spreadValues({}, props), {
+          key: field.uuid,
+          field,
+          index,
+          action: wrapperAction,
+          count: uuidFields.length
+        }),
+        children
+      );
+    });
+  }, [children, props, uuidFields, wrapperAction]);
+  if (readOnlyContext.mode === "read" || props.readonly === true) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, itemList);
+  }
+  return /* @__PURE__ */ React.createElement("div", { style: defaultStyle, className: containerClassName }, creatorButtonProps !== false && (creatorButtonProps == null ? void 0 : creatorButtonProps.position) === "top" && creatorButton, itemList, fieldExtraRender && fieldExtraRender(wrapperAction, meta), creatorButtonProps !== false && (creatorButtonProps == null ? void 0 : creatorButtonProps.position) !== "top" && creatorButton);
+};
+export {
+  ProFormListContainer
+};