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

package/es/field/components/Code/FieldCodeEdit.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type FieldCodeEditProps = Parameters<ProFieldFC<{
+    text: string;
+    language?: 'json' | 'text';
+}>>[0] & {
+    code: string;
+};
+export declare function FieldCodeEdit(props: FieldCodeEditProps, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/Code/FieldCodeEdit.js

@@ -0,0 +1,28 @@
+import { Input } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCodeEdit(props, ref) {
+  const {
+    code,
+    mode,
+    formItemRender,
+    fieldProps
+  } = props;
+  const fp = {
+    ...(fieldProps || {}),
+    value: code
+  };
+  const dom = /*#__PURE__*/_jsx(Input.TextArea, {
+    rows: 5,
+    ...fp,
+    ref: ref
+  });
+  if (formItemRender) {
+    return formItemRender(code, {
+      mode,
+      ...fp,
+      ref
+    }, dom) ?? null;
+  }
+  return dom;
+}

package/es/field/components/Code/FieldCodeRead.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type FieldCodeReadProps = Parameters<ProFieldFC<{
+    text: string;
+    language?: 'json' | 'text';
+}>>[0] & {
+    code: string;
+    token: {
+        colorTextSecondary: string;
+        fontFamilyCode: string;
+    };
+};
+export declare function FieldCodeRead(props: FieldCodeReadProps, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/Code/FieldCodeRead.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldCodeRead(props, ref) {
+  const {
+    code,
+    mode,
+    render,
+    fieldProps,
+    token
+  } = props;
+  const dom = /*#__PURE__*/_jsx("pre", {
+    ref: ref,
+    ...fieldProps,
+    style: {
+      padding: 16,
+      overflow: 'auto',
+      fontSize: '85%',
+      lineHeight: 1.45,
+      color: token.colorTextSecondary,
+      fontFamily: token.fontFamilyCode,
+      backgroundColor: 'rgba(150, 150, 150, 0.1)',
+      borderRadius: 3,
+      width: 'min-content',
+      ...fieldProps?.style
+    },
+    children: /*#__PURE__*/_jsx("code", {
+      children: code
+    })
+  });
+  if (render) {
+    return render(code, {
+      mode,
+      ...fieldProps,
+      ref
+    }, dom);
+  }
+  return dom;
+}

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

@@ -1,82 +1,41 @@
-import { Input } from 'antd';
 import React from 'react';
 import { proTheme } from "../../../provider";
-import { jsx as _jsx } from "react/jsx-runtime";
-const languageFormat = (text, language) => {
-  if (typeof text !== 'string') {
-    return text;
-  }
-  try {
-    if (language === 'json') {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    }
-  } catch (error) {
-    // console.log(error)
-  }
-  return text;
-};
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldCodeEdit } from "./FieldCodeEdit";
+import { FieldCodeRead } from "./FieldCodeRead";
+import { languageFormat } from "./utils";
 
 /**
  * 代码片段组件 这个组件为了显示简单的配置，复杂的请使用更加重型的组件
- *
- * @param
  */
 const FieldCode = ({
   text,
   mode,
-  render,
   language = 'text',
-  formItemRender,
-  fieldProps
+  ...rest
 }, ref) => {
   const code = languageFormat(text, language);
   const {
     token
   } = proTheme.useToken();
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/_jsx("pre", {
-      ref: ref,
-      ...fieldProps,
-      style: {
-        padding: 16,
-        overflow: 'auto',
-        fontSize: '85%',
-        lineHeight: 1.45,
-        color: token.colorTextSecondary,
-        fontFamily: token.fontFamilyCode,
-        backgroundColor: 'rgba(150, 150, 150, 0.1)',
-        borderRadius: 3,
-        width: 'min-content',
-        ...fieldProps.style
-      },
-      children: /*#__PURE__*/_jsx("code", {
-        children: code
-      })
-    });
-    if (render) {
-      return render(code, {
-        mode,
-        ...fieldProps,
-        ref
-      }, dom);
-    }
-    return dom;
+  if (isProFieldReadMode(mode)) {
+    return FieldCodeRead({
+      text,
+      mode,
+      language,
+      ...rest,
+      code,
+      token
+    }, ref);
   }
-  if (mode === 'edit' || mode === 'update') {
-    fieldProps.value = code;
-    const dom = /*#__PURE__*/_jsx(Input.TextArea, {
-      rows: 5,
-      ...fieldProps,
-      ref: ref
-    });
-    if (formItemRender) {
-      return formItemRender(code, {
-        mode,
-        ...fieldProps,
-        ref
-      }, dom) ?? null;
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(mode)) {
+    return FieldCodeEdit({
+      text,
+      mode,
+      language,
+      ...rest,
+      code
+    }, ref);
   }
   return null;
 };

package/es/field/components/Code/utils.d.ts

@@ -0,0 +1 @@
+export declare function languageFormat(text: string, language: string): string;

package/es/field/components/Code/utils.js

@@ -0,0 +1,13 @@
+export function languageFormat(text, language) {
+  if (typeof text !== 'string') {
+    return text;
+  }
+  try {
+    if (language === 'json') {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    }
+  } catch {
+    // ignore parse errors; show raw text
+  }
+  return text;
+}

package/es/field/components/ColorPicker/FieldColorPickerEdit.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ColorPickerProps } from 'antd';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    mode?: 'read' | 'edit' | 'update';
+} & Partial<Omit<ColorPickerProps, 'value' | 'mode'>>>>[0];
+export declare function FieldColorPickerEdit(props: Props, ref: any): import("react").JSX.Element;
+export {};

package/es/field/components/ColorPicker/FieldColorPickerEdit.js

@@ -0,0 +1,41 @@
+import { ColorPicker, ConfigProvider } from 'antd';
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_PRESETS = {
+  label: 'Recommended',
+  colors: ['#F5222D', '#FA8C16', '#FADB14', '#8BBB11', '#52C41A', '#13A8A8', '#1677FF', '#2F54EB', '#722ED1', '#EB2F96', '#F5222D4D', '#FA8C164D', '#FADB144D', '#8BBB114D', '#52C41A4D', '#13A8A84D', '#1677FF4D', '#2F54EB4D', '#722ED14D', '#EB2F964D']
+};
+export function FieldColorPickerEdit(props, ref) {
+  const {
+    text,
+    mode: type,
+    formItemRender,
+    fieldProps
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-color-picker');
+  const style = {
+    display: 'table-cell',
+    ...fieldProps.style
+  };
+  const dom = /*#__PURE__*/_jsx(ColorPicker, {
+    ref: ref,
+    presets: [DEFAULT_PRESETS],
+    ...fieldProps,
+    style: style,
+    className: clsx({
+      [prefixCls]: true
+    })
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode: type,
+      ...fieldProps,
+      style
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/ColorPicker/FieldColorPickerRead.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ColorPickerProps } from 'antd';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    mode?: 'read' | 'edit' | 'update';
+} & Partial<Omit<ColorPickerProps, 'value' | 'mode'>>>>[0];
+export declare function FieldColorPickerRead(props: Props): import("react").JSX.Element;
+export {};

package/es/field/components/ColorPicker/FieldColorPickerRead.js

@@ -0,0 +1,30 @@
+import { ColorPicker, ConfigProvider } from 'antd';
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldColorPickerRead(props) {
+  const {
+    text,
+    mode: type,
+    render,
+    fieldProps
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-color-picker');
+  const dom = /*#__PURE__*/_jsx(ColorPicker, {
+    value: text,
+    className: clsx({
+      [prefixCls]: true
+    }),
+    open: false
+  });
+  if (render) {
+    return render(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

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

@@ -2,6 +2,6 @@ import type { ColorPickerProps } from 'antd';
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
-    mode?: "update" | "read" | "edit" | undefined;
+    mode?: "read" | "edit" | "update" | undefined;
 } & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,71 +1,21 @@
-import { ColorPicker, ConfigProvider } from 'antd';
-import { clsx } from 'clsx';
-import React, { useContext } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_PRESETS = {
-  label: 'Recommended',
-  colors: ['#F5222D', '#FA8C16', '#FADB14', '#8BBB11', '#52C41A', '#13A8A8', '#1677FF', '#2F54EB', '#722ED1', '#EB2F96', '#F5222D4D', '#FA8C164D', '#FADB144D', '#8BBB114D', '#52C41A4D', '#13A8A84D', '#1677FF4D', '#2F54EB4D', '#722ED14D', '#EB2F964D']
-};
+import React from 'react';
+import { isProFieldEditOrUpdateMode, isProFieldReadMode } from "../../internal/fieldMode";
+import { FieldColorPickerEdit } from "./FieldColorPickerEdit";
+import { FieldColorPickerRead } from "./FieldColorPickerRead";
 
 /**
  * 颜色组件
  * Antd > 5.5.0 的版本 使用 antd 的 ColorPicker
- * @param FieldColorPicker {
- *     text: number;
- *     moneySymbol?: string; }
  */
-const FieldColorPicker = ({
-  text,
-  mode: type,
-  render,
-  formItemRender,
-  fieldProps
-}, ref) => {
+const FieldColorPicker = (props, ref) => {
   const {
-    getPrefixCls
-  } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('pro-field-color-picker');
-  if (type === 'read') {
-    const dom = /*#__PURE__*/_jsx(ColorPicker, {
-      value: text,
-      className: clsx({
-        [prefixCls]: true
-      })
-      // 设置无法 open
-      ,
-      open: false
-    });
-    if (render) {
-      return render(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+    mode: type
+  } = props;
+  if (isProFieldReadMode(type)) {
+    return FieldColorPickerRead(props);
   }
-  if (type === 'edit' || type === 'update') {
-    // 解决 默认的 width 100% 问题
-    const style = {
-      display: 'table-cell',
-      ...fieldProps.style
-    };
-    const dom = /*#__PURE__*/_jsx(ColorPicker, {
-      ref: ref,
-      presets: [DEFAULT_PRESETS],
-      ...fieldProps,
-      style: style,
-      className: clsx({
-        [prefixCls]: true
-      })
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode: type,
-        ...fieldProps,
-        style
-      }, dom);
-    }
-    return dom;
+  if (isProFieldEditOrUpdateMode(type)) {
+    return FieldColorPickerEdit(props, ref);
   }
   return null;
 };

package/es/field/components/DatePicker/FieldDatePickerEdit.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    showTime?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
+}>>[0] & {
+    format: string;
+    intl: IntlType;
+};
+export declare function FieldDatePickerEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/es/field/components/DatePicker/FieldDatePickerEdit.js

@@ -0,0 +1,40 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import { parseValueToDay } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldDatePickerEdit(props, ref) {
+  const {
+    text,
+    mode,
+    format,
+    formItemRender,
+    showTime,
+    fieldProps,
+    picker,
+    variant,
+    intl
+  } = props;
+  const {
+    disabled: _disabled,
+    value,
+    placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择')
+  } = fieldProps;
+  const dayValue = parseValueToDay(value);
+  const dom = /*#__PURE__*/_jsx(DatePicker, {
+    picker: picker,
+    showTime: showTime,
+    format: format,
+    placeholder: placeholder,
+    ref: ref,
+    ...fieldProps,
+    variant: variant ?? fieldProps?.variant,
+    value: dayValue
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/DatePicker/FieldDatePickerLightEdit.d.ts

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

package/es/field/components/DatePicker/FieldDatePickerLightEdit.js

@@ -0,0 +1,63 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import { FieldLabel, parseValueToDay } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldDatePickerLightEdit(props, ref) {
+  const {
+    text,
+    mode,
+    format,
+    label,
+    formItemRender,
+    showTime,
+    fieldProps,
+    picker,
+    lightLabel,
+    variant,
+    open,
+    setOpen
+  } = props;
+  const {
+    disabled,
+    value
+  } = fieldProps;
+  const dayValue = parseValueToDay(value);
+  const handleLabelClick = () => {
+    if (disabled) return;
+    fieldProps?.onOpenChange?.(true);
+    setOpen(true);
+  };
+  const dom = /*#__PURE__*/_jsx(FieldLabel, {
+    label: label,
+    onClick: handleLabelClick,
+    style: dayValue ? {
+      paddingInlineEnd: 0
+    } : undefined,
+    disabled: disabled,
+    value: dayValue || open ? /*#__PURE__*/_jsx(DatePicker, {
+      picker: picker,
+      showTime: showTime,
+      format: format,
+      ref: ref,
+      ...fieldProps,
+      variant: variant ?? fieldProps?.variant,
+      value: dayValue,
+      onOpenChange: isOpen => {
+        setOpen(isOpen);
+        fieldProps?.onOpenChange?.(isOpen);
+      },
+      open: open
+    }) : undefined,
+    allowClear: false,
+    downIcon: dayValue || open ? false : undefined,
+    variant: variant,
+    ref: lightLabel
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/es/field/components/DatePicker/FieldDatePickerRead.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ProFieldFC, ProFieldLightProps } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    showTime?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
+} & ProFieldLightProps>>[0] & {
+    format: string;
+};
+export declare function FieldDatePickerRead(props: Props): import("react").JSX.Element;
+export {};

package/es/field/components/DatePicker/FieldDatePickerRead.js

@@ -0,0 +1,26 @@
+import { formatDate } from "./datePickerUtils";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldDatePickerRead(props) {
+  const {
+    text,
+    mode,
+    render,
+    fieldProps,
+    format,
+    picker
+  } = props;
+  const mergedPicker = fieldProps?.picker ?? picker;
+  const dom = formatDate(text, fieldProps.format || format, mergedPicker);
+  if (render) {
+    return render(text, {
+      mode,
+      ...fieldProps
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: dom
+    }));
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: dom
+  });
+}

package/es/field/components/DatePicker/datePickerUtils.d.ts

@@ -0,0 +1,3 @@
+import '../../initDayjs';
+export type DatePickerReadPicker = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
+export declare function formatDate(text: any, format: any, _picker?: DatePickerReadPicker): any;

package/es/field/components/DatePicker/datePickerUtils.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { parseValueToDay } from "../../../utils";
+import "../../initDayjs";
+dayjs.extend(quarterOfYear);
+function pickFormatTemplate(format) {
+  if (Array.isArray(format)) {
+    const head = format[0];
+    return typeof head === 'string' && head ? head : 'YYYY-MM-DD';
+  }
+  if (typeof format === 'string' && format) {
+    return format;
+  }
+  return 'YYYY-MM-DD';
+}
+export function formatDate(text, format, _picker) {
+  if (text === null || text === undefined || text === '') {
+    return '-';
+  }
+  const parsed = parseValueToDay(text);
+  if (Array.isArray(parsed) || !parsed || !parsed.isValid()) {
+    return '-';
+  }
+  if (typeof parsed.format !== 'function') {
+    return String(text);
+  }
+  if (typeof format === 'function') {
+    return format(parsed);
+  }
+  const tpl = pickFormatTemplate(format);
+  return parsed.format(tpl);
+}

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { ProFieldLightProps } from '../../PureProField';
+import type { ProFieldLightProps } from '../../types';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string | number;
     format?: string | undefined;
     showTime?: boolean | undefined;
-    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
-    picker?: "time" | "date" | "month" | "week" | "year" | "quarter" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | "underlined" | undefined;
+    picker?: "time" | "year" | "month" | "week" | "quarter" | "date" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;