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

package/es/form/components/FormItem/index.d.ts

@@ -0,0 +1,62 @@
+import type { FormItemProps } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import React from 'react';
+import { ProFieldValueType, SearchConvertKeyFn, SearchTransformKeyFn } from '../../../utils';
+import type { LightWrapperProps } from '../../BaseForm';
+declare const FormItemProvide: React.Context<{
+    name?: NamePath;
+    label?: React.ReactNode;
+}>;
+type WarpFormItemProps = {
+    /** @name 前置的dom * */
+    addonBefore?: React.ReactNode;
+    /** @name 后置的dom * */
+    addonAfter?: React.ReactNode;
+    /**
+     * 包裹的样式，一般没用
+     */
+    addonWarpStyle?: React.CSSProperties;
+    /**
+     * @name 获取时转化值，一般用于将数据格式化为组件接收的格式
+     * @param value 字段的值
+     * @param namePath 字段的name
+     * @returns 字段新的值
+     *
+     *
+     * @example a,b => [a,b]     convertValue: (value,namePath)=> value.split(",")
+     * @example string => json   convertValue: (value,namePath)=> JSON.parse(value)
+     * @example number => date   convertValue: (value,namePath)=> Dayjs(value)
+     * @example YYYY-MM-DD => date   convertValue: (value,namePath)=> Dayjs(value,"YYYY-MM-DD")
+     * @example  string => object   convertValue: (value,namePath)=> { return {value,label:value} }
+     */
+    convertValue?: SearchConvertKeyFn;
+    help?: React.ReactNode | ((params: {
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    }) => React.ReactNode);
+};
+export type ProFormItemProps = FormItemProps & {
+    ignoreFormItem?: boolean;
+    valueType?: ProFieldValueType;
+    /**
+     * @name 提交时转化值，一般用于将值转化为提交的数据
+     * @param value 字段的值
+     * @param namePath 字段的name
+     * @param allValues 所有的字段
+     * @returns 字段新的值，如果返回对象，会和所有值 merge 一次
+     *
+     * @example {name:[a,b] => {name:a,b }    transform: (value,namePath,allValues)=> value.join(",")
+     * @example {name: string => { newName:string }    transform: (value,namePath,allValues)=> { newName:value }
+     * @example {name:dayjs} => {name:string transform: (value,namePath,allValues)=> value.format("YYYY-MM-DD")
+     * @example {name:dayjs}=> {name:时间戳} transform: (value,namePath,allValues)=> value.valueOf()
+     * @example {name:{value,label}} => { name:string} transform: (value,namePath,allValues)=> value.value
+     * @example {name:{value,label}} => { valueName,labelName  } transform: (value,namePath,allValues)=> { valueName:value.value, labelName:value.name }
+     */
+    transform?: SearchTransformKeyFn;
+    dataFormat?: string;
+    lightProps?: LightWrapperProps;
+    proFormFieldKey?: any;
+} & WarpFormItemProps;
+declare const ProFormItem: React.FC<ProFormItemProps>;
+export { FormItemProvide };
+export default ProFormItem;

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

@@ -0,0 +1,333 @@
+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/index.tsx
+import { ConfigProvider, Form } from "antd";
+import omit from "rc-util/lib/omit";
+import React, { useContext, useEffect, useMemo } from "react";
+import {
+  isDropdownValueType,
+  omitUndefined,
+  useDeepCompareMemo,
+  useRefFunction
+} from "../../../utils";
+import { LightWrapper } from "../../BaseForm";
+import FieldContext from "../../FieldContext";
+import { FormListContext } from "../List";
+var FormItemProvide = React.createContext({});
+var WithValueFomFiledProps = (formFieldProps) => {
+  var _b, _c;
+  const _a = formFieldProps, {
+    children: filedChildren,
+    onChange,
+    onBlur,
+    ignoreFormItem,
+    valuePropName = "value"
+  } = _a, restProps = __objRest(_a, [
+    "children",
+    "onChange",
+    "onBlur",
+    "ignoreFormItem",
+    "valuePropName"
+  ]);
+  const isProFormComponent = (
+    // @ts-ignore
+    ((_b = filedChildren == null ? void 0 : filedChildren.type) == null ? void 0 : _b.displayName) !== "ProFormComponent"
+  );
+  const isValidElementForFiledChildren = !React.isValidElement(filedChildren);
+  const onChangeMemo = useRefFunction(function(...restParams) {
+    var _a2, _b2, _c2, _d, _e;
+    onChange == null ? void 0 : onChange(...restParams);
+    if (isProFormComponent)
+      return;
+    if (isValidElementForFiledChildren)
+      return void 0;
+    (_b2 = (_a2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, ...restParams);
+    (_e = (_d = (_c2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _c2.fieldProps) == null ? void 0 : _d.onChange) == null ? void 0 : _e.call(
+      _d,
+      ...restParams
+    );
+  });
+  const onBlurMemo = useRefFunction(function(...restParams) {
+    var _a2, _b2, _c2, _d, _e;
+    if (isProFormComponent)
+      return;
+    if (isValidElementForFiledChildren)
+      return;
+    onBlur == null ? void 0 : onBlur(...restParams);
+    (_b2 = (_a2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _a2.onBlur) == null ? void 0 : _b2.call(_a2, ...restParams);
+    (_e = (_d = (_c2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _c2.fieldProps) == null ? void 0 : _d.onBlur) == null ? void 0 : _e.call(
+      _d,
+      ...restParams
+    );
+  });
+  const omitOnBlurAndOnChangeProps = useDeepCompareMemo(
+    () => {
+      var _a2;
+      return omit(
+        // @ts-ignore
+        ((_a2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _a2.fieldProps) || {},
+        ["onBlur", "onChange"]
+      );
+    },
+    [
+      omit(
+        // @ts-ignore
+        ((_c = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _c.fieldProps) || {},
+        ["onBlur", "onChange"]
+      )
+    ]
+  );
+  const propsValuePropName = formFieldProps[valuePropName];
+  const fieldProps = useMemo(() => {
+    if (isProFormComponent)
+      return void 0;
+    if (isValidElementForFiledChildren)
+      return void 0;
+    return omitUndefined(__spreadProps(__spreadValues({
+      id: restProps.id,
+      // 优先使用 children.props.fieldProps，
+      // 比如 LightFilter 中可能需要通过 fieldProps 覆盖 Form.Item 默认的 onChange
+      [valuePropName]: propsValuePropName
+    }, omitOnBlurAndOnChangeProps), {
+      onBlur: onBlurMemo,
+      // 这个 onChange 是 Form.Item 添加上的，
+      // 要通过 fieldProps 透传给 ProField 调用
+      onChange: onChangeMemo
+    }));
+  }, [
+    propsValuePropName,
+    omitOnBlurAndOnChangeProps,
+    onBlurMemo,
+    onChangeMemo,
+    restProps.id,
+    valuePropName
+  ]);
+  const finalChange = useMemo(() => {
+    if (fieldProps)
+      return void 0;
+    if (!React.isValidElement(filedChildren))
+      return void 0;
+    return (...restParams) => {
+      var _a2, _b2;
+      onChange == null ? void 0 : onChange(...restParams);
+      (_b2 = (_a2 = filedChildren == null ? void 0 : filedChildren.props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, ...restParams);
+    };
+  }, [fieldProps, filedChildren, onChange]);
+  if (!React.isValidElement(filedChildren))
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, filedChildren);
+  return React.cloneElement(
+    filedChildren,
+    omitUndefined(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), {
+      [valuePropName]: formFieldProps[valuePropName]
+    }), filedChildren.props), {
+      onChange: finalChange,
+      fieldProps,
+      onBlur: isProFormComponent && !isValidElementForFiledChildren && onBlur
+    }))
+  );
+};
+var WarpFormItem = (_a) => {
+  var _b = _a, {
+    children,
+    addonAfter,
+    addonBefore,
+    valuePropName,
+    addonWarpStyle,
+    convertValue,
+    help
+  } = _b, props = __objRest(_b, [
+    "children",
+    "addonAfter",
+    "addonBefore",
+    "valuePropName",
+    "addonWarpStyle",
+    "convertValue",
+    "help"
+  ]);
+  const formDom = useMemo(() => {
+    let getValuePropsFunc = (value) => {
+      var _a2;
+      const newValue = (_a2 = convertValue == null ? void 0 : convertValue(value, props.name)) != null ? _a2 : value;
+      if (props.getValueProps)
+        return props.getValueProps(newValue);
+      return {
+        [valuePropName || "value"]: newValue
+      };
+    };
+    if (!convertValue && !props.getValueProps) {
+      getValuePropsFunc = void 0;
+    }
+    if (!addonAfter && !addonBefore) {
+      return /* @__PURE__ */ React.createElement(
+        Form.Item,
+        __spreadProps(__spreadValues({}, props), {
+          valuePropName,
+          getValueProps: getValuePropsFunc
+        }),
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      Form.Item,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+        help: typeof help !== "function" ? help : void 0,
+        valuePropName,
+        _internalItemRender: {
+          mark: "pro_table_render",
+          render: (inputProps, doms) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: __spreadValues({
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "wrap"
+              }, addonWarpStyle)
+            },
+            addonBefore ? /* @__PURE__ */ React.createElement("div", { style: { marginInlineEnd: 8 } }, addonBefore) : null,
+            doms.input,
+            addonAfter ? /* @__PURE__ */ React.createElement("div", { style: { marginInlineStart: 8 } }, addonAfter) : null
+          ), typeof help === "function" ? help({
+            errors: inputProps.errors,
+            warnings: inputProps.warnings
+          }) : doms.errorList, doms.extra)
+        }
+      }), props), {
+        getValueProps: getValuePropsFunc
+      }),
+      children
+    );
+  }, [addonAfter, addonBefore, children, convertValue == null ? void 0 : convertValue.toString(), props]);
+  return /* @__PURE__ */ React.createElement(
+    FormItemProvide.Provider,
+    {
+      value: {
+        name: props.name,
+        label: props.label
+      }
+    },
+    formDom
+  );
+};
+var ProFormItem = (props) => {
+  var _a, _b, _d, _e, _f, _g;
+  const { componentSize } = ((_b = (_a = ConfigProvider) == null ? void 0 : _a.useConfig) == null ? void 0 : _b.call(_a)) || {
+    componentSize: "middle"
+  };
+  const size = componentSize;
+  const _c = props, {
+    valueType,
+    transform,
+    dataFormat,
+    ignoreFormItem,
+    lightProps,
+    children: unusedChildren
+  } = _c, rest = __objRest(_c, [
+    "valueType",
+    "transform",
+    "dataFormat",
+    "ignoreFormItem",
+    "lightProps",
+    "children"
+  ]);
+  const formListField = useContext(FormListContext);
+  const name = useMemo(() => {
+    if (props.name === void 0)
+      return props.name;
+    if (formListField.name !== void 0) {
+      return [formListField.name, props.name].flat(1);
+    }
+    return Array.isArray(props.name) ? props.name : [props.name];
+  }, [formListField.name, props.name]);
+  const { setFieldValueType, formItemProps } = React.useContext(FieldContext);
+  useEffect(() => {
+    if (!setFieldValueType || !props.name) {
+      return;
+    }
+    setFieldValueType(name, {
+      valueType: valueType || "text",
+      dateFormat: dataFormat,
+      transform
+    });
+  }, [name, dataFormat, props.name, setFieldValueType, transform, valueType]);
+  const isDropdown = React.isValidElement(props.children) && isDropdownValueType(valueType || props.children.props.valueType);
+  const noLightFormItem = useMemo(() => {
+    if (!(lightProps == null ? void 0 : lightProps.light) || (lightProps == null ? void 0 : lightProps.customLightMode) || isDropdown) {
+      return true;
+    }
+    return false;
+  }, [lightProps == null ? void 0 : lightProps.customLightMode, isDropdown, lightProps == null ? void 0 : lightProps.light]);
+  if (typeof props.children === "function") {
+    return /* @__PURE__ */ React.createElement(
+      WarpFormItem,
+      __spreadProps(__spreadValues({}, rest), {
+        name,
+        key: rest.proFormFieldKey || ((_d = rest.name) == null ? void 0 : _d.toString())
+      }),
+      props.children
+    );
+  }
+  const children = /* @__PURE__ */ React.createElement(
+    WithValueFomFiledProps,
+    {
+      key: rest.proFormFieldKey || ((_e = rest.name) == null ? void 0 : _e.toString()),
+      valuePropName: props.valuePropName
+    },
+    props.children
+  );
+  const lightDom = noLightFormItem ? children : /* @__PURE__ */ React.createElement(
+    LightWrapper,
+    __spreadProps(__spreadValues({}, lightProps), {
+      key: rest.proFormFieldKey || ((_f = rest.name) == null ? void 0 : _f.toString()),
+      size
+    }),
+    children
+  );
+  if (ignoreFormItem) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, lightDom);
+  }
+  return /* @__PURE__ */ React.createElement(
+    WarpFormItem,
+    __spreadProps(__spreadValues(__spreadValues({
+      key: rest.proFormFieldKey || ((_g = rest.name) == null ? void 0 : _g.toString())
+    }, formItemProps), rest), {
+      name,
+      isListField: formListField.name !== void 0
+    }),
+    lightDom
+  );
+};
+var FormItem_default = ProFormItem;
+export {
+  FormItemProvide,
+  FormItem_default as default
+};

package/es/form/components/FormItem/warpField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ExtendsProps, ProFormFieldItemProps, ProFormItemCreateConfig } from '../../typing';
+export declare const TYPE: unique symbol;
+type ProFormComponent<P, Extends> = React.ComponentType<P & Extends>;
+/**
+ * 处理fieldProps和formItemProps为function时传进来的方法
+ * 目前只在SchemaForm时可能会有
+ */
+type FunctionFieldProps = {
+    getFormItemProps?: () => Record<string, any>;
+    getFieldProps?: () => Record<string, any>;
+};
+/**
+ * 这个方法的主要作用是帮助 Field 增加 FormItem 同时也会处理 lightFilter
+ *
+ * @param Field
+ * @param config
+ */
+export declare function warpField<P extends ProFormFieldItemProps = any>(Field: React.ComponentType<P> | React.ForwardRefExoticComponent<P>, config?: ProFormItemCreateConfig): ProFormComponent<P, ExtendsProps & FunctionFieldProps>;
+export default warpField;