@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/field/components/Cascader/FieldCascaderEdit.d.ts

@@ -0,0 +1,17 @@
+import type { CascaderProps, GetRef } from 'antd';
+import { Cascader } from 'antd';
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+import type { GroupProps } from './types';
+type Props = Omit<Parameters<ProFieldFC<GroupProps>>[0], 'options'> & {
+    options: NonNullable<CascaderProps['options']>;
+    loading: boolean;
+    layoutClassName: string;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    cascaderRef: React.RefObject<GetRef<typeof Cascader>>;
+    intl: IntlType;
+};
+export declare function FieldCascaderEdit(props: Props): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/es/field/components/Cascader/FieldCascaderEdit.js

@@ -0,0 +1,45 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Cascader } from 'antd';
+import { clsx } from 'clsx';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCascaderEdit(props) {
+  const {
+    placeholder,
+    formItemRender,
+    mode,
+    variant: _variant,
+    options,
+    loading,
+    layoutClassName,
+    open,
+    setOpen,
+    cascaderRef,
+    intl,
+    ...rest
+  } = props;
+  const fieldProps = rest.fieldProps || {};
+  let dom = /*#__PURE__*/_jsx(Cascader, {
+    ref: cascaderRef,
+    open: open,
+    suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,
+    placeholder: placeholder || intl.getMessage('tableForm.selectPlaceholder', '请选择'),
+    allowClear: fieldProps?.allowClear !== false,
+    ...fieldProps,
+    onOpenChange: isOpen => {
+      fieldProps?.onOpenChange?.(isOpen);
+      setOpen(isOpen);
+    },
+    className: clsx(fieldProps?.className, layoutClassName),
+    options: options
+  });
+  if (formItemRender) {
+    dom = formItemRender(rest.text, {
+      mode,
+      ...fieldProps,
+      options,
+      loading
+    }, dom) ?? null;
+  }
+  return dom;
+}

package/es/field/components/Cascader/FieldCascaderLightEdit.d.ts

@@ -0,0 +1,17 @@
+import type { CascaderProps, GetRef } from 'antd';
+import { Cascader } from 'antd';
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+import type { GroupProps } from './types';
+type Props = Omit<Parameters<ProFieldFC<GroupProps>>[0], 'options'> & {
+    options: NonNullable<CascaderProps['options']>;
+    loading: boolean;
+    layoutClassName: string;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    cascaderRef: React.RefObject<GetRef<typeof Cascader>>;
+    intl: IntlType;
+};
+export declare function FieldCascaderLightEdit(props: Props): React.JSX.Element;
+export {};

package/es/field/components/Cascader/FieldCascaderLightEdit.js

@@ -0,0 +1,68 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Cascader } from 'antd';
+import { clsx } from 'clsx';
+import React from 'react';
+import { FieldLabel } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCascaderLightEdit(props) {
+  const {
+    placeholder,
+    formItemRender,
+    mode,
+    label,
+    variant,
+    options,
+    loading,
+    layoutClassName,
+    open,
+    setOpen,
+    cascaderRef,
+    intl,
+    ...rest
+  } = props;
+  const fieldProps = rest.fieldProps || {};
+  let dom = /*#__PURE__*/_jsx(Cascader, {
+    ref: cascaderRef,
+    open: open,
+    suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,
+    placeholder: placeholder || intl.getMessage('tableForm.selectPlaceholder', '请选择'),
+    allowClear: fieldProps?.allowClear !== false,
+    ...fieldProps,
+    onOpenChange: isOpen => {
+      fieldProps?.onOpenChange?.(isOpen);
+      setOpen(isOpen);
+    },
+    className: clsx(fieldProps?.className, layoutClassName),
+    options: options
+  });
+  if (formItemRender) {
+    dom = formItemRender(rest.text, {
+      mode,
+      ...fieldProps,
+      options,
+      loading
+    }, dom) ?? null;
+  }
+  const {
+    disabled,
+    value
+  } = fieldProps;
+  const notEmpty = !!value && value?.length !== 0;
+  const handleLabelClick = () => {
+    if (disabled) return;
+    setOpen(true);
+    fieldProps?.onOpenChange?.(true);
+  };
+  return /*#__PURE__*/_jsx(FieldLabel, {
+    label: label,
+    disabled: disabled,
+    variant: variant,
+    value: notEmpty || open ? dom : null,
+    style: notEmpty ? {
+      paddingInlineEnd: 0
+    } : undefined,
+    allowClear: false,
+    downIcon: notEmpty || open ? false : undefined,
+    onClick: handleLabelClick
+  });
+}

package/es/field/components/Cascader/FieldCascaderRead.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ProFieldFC } from '../../types';
+import type { GroupProps } from './types';
+export declare function FieldCascaderRead(props: Parameters<ProFieldFC<GroupProps>>[0] & {
+    optionsValueEnum: Map<any, any> | undefined;
+}): import("react").JSX.Element;

package/es/field/components/Cascader/FieldCascaderRead.js

@@ -0,0 +1,21 @@
+import { objectToMap, proFieldParsingText } from "../../../utils";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCascaderRead(props) {
+  const {
+    mode,
+    render,
+    optionsValueEnum,
+    ...rest
+  } = props;
+  const dom = /*#__PURE__*/_jsx(_Fragment, {
+    children: proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum))
+  });
+  if (render) {
+    return render(rest.text, {
+      mode,
+      ...rest.fieldProps
+    }, dom) ?? null;
+  }
+  return dom;
+}

package/es/field/components/Cascader/index.d.ts

@@ -1,26 +1,20 @@
-import type { RadioGroupProps } from 'antd';
 import React from 'react';
-import type { FieldSelectProps } from '../Select';
-export type GroupProps = {
-    options?: RadioGroupProps['options'];
-    radioType?: 'button' | 'radio';
-    placeholder?: string;
-    variant?: 'outlined' | 'borderless' | 'filled';
-} & FieldSelectProps;
+import type { GroupProps } from './types';
+export type { GroupProps };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
     radioType?: "button" | "radio" | undefined;
     placeholder?: string | undefined;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
 } & {
     text: string;
-    valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
+    valueEnum?: import("src/utils").ProFieldValueEnumType | undefined;
     debounceTime?: number | undefined;
-    request?: import("src/utils/typing").ProFieldRequestData | undefined;
+    request?: import("src/utils").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
-} & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
+} & import("../../types").ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Cascader/index.js

@@ -1,24 +1,14 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { Cascader, ConfigProvider } from 'antd';
-import { clsx } from 'clsx';
+import { ConfigProvider } from 'antd';
 import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from "../../../provider";
-import { FieldLabel, objectToMap, proFieldParsingText } from "../../../utils";
+import { isProFieldEditOnlyMode, isProFieldReadMode } from "../../internal/fieldMode";
 import { useFieldFetchData } from "../Select";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { FieldCascaderEdit } from "./FieldCascaderEdit";
+import { FieldCascaderLightEdit } from "./FieldCascaderLightEdit";
+import { FieldCascaderRead } from "./FieldCascaderRead";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * 级联选择组件
- *
- * @param placeholder
- * @param formItemRender
- * @param mode
- * @param render
- * @param label
- * @param light
- * @param variant
- * @param rest
- * @param ref
  */
 const FieldCascader = ({
   placeholder,
@@ -36,19 +26,14 @@ const FieldCascader = ({
   const layoutClassName = getPrefixCls('pro-field-cascader');
   const [loading, options, fetchData] = useFieldFetchData(rest);
   const intl = useIntl();
-  const cascaderRef = useRef();
+  const cascaderRef = useRef(null);
   const [open, setOpen] = useState(false);
   useImperativeHandle(ref, () => ({
     ...(cascaderRef.current || {}),
     fetchData: keyWord => fetchData(keyWord)
   }), [fetchData]);
   const optionsValueEnum = useMemo(() => {
-    if (mode !== 'read') return;
-    /**
-     * Support cascader fieldNames
-     *
-     * @see https://ant.design/components/cascader-cn/#header
-     */
+    if (!isProFieldReadMode(mode)) return;
     const {
       value: valuePropsName = 'value',
       label: labelPropsName = 'label',
@@ -70,65 +55,44 @@ const FieldCascader = ({
     };
     return traverseOptions(options);
   }, [mode, options, rest.fieldProps?.fieldNames]);
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/_jsx(_Fragment, {
-      children: proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum))
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldCascaderRead, {
+      placeholder: placeholder,
+      formItemRender: formItemRender,
+      mode: mode,
+      render: render,
+      label: label,
+      light: light,
+      variant: variant,
+      optionsValueEnum: optionsValueEnum,
+      ...rest
     });
-    if (render) {
-      return render(rest.text, {
-        mode,
-        ...rest.fieldProps
-      }, dom) ?? null;
-    }
-    return dom;
   }
-  if (mode === 'edit') {
-    const fieldProps = rest.fieldProps || {};
-    let dom = /*#__PURE__*/_jsx(Cascader, {
-      ref: cascaderRef,
-      open: open,
-      suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,
-      placeholder: placeholder || intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-      allowClear: fieldProps?.allowClear !== false,
-      ...fieldProps,
-      onOpenChange: isOpen => {
-        fieldProps?.onOpenChange?.(isOpen);
-        setOpen(isOpen);
-      },
-      className: clsx(fieldProps?.className, layoutClassName),
-      options: options
-    });
-    if (formItemRender) {
-      dom = formItemRender(rest.text, {
-        mode,
-        ...fieldProps,
-        options,
-        loading
-      }, dom) ?? null;
-    }
+  if (isProFieldEditOnlyMode(mode)) {
+    const editProps = {
+      ...rest,
+      placeholder,
+      formItemRender,
+      mode,
+      render,
+      label,
+      variant,
+      options: options,
+      loading,
+      layoutClassName,
+      open,
+      setOpen,
+      cascaderRef,
+      intl
+    };
     if (light) {
-      const {
-        disabled,
-        value
-      } = fieldProps;
-      const notEmpty = !!value && value?.length !== 0;
-      return /*#__PURE__*/_jsx(FieldLabel, {
-        label: label,
-        disabled: disabled,
-        variant: variant,
-        value: notEmpty || open ? dom : null,
-        style: notEmpty ? {
-          paddingInlineEnd: 0
-        } : undefined,
-        allowClear: false,
-        downIcon: notEmpty || open ? false : undefined,
-        onClick: () => {
-          setOpen(true);
-          fieldProps?.onOpenChange?.(true);
-        }
+      return /*#__PURE__*/_jsx(FieldCascaderLightEdit, {
+        ...editProps
       });
     }
-    return dom;
+    return /*#__PURE__*/_jsx(FieldCascaderEdit, {
+      ...editProps
+    });
   }
   return null;
 };

package/es/field/components/Cascader/types.d.ts

@@ -0,0 +1,8 @@
+import type { RadioGroupProps } from 'antd';
+import type { FieldSelectProps } from '../Select';
+export type GroupProps = {
+    options?: RadioGroupProps['options'];
+    radioType?: 'button' | 'radio';
+    placeholder?: string;
+    variant?: 'outlined' | 'borderless' | 'filled';
+} & FieldSelectProps;

package/es/field/components/Cascader/types.js

@@ -0,0 +1 @@
+export {};

package/es/field/components/Checkbox/FieldCheckboxEdit.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+import type { GroupProps } from './types';
+type Props = Omit<Parameters<ProFieldFC<GroupProps>>[0], 'options'> & {
+    layout: 'horizontal' | 'vertical';
+    options: any[];
+    loading: boolean;
+    layoutClassName: string;
+    wrapSSR: (node: React.ReactElement) => React.ReactElement;
+    hashId: string;
+    status: {
+        status?: string;
+    } | undefined;
+};
+export declare function FieldCheckboxEdit(props: Props): React.JSX.Element;
+export {};

package/es/field/components/Checkbox/FieldCheckboxEdit.js

@@ -0,0 +1,41 @@
+import { Checkbox } from 'antd';
+import { clsx } from 'clsx';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCheckboxEdit(props) {
+  const {
+    layout,
+    formItemRender,
+    mode,
+    options,
+    loading,
+    layoutClassName,
+    wrapSSR,
+    hashId,
+    status,
+    ...rest
+  } = props;
+  const {
+    fieldNames: _fieldNames,
+    variant,
+    ...restFieldProps
+  } = rest.fieldProps || {};
+  const dom = wrapSSR( /*#__PURE__*/_jsx(Checkbox.Group, {
+    ...restFieldProps,
+    variant: variant,
+    className: clsx(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
+      [`${layoutClassName}-error`]: status?.status === 'error',
+      [`${layoutClassName}-warning`]: status?.status === 'warning'
+    }),
+    options: options
+  }));
+  if (formItemRender) {
+    return formItemRender(rest.text, {
+      mode,
+      ...rest.fieldProps,
+      options,
+      loading
+    }, dom) ?? null;
+  }
+  return dom;
+}

package/es/field/components/Checkbox/FieldCheckboxRead.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ProFieldFC } from '../../types';
+import type { GroupProps } from './types';
+export declare function FieldCheckboxRead(props: Parameters<ProFieldFC<GroupProps>>[0] & {
+    optionsValueEnum: Record<string, any> | undefined;
+}): import("react").JSX.Element;

package/es/field/components/Checkbox/FieldCheckboxRead.js

@@ -0,0 +1,37 @@
+import { theme } from 'antd';
+import { objectToMap, proFieldParsingText } from "../../../utils";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCheckboxRead(props) {
+  const {
+    mode,
+    render,
+    optionsValueEnum,
+    ...rest
+  } = props;
+  const {
+    token
+  } = theme.useToken?.() || {
+    token: {
+      marginSM: 8
+    }
+  };
+  const dom = proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum));
+  if (render) {
+    return render(rest.text, {
+      mode,
+      ...rest.fieldProps
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: dom
+    })) ?? null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: token.marginSM
+    },
+    children: dom
+  });
+}

package/es/field/components/Checkbox/index.d.ts

@@ -1,12 +1,8 @@
-import type { CheckboxGroupProps } from 'antd/lib/checkbox';
 import React from 'react';
-import type { FieldSelectProps } from '../Select';
-export type GroupProps = {
-    layout?: 'horizontal' | 'vertical';
-    options?: CheckboxGroupProps['options'];
-} & FieldSelectProps;
+import type { GroupProps } from './types';
+export type { GroupProps };
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: "vertical" | "horizontal" | undefined;
     options?: (string | number | import("antd/lib/checkbox").CheckboxOptionType<any>)[] | undefined;
 } & {
     text: string;
@@ -15,8 +11,8 @@ declare const _default: React.ForwardRefExoticComponent<import("src/provider").B
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
     defaultKeyWords?: string | undefined;
-} & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
+} & import("../../types").ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Checkbox/index.js

@@ -1,19 +1,13 @@
-import { Checkbox, ConfigProvider, Form, Spin, theme } from 'antd';
-import { clsx } from 'clsx';
+import { ConfigProvider, Form, Spin } from 'antd';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
-import { objectToMap, proFieldParsingText, useStyle } from "../../../utils";
+import { useStyle } from "../../../utils";
+import { isProFieldEditOnlyMode, isProFieldReadMode } from "../../internal/fieldMode";
 import { useFieldFetchData } from "../Select";
+import { FieldCheckboxEdit } from "./FieldCheckboxEdit";
+import { FieldCheckboxRead } from "./FieldCheckboxRead";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * 多选组件
- *
- * @param layout
- * @param formItemRender
- * @param mode
- * @param render
- * @param rest
- * @param ref
  */
 const FieldCheckbox = ({
   layout = 'horizontal',
@@ -28,7 +22,6 @@ const FieldCheckbox = ({
   const layoutClassName = getPrefixCls('pro-field-checkbox');
   const status = Form.Item?.useStatus?.();
   const [loading, options, fetchData] = useFieldFetchData(rest);
-  // css
   const {
     wrapSSR,
     hashId
@@ -46,15 +39,12 @@ const FieldCheckbox = ({
           }
         },
         '&-vertical': {
-          //ant design 5
           [`&${token.antCls}-checkbox-group`]: {
             display: 'inline-block'
           },
-          //ant design 5
           [`${token.antCls}-checkbox-wrapper+${token.antCls}-checkbox-wrapper`]: {
             'margin-inline-start': '0  !important'
           },
-          //ant design 4
           [`${token.antCls}-checkbox-group-item`]: {
             display: 'flex',
             marginInlineEnd: 0
@@ -63,9 +53,6 @@ const FieldCheckbox = ({
       }
     };
   });
-  const {
-    token
-  } = theme.useToken?.();
   const checkBoxRef = useRef();
   useImperativeHandle(ref, () => ({
     ...(checkBoxRef.current || {}),
@@ -76,56 +63,36 @@ const FieldCheckbox = ({
       size: "small"
     });
   }
-  if (mode === 'read') {
-    const optionsValueEnum = options?.length ? options?.reduce((pre, cur) => {
-      return {
-        ...pre,
-        [cur.value ?? '']: cur.label
-      };
-    }, {}) : undefined;
-    const dom = proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum));
-    if (render) {
-      return render(rest.text, {
-        mode,
-        ...rest.fieldProps
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dom
-      })) ?? null;
-    }
-    return /*#__PURE__*/_jsx("div", {
-      style: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        gap: token.marginSM
-      },
-      children: dom
+  const optionsValueEnum = options?.length ? options?.reduce((pre, cur) => {
+    return {
+      ...pre,
+      [cur.value ?? '']: cur.label
+    };
+  }, {}) : undefined;
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldCheckboxRead, {
+      layout: layout,
+      formItemRender: formItemRender,
+      mode: mode,
+      render: render,
+      optionsValueEnum: optionsValueEnum,
+      ...rest
     });
   }
-  if (mode === 'edit') {
-    const {
-      fieldNames: _fieldNames,
-      variant,
-      ...restFieldProps
-    } = rest.fieldProps || {};
-    const dom = wrapSSR( /*#__PURE__*/_jsx(Checkbox.Group, {
-      ...restFieldProps,
-      variant: variant,
-      className: clsx(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
-        [`${layoutClassName}-error`]: status?.status === 'error',
-        [`${layoutClassName}-warning`]: status?.status === 'warning'
-      }),
-      options: options
-    }));
-    if (formItemRender) {
-      return formItemRender(rest.text, {
-        mode,
-        ...rest.fieldProps,
-        options,
-        loading
-      }, dom) ?? null;
-    }
-    return dom;
+  if (isProFieldEditOnlyMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldCheckboxEdit, {
+      layout: layout,
+      formItemRender: formItemRender,
+      mode: mode,
+      render: render,
+      options: options,
+      loading: loading,
+      layoutClassName: layoutClassName,
+      wrapSSR: wrapSSR,
+      hashId: hashId,
+      status: status,
+      ...rest
+    });
   }
   return null;
 };

package/es/field/components/Checkbox/types.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxGroupProps } from 'antd/lib/checkbox';
+import type { FieldSelectProps } from '../Select';
+export type GroupProps = {
+    layout?: 'horizontal' | 'vertical';
+    options?: CheckboxGroupProps['options'];
+} & FieldSelectProps;

package/es/field/components/Checkbox/types.js

@@ -0,0 +1 @@
+export {};