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

package/es/descriptions/useFetchData.js

@@ -1,6 +1,9 @@
 import { useControlledState } from '@rc-component/util';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useRefFunction } from "../utils";
+
+/** @deprecated 使用 {@link ProDescriptionsRequestResult} */
+
 const useFetchData = (getData, options) => {
   const {
     onRequestError,
@@ -44,41 +47,48 @@ const useFetchData = (getData, options) => {
     setEntity(data);
     setLoading(false);
   };
-  /** 请求数据 */
-  const fetchList = async () => {
-    if (loading) {
+  const getDataRef = useRef(getData);
+  getDataRef.current = getData;
+  const fetchingRef = useRef(false);
+
+  /** 请求数据（稳定引用，始终读取最新的 getData） */
+  const fetchList = useRefFunction(async () => {
+    if (fetchingRef.current) {
       return;
     }
+    fetchingRef.current = true;
     setLoading(true);
     try {
       const {
         data,
         success
-      } = (await getData()) || {};
+      } = (await getDataRef.current()) || {};
       if (success !== false) {
         updateDataAndLoading(data);
       }
     } catch (e) {
       // 如果没有传递这个方法的话，需要把错误抛出去，以免吞掉错误
-      if (onRequestError === undefined) throw new Error(e);else onRequestError(e);
+      if (onRequestError === undefined) {
+        throw e instanceof Error ? e : new Error(String(e));
+      }
+      onRequestError(e instanceof Error ? e : new Error(String(e)));
       setLoading(false);
     } finally {
+      fetchingRef.current = false;
       setLoading(false);
     }
-  };
+  });
   useEffect(() => {
     if (manual) {
       return;
     }
     fetchList();
-  }, [...(effects || []), manual]);
-  return {
+  }, [...(effects || []), manual, fetchList]);
+  return useMemo(() => ({
     dataSource: entity,
     setDataSource: setEntity,
     loading,
-    reload: () => {
-      return fetchList();
-    }
-  };
+    reload: fetchList
+  }), [entity, setEntity, loading, fetchList]);
 };
 export default useFetchData;

package/es/field/AllProField.d.ts

@@ -1,35 +1,9 @@
 import React from 'react';
-import type { BaseProFieldFC, ProFieldFCRenderProps, ProRenderFieldPropsType } from '../provider';
-import { ProFieldRequestData, ProFieldTextType, ProFieldValueObjectType, ProFieldValueType } from '../utils';
-import { ProFieldPropsType } from './PureProField';
-/** 默认的 Field 需要实现的功能 */
-export type ProFieldFC<T = {}> = React.ForwardRefRenderFunction<any, BaseProFieldFC & ProRenderFieldPropsType & T>;
-/** 轻量筛选的field属性 */
-export type ProFieldLightProps = {
-    lightLabel?: React.RefObject<{
-        labelRef: React.RefObject<HTMLElement>;
-        clearRef: React.RefObject<HTMLElement>;
-    }>;
-    labelTrigger?: boolean;
-};
-/** Value type by function */
-export type ProFieldValueTypeFunction<T> = (item: T) => ProFieldValueType | ProFieldValueObjectType;
-type RenderProps = Omit<ProFieldFCRenderProps, 'text' | 'placeholder'> & ProRenderFieldPropsType & {
-    /** 从服务器读取选项 */
-    request?: ProFieldRequestData;
-    emptyText?: React.ReactNode;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    [key: string]: any;
-};
-/**
- * 根据不同的类型来转化数值
- *
- * @param dataValue
- * @param valueType
- * @param props
- * @param valueTypeMap
- */
-export declare const defaultRenderText: (dataValue: ProFieldTextType, valueType: ProFieldValueType | ProFieldValueObjectType, props: RenderProps, valueTypeMap: Record<string, ProRenderFieldPropsType>) => React.ReactNode;
-export declare const ProField: React.ForwardRefRenderFunction<any, ProFieldPropsType>;
-export {};
+import { type ProFieldRenderText } from './ProFieldCore';
+/** 只读：空值占位、context valueTypeMap 的 render、内置 valueType */
+export declare const defaultRenderRead: ProFieldRenderText;
+/** 编辑：context valueTypeMap 的 formItemRender、内置 valueType */
+export declare const defaultRenderEdit: ProFieldRenderText;
+/** 按 mode 调度（直接调用 defaultRenderText 时与旧行为一致） */
+export declare const defaultRenderText: ProFieldRenderText;
+export declare const ProField: React.ForwardRefRenderFunction<any, import("./types").ProFieldPropsType>;

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
+});