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

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

@@ -0,0 +1,82 @@
+import type { ColProps } from 'antd';
+import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
+import type { FormListFieldData, FormListOperation, FormListProps } from 'antd/lib/form/FormList';
+import type { NamePath } from 'antd/lib/form/interface';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ProFormGridConfig } from '../../typing';
+import type { ChildrenItemFunction, FormListActionGuard, ProFromListCommonProps } from './ListItem';
+declare const FormListContext: React.Context<Record<string, any> | (FormListFieldData & {
+    listName: NamePath;
+})>;
+export type FormListActionType<T = any> = FormListOperation & {
+    get: (index: number) => T | undefined;
+    getList: () => T[] | undefined;
+};
+export type ProFormListProps<T> = Omit<FormListProps, 'children' | 'rules'> & ProFromListCommonProps & {
+    /**
+     * @name 列表的标签
+     */
+    label?: ReactNode;
+    /**
+     * @name 标题旁边的？号提示展示的信息
+     *
+     * @example 自定义提示信息
+     * <ProForm.Group title="标题"  tooltip="自定义提示信息">
+     *  @example 自定义Icon
+     * <ProForm.Group title="标题"  tooltip={{icon:<Info/>,title:自定义提示信息}}>
+     */
+    tooltip?: LabelTooltipType;
+    /**
+     * @name 行操作的钩子配置
+     *
+     * @example 阻止删除 actionGuard={{beforeAddRow:()=> return false}}
+     * @example 阻止新增 actionGuard={{beforeAddRow:()=> return false}}
+     */
+    actionGuard?: FormListActionGuard;
+    children?: ReactNode | ChildrenItemFunction;
+    /**
+     * @name 在最后增加一个 dom
+     *
+     * @example 自定义新增按钮
+     * fieldExtraRender={(fieldAction) => {<a onClick={()=>fieldAction.add({id:"xx"})}>新增</a>}}
+     */
+    fieldExtraRender?: (fieldAction: FormListOperation, meta: {
+        errors?: React.ReactNode[];
+        warnings?: React.ReactNode[];
+    }) => React.ReactNode;
+    /**
+     * @name 获取到 list 操作实例
+     * @description 可用删除，新增，移动等操作
+     *
+     * @example  actionRef?.current.add?.({},1);
+     * @example  actionRef?.current.remove?.(1);
+     * @example  actionRef?.current.move?.(1,2);
+     * @example  actionRef?.current.get?.(1);
+     * @example  actionRef?.current.getList?.();
+     */
+    actionRef?: React.MutableRefObject<FormListActionType<T> | undefined>;
+    /** 放在div上面的属性 */
+    style?: React.CSSProperties;
+    /**
+     * 数据新增成功回调
+     */
+    onAfterAdd?: (...params: [...Parameters<FormListOperation['add']>, number]) => void;
+    /**
+     * 数据移除成功回调
+     */
+    onAfterRemove?: (...params: [...Parameters<FormListOperation['remove']>, number]) => void;
+    /** 是否同时校验列表是否为空 */
+    isValidateList?: boolean;
+    /** 当 isValidateList 为 true 时执行为空提示 */
+    emptyListMessage?: string;
+    rules?: (Required<FormListProps>['rules'][number] & {
+        required?: boolean;
+    })[];
+    required?: boolean;
+    wrapperCol?: ColProps;
+    className?: string;
+    readonly?: boolean;
+} & Pick<ProFormGridConfig, 'colProps' | 'rowProps'>;
+declare function ProFormList<T>(props: ProFormListProps<T>): React.JSX.Element | null;
+export { FormListContext, ProFormList };

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

@@ -0,0 +1,275 @@
+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 { 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({});
+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 = {
+      Icon: CopyOutlined,
+      tooltipText: intl.getMessage("copyThisLine", "复制此项")
+    },
+    children,
+    deleteIconProps = {
+      Icon: DeleteOutlined,
+      tooltipText: intl.getMessage("deleteThisLine", "删除此项")
+    },
+    arrowSort,
+    upIconProps = {
+      Icon: ArrowUpOutlined,
+      tooltipText: intl.getMessage("sortUpThisLine", "向上排序")
+    },
+    downIconProps = {
+      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) {
+      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
+        ]);
+      },
+      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.`
+    );
+  }, [proFormContext.formRef]);
+  useEffect(() => {
+    if (!setFieldValueType || !props.name) {
+      return;
+    }
+    setFieldValueType(
+      [props.name].flat(1).filter((itemName) => itemName !== void 0),
+      {
+        valueType: "formList",
+        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
+          },
+          children
+        ), /* @__PURE__ */ React.createElement(Form.ErrorList, { errors: meta.errors }));
+      })
+    )))
+  );
+}
+export {
+  FormListContext,
+  ProFormList
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,104 @@
+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 { 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"
+            }
+          }
+        }
+      }
+    },
+    [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
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProFormList", (token) => {
+    const proToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProStyle(proToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,30 @@
+import type { InputNumberProps } from 'antd';
+import React from 'react';
+import { FieldMoneyProps } from '../../../field';
+import type { ProFormFieldItemProps } from '../../typing';
+export type ProFormMoneyProps = ProFormFieldItemProps<Omit<FieldMoneyProps, 'valueType' | 'text'> & InputNumberProps<number>> & {
+    customSymbol?: string;
+    locale?: string;
+    min?: InputNumberProps<number>['min'];
+    max?: InputNumberProps<number>['min'];
+    placeholder?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<{
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<FieldMoneyProps, "text" | "valueType"> & InputNumberProps<number>> | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    emptyText?: React.ReactNode;
+    cacheForSwr?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+    proFieldProps?: import("src/utils").ProFieldProps | undefined;
+    footerRender?: import("../../typing").LightFilterFooterRender | undefined;
+    children?: any;
+} & Omit<import("src/form/components").ProFormItemProps, "valueType"> & Pick<import("../../typing").ProFormGridConfig, "colProps"> & import("../../typing").ExtendsProps & {
+    customSymbol?: string | undefined;
+    locale?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    placeholder?: string | undefined;
+} & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,87 @@
+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/Money/index.tsx
+import React from "react";
+import { FieldMoney } from "../../../field";
+import { ProConfigProvider } from "../../../provider";
+import ProFormField from "../Field";
+var ProFormMoney = (_a, ref) => {
+  var _b = _a, { fieldProps, proFieldProps, locale, min, max } = _b, rest = __objRest(_b, ["fieldProps", "proFieldProps", "locale", "min", "max"]);
+  return /* @__PURE__ */ React.createElement(
+    ProConfigProvider,
+    {
+      valueTypeMap: {
+        money: {
+          render: (text, props) => /* @__PURE__ */ React.createElement(
+            FieldMoney,
+            __spreadProps(__spreadValues({}, props), {
+              placeholder: props.placeholder,
+              text
+            })
+          ),
+          formItemRender: (text, props) => /* @__PURE__ */ React.createElement(
+            FieldMoney,
+            __spreadProps(__spreadValues({}, props), {
+              placeholder: props.placeholder,
+              text
+            })
+          )
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      ProFormField,
+      __spreadValues({
+        valueType: {
+          type: "money",
+          locale
+        },
+        fieldProps: __spreadValues({
+          min,
+          max
+        }, fieldProps),
+        ref,
+        filedConfig: {
+          defaultProps: {
+            width: "100%"
+          }
+        },
+        proFieldProps
+      }, rest)
+    )
+  );
+};
+var Money_default = React.forwardRef(ProFormMoney);
+export {
+  Money_default as default
+};

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

@@ -0,0 +1,44 @@
+import type { RadioGroupProps, RadioProps } from 'antd';
+import { Radio } from 'antd';
+import React from 'react';
+import type { ProFormFieldItemProps, ProFormFieldRemoteProps } from '../../typing';
+export type ProFormRadioGroupProps = ProFormFieldItemProps<RadioGroupProps, HTMLDivElement> & {
+    layout?: 'horizontal' | 'vertical';
+    radioType?: 'button' | 'radio';
+    options?: RadioGroupProps['options'];
+} & ProFormFieldRemoteProps;
+declare const RadioGroup: React.FC<ProFormRadioGroupProps>;
+declare const ProFormRadio: React.ComponentClass<{
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & RadioProps> | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    emptyText?: React.ReactNode;
+    cacheForSwr?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+    proFieldProps?: import("src/utils/typing").ProFieldProps | undefined;
+    footerRender?: import("../../typing").LightFilterFooterRender | undefined;
+    children?: any;
+} & Omit<import("src/form/components").ProFormItemProps, "valueType"> & Pick<import("../../typing").ProFormGridConfig, "colProps"> & import("../../typing").ExtendsProps & {
+    getFormItemProps?: (() => Record<string, any>) | undefined;
+    getFieldProps?: (() => Record<string, any>) | undefined;
+}, any> | React.FunctionComponent<{
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & RadioProps> | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    emptyText?: React.ReactNode;
+    cacheForSwr?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+    proFieldProps?: import("src/utils/typing").ProFieldProps | undefined;
+    footerRender?: import("../../typing").LightFilterFooterRender | undefined;
+    children?: any;
+} & Omit<import("src/form/components").ProFormItemProps, "valueType"> & Pick<import("../../typing").ProFormGridConfig, "colProps"> & import("../../typing").ExtendsProps & {
+    getFormItemProps?: (() => Record<string, any>) | undefined;
+    getFieldProps?: (() => Record<string, any>) | undefined;
+}>;
+declare const WrappedProFormRadio: typeof ProFormRadio & {
+    Group: typeof RadioGroup;
+    Button: typeof Radio.Button;
+};
+export default WrappedProFormRadio;