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

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

@@ -1,23 +1,14 @@
-import { omit } from '@rc-component/util';
-import { Switch } from 'antd';
 import React, { useMemo } from 'react';
 import { useIntl } from "../../../provider";
-import { FieldLabel } from "../../../utils";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldSwitchEdit } from "./FieldSwitchEdit";
+import { FieldSwitchLightEdit } from "./FieldSwitchLightEdit";
+import { FieldSwitchRead } from "./FieldSwitchRead";
+
 /**
  * 开关组件
- *
- * @param text
- * @param mode
- * @param render
- * @param light
- * @param label
- * @param formItemRender
- * @param fieldProps
- * @param propsVariant
- * @param ref
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FieldSwitch = ({
   text,
   mode,
@@ -30,53 +21,36 @@ const FieldSwitch = ({
 }, ref) => {
   const intl = useIntl();
   const variant = propsVariant ?? fieldProps?.variant;
-  const dom = useMemo(() => {
+  const readLabel = useMemo(() => {
     if (text === undefined || text === null || `${text}`.length < 1) return '-';
     return text ? fieldProps?.checkedChildren ?? intl.getMessage('switch.open', '打开') : fieldProps?.unCheckedChildren ?? intl.getMessage('switch.close', '关闭');
   }, [fieldProps?.checkedChildren, fieldProps?.unCheckedChildren, text]);
-  if (mode === 'read') {
-    if (render) {
-      return render(text, {
-        mode,
-        ...fieldProps
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dom
-      }));
-    }
-    return dom ?? '-';
-  }
-  if (mode === 'edit' || mode === 'update') {
-    const editDom = /*#__PURE__*/_jsx(Switch, {
-      ref: ref,
-      size: light ? 'small' : undefined,
-      ...omit(fieldProps, ['value']),
-      checked: fieldProps?.checked ?? fieldProps?.value
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldSwitchRead, {
+      text: text,
+      mode: mode,
+      render: render,
+      formItemRender: formItemRender,
+      fieldProps: fieldProps,
+      light: light,
+      label: label,
+      readLabel: readLabel
     });
+  }
+  if (isProFieldEditOrUpdateMode(mode)) {
+    const editProps = {
+      text,
+      mode,
+      render,
+      label,
+      formItemRender,
+      fieldProps,
+      variant
+    };
     if (light) {
-      const {
-        disabled
-      } = fieldProps;
-      return /*#__PURE__*/_jsx(FieldLabel, {
-        label: label,
-        disabled: disabled,
-        variant: variant,
-        downIcon: false,
-        value: /*#__PURE__*/_jsx("div", {
-          style: {
-            paddingLeft: 8
-          },
-          children: editDom
-        }),
-        allowClear: false
-      });
-    }
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode,
-        ...fieldProps
-      }, editDom);
+      return FieldSwitchLightEdit(editProps, ref);
     }
-    return editDom;
+    return FieldSwitchEdit(editProps, ref);
   }
   return null;
 };

package/es/field/components/Text/FieldTextEdit.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+type FieldTextEditProps = Parameters<ProFieldFC<{
+    text: string;
+    emptyText?: React.ReactNode;
+}>>[0] & {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    intl: IntlType;
+};
+export declare function FieldTextEdit(props: FieldTextEditProps): React.JSX.Element;
+export {};

package/es/field/components/Text/FieldTextEdit.js

@@ -0,0 +1,27 @@
+import { Input } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTextEdit(props) {
+  const {
+    text,
+    mode,
+    formItemRender,
+    fieldProps,
+    inputRef,
+    intl
+  } = props;
+  const placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
+  const dom = /*#__PURE__*/_jsx(Input, {
+    ref: inputRef,
+    placeholder: placeholder,
+    allowClear: true,
+    ...fieldProps
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/Text/FieldTextRead.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type FieldTextReadProps = Parameters<ProFieldFC<{
+    text: string;
+    emptyText?: React.ReactNode;
+}>>[0] & {
+    emptyText: React.ReactNode;
+};
+export declare function FieldTextRead(props: FieldTextReadProps): React.JSX.Element;
+export {};

package/es/field/components/Text/FieldTextRead.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldTextRead(props) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps,
+    emptyText
+  } = props;
+  const {
+    prefix = '',
+    suffix = ''
+  } = fieldProps || {};
+  const dom = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [prefix, text ?? emptyText, suffix]
+  });
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, dom) ?? emptyText;
+  }
+  return dom;
+}

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

@@ -1,20 +1,13 @@
-import { Input } from 'antd';
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import { useIntl } from "../../../provider";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldTextEdit } from "./FieldTextEdit";
+import { FieldTextRead } from "./FieldTextRead";
+
 /**
  * 最基本的组件，就是个普通的 Input
- *
- * @param text
- * @param mode
- * @param render
- * @param formItemRender
- * @param fieldProps
- * @param emptyText
- * @param ref
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FieldText = ({
   text,
   mode,
@@ -24,48 +17,39 @@ const FieldText = ({
   emptyText = '-'
 }, ref) => {
   const {
-    autoFocus,
-    prefix = '',
-    suffix = ''
+    autoFocus
   } = fieldProps || {};
   const intl = useIntl();
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   useImperativeHandle(ref, () => inputRef.current, []);
   useEffect(() => {
     if (autoFocus) {
-      // 使用 queueMicrotask 延迟 focus 调用，避免在渲染期间触发 flushSync
       queueMicrotask(() => {
         inputRef.current?.focus();
       });
     }
   }, [autoFocus]);
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [prefix, text ?? emptyText, suffix]
+  if (isProFieldReadMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldTextRead, {
+      text: text,
+      mode: mode,
+      render: render,
+      formItemRender: formItemRender,
+      fieldProps: fieldProps,
+      emptyText: emptyText
     });
-    if (render) {
-      return render(text, {
-        mode,
-        ...fieldProps
-      }, dom) ?? emptyText;
-    }
-    return dom;
   }
-  if (mode === 'edit' || mode === 'update') {
-    const placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
-    const dom = /*#__PURE__*/_jsx(Input, {
-      ref: inputRef,
-      placeholder: placeholder,
-      allowClear: true,
-      ...fieldProps
+  if (isProFieldEditOrUpdateMode(mode)) {
+    return /*#__PURE__*/_jsx(FieldTextEdit, {
+      text: text,
+      mode: mode,
+      render: render,
+      formItemRender: formItemRender,
+      fieldProps: fieldProps,
+      emptyText: emptyText,
+      inputRef: inputRef,
+      intl: intl
     });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
   }
   return null;
 };

package/es/field/components/TextArea/FieldTextAreaEdit.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+}>>[0] & {
+    intl: IntlType;
+};
+export declare function FieldTextAreaEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TextArea/FieldTextAreaEdit.js

@@ -0,0 +1,30 @@
+import { Input } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTextAreaEdit(props, ref) {
+  const {
+    text,
+    mode,
+    formItemRender,
+    fieldProps,
+    intl
+  } = props;
+  const dom = /*#__PURE__*/_jsx(Input.TextArea, {
+    ref: ref,
+    rows: 3,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+      }
+    },
+    placeholder: intl.getMessage('tableForm.inputPlaceholder', '请输入'),
+    ...fieldProps
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/TextArea/FieldTextAreaRead.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+}>>[0];
+export declare function FieldTextAreaRead(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TextArea/FieldTextAreaRead.js

@@ -0,0 +1,24 @@
+import { omit } from '@rc-component/util';
+import React from 'react';
+import FieldTextAreaReadonly from "./readonly";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTextAreaRead(props, ref) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps
+  } = props;
+  const dom = /*#__PURE__*/_jsx(FieldTextAreaReadonly, {
+    ...props,
+    ref: ref
+  });
+  if (render) {
+    return render(text, {
+      text,
+      mode,
+      ...omit(fieldProps, ['showCount'])
+    }, dom);
+  }
+  return dom;
+}

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

@@ -1,57 +1,25 @@
-import { omit } from '@rc-component/util';
-import { Input } from 'antd';
 import React from 'react';
 import { useIntl } from "../../../provider";
-import FieldTextAreaReadonly from "./readonly";
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldTextAreaEdit } from "./FieldTextAreaEdit";
+import { FieldTextAreaRead } from "./FieldTextAreaRead";
 
 /**
  * 最基本的组件，就是个普通的 Input.TextArea
- *
- * @param props
- * @param ref
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FieldTextArea = (props, ref) => {
   const {
-    text,
-    mode,
-    render,
-    formItemRender,
-    fieldProps
+    mode
   } = props;
   const intl = useIntl();
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/_jsx(FieldTextAreaReadonly, {
-      ...props,
-      ref: ref
-    });
-    if (render) {
-      return render(text, {
-        mode,
-        ...omit(fieldProps, ['showCount'])
-      }, dom);
-    }
-    return dom;
+  if (isProFieldReadMode(mode)) {
+    return FieldTextAreaRead(props, ref);
   }
-  if (mode === 'edit' || mode === 'update') {
-    const dom = /*#__PURE__*/_jsx(Input.TextArea, {
-      ref: ref,
-      rows: 3,
-      onKeyDown: e => {
-        if (e.key === 'Enter') {
-          e.stopPropagation();
-        }
-      },
-      placeholder: intl.getMessage('tableForm.inputPlaceholder', '请输入'),
-      ...fieldProps
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(mode)) {
+    return FieldTextAreaEdit({
+      ...props,
+      intl
+    }, ref);
   }
   return null;
 };

package/es/field/components/TimePicker/FieldTimePickerEdit.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+}>>[0] & {
+    finalFormat: string;
+    format: string;
+};
+export declare function FieldTimePickerEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TimePicker/FieldTimePickerEdit.js

@@ -0,0 +1,33 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import { parseValueToDay } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTimePickerEdit(props, ref) {
+  const {
+    text,
+    mode,
+    format,
+    formItemRender,
+    fieldProps,
+    finalFormat,
+    variant
+  } = props;
+  const {
+    value
+  } = fieldProps;
+  const dayValue = parseValueToDay(value, finalFormat);
+  const dom = /*#__PURE__*/_jsx(DatePicker.TimePicker, {
+    ref: ref,
+    format: format,
+    ...fieldProps,
+    variant: variant ?? fieldProps?.variant,
+    value: dayValue
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/TimePicker/FieldTimePickerLightEdit.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC, ProFieldLightProps } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+} & ProFieldLightProps>>[0] & {
+    finalFormat: string;
+    format: string;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    intl: IntlType;
+};
+export declare function FieldTimePickerLightEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TimePicker/FieldTimePickerLightEdit.js

@@ -0,0 +1,62 @@
+import { TimePicker } from 'antd';
+import React from 'react';
+import { FieldLabel, parseValueToDay } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTimePickerLightEdit(props, ref) {
+  const {
+    text,
+    mode,
+    label,
+    format,
+    formItemRender,
+    fieldProps,
+    lightLabel,
+    variant,
+    finalFormat,
+    open,
+    setOpen,
+    intl
+  } = props;
+  const {
+    disabled,
+    value
+  } = fieldProps;
+  const dayValue = parseValueToDay(value, finalFormat);
+  const handleLabelClick = () => {
+    if (disabled) return;
+    fieldProps?.onOpenChange?.(true);
+    setOpen(true);
+  };
+  const dom = /*#__PURE__*/_jsx(FieldLabel, {
+    onClick: handleLabelClick,
+    style: dayValue ? {
+      paddingInlineEnd: 0
+    } : undefined,
+    label: label,
+    disabled: disabled,
+    variant: variant ?? fieldProps?.variant,
+    value: dayValue || open ? /*#__PURE__*/_jsx(TimePicker, {
+      format: format,
+      ref: ref,
+      ...fieldProps,
+      variant: variant ?? fieldProps?.variant,
+      placeholder: fieldProps.placeholder ?? intl.getMessage('tableForm.selectPlaceholder', '请选择'),
+      value: dayValue,
+      onOpenChange: isOpen => {
+        setOpen(isOpen);
+        fieldProps?.onOpenChange?.(isOpen);
+      },
+      open: open
+    }) : null,
+    downIcon: dayValue || open ? false : undefined,
+    allowClear: false,
+    ref: lightLabel
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/TimePicker/FieldTimePickerRead.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ProFieldFC, ProFieldLightProps } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+} & ProFieldLightProps>>[0] & {
+    finalFormat: string;
+};
+export declare function FieldTimePickerRead(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TimePicker/FieldTimePickerRead.js

@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTimePickerRead(props, ref) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps,
+    finalFormat
+  } = props;
+  const isNumberOrMoment = dayjs.isDayjs(text) || typeof text === 'number';
+  const dom = /*#__PURE__*/_jsx("span", {
+    ref: ref,
+    children: text ? dayjs(text, isNumberOrMoment ? undefined : finalFormat).format(finalFormat) : '-'
+  });
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, /*#__PURE__*/_jsx("span", {
+      children: dom
+    }));
+  }
+  return dom;
+}

package/es/field/components/TimePicker/FieldTimeRangePickerEdit.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string[] | number[];
+    format?: string;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+}>>[0] & {
+    finalFormat: string;
+    format: string;
+};
+export declare function FieldTimeRangePickerEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/TimePicker/FieldTimeRangePickerEdit.js

@@ -0,0 +1,30 @@
+import { TimePicker } from 'antd';
+import React from 'react';
+import { parseValueToDay } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldTimeRangePickerEdit(props, ref) {
+  const {
+    text,
+    mode,
+    format,
+    formItemRender,
+    fieldProps,
+    variant,
+    finalFormat
+  } = props;
+  const dayValue = parseValueToDay(fieldProps.value, finalFormat);
+  const dom = /*#__PURE__*/_jsx(TimePicker.RangePicker, {
+    ref: ref,
+    format: format,
+    ...fieldProps,
+    variant: variant ?? fieldProps?.variant,
+    value: dayValue
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/TimePicker/FieldTimeRangePickerLightEdit.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC, ProFieldLightProps } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string[] | number[];
+    format?: string;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+} & ProFieldLightProps>>[0] & {
+    finalFormat: string;
+    format: string;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    intl: IntlType;
+};
+export declare function FieldTimeRangePickerLightEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};