renderFormItem change to formItemRender

ant-design · Jun 6, 2024 · 39d5de8 · 39d5de8
1 parent b3770ab
commit 39d5de8
Show file tree

Hide file tree

Showing 107 changed files with 285 additions and 285 deletions.
diff --git a/docs/components.en-US.md b/docs/components.en-US.md
@@ -140,7 +140,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    * @name Customize the edit schema
    * @description returns a node that will automatically wrap value and onChange
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

diff --git a/docs/components/customization-value-type.tsx b/docs/components/customization-value-type.tsx
@@ -160,7 +160,7 @@ export default () => {
       valueTypeMap={{
         link: {
           render: (text) => <a>{text}</a>,
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <Input placeholder="请输入链接" {...props?.fieldProps} />
           ),
         },
@@ -174,7 +174,7 @@ export default () => {
               </>
             );
           },
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <TagList {...props} {...props?.fieldProps} />
           ),
         },

diff --git a/docs/components/schema.en-US.md b/docs/components/schema.en-US.md
@@ -18,8 +18,8 @@ In the `ProComponents`, we have used the same definition as tables for component
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | Props passed to the rendering component. They are also passed when customizing |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data is consumed by the rendering component defined by valueType |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | Requests network data remotely, usually used for selection-type components |
 | `params` | `Record<string, any>` | Additional parameters passed to `request`. The component does not process them, but changes will trigger a new data request in `request` |
 | `hideInForm` | `boolean` | Hidden in the form |
@@ -76,7 +76,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name Custom edit mode
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

diff --git a/docs/components/schema.md b/docs/components/schema.md
@@ -18,8 +18,8 @@ order: 1
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | 传给渲染的组件的 props，自定义的时候也会传递 |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | 传递给 Form.Item 的配置 |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 |
 | `params` | `Record<string, any>` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 |
 | `hideInForm` | `boolean` | 在 Form 中隐藏 |
@@ -76,7 +76,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name 自定义编辑模式
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

diff --git a/packages/descriptions/src/demos/customization-value-type.tsx b/packages/descriptions/src/demos/customization-value-type.tsx
@@ -102,7 +102,7 @@ export default () => {
         valueTypeMap: {
           link: {
             render: (text) => <a>{text}</a>,
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <Input placeholder="请输入链接" {...props?.fieldProps} />
             ),
           },
@@ -116,7 +116,7 @@ export default () => {
                 </>
               );
             },
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <TagList {...props} {...props?.fieldProps} />
             ),
           },

diff --git a/packages/descriptions/src/demos/editable.tsx b/packages/descriptions/src/demos/editable.tsx
@@ -56,7 +56,7 @@ export default () => {
           title: '状态2',
           key: 'state2',
           dataIndex: 'state2',
-          renderFormItem: () => {
+          formItemRender: () => {
             return <Input placeholder="输入 Success 切换分值" />;
           },
         },

diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx
@@ -172,7 +172,7 @@ export const FieldRender: React.FC<
     plain,
     dataIndex,
     request,
-    renderFormItem,
+    formItemRender,
     params,
     emptyText,
   } = props;
@@ -255,10 +255,10 @@ export const FieldRender: React.FC<
             {...fieldConfig}
             // @ts-ignore
             proFieldProps={{ ...fieldConfig.proFieldProps }}
-            renderFormItem={
-              renderFormItem
+            formItemRender={
+              formItemRender
                 ? () =>
-                    renderFormItem?.(
+                    formItemRender?.(
                       {
                         ...props,
                         type: 'descriptions',

diff --git a/packages/field/CHANGELOG.md b/packages/field/CHANGELOG.md
@@ -99,7 +99,7 @@ All notable changes to this project will be documented in this file. See [Conven
 ### Bug Fixes
 
 - **descriptions:** fix ProTable 和 ProDescriptions render 行为不一样的问题 ([227d302](https://github.com/ant-design/pro-components/commit/227d3023934efceb2f86184767ef7afe37a73c3b))
-- **field:** remove useDeepCompareMemo which causing renderFormItem not updated ([#7887](https://github.com/ant-design/pro-components/issues/7887)) ([d507222](https://github.com/ant-design/pro-components/commit/d507222c083a8be976f8d4dfc3fec9380f0f4316))
+- **field:** remove useDeepCompareMemo which causing formItemRender not updated ([#7887](https://github.com/ant-design/pro-components/issues/7887)) ([d507222](https://github.com/ant-design/pro-components/commit/d507222c083a8be976f8d4dfc3fec9380f0f4316))
 - **form:** fix ProFormMoney customSymbol no work error ([d0f30b8](https://github.com/ant-design/pro-components/commit/d0f30b8b9b7354798ac5b9271b88dad772f56f36))
 - **form:** 修复 FieldOptions 中子元素换行问题 ([#7856](https://github.com/ant-design/pro-components/issues/7856)) ([6a6f1c4](https://github.com/ant-design/pro-components/commit/6a6f1c48bee9d5aaf12842b3f225766192b44ccc))
 
@@ -201,7 +201,7 @@ All notable changes to this project will be documented in this file. See [Conven
 ### Bug Fixes
 
 - **form:** 修复 compact warning ([#7496](https://github.com/ant-design/pro-components/issues/7496)) ([b60d33d](https://github.com/ant-design/pro-components/commit/b60d33d285b4ed0081fb813ace5fc1f0211acf20))
-- **form:** 表单项配置 request 并且自定义 renderFormItem 时，没有透传 options 和 loading ([#7457](https://github.com/ant-design/pro-components/issues/7457)) ([1baf580](https://github.com/ant-design/pro-components/commit/1baf58029c38e5ebde5533da6d7f5aea57f19e6c)), closes [#7456](https://github.com/ant-design/pro-components/issues/7456)
+- **form:** 表单项配置 request 并且自定义 formItemRender 时，没有透传 options 和 loading ([#7457](https://github.com/ant-design/pro-components/issues/7457)) ([1baf580](https://github.com/ant-design/pro-components/commit/1baf58029c38e5ebde5533da6d7f5aea57f19e6c)), closes [#7456](https://github.com/ant-design/pro-components/issues/7456)
 
 ### Features
 

diff --git a/packages/field/src/AllProField.tsx b/packages/field/src/AllProField.tsx
@@ -217,7 +217,7 @@ export const defaultRenderText = (
       );
     }
     if (mode === 'update' || mode === 'edit') {
-      return customValueTypeConfig.renderFormItem?.(
+      return customValueTypeConfig.formItemRender?.(
         dataValue,
         {
           text: dataValue as React.ReactNode,
@@ -572,7 +572,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
     valueType = 'text',
     mode = 'read',
     onChange,
-    renderFormItem,
+    formItemRender,
     value,
     readonly,
     fieldProps: restFieldProps,
@@ -608,11 +608,11 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
       ref,
       ...rest,
       mode: readonly ? 'read' : mode,
-      renderFormItem: renderFormItem
+      formItemRender: formItemRender
         ? (curText: any, props: ProFieldFCRenderProps, dom: JSX.Element) => {
             const { placeholder: _placeholder, ...restProps } = props;
-            const newDom = renderFormItem(curText, restProps, dom);
-            // renderFormItem 之后的dom可能没有props，这里会帮忙注入一下
+            const newDom = formItemRender(curText, restProps, dom);
+            // formItemRender 之后的dom可能没有props，这里会帮忙注入一下
             if (React.isValidElement(newDom))
               return React.cloneElement(newDom, {
                 ...fieldProps,
@@ -621,13 +621,13 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
             return newDom;
           }
         : undefined,
-      placeholder: renderFormItem
+      placeholder: formItemRender
         ? undefined
         : rest?.placeholder ?? fieldProps?.placeholder,
       fieldProps: pickProProps(
         omitUndefined({
           ...fieldProps,
-          placeholder: renderFormItem
+          placeholder: formItemRender
             ? undefined
             : rest?.placeholder ?? fieldProps?.placeholder,
         }),

diff --git a/packages/field/src/PureProField.tsx b/packages/field/src/PureProField.tsx
@@ -145,7 +145,7 @@ export const pureRenderText = (
       );
     }
     if (mode === 'update' || mode === 'edit') {
-      return customValueTypeConfig.renderFormItem?.(
+      return customValueTypeConfig.formItemRender?.(
         dataValue,
         {
           text: dataValue as React.ReactNode,
@@ -173,7 +173,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
     valueType = 'text',
     mode = 'read',
     onChange,
-    renderFormItem,
+    formItemRender,
     value,
     readonly,
     fieldProps: restFieldProps,
@@ -209,11 +209,11 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
       ref,
       ...rest,
       mode: readonly ? 'read' : mode,
-      renderFormItem: renderFormItem
+      formItemRender: formItemRender
         ? (curText: any, props: ProFieldFCRenderProps, dom: JSX.Element) => {
             const { placeholder: _placeholder, ...restProps } = props;
-            const newDom = renderFormItem(curText, restProps, dom);
-            // renderFormItem 之后的dom可能没有props，这里会帮忙注入一下
+            const newDom = formItemRender(curText, restProps, dom);
+            // formItemRender 之后的dom可能没有props，这里会帮忙注入一下
             if (React.isValidElement(newDom))
               return React.cloneElement(newDom, {
                 ...fieldProps,
@@ -222,13 +222,13 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
             return newDom;
           }
         : undefined,
-      placeholder: renderFormItem
+      placeholder: formItemRender
         ? undefined
         : rest?.placeholder ?? fieldProps?.placeholder,
       fieldProps: pickProProps(
         omitUndefined({
           ...fieldProps,
-          placeholder: renderFormItem
+          placeholder: formItemRender
             ? undefined
             : rest?.placeholder ?? fieldProps?.placeholder,
         }),

diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx
@@ -36,7 +36,7 @@ const FieldCascader: ProFieldFC<GroupProps> = (
   {
     radioType,
     placeholder,
-    renderFormItem,
+    formItemRender,
     mode,
     render,
     label,
@@ -133,9 +133,9 @@ const FieldCascader: ProFieldFC<GroupProps> = (
       />
     );
 
-    if (renderFormItem) {
+    if (formItemRender) {
       dom =
-        renderFormItem(
+        formItemRender(
           rest.text,
           { mode, ...rest.fieldProps, options, loading },
           dom,

diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -22,7 +22,7 @@ export type GroupProps = {
  * @param ref
  */
 const FieldCheckbox: ProFieldFC<GroupProps> = (
-  { layout = 'horizontal', renderFormItem, mode, render, ...rest },
+  { layout = 'horizontal', formItemRender, mode, render, ...rest },
   ref,
 ) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -127,9 +127,9 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
         options={options}
       />,
     );
-    if (renderFormItem) {
+    if (formItemRender) {
       return (
-        renderFormItem(
+        formItemRender(
           rest.text,
           { mode, ...rest.fieldProps, options, loading },
           dom,

diff --git a/packages/field/src/components/Code/index.tsx b/packages/field/src/components/Code/index.tsx
@@ -27,7 +27,7 @@ const FieldCode: ProFieldFC<{
   text: string;
   language?: 'json' | 'text';
 }> = (
-  { text, mode, render, language = 'text', renderFormItem, plain, fieldProps },
+  { text, mode, render, language = 'text', formItemRender, plain, fieldProps },
   ref,
 ) => {
   const code = languageFormat(text, language);
@@ -64,8 +64,8 @@ const FieldCode: ProFieldFC<{
     if (plain) {
       dom = <Input {...fieldProps} ref={ref} />;
     }
-    if (renderFormItem) {
-      return renderFormItem(code, { mode, ...fieldProps, ref }, dom) ?? null;
+    if (formItemRender) {
+      return formItemRender(code, { mode, ...fieldProps, ref }, dom) ?? null;
     }
     return dom;
   }

diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx
@@ -41,7 +41,7 @@ const FieldColorPicker: ProFieldFC<
   {
     text: string;
   } & Partial<ColorPickerProps>
-> = ({ text, mode: type, render, renderFormItem, fieldProps }, ref: any) => {
+> = ({ text, mode: type, render, formItemRender, fieldProps }, ref: any) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('pro-field-color-picker');
 
@@ -71,8 +71,8 @@ const FieldColorPicker: ProFieldFC<
         className={classNames({ [prefixCls]: true })}
       />
     );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps, style }, dom);
+    if (formItemRender) {
+      return formItemRender(text, { mode: type, ...fieldProps, style }, dom);
     }
     return dom;
   }

diff --git a/packages/field/src/components/DatePicker/index.tsx b/packages/field/src/components/DatePicker/index.tsx
@@ -44,7 +44,7 @@ const FieldDatePicker: ProFieldFC<
     label,
     light,
     render,
-    renderFormItem,
+    formItemRender,
     plain,
     showTime,
     fieldProps,
@@ -129,8 +129,8 @@ const FieldDatePicker: ProFieldFC<
         />
       );
     }
-    if (renderFormItem) {
-      return renderFormItem(text, { mode, ...fieldProps }, dom);
+    if (formItemRender) {
+      return formItemRender(text, { mode, ...fieldProps }, dom);
     }
     return dom;
   }

diff --git a/packages/field/src/components/Digit/index.tsx b/packages/field/src/components/Digit/index.tsx
@@ -18,7 +18,7 @@ export type FieldDigitProps = {
  *     moneySymbol?: string; }
  */
 const FieldDigit: ProFieldFC<FieldDigitProps> = (
-  { text, mode: type, render, placeholder, renderFormItem, fieldProps },
+  { text, mode: type, render, placeholder, formItemRender, fieldProps },
   ref,
 ) => {
   const intl = useIntl();
@@ -73,8 +73,8 @@ const FieldDigit: ProFieldFC<FieldDigitProps> = (
         onBlur={(e) => fieldProps?.onBlur?.(proxyChange(e.target.value))}
       />
     );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps }, dom);
+    if (formItemRender) {
+      return formItemRender(text, { mode: type, ...fieldProps }, dom);
     }
     return dom;
   }

diff --git a/packages/field/src/components/DigitRange/index.tsx b/packages/field/src/components/DigitRange/index.tsx
@@ -26,7 +26,7 @@ const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
     mode: type,
     render,
     placeholder,
-    renderFormItem,
+    formItemRender,
     fieldProps,
     separator = '~',
     separatorWidth = 30,
@@ -138,8 +138,8 @@ const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
         />
       </Compact>
     );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps }, dom);
+    if (formItemRender) {
+      return formItemRender(text, { mode: type, ...fieldProps }, dom);
     }
     return dom;
   }

diff --git a/packages/field/src/components/FromNow/index.tsx b/packages/field/src/components/FromNow/index.tsx
@@ -16,7 +16,7 @@ const FieldFromNow: ProFieldFC<{
   text: string;
   format?: string;
 }> = (
-  { text, mode, plain, render, renderFormItem, format, fieldProps },
+  { text, mode, plain, render, formItemRender, format, fieldProps },
   ref,
 ) => {
   const intl = useIntl();
@@ -52,8 +52,8 @@ const FieldFromNow: ProFieldFC<{
         value={momentValue}
       />
     );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode, ...fieldProps }, dom);
+    if (formItemRender) {
+      return formItemRender(text, { mode, ...fieldProps }, dom);
     }
     return dom;
   }