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

package/es/field/AllProField.js

@@ -1,13 +1,6 @@
 import { Avatar } from 'antd';
-import dayjs from 'dayjs';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import localeData from 'dayjs/plugin/localeData';
-import weekday from 'dayjs/plugin/weekday';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
-import React, { useContext } from 'react';
-import ProConfigContext from "../provider";
-import { omitUndefined, pickProProps, useDeepCompareMemo, useRefFunction } from "../utils";
+import React from 'react';
+import { pickProProps } from "../utils";
 import FieldCascader from "./components/Cascader";
 import FieldCheckbox from "./components/Checkbox";
 import FieldCode from "./components/Code";
@@ -35,28 +28,10 @@ import FieldText from "./components/Text";
 import FieldTextArea from "./components/TextArea";
 import FieldTimePicker, { FieldTimeRangePicker } from "./components/TimePicker";
 import FieldTreeSelect from "./components/TreeSelect";
-import FieldHOC from "./FieldHOC";
+import { wrapProFieldLight } from "./internal/ProFieldLightWrapper";
+import { createProField } from "./ProFieldCore";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-dayjs.extend(localeData);
-dayjs.extend(advancedFormat);
-dayjs.extend(isoWeek);
-dayjs.extend(weekOfYear);
-dayjs.extend(weekday);
-
-/** 默认的 Field 需要实现的功能 */
-
-/** 轻量筛选的field属性 */
-
-/** Value type by function */
-
-/**
- * Render valueType object
- *
- * @param text String | number
- * @param valueType ProColumnsValueObjectType
- * @param props
- */
 const defaultRenderTextByObject = (text, valueType, props) => {
   const pickFormItemProps = pickProProps(props.fieldProps);
   if (valueType.type === 'progress') {
@@ -98,64 +73,8 @@ const defaultRenderTextByObject = (text, valueType, props) => {
   return text;
 };
 
-/**
- * 根据不同的类型来转化数值
- *
- * @param dataValue
- * @param valueType
- * @param props
- * @param valueTypeMap
- */
-export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) => {
-  const {
-    mode = 'read',
-    emptyText = '-'
-  } = props;
-  if (emptyText !== false && mode === 'read' && valueType !== 'option' && valueType !== 'switch') {
-    if (typeof dataValue !== 'boolean' && typeof dataValue !== 'number' && !dataValue) {
-      const {
-        fieldProps,
-        render
-      } = props;
-      if (render) {
-        return render(dataValue, {
-          mode,
-          ...fieldProps
-        }, /*#__PURE__*/_jsx(_Fragment, {
-          children: emptyText
-        }));
-      }
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: emptyText
-      });
-    }
-  }
-  delete props.emptyText;
-  if (typeof valueType === 'object') {
-    return defaultRenderTextByObject(dataValue, valueType, props);
-  }
-  const customValueTypeConfig = valueTypeMap && valueTypeMap[valueType];
-  if (customValueTypeConfig) {
-    delete props.ref;
-    if (mode === 'read') {
-      return customValueTypeConfig.render?.(dataValue, {
-        text: dataValue,
-        ...props,
-        mode: mode || 'read'
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dataValue
-      }));
-    }
-    if (mode === 'update' || mode === 'edit') {
-      return customValueTypeConfig.formItemRender?.(dataValue, {
-        text: dataValue,
-        ...props
-      }, /*#__PURE__*/_jsx(_Fragment, {
-        children: dataValue
-      }));
-    }
-  }
-
+/** 内置 valueType 分支（读写共用，具体展示由子 Field 的 mode 决定） */
+function renderDefaultValueTypeLeaf(dataValue, valueType, props) {
   /** 如果是金额的值 */
   if (valueType === 'money') {
     return /*#__PURE__*/_jsx(FieldMoney, {
@@ -166,27 +85,21 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
 
   /** 如果是日期的值 */
   if (valueType === 'date') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY-MM-DD",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "YYYY-MM-DD",
+      ...props
+    }));
   }
 
   /** 如果是周的值 */
   if (valueType === 'dateWeek') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY-wo",
-        picker: "week",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "gggg-wo",
+      picker: "week",
+      ...props
+    }));
   }
 
   /** 如果是周范围的值 */
@@ -195,19 +108,16 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
       fieldProps,
       ...otherProps
     } = props;
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldRangePicker, {
-        text: dataValue,
-        format: "YYYY-W",
-        showTime: true,
-        fieldProps: {
-          picker: 'week',
-          ...fieldProps
-        },
-        ...otherProps
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldRangePicker, {
+      text: dataValue,
+      format: "gggg-wo",
+      showTime: true,
+      fieldProps: {
+        picker: 'week',
+        ...fieldProps
+      },
+      ...otherProps
+    }));
   }
 
   /** 如果是月范围的值 */
@@ -216,19 +126,16 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
       fieldProps,
       ...otherProps
     } = props;
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldRangePicker, {
-        text: dataValue,
-        format: "YYYY-MM",
-        showTime: true,
-        fieldProps: {
-          picker: 'month',
-          ...fieldProps
-        },
-        ...otherProps
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldRangePicker, {
+      text: dataValue,
+      format: "YYYY-MM",
+      showTime: true,
+      fieldProps: {
+        picker: 'month',
+        ...fieldProps
+      },
+      ...otherProps
+    }));
   }
 
   /** 如果是季范围的值 */
@@ -237,19 +144,16 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
       fieldProps,
       ...otherProps
     } = props;
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldRangePicker, {
-        text: dataValue,
-        format: "YYYY-Q",
-        showTime: true,
-        fieldProps: {
-          picker: 'quarter',
-          ...fieldProps
-        },
-        ...otherProps
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldRangePicker, {
+      text: dataValue,
+      format: "YYYY-[Q]Q",
+      showTime: true,
+      fieldProps: {
+        picker: 'quarter',
+        ...fieldProps
+      },
+      ...otherProps
+    }));
   }
 
   /** 如果是年范围的值 */
@@ -258,58 +162,46 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
       fieldProps,
       ...otherProps
     } = props;
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldRangePicker, {
-        text: dataValue,
-        format: "YYYY",
-        showTime: true,
-        fieldProps: {
-          picker: 'year',
-          ...fieldProps
-        },
-        ...otherProps
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldRangePicker, {
+      text: dataValue,
+      format: "YYYY",
+      showTime: true,
+      fieldProps: {
+        picker: 'year',
+        ...fieldProps
+      },
+      ...otherProps
+    }));
   }
 
   /** 如果是月的值 */
   if (valueType === 'dateMonth') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY-MM",
-        picker: "month",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "YYYY-MM",
+      picker: "month",
+      ...props
+    }));
   }
 
   /** 如果是季度的值 */
   if (valueType === 'dateQuarter') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY-[Q]Q",
-        picker: "quarter",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "YYYY-[Q]Q",
+      picker: "quarter",
+      ...props
+    }));
   }
 
   /** 如果是年的值 */
   if (valueType === 'dateYear') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY",
-        picker: "year",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "YYYY",
+      picker: "year",
+      ...props
+    }));
   }
 
   /** 如果是日期范围的值 */
@@ -323,53 +215,40 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
 
   /** 如果是日期加时间类型的值 */
   if (valueType === 'dateTime') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldDatePicker, {
-        text: dataValue,
-        format: "YYYY-MM-DD HH:mm:ss",
-        showTime: true,
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldDatePicker, {
+      text: dataValue,
+      format: "YYYY-MM-DD HH:mm:ss",
+      showTime: true,
+      ...props
+    }));
   }
 
   /** 如果是日期加时间类型的值的值 */
   if (valueType === 'dateTimeRange') {
-    // 值不存在的时候显示 "-"
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldRangePicker, {
-        text: dataValue,
-        format: "YYYY-MM-DD HH:mm:ss",
-        showTime: true,
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldRangePicker, {
+      text: dataValue,
+      format: "YYYY-MM-DD HH:mm:ss",
+      showTime: true,
+      ...props
+    }));
   }
 
   /** 如果是时间类型的值 */
   if (valueType === 'time') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldTimePicker, {
-        text: dataValue,
-        format: "HH:mm:ss",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldTimePicker, {
+      text: dataValue,
+      format: "HH:mm:ss",
+      ...props
+    }));
   }
 
   /** 如果是时间类型的值 */
   if (valueType === 'timeRange') {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldTimeRangePicker, {
-        text: dataValue,
-        format: "HH:mm:ss",
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldTimeRangePicker, {
+      text: dataValue,
+      format: "HH:mm:ss",
+      ...props
+    }));
   }
   if (valueType === 'fromNow') {
     return /*#__PURE__*/_jsx(FieldFromNow, {
@@ -446,13 +325,10 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
     });
   }
   if (valueType === 'select' || valueType === 'text' && (props.valueEnum || props.request)) {
-    return /*#__PURE__*/_jsx(FieldHOC, {
-      isLight: props.light,
-      children: /*#__PURE__*/_jsx(FieldSelect, {
-        text: dataValue,
-        ...props
-      })
-    });
+    return wrapProFieldLight(props.light, /*#__PURE__*/_jsx(FieldSelect, {
+      text: dataValue,
+      ...props
+    }));
   }
   if (valueType === 'checkbox') {
     return /*#__PURE__*/_jsx(FieldCheckbox, {
@@ -537,56 +413,78 @@ export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) =>
     text: dataValue,
     ...props
   });
-};
-const ProFieldComponent = ({
-  text,
-  valueType = 'text',
-  mode = 'read',
-  onChange,
-  formItemRender,
-  value,
-  readonly,
-  fieldProps: restFieldProps,
-  ...rest
-}, ref) => {
-  const context = useContext(ProConfigContext);
-  const onChangeCallBack = useRefFunction((...restParams) => {
-    restFieldProps?.onChange?.(...restParams);
-    onChange?.(...restParams);
-  });
-  const fieldProps = useDeepCompareMemo(() => {
-    return (value !== undefined || restFieldProps) && {
-      value,
-      // fieldProps 优先级更高，在类似 LightFilter 场景下需要覆盖默认的 value 和 onChange
-      ...omitUndefined(restFieldProps),
-      onChange: onChangeCallBack
-    };
-  }, [value, restFieldProps, onChangeCallBack]);
-  const renderedDom = defaultRenderText(mode === 'edit' ? fieldProps?.value ?? text ?? '' : text ?? fieldProps?.value ?? '', valueType || 'text', omitUndefined({
-    ref,
-    ...rest,
-    mode: readonly ? 'read' : mode,
-    formItemRender: formItemRender ? (curText, props, dom) => {
+}
+
+/** 只读：空值占位、context valueTypeMap 的 render、内置 valueType */
+export const defaultRenderRead = (dataValue, valueType, props, valueTypeMap) => {
+  const {
+    mode = 'read',
+    emptyText = '-'
+  } = props;
+  if (emptyText !== false && mode === 'read' && valueType !== 'option' && valueType !== 'switch') {
+    if (typeof dataValue !== 'boolean' && typeof dataValue !== 'number' && !dataValue) {
       const {
-        placeholder: _placeholder,
-        ...restProps
+        fieldProps,
+        render
       } = props;
-      const newDom = formItemRender(curText, restProps, dom);
-      // formItemRender 之后的dom可能没有props，这里会帮忙注入一下
-      if ( /*#__PURE__*/React.isValidElement(newDom)) return /*#__PURE__*/React.cloneElement(newDom, {
-        ...fieldProps,
-        ...(newDom.props || {})
+      if (render) {
+        return render(dataValue, {
+          mode,
+          ...fieldProps
+        }, /*#__PURE__*/_jsx(_Fragment, {
+          children: emptyText
+        }));
+      }
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: emptyText
       });
-      return newDom;
-    } : undefined,
-    placeholder: formItemRender ? undefined : rest?.placeholder ?? fieldProps?.placeholder,
-    fieldProps: pickProProps(omitUndefined({
-      ...fieldProps,
-      placeholder: formItemRender ? undefined : rest?.placeholder ?? fieldProps?.placeholder
-    }), Object.keys(context.valueTypeMap || {})?.includes(valueType))
-  }), context.valueTypeMap || {});
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: renderedDom
-  });
+    }
+  }
+  delete props.emptyText;
+  if (typeof valueType === 'object') {
+    return defaultRenderTextByObject(dataValue, valueType, props);
+  }
+  const customValueTypeConfig = valueTypeMap && valueTypeMap[valueType];
+  if (customValueTypeConfig) {
+    delete props.ref;
+    return customValueTypeConfig.render?.(dataValue, {
+      text: dataValue,
+      ...props,
+      mode: mode || 'read'
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: dataValue
+    }));
+  }
+  return renderDefaultValueTypeLeaf(dataValue, valueType, props);
+};
+
+/** 编辑：context valueTypeMap 的 formItemRender、内置 valueType */
+export const defaultRenderEdit = (dataValue, valueType, props, valueTypeMap) => {
+  delete props.emptyText;
+  if (typeof valueType === 'object') {
+    return defaultRenderTextByObject(dataValue, valueType, props);
+  }
+  const customValueTypeConfig = valueTypeMap && valueTypeMap[valueType];
+  if (customValueTypeConfig) {
+    delete props.ref;
+    return customValueTypeConfig.formItemRender?.(dataValue, {
+      text: dataValue,
+      ...props
+    }, /*#__PURE__*/_jsx(_Fragment, {
+      children: dataValue
+    }));
+  }
+  return renderDefaultValueTypeLeaf(dataValue, valueType, props);
+};
+
+/** 按 mode 调度（直接调用 defaultRenderText 时与旧行为一致） */
+export const defaultRenderText = (dataValue, valueType, props, valueTypeMap) => {
+  const m = props.mode ?? 'read';
+  return m === 'edit' || m === 'update' ? defaultRenderEdit(dataValue, valueType, props, valueTypeMap) : defaultRenderRead(dataValue, valueType, props, valueTypeMap);
 };
-export const ProField = /*#__PURE__*/React.forwardRef(ProFieldComponent);
+export const ProField = createProField({
+  renderRead: defaultRenderRead,
+  renderEdit: defaultRenderEdit
+}, {
+  pickProPropsWithValueTypeMap: true
+});

package/es/field/ProFieldCore.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ProRenderFieldPropsType } from '../provider';
+import { type ProFieldTextType, type ProFieldValueTypeInput } from '../utils';
+import './initDayjs';
+import type { ProFieldPropsType, ProFieldRenderProps } from './types';
+export type ProFieldRenderText = (dataValue: ProFieldTextType, valueType: ProFieldValueTypeInput, props: ProFieldRenderProps, valueTypeMap: Record<string, ProRenderFieldPropsType>) => React.ReactNode;
+/** 只读 / 编辑使用各自渲染函数，避免在单函数内反复判断 mode */
+export type ProFieldDualRender = {
+    renderRead: ProFieldRenderText;
+    renderEdit: ProFieldRenderText;
+};
+export declare function isProFieldDualRender(input: ProFieldRenderText | ProFieldDualRender): input is ProFieldDualRender;
+export interface CreateProFieldOptions {
+    /**
+     * 为 true 时，当 valueType 在 context.valueTypeMap 中注册过，
+     * 将对应标志传给 pickProProps，使自定义 valueType 的 props 少被过滤
+     */
+    pickProPropsWithValueTypeMap: boolean;
+}
+/**
+ * @param render 单函数时读写共用（兼容旧用法）；对象时分别指定只读 / 编辑渲染
+ */
+export declare function createProField(render: ProFieldRenderText | ProFieldDualRender, options: CreateProFieldOptions): React.ForwardRefRenderFunction<any, ProFieldPropsType>;

package/es/field/ProFieldCore.js

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react';
+import ProConfigContext from "../provider";
+import { omitUndefined, pickProProps, useDeepCompareMemo, useRefFunction } from "../utils";
+import "./initDayjs";
+
+/** 只读 / 编辑使用各自渲染函数，避免在单函数内反复判断 mode */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function isProFieldDualRender(input) {
+  return typeof input === 'object' && input !== null && 'renderRead' in input && 'renderEdit' in input;
+}
+/**
+ * @param render 单函数时读写共用（兼容旧用法）；对象时分别指定只读 / 编辑渲染
+ */
+export function createProField(render, options) {
+  const renderRead = isProFieldDualRender(render) ? render.renderRead : render;
+  const renderEdit = isProFieldDualRender(render) ? render.renderEdit : render;
+  const ProFieldComponent = ({
+    text,
+    valueType = 'text',
+    mode = 'read',
+    onChange,
+    formItemRender,
+    value,
+    readonly,
+    fieldProps: restFieldProps,
+    ...rest
+  }, ref) => {
+    const context = useContext(ProConfigContext);
+    const onChangeCallBack = useRefFunction((...restParams) => {
+      restFieldProps?.onChange?.(...restParams);
+      onChange?.(...restParams);
+    });
+    const fieldProps = useDeepCompareMemo(() => {
+      return (value !== undefined || restFieldProps) && {
+        value,
+        ...omitUndefined(restFieldProps),
+        onChange: onChangeCallBack
+      };
+    }, [value, restFieldProps, onChangeCallBack]);
+    const customValueType = options.pickProPropsWithValueTypeMap && Object.keys(context.valueTypeMap || {}).includes(String(valueType));
+    const effectiveMode = readonly ? 'read' : mode;
+    /** 取值顺序仍以原始 mode 为准（readonly + mode=edit 时仍按编辑态取 fieldProps.value） */
+    const dataValue = mode === 'edit' || mode === 'update' ? fieldProps?.value ?? text ?? '' : text ?? fieldProps?.value ?? '';
+    const renderFn = effectiveMode === 'edit' || effectiveMode === 'update' ? renderEdit : renderRead;
+    const renderedDom = renderFn(dataValue, valueType || 'text', omitUndefined({
+      ref,
+      ...rest,
+      mode: effectiveMode,
+      formItemRender: formItemRender ? (curText, props, dom) => {
+        const {
+          placeholder: _placeholder,
+          ...restProps
+        } = props;
+        const newDom = formItemRender(curText, restProps, dom);
+        if ( /*#__PURE__*/React.isValidElement(newDom)) {
+          return /*#__PURE__*/React.cloneElement(newDom, {
+            ...fieldProps,
+            ...(newDom.props || {})
+          });
+        }
+        return newDom;
+      } : undefined,
+      placeholder: formItemRender ? undefined : rest?.placeholder ?? fieldProps?.placeholder,
+      fieldProps: pickProProps(omitUndefined({
+        ...fieldProps,
+        placeholder: formItemRender ? undefined : rest?.placeholder ?? fieldProps?.placeholder
+      }), customValueType)
+    }), context.valueTypeMap || {});
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: renderedDom
+    });
+  };
+  return /*#__PURE__*/React.forwardRef(ProFieldComponent);
+}