diff --git a/docs/components.en-US.md b/docs/components.en-US.md index 60edbbda9966..101bcba5032e 100644 --- a/docs/components.en-US.md +++ b/docs/components.en-US.md @@ -140,7 +140,7 @@ export type ProSchema = { * @name Customize the edit schema * @description returns a node that will automatically wrap value and onChange */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/docs/components/customization-value-type.tsx b/docs/components/customization-value-type.tsx index 2aed5385e7c5..d7bcdf292135 100644 --- a/docs/components/customization-value-type.tsx +++ b/docs/components/customization-value-type.tsx @@ -160,7 +160,7 @@ export default () => { valueTypeMap={{ link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -174,7 +174,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/docs/components/schema.en-US.md b/docs/components/schema.en-US.md index 390f551d09d9..22be9550309d 100644 --- 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` | 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 = { * * @name Custom edit mode */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/docs/components/schema.md b/docs/components/schema.md index 04e3ad432457..08924b4cf455 100644 --- 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` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 | | `hideInForm` | `boolean` | 在 Form 中隐藏 | @@ -76,7 +76,7 @@ export type ProSchema = { * * @name 自定义编辑模式 */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/packages/descriptions/src/demos/customization-value-type.tsx b/packages/descriptions/src/demos/customization-value-type.tsx index 7134ac2cfde8..24e446e0f98d 100644 --- 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) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -116,7 +116,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/descriptions/src/demos/editable.tsx b/packages/descriptions/src/demos/editable.tsx index 6bd5b911103c..6ab164458d16 100644 --- 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 ; }, }, diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx index 02bc087b15f2..2833d4eecc65 100644 --- 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 index 8104186cd84f..0962a215ba58 100644 --- 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 index f07709cdc321..6d3a3824cb5a 100644 --- 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 index 45578ea95bc4..614083b042fa 100644 --- 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 index 126e1192ee59..2f6d88258df4 100644 --- a/packages/field/src/components/Cascader/index.tsx +++ b/packages/field/src/components/Cascader/index.tsx @@ -36,7 +36,7 @@ const FieldCascader: ProFieldFC = ( { radioType, placeholder, - renderFormItem, + formItemRender, mode, render, label, @@ -133,9 +133,9 @@ const FieldCascader: ProFieldFC = ( /> ); - 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 index 5764f471b952..1f60a08891c6 100644 --- 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 = ( - { 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 = ( 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 index 6a6e320f45ce..f6bfa0ad00d4 100644 --- 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 = ; } - 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 index 782ef4d8a336..5e69f293072e 100644 --- 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 -> = ({ 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 index 4064d2ed25de..f447f7462fdf 100644 --- 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 index 7e4e3507c4d6..9a9debd27b6c 100644 --- 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 = ( - { 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 = ( 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 index a153f7ed814b..6f1ab144dd36 100644 --- a/packages/field/src/components/DigitRange/index.tsx +++ b/packages/field/src/components/DigitRange/index.tsx @@ -26,7 +26,7 @@ const FieldDigitRange: ProFieldFC = ( mode: type, render, placeholder, - renderFormItem, + formItemRender, fieldProps, separator = '~', separatorWidth = 30, @@ -138,8 +138,8 @@ const FieldDigitRange: ProFieldFC = ( /> ); - 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 index ed8ec2723c3f..061a68a478eb 100644 --- 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; } diff --git a/packages/field/src/components/Image/index.tsx b/packages/field/src/components/Image/index.tsx index 04066c91a7fc..c9f929521deb 100644 --- a/packages/field/src/components/Image/index.tsx +++ b/packages/field/src/components/Image/index.tsx @@ -22,7 +22,7 @@ const FieldImage = React.forwardRef( text, mode: type, render, - renderFormItem, + formItemRender, fieldProps, placeholder, width, @@ -45,8 +45,8 @@ const FieldImage = React.forwardRef( const dom = ( ); - 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/Money/index.tsx b/packages/field/src/components/Money/index.tsx index fbecdc173cfe..7d2625b5b3af 100644 --- a/packages/field/src/components/Money/index.tsx +++ b/packages/field/src/components/Money/index.tsx @@ -273,7 +273,7 @@ const FieldMoney: ProFieldFC = ( text, mode: type, render, - renderFormItem, + formItemRender, fieldProps, proFieldKey, plain, @@ -434,8 +434,8 @@ const FieldMoney: ProFieldFC = ( /> ); - 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/Password/index.tsx b/packages/field/src/components/Password/index.tsx index 3348f026efcc..a51d32db54bd 100644 --- a/packages/field/src/components/Password/index.tsx +++ b/packages/field/src/components/Password/index.tsx @@ -17,7 +17,7 @@ const FieldPassword: ProFieldFC<{ open?: boolean; onOpenChange?: (visible: boolean) => void; }> = ( - { text, mode, render, renderFormItem, fieldProps, proFieldKey, ...rest }, + { text, mode, render, formItemRender, fieldProps, proFieldKey, ...rest }, ref, ) => { const intl = useIntl(); @@ -55,8 +55,8 @@ const FieldPassword: ProFieldFC<{ {...fieldProps} /> ); - 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/Percent/index.tsx b/packages/field/src/components/Percent/index.tsx index 4f3598ffcf2c..55403f7a620e 100644 --- a/packages/field/src/components/Percent/index.tsx +++ b/packages/field/src/components/Percent/index.tsx @@ -34,7 +34,7 @@ const FieldPercent: ProFieldFC = ( mode, showColor = false, render, - renderFormItem, + formItemRender, fieldProps, placeholder, showSymbol: propsShowSymbol, @@ -94,8 +94,8 @@ const FieldPercent: ProFieldFC = ( {...fieldProps} /> ); - 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/Progress/index.tsx b/packages/field/src/components/Progress/index.tsx index 03aa74927826..adb58679877b 100644 --- a/packages/field/src/components/Progress/index.tsx +++ b/packages/field/src/components/Progress/index.tsx @@ -29,7 +29,7 @@ const FieldProgress: ProFieldFC<{ text: number | string; placeholder?: string; }> = ( - { text, mode, render, plain, renderFormItem, fieldProps, placeholder }, + { text, mode, render, plain, formItemRender, fieldProps, placeholder }, ref, ) => { const intl = useIntl(); @@ -64,8 +64,8 @@ const FieldProgress: ProFieldFC<{ const dom = ( ); - 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/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx index 757dba3861f7..767a6bc9720d 100644 --- a/packages/field/src/components/Radio/index.tsx +++ b/packages/field/src/components/Radio/index.tsx @@ -23,7 +23,7 @@ export type GroupProps = { * @param ref */ const FieldRadio: ProFieldFC = ( - { radioType, renderFormItem, mode, render, ...rest }, + { radioType, formItemRender, mode, render, ...rest }, ref, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); @@ -106,9 +106,9 @@ const FieldRadio: ProFieldFC = ( options={options} />, ); - if (renderFormItem) { + if (formItemRender) { return ( - renderFormItem( + formItemRender( rest.text, { mode, ...rest.fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/RangePicker/index.tsx b/packages/field/src/components/RangePicker/index.tsx index 8f934c801343..8c1735dde508 100644 --- a/packages/field/src/components/RangePicker/index.tsx +++ b/packages/field/src/components/RangePicker/index.tsx @@ -31,7 +31,7 @@ const FieldRangePicker: ProFieldFC< format = 'YYYY-MM-DD', render, picker, - renderFormItem, + formItemRender, plain, showTime, lightLabel, @@ -151,8 +151,8 @@ const FieldRangePicker: 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/Rate/index.tsx b/packages/field/src/components/Rate/index.tsx index 3e809b0da767..bbf783a963d7 100644 --- a/packages/field/src/components/Rate/index.tsx +++ b/packages/field/src/components/Rate/index.tsx @@ -9,7 +9,7 @@ import type { ProFieldFC } from '../../PureProField'; */ const FieldRate: ProFieldFC<{ text: string; -}> = ({ text, mode, render, renderFormItem, fieldProps }, ref) => { +}> = ({ text, mode, render, formItemRender, fieldProps }, ref) => { if (mode === 'read') { const dom = ( @@ -21,8 +21,8 @@ const FieldRate: ProFieldFC<{ } if (mode === 'edit' || mode === 'update') { const dom = ; - 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/Second/index.tsx b/packages/field/src/components/Second/index.tsx index 3e1eed3561c2..f6f50817f30f 100644 --- a/packages/field/src/components/Second/index.tsx +++ b/packages/field/src/components/Second/index.tsx @@ -47,7 +47,7 @@ export function formatSecond(result: number) { * @param FieldSecond */ const Second: ProFieldFC = ( - { text, mode: type, render, renderFormItem, fieldProps, placeholder }, + { text, mode: type, render, formItemRender, fieldProps, placeholder }, ref, ) => { const intl = useIntl(); @@ -73,8 +73,8 @@ const Second: ProFieldFC = ( {...fieldProps} /> ); - 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/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx index 73584043546a..47c5ee37f84c 100644 --- a/packages/field/src/components/Segmented/index.tsx +++ b/packages/field/src/components/Segmented/index.tsx @@ -21,7 +21,7 @@ const FieldSegmented: ProFieldFC< const { mode, render, - renderFormItem, + formItemRender, fieldProps, emptyText = '-', ...rest @@ -76,8 +76,8 @@ const FieldSegmented: ProFieldFC< /> ); - if (renderFormItem) { - return renderFormItem( + if (formItemRender) { + return formItemRender( rest.text, { mode, ...fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx index 34fc9cb8bb3b..1dad7629c39f 100644 --- a/packages/field/src/components/Select/index.tsx +++ b/packages/field/src/components/Select/index.tsx @@ -394,7 +394,7 @@ const FieldSelect: ProFieldFC< mode, valueEnum, render, - renderFormItem, + formItemRender, request, fieldProps, plain, @@ -540,9 +540,9 @@ const FieldSelect: ProFieldFC< ); }; const dom = renderDom(); - if (renderFormItem) { + if (formItemRender) { return ( - renderFormItem( + formItemRender( rest.text, { mode, ...fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/Slider/index.tsx b/packages/field/src/components/Slider/index.tsx index 8848e721f7d2..e8312e7cb9de 100644 --- a/packages/field/src/components/Slider/index.tsx +++ b/packages/field/src/components/Slider/index.tsx @@ -8,7 +8,7 @@ import type { ProFieldFC } from '../../PureProField'; */ const FieldSlider: ProFieldFC<{ text: string; -}> = ({ text, mode, render, renderFormItem, fieldProps }, ref) => { +}> = ({ text, mode, render, formItemRender, fieldProps }, ref) => { if (mode === 'read') { const dom = text; if (render) { @@ -27,8 +27,8 @@ const FieldSlider: 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/Switch/index.tsx b/packages/field/src/components/Switch/index.tsx index 8b4d4489a9da..2f22ba86df36 100644 --- a/packages/field/src/components/Switch/index.tsx +++ b/packages/field/src/components/Switch/index.tsx @@ -12,7 +12,7 @@ import type { ProFieldFC } from '../../PureProField'; * @param */ const FieldSwitch: ProFieldFC<{ text: boolean; fieldProps?: SwitchProps }> = ( - { text, mode, render, light, label, renderFormItem, fieldProps }, + { text, mode, render, light, label, formItemRender, fieldProps }, ref, ) => { const intl = useIntl(); @@ -62,8 +62,8 @@ const FieldSwitch: ProFieldFC<{ text: boolean; fieldProps?: SwitchProps }> = ( ); } - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, editDom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, editDom); } return editDom; } diff --git a/packages/field/src/components/Text/index.tsx b/packages/field/src/components/Text/index.tsx index 3b58ea6d613a..ca2b7ac8ca02 100644 --- a/packages/field/src/components/Text/index.tsx +++ b/packages/field/src/components/Text/index.tsx @@ -12,7 +12,7 @@ const FieldText: ProFieldFC<{ text: string; emptyText?: React.ReactNode; }> = ( - { text, mode, render, renderFormItem, fieldProps, emptyText = '-' }, + { text, mode, render, formItemRender, fieldProps, emptyText = '-' }, ref, ) => { const { autoFocus, prefix = '', suffix = '' } = fieldProps || {}; @@ -53,8 +53,8 @@ const FieldText: 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/TextArea/index.tsx b/packages/field/src/components/TextArea/index.tsx index 25b62ae201d1..e025a403fe7d 100644 --- a/packages/field/src/components/TextArea/index.tsx +++ b/packages/field/src/components/TextArea/index.tsx @@ -12,7 +12,7 @@ import FieldTextAreaReadonly from './readonly'; const FieldTextArea: ProFieldFC<{ text: string; }> = (props, ref) => { - const { text, mode, render, renderFormItem, fieldProps } = props; + const { text, mode, render, formItemRender, fieldProps } = props; const intl = useIntl(); if (mode === 'read') { @@ -34,8 +34,8 @@ const FieldTextArea: ProFieldFC<{ {...fieldProps} /> ); - 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/TimePicker/index.tsx b/packages/field/src/components/TimePicker/index.tsx index 00030f93b952..760abb19ba40 100644 --- a/packages/field/src/components/TimePicker/index.tsx +++ b/packages/field/src/components/TimePicker/index.tsx @@ -27,7 +27,7 @@ const FieldTimePicker: ProFieldFC< label, format = 'HH:mm:ss', render, - renderFormItem, + formItemRender, plain, fieldProps, lightLabel, @@ -112,8 +112,8 @@ const FieldTimePicker: ProFieldFC< /> ); } - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } @@ -140,7 +140,7 @@ const FieldTimeRangePickerComponents: ProFieldFC< lightLabel, format = 'HH:mm:ss', render, - renderFormItem, + formItemRender, plain, fieldProps, }, @@ -242,8 +242,8 @@ const FieldTimeRangePickerComponents: 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/TreeSelect/index.tsx b/packages/field/src/components/TreeSelect/index.tsx index f1a457e17597..1bbd59b9037d 100644 --- a/packages/field/src/components/TreeSelect/index.tsx +++ b/packages/field/src/components/TreeSelect/index.tsx @@ -38,7 +38,7 @@ export type TreeSelectFieldProps = TreeSelectProps & { * @param ref */ const FieldTreeSelect: ProFieldFC = ( - { radioType, renderFormItem, mode, light, label, render, ...rest }, + { radioType, formItemRender, mode, light, label, render, ...rest }, ref, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); @@ -208,9 +208,9 @@ const FieldTreeSelect: ProFieldFC = ( ); - if (renderFormItem) { + if (formItemRender) { dom = - renderFormItem( + formItemRender( rest.text, { mode, ...(fieldProps as any), options, loading }, dom, diff --git a/packages/field/src/components/field.md b/packages/field/src/components/field.md index 2a33dcef96ea..a7dc4aac0515 100644 --- a/packages/field/src/components/field.md +++ b/packages/field/src/components/field.md @@ -38,5 +38,5 @@ return ; | valueType | 格式化的类型 | ValueType | - | | mode | 组件的模式 | - | - | | plain | 精简模式 | - | - | -| renderFormItem | 自定义 `mode=update \| edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | +| formItemRender | 自定义 `mode=update \| edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | | render | 自定义 `mode=read` 下的 dom 表现，只是单纯的表现形式 | - | - | diff --git a/packages/form/CHANGELOG.md b/packages/form/CHANGELOG.md index 6361572b000a..82775f1f4c3e 100644 --- a/packages/form/CHANGELOG.md +++ b/packages/form/CHANGELOG.md @@ -1033,8 +1033,8 @@ All notable changes to this project will be documented in this file. See [Conven ### Features -- **table:** renderFormItem support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) -- **table:** renderFormItem support ignoreFormItem ([#5296](https://github.com/ant-design/pro-components/issues/5296)) ([d6977b5](https://github.com/ant-design/pro-components/commit/d6977b5e2c75c100992b049f4bf1642fd22f351e)) +- **table:** formItemRender support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) +- **table:** formItemRender support ignoreFormItem ([#5296](https://github.com/ant-design/pro-components/issues/5296)) ([d6977b5](https://github.com/ant-design/pro-components/commit/d6977b5e2c75c100992b049f4bf1642fd22f351e)) ## [1.68.2](https://github.com/ant-design/pro-components/compare/@ant-design/pro-form@1.68.1...@ant-design/pro-form@1.68.2) (2022-05-20) @@ -1300,7 +1300,7 @@ All notable changes to this project will be documented in this file. See [Conven - **form:** fix ignoreRules no work error ([5586970](https://github.com/ant-design/pro-components/commit/558697094fc0aa39b5ac372064608cdefa239798)) - 🐛 make sure the formItemProps property is dosen't override ([#4662](https://github.com/ant-design/pro-components/issues/4662)) ([cd50ac4](https://github.com/ant-design/pro-components/commit/cd50ac44b319ce240f4435f10872733b4ba74690)) -- **table:** EditableProTable 支持在 renderFormItem 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) +- **table:** EditableProTable 支持在 formItemRender 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) ## [1.53.6](https://github.com/ant-design/pro-components/compare/@ant-design/pro-form@1.53.5...@ant-design/pro-form@1.53.6) (2022-02-15) @@ -1848,7 +1848,7 @@ All notable changes to this project will be documented in this file. See [Conven - **form:** fix reg inclubes “(” error ([#3103](https://github.com/ant-design/pro-components/issues/3103)) ([cc1f9d0](https://github.com/ant-design/pro-components/commit/cc1f9d06eb796df620f0f28f4764ff797a96692f)) - **form:** fix select optionGroup no filter error ([#3100](https://github.com/ant-design/pro-components/issues/3100)) ([5a9419c](https://github.com/ant-design/pro-components/commit/5a9419c89e40cf6de953258ef00a382887922519)) - **form:** ProFormPropsType error type ([#3089](https://github.com/ant-design/pro-components/issues/3089)) ([15e9ce5](https://github.com/ant-design/pro-components/commit/15e9ce566cc341fb5235d3a5656410831fd134fc)) -- **table:** remove onchange form renderFormItem ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) +- **table:** remove onchange form formItemRender ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) ### Features @@ -2484,7 +2484,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes -- **table:** renderFormItem should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) +- **table:** formItemRender should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) ## [1.1.5](https://github.com/ant-design/pro-components/compare/@ant-design/pro-form@1.1.4...@ant-design/pro-form@1.1.5) (2020-10-26) diff --git a/packages/form/src/BaseForm/createField.tsx b/packages/form/src/BaseForm/createField.tsx index dbcb3f2b44c1..354df5223d91 100644 --- a/packages/form/src/BaseForm/createField.tsx +++ b/packages/form/src/BaseForm/createField.tsx @@ -205,7 +205,7 @@ export function createField

( const onChange = useRefFunction((...restParams: any[]) => { if (getFormItemProps || getFieldProps) { forceUpdateByOnChange([]); - } else if (rest.renderFormItem) { + } else if (rest.formItemRender) { forceUpdate([]); } fieldProps?.onChange?.(...restParams); diff --git a/packages/form/src/components/Cascader/index.tsx b/packages/form/src/components/Cascader/index.tsx index a3be0fb1373b..3816240a1c68 100644 --- a/packages/form/src/components/Cascader/index.tsx +++ b/packages/form/src/components/Cascader/index.tsx @@ -29,7 +29,7 @@ const ProFormCascader: React.ForwardRefRenderFunction< placeholder={props.placeholder as string} /> ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( = React.forwardRef( valueTypeMap={{ checkbox: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/ColorPicker/index.tsx b/packages/form/src/components/ColorPicker/index.tsx index 2c0a4556454b..57a7a63ebd5b 100644 --- a/packages/form/src/components/ColorPicker/index.tsx +++ b/packages/form/src/components/ColorPicker/index.tsx @@ -29,7 +29,7 @@ const ProFormColorPicker: React.ForwardRefRenderFunction< valueTypeMap={{ color: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/DatePicker/BaseDatePicker.tsx b/packages/form/src/components/DatePicker/BaseDatePicker.tsx index 0cc470440765..d1c87928e819 100644 --- a/packages/form/src/components/DatePicker/BaseDatePicker.tsx +++ b/packages/form/src/components/DatePicker/BaseDatePicker.tsx @@ -32,7 +32,7 @@ export const BaseDatePicker: React.FC< valueTypeMap={{ [valueType]: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/DatePicker/TimePicker.tsx b/packages/form/src/components/DatePicker/TimePicker.tsx index 91ece4555e11..5db9820737f9 100644 --- a/packages/form/src/components/DatePicker/TimePicker.tsx +++ b/packages/form/src/components/DatePicker/TimePicker.tsx @@ -24,7 +24,7 @@ const ProFormTimePicker: React.FC> = ({ valueTypeMap={{ [valueType]: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/DateRangePicker/BaseDateRanger.tsx b/packages/form/src/components/DateRangePicker/BaseDateRanger.tsx index ddfad6139290..5b241fdd2fca 100644 --- a/packages/form/src/components/DateRangePicker/BaseDateRanger.tsx +++ b/packages/form/src/components/DateRangePicker/BaseDateRanger.tsx @@ -28,7 +28,7 @@ export const BaseDateRanger: React.FC< render: (text, props) => ( ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/DateRangePicker/TimeRangePicker.tsx b/packages/form/src/components/DateRangePicker/TimeRangePicker.tsx index d94908371851..7b3bd790bc3a 100644 --- a/packages/form/src/components/DateRangePicker/TimeRangePicker.tsx +++ b/packages/form/src/components/DateRangePicker/TimeRangePicker.tsx @@ -21,7 +21,7 @@ export const ProFormTimeRangePicker: React.FC< render: (text, props) => ( ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/Digit/DigitRange.tsx b/packages/form/src/components/Digit/DigitRange.tsx index 736a8aa402d8..8d3f1d78d1d3 100644 --- a/packages/form/src/components/Digit/DigitRange.tsx +++ b/packages/form/src/components/Digit/DigitRange.tsx @@ -43,7 +43,7 @@ const ProFormDigit: React.ForwardRefRenderFunction< placeholder={props.placeholder as string} /> ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( = ( placeholder={props.placeholder as string} /> ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( = ( text={text} /> ), - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( { valueTypeMap: { link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -142,7 +142,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/SchemaForm/demos/dependencies.tsx b/packages/form/src/components/SchemaForm/demos/dependencies.tsx index 6d2d9c70a3f8..4b9c5860cb18 100644 --- a/packages/form/src/components/SchemaForm/demos/dependencies.tsx +++ b/packages/form/src/components/SchemaForm/demos/dependencies.tsx @@ -90,7 +90,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx b/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx index dca351d6f9d3..2d3f66727d30 100644 --- a/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx +++ b/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx @@ -90,7 +90,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/form-list-required.tsx b/packages/form/src/components/SchemaForm/demos/form-list-required.tsx index 178d7cda454b..b23a03ea0a27 100644 --- a/packages/form/src/components/SchemaForm/demos/form-list-required.tsx +++ b/packages/form/src/components/SchemaForm/demos/form-list-required.tsx @@ -107,7 +107,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/schema.tsx b/packages/form/src/components/SchemaForm/demos/schema.tsx index f3252b57740f..848f317fc2f0 100644 --- a/packages/form/src/components/SchemaForm/demos/schema.tsx +++ b/packages/form/src/components/SchemaForm/demos/schema.tsx @@ -96,7 +96,7 @@ const columns: ProFormColumnsType[] = [ key: 'showTime', dataIndex: 'createName', initialValue: [dayjs().add(-1, 'm'), dayjs()], - renderFormItem: () => , + formItemRender: () => , width: 'md', colProps: { xs: 24, @@ -107,7 +107,7 @@ const columns: ProFormColumnsType[] = [ title: '更新时间', dataIndex: 'updateName', initialValue: [dayjs().add(-1, 'm'), dayjs()], - renderFormItem: () => , + formItemRender: () => , width: 'md', colProps: { xs: 24, diff --git a/packages/form/src/components/SchemaForm/index.en-US.md b/packages/form/src/components/SchemaForm/index.en-US.md index 9d845add188e..48b6ad4825a9 100644 --- a/packages/form/src/components/SchemaForm/index.en-US.md +++ b/packages/form/src/components/SchemaForm/index.en-US.md @@ -50,11 +50,11 @@ The most important thing about the SchemaForm form is the type definition of the | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | The props passed to the rendered component, and 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 will be consumed by the rendering component defined by valueType | -| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | custom read-only mode dom, read-only mode managed by `render` method only, edit mode needs to use `renderFormItem` | -| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom edit mode, return a ReactNode, will automatically wrap value and onChange. ~~If it returns false,null,undefined, the item will not be displayed~~ It is recommended to use dependent components to control whether to render or not | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | custom read-only mode dom, read-only mode managed by `render` method only, edit mode needs to use `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom edit mode, return a ReactNode, will automatically wrap value and onChange. ~~If it returns false,null,undefined, the item will not be displayed~~ It is recommended to use dependent components to control whether to render or not | | `request` | `(params,props) => Promise<{label,value}[]>` | Request network data remotely, generally used to select class components | | `params` | `Record` | The additional parameters passed to `request` will not be processed by the component, but changes will cause `request` to request data again | -| `dependencies` | `string \| number \| (string \| number)[]` | After the dependent values changes, trigger renderFormItem, fieldProps, formItemProps to re-execute, and inject values into params [example](#use-dependencies-to-trigger-fieldprops-formitemprops-renderformitem-updates) | +| `dependencies` | `string \| number \| (string \| number)[]` | After the dependent values changes, trigger formItemRender, fieldProps, formItemProps to re-execute, and inject values into params [example](#use-dependencies-to-trigger-fieldprops-formitemprops-formItemRender-updates) | | `hideInDescriptions` | `boolean` | Hide in descriptions | | `hideInForm` | `boolean` | Hide in Form | | `hideInTable` | `boolean` | Hide in Table | diff --git a/packages/form/src/components/SchemaForm/index.md b/packages/form/src/components/SchemaForm/index.md index e0b3dea450a7..71a6de78b01a 100644 --- a/packages/form/src/components/SchemaForm/index.md +++ b/packages/form/src/components/SchemaForm/index.md @@ -50,11 +50,11 @@ SchemaForm 表单最重要就是 Schema 的类型定义，我们使用了与 tab | `formItemProps.rules` | `Rule[]` | 表单项的校验规则。需要注意的是，如果当前表单项为`formList`时，此规则仅校验列表是否为空，且仅接受元组`[{required: boolean, message: string}]`，用于开启和关闭非空校验及指定空列表提示消息 | | `proFieldProps` | `proFieldProps` | 设置到 `ProField` 上面的 `props`，内部属性 | | `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。~~如返回 false,null,undefined 将不展示表单项~~ 请使用 dependency 组件控制是否渲染列 | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange。~~如返回 false,null,undefined 将不展示表单项~~ 请使用 dependency 组件控制是否渲染列 | | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 | | `params` | `Record` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 | -| `dependencies` | `string \| number \| (string \| number)[]` | 所依赖的 values 变化后，触发 renderFormItem，fieldProps，formItemProps 重新执行，并把 values 注入到 params 里 [示例](#使用-dependencies-触发-fieldpropsformitempropsrenderformitem-更新) | +| `dependencies` | `string \| number \| (string \| number)[]` | 所依赖的 values 变化后，触发 formItemRender，fieldProps，formItemProps 重新执行，并把 values 注入到 params 里 [示例](#使用-dependencies-触发-fieldpropsformitempropsformItemRender-更新) | | `hideInDescriptions` | `boolean` | 在 descriptions 中隐藏 | | `hideInForm` | `boolean` | 在 Form 中隐藏 | | `hideInTable` | `boolean` | 在 Table 中隐藏 | diff --git a/packages/form/src/components/SchemaForm/index.tsx b/packages/form/src/components/SchemaForm/index.tsx index 19d63958697e..0862c9e4cba6 100644 --- a/packages/form/src/components/SchemaForm/index.tsx +++ b/packages/form/src/components/SchemaForm/index.tsx @@ -148,7 +148,7 @@ function BetaSchemaForm( ) : undefined, render: originItem.render, - renderFormItem: originItem.renderFormItem, + formItemRender: originItem.formItemRender, renderText: originItem.renderText, request: originItem.request, params: originItem.params, diff --git a/packages/form/src/components/SchemaForm/valueType/field.tsx b/packages/form/src/components/SchemaForm/valueType/field.tsx index af96e489e8e5..ab3cf70877fc 100644 --- a/packages/form/src/components/SchemaForm/valueType/field.tsx +++ b/packages/form/src/components/SchemaForm/valueType/field.tsx @@ -16,7 +16,7 @@ export const field: ProSchemaRenderValueTypeFunction = ( 'dataIndex', 'width', 'render', - 'renderFormItem', + 'formItemRender', 'renderText', 'title', ]), @@ -38,10 +38,10 @@ export const field: ProSchemaRenderValueTypeFunction = ( return ; }; - const renderFormItem = item?.renderFormItem + const formItemRender = item?.formItemRender ? (_: any, config: any) => { const renderConfig = omitUndefined({ ...config, onChange: undefined }); - return item?.renderFormItem?.( + return item?.formItemRender?.( { type, ...item, @@ -61,8 +61,8 @@ export const field: ProSchemaRenderValueTypeFunction = ( : undefined; const getField = () => { - if (item?.renderFormItem) { - const dom = renderFormItem?.(null, {}); + if (item?.formItemRender) { + const dom = formItemRender?.(null, {}); if (!dom || item.ignoreFormItem) return dom; } @@ -71,7 +71,7 @@ export const field: ProSchemaRenderValueTypeFunction = ( ); }; diff --git a/packages/form/src/components/Segmented/index.tsx b/packages/form/src/components/Segmented/index.tsx index 726d1a55fbc7..571c3f8a84fd 100644 --- a/packages/form/src/components/Segmented/index.tsx +++ b/packages/form/src/components/Segmented/index.tsx @@ -22,7 +22,7 @@ const ProFormSegmented: React.ForwardRefRenderFunction< valueTypeMap={{ segmented: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/Select/index.tsx b/packages/form/src/components/Select/index.tsx index 716a88bf0084..efeaf1a38980 100644 --- a/packages/form/src/components/Select/index.tsx +++ b/packages/form/src/components/Select/index.tsx @@ -74,7 +74,7 @@ const ProFormSelectComponents = ( valueTypeMap={{ select: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -140,7 +140,7 @@ const SearchSelect = React.forwardRef>( render: (text, valueTypeProps) => ( ), - renderFormItem: (text, valueTypeProps) => ( + formItemRender: (text, valueTypeProps) => ( ), }, diff --git a/packages/form/src/components/Slider/index.tsx b/packages/form/src/components/Slider/index.tsx index 5f8aca64ff6c..23d8ee9699c3 100644 --- a/packages/form/src/components/Slider/index.tsx +++ b/packages/form/src/components/Slider/index.tsx @@ -42,7 +42,7 @@ const ProFormSlider = React.forwardRef( valueTypeMap={{ slider: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/Switch/index.tsx b/packages/form/src/components/Switch/index.tsx index f99846ad03b3..1b43924211d8 100644 --- a/packages/form/src/components/Switch/index.tsx +++ b/packages/form/src/components/Switch/index.tsx @@ -27,7 +27,7 @@ const ProFormSwitch: React.FC = React.forwardRef( valueTypeMap={{ segmented: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/Text/index.tsx b/packages/form/src/components/Text/index.tsx index 16f73b9bbf19..80df3b8c1ed4 100644 --- a/packages/form/src/components/Text/index.tsx +++ b/packages/form/src/components/Text/index.tsx @@ -115,7 +115,7 @@ const Password: React.FC< valueTypeMap={{ password: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -166,7 +166,7 @@ const Password: React.FC< valueTypeMap={{ password: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/TextArea/index.tsx b/packages/form/src/components/TextArea/index.tsx index 764cdd994b00..f693214d7df5 100644 --- a/packages/form/src/components/TextArea/index.tsx +++ b/packages/form/src/components/TextArea/index.tsx @@ -19,7 +19,7 @@ const ProFormTextArea: React.ForwardRefRenderFunction< valueTypeMap={{ textarea: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/TreeSelect/index.tsx b/packages/form/src/components/TreeSelect/index.tsx index 43bbbf89933d..8da1be3e23b5 100644 --- a/packages/form/src/components/TreeSelect/index.tsx +++ b/packages/form/src/components/TreeSelect/index.tsx @@ -36,7 +36,7 @@ const ProFormTreeSelect: React.ForwardRefRenderFunction< valueTypeMap={{ treeSelect: { render: (text, props) => , - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/demos/pro-form-editableTable.tsx b/packages/form/src/demos/pro-form-editableTable.tsx index 7d49250640cb..7244d6c54287 100644 --- a/packages/form/src/demos/pro-form-editableTable.tsx +++ b/packages/form/src/demos/pro-form-editableTable.tsx @@ -67,7 +67,7 @@ const columns: ProColumns[] = [ { title: '描述', dataIndex: 'decs', - renderFormItem: (_, { record }) => { + formItemRender: (_, { record }) => { console.log('----===>', record); return ; }, diff --git a/packages/list/CHANGELOG.md b/packages/list/CHANGELOG.md index f82a7a6a4655..4be95a073eeb 100644 --- a/packages/list/CHANGELOG.md +++ b/packages/list/CHANGELOG.md @@ -313,7 +313,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes -- **list:** Extend ProListMeta type with `renderFormItem` ([#7136](https://github.com/ant-design/pro-components/issues/7136)) ([39ab5ef](https://github.com/ant-design/pro-components/commit/39ab5efa787ebda9acc1b693fed7e73cdd1b8f78)) +- **list:** Extend ProListMeta type with `formItemRender` ([#7136](https://github.com/ant-design/pro-components/issues/7136)) ([39ab5ef](https://github.com/ant-design/pro-components/commit/39ab5efa787ebda9acc1b693fed7e73cdd1b8f78)) - fix test case ([ab24418](https://github.com/ant-design/pro-components/commit/ab24418993d468b63f2711f21aae9ff58f91f191)) ### Features diff --git a/packages/list/src/index.tsx b/packages/list/src/index.tsx index 9275eaecb5f4..b63ab28637b3 100644 --- a/packages/list/src/index.tsx +++ b/packages/list/src/index.tsx @@ -28,7 +28,7 @@ export type ProListMeta = Pick< | 'editable' | 'fieldProps' | 'formItemProps' - | 'renderFormItem' + | 'formItemRender' > & { key?: React.Key; }; diff --git a/packages/provider/src/index.tsx b/packages/provider/src/index.tsx index 767dd7d67aca..ef43b5c5ee6f 100644 --- a/packages/provider/src/index.tsx +++ b/packages/provider/src/index.tsx @@ -149,7 +149,7 @@ export type ProRenderFieldPropsType = { * @params dom 默认的 dom * @return 返回一个用于编辑的dom */ - renderFormItem?: + formItemRender?: | (( text: any, props: ProFieldFCRenderProps, diff --git a/packages/skeleton/src/components/skeleton.en-US.md b/packages/skeleton/src/components/skeleton.en-US.md index 399c62ad74e0..f6ba87fe40de 100644 --- a/packages/skeleton/src/components/skeleton.en-US.md +++ b/packages/skeleton/src/components/skeleton.en-US.md @@ -45,5 +45,5 @@ return ; | statistic | number of statistic skeleton screens | `number` \| `false` | - | | list | skeleton screen of the list, you can control the number | `number` \| `false` | - | | toolbar | Action bar skeleton screen of the list | boolean | - | -| renderFormItem | Customize the dom performance under `mode=update or edit`, generally used to render edit boxes | - | - | +| formItemRender | Customize the dom performance under `mode=update or edit`, generally used to render edit boxes | - | - | | render | Customize the dom performance under `mode=read`, which is just a simple form of expression | - | - | diff --git a/packages/skeleton/src/components/skeleton.md b/packages/skeleton/src/components/skeleton.md index 1f408ec3ee87..3730a00714c7 100644 --- a/packages/skeleton/src/components/skeleton.md +++ b/packages/skeleton/src/components/skeleton.md @@ -37,5 +37,5 @@ return ; | statistic | 统计信息骨架屏的数量 | `number` \| `false` | - | | list | 列表的骨架屏，可以控制数量 | `number` \| `false` | - | | toolbar | 列表的操作栏骨架屏 | boolean | - | -| renderFormItem | 自定义 `mode=update 或 edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | +| formItemRender | 自定义 `mode=update 或 edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | | render | 自定义 `mode=read` 下的 dom 表现，只是单纯的表现形式 | - | - | diff --git a/packages/table/CHANGELOG.md b/packages/table/CHANGELOG.md index 74e1d62be33c..714e00525c39 100644 --- a/packages/table/CHANGELOG.md +++ b/packages/table/CHANGELOG.md @@ -291,7 +291,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **table:** dataSource support string list ([7b81b4c](https://github.com/ant-design/pro-components/commit/7b81b4c8ae247ccc4198ef597a9ae58d83ab697a)) -- **table:** fix renderFormItem render twice render time ([c3b8ffd](https://github.com/ant-design/pro-components/commit/c3b8ffd62f2100789e749907b5aef84c6966c528)) +- **table:** fix formItemRender render twice render time ([c3b8ffd](https://github.com/ant-design/pro-components/commit/c3b8ffd62f2100789e749907b5aef84c6966c528)) - **table:** Fix the columnsSetting styling issue in controlling column state when the table header is too long ([5b746b3](https://github.com/ant-design/pro-components/commit/5b746b3cfef9a2da021d963d8c723e5a9b9b829a)) - **table:** Fix the issue of actionref not being synchronized ([2160fb8](https://github.com/ant-design/pro-components/commit/2160fb846bcfe41809a37dfe6e1cc3fce1d211e7)) - **table:** Fix the issue where align="center" is not working ([db6fc65](https://github.com/ant-design/pro-components/commit/db6fc655b9994826238bb6b63588467ff8c6a6f8)) @@ -973,7 +973,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Features -- **table:** renderFormItem support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) +- **table:** formItemRender support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) ## [2.75.1](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.75.0...@ant-design/pro-table@2.75.1) (2022-05-20) @@ -1227,7 +1227,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **form:** fix ignoreRules no work error ([5586970](https://github.com/ant-design/pro-components/commit/558697094fc0aa39b5ac372064608cdefa239798)) -- **table:** EditableProTable 支持在 renderFormItem 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) +- **table:** EditableProTable 支持在 formItemRender 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) ## [2.63.6](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.63.5...@ant-design/pro-table@2.63.6) (2022-02-15) @@ -1713,7 +1713,7 @@ All notable changes to this project will be documented in this file. See [Conven - **form:** fix reg inclubes “(” error ([#3103](https://github.com/ant-design/pro-components/issues/3103)) ([cc1f9d0](https://github.com/ant-design/pro-components/commit/cc1f9d06eb796df620f0f28f4764ff797a96692f)) - **table:** fix onSearch no work error ([#3097](https://github.com/ant-design/pro-components/issues/3097)) ([8c99641](https://github.com/ant-design/pro-components/commit/8c99641a547b6a7f34cb8842e69aaa9c6f047621)) -- **table:** remove onchange form renderFormItem ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) +- **table:** remove onchange form formItemRender ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) ### Reverts @@ -1976,7 +1976,7 @@ All notable changes to this project will be documented in this file. See [Conven - **field:** omit fieldProps and support onChange ([#1886](https://github.com/ant-design/pro-components/issues/1886)) ([8d7c963](https://github.com/ant-design/pro-components/commit/8d7c9639073822daa554db07a5f0c8c0ea334a65)) - **form:** fix error message no work error ([#1875](https://github.com/ant-design/pro-components/issues/1875)) ([584a73a](https://github.com/ant-design/pro-components/commit/584a73a18aadc339202f34306edaa20d849e6c23)) - **layout:** use @umijs/use-params ([#1895](https://github.com/ant-design/pro-components/issues/1895)) ([80aac76](https://github.com/ant-design/pro-components/commit/80aac7665115c8f884c473d78c2fcc12ac042bb3)) -- **table:** no has colSize on renderFormItem ([#1876](https://github.com/ant-design/pro-components/issues/1876)) ([98b6afd](https://github.com/ant-design/pro-components/commit/98b6afd93248a33e457c71234d7f4dbc9ce77bf0)) +- **table:** no has colSize on formItemRender ([#1876](https://github.com/ant-design/pro-components/issues/1876)) ([98b6afd](https://github.com/ant-design/pro-components/commit/98b6afd93248a33e457c71234d7f4dbc9ce77bf0)) - **table:** set function to aysnc ([8751290](https://github.com/ant-design/pro-components/commit/8751290d02b706db1d9f435c97af2a9e71b1d59d)) ### Features @@ -2351,7 +2351,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **table:** options or fullScreen is null, not render ConfigProvider ([#854](https://github.com/ant-design/pro-components/issues/854)) ([004abb9](https://github.com/ant-design/pro-components/commit/004abb90a9d002de0c13223ac27ac98b34b3341b)) -- **table:** renderFormItem should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) +- **table:** formItemRender should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) ## [2.9.12](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.9.11...@ant-design/pro-table@2.9.12) (2020-10-26) diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index f0975fba12b7..a88bb412f48e 100644 --- a/packages/table/src/Table.tsx +++ b/packages/table/src/Table.tsx @@ -781,7 +781,7 @@ const ProTable = < } }, [tableColumn], - ['render', 'renderFormItem'], + ['render', 'formItemRender'], 100, ); diff --git a/packages/table/src/components/EditableTable/demos/custom.tsx b/packages/table/src/components/EditableTable/demos/custom.tsx index 1552aa4fd94d..d2e2d70d1266 100644 --- a/packages/table/src/components/EditableTable/demos/custom.tsx +++ b/packages/table/src/components/EditableTable/demos/custom.tsx @@ -149,7 +149,7 @@ const columns: ProColumns[] = [ }, ], }, - renderFormItem: (_, { isEditable }) => { + formItemRender: (_, { isEditable }) => { return isEditable ? : ; }, render: (_, row) => diff --git a/packages/table/src/components/EditableTable/index.en-US.md b/packages/table/src/components/EditableTable/index.en-US.md index 6bda3b45288b..7914a507e8c6 100644 --- a/packages/table/src/components/EditableTable/index.en-US.md +++ b/packages/table/src/components/EditableTable/index.en-US.md @@ -164,19 +164,19 @@ recordCreatorProps = { }; ``` -### renderFormItem Custom Edit Component +### formItemRender Custom Edit Component -As much as we would like the default valueType to meet all our needs, the reality is often not as good as it could be. So we also provide `renderFormItem` to customize the edit input component. +As much as we would like the default valueType to meet all our needs, the reality is often not as good as it could be. So we also provide `formItemRender` to customize the edit input component. -`renderFormItem` can be understood as adding an element below Form. +`formItemRender` can be understood as adding an element below Form. ```typescript -const dom = renderFormItem(); +const dom = formItemRender(); {dom}; ``` -So as with Form.Item, we assume that the components returned by `renderFormItem` have `value` and `onChange`, and we'll see next that putting a simple TagList component into an editable form with `renderFormItem`. +So as with Form.Item, we assume that the components returned by `formItemRender` have `value` and `onChange`, and we'll see next that putting a simple TagList component into an editable form with `formItemRender`. > Without `value` you won't be able to inject values and without `onChange` you won't be able to modify the row data! @@ -251,7 +251,7 @@ In the column we can configure it like this. title: 'labels', dataIndex: 'labels', width: '40%', - renderFormItem: () => , + formItemRender: () => , render: (_, row) => row?.labels?.map((item) => {item.label}), }, ``` @@ -262,7 +262,7 @@ The effect of the transformed edit form is as follows. value and onChange are injected automatically, we don't need to inject them explicitly. Data binding is also injected by the edit form itself, and we can get the finished data in `onSave`. Although we can write complex logic and even web requests inline, we recommend using the split component, which not only provides better performance, but also allows the logic to be split very simply. -> `renderFormItem` is also used to generate query forms, if we need to distinguish between the two cases, we can use `renderFormItem: (_, { isEditable }) => (isEditable ? : )` to render them separately. +> `formItemRender` is also used to generate query forms, if we need to distinguish between the two cases, we can use `formItemRender: (_, { isEditable }) => (isEditable ? : )` to render them separately. ### actionRender Custom Action Bar diff --git a/packages/table/src/components/EditableTable/index.md b/packages/table/src/components/EditableTable/index.md index 13da4253ba30..a129371833da 100644 --- a/packages/table/src/components/EditableTable/index.md +++ b/packages/table/src/components/EditableTable/index.md @@ -163,19 +163,19 @@ recordCreatorProps = { }; ``` -### renderFormItem 自定义编辑组件 +### formItemRender 自定义编辑组件 -虽然我们很希望默认的 valueType 可以满足所有的需求，但是现实往往不尽如人意。所以我们也提供了 `renderFormItem` 来自定义编辑输入组件。 +虽然我们很希望默认的 valueType 可以满足所有的需求，但是现实往往不尽如人意。所以我们也提供了 `formItemRender` 来自定义编辑输入组件。 -`renderFormItem` 可以理解为在 Form.Item 下面加入一个元素， 伪代码实现是下面这样的： +`formItemRender` 可以理解为在 Form.Item 下面加入一个元素， 伪代码实现是下面这样的： ```typescript -const dom = renderFormItem(); +const dom = formItemRender(); {dom}; ``` -所以与 Form.Item 相同，我们认为 `renderFormItem` 返回的组件都是拥有的 `value` 和 `onChange` 的，我们接下来将看到用 `renderFormItem` 将一个简单的 TagList 组件放入可编辑表格中。 +所以与 Form.Item 相同，我们认为 `formItemRender` 返回的组件都是拥有的 `value` 和 `onChange` 的，我们接下来将看到用 `formItemRender` 将一个简单的 TagList 组件放入可编辑表格中。 > 没有 `value` 将会无法注入值，没有 `onChange` 会无法修改行数据 @@ -250,7 +250,7 @@ const TagList: React.FC<{ title: '标签', dataIndex: 'labels', width: '40%', - renderFormItem: () => , + formItemRender: () => , render: (_, row) => row?.labels?.map((item) => {item.label}), }, ``` @@ -261,7 +261,7 @@ const TagList: React.FC<{ value 和 onChange 会自动注入，我们不需要显式的注入。数据绑定也是由编辑表格自己注入的，我们在 `onSave` 中可以拿到处理完成的数据。虽然我们可以行内的写很复杂的逻辑甚至网路请求，但是我们推荐使用拆分组件，这样不仅性能更好，逻辑也可以拆分的很简单。 -> `renderFormItem` 同时也用来生成查询表单，如果我们需要区分这两种情况，可以使用 `renderFormItem: (_, { isEditable }) => (isEditable ? : )` 这样的方式来进行分别渲染。 +> `formItemRender` 同时也用来生成查询表单，如果我们需要区分这两种情况，可以使用 `formItemRender: (_, { isEditable }) => (isEditable ? : )` 这样的方式来进行分别渲染。 ### actionRender 自定义操作栏 diff --git a/packages/table/src/components/ToolBar/index.tsx b/packages/table/src/components/ToolBar/index.tsx index 783a4757ff02..ac186ea09c8e 100644 --- a/packages/table/src/components/ToolBar/index.tsx +++ b/packages/table/src/components/ToolBar/index.tsx @@ -365,7 +365,7 @@ class ToolbarRender extends React.Component> { actionRef: next.actionRef, toolBarRender: next.toolBarRender, }, - ['render', 'renderFormItem'], + ['render', 'formItemRender'], ); }; shouldComponentUpdate = (next: ToolbarRenderProps) => { diff --git a/packages/table/src/components/table.$tab-api.md b/packages/table/src/components/table.$tab-api.md index 98893bbaceb8..9b1a4f9187af 100644 --- a/packages/table/src/components/table.$tab-api.md +++ b/packages/table/src/components/table.$tab-api.md @@ -56,14 +56,14 @@ RTL means right-to-left. ## 搜索表单自定义 -当内置的表单项无法满足我们的基本需求，这时候我们就需要来自定义一下默认的组件，我们可以通过 `fieldProps` 和 `renderFormItem` 配合来使用。 +当内置的表单项无法满足我们的基本需求，这时候我们就需要来自定义一下默认的组件，我们可以通过 `fieldProps` 和 `formItemRender` 配合来使用。 `fieldProps` 可以把 props 透传，可以设置 select 的样式和多选等问题。 -`renderFormItem` 可以完成重写渲染逻辑，传入 item 和 props 来进行渲染，需要注意的是我们必须要将 props 中的 `value` 和 `onChange` 必须要被赋值，否则 form 无法拿到参数。如果你需要自定义需要先了解 antd 表单的[工作原理](https://ant.design/components/form-cn/#Form.Item)。 +`formItemRender` 可以完成重写渲染逻辑，传入 item 和 props 来进行渲染，需要注意的是我们必须要将 props 中的 `value` 和 `onChange` 必须要被赋值，否则 form 无法拿到参数。如果你需要自定义需要先了解 antd 表单的[工作原理](https://ant.design/components/form-cn/#Form.Item)。 ```tsx | pure -renderFormItem: ( +formItemRender: ( _, { type, defaultRender, formItemProps, fieldProps, ...rest }, form, @@ -87,10 +87,10 @@ renderFormItem: ( }; ``` -`renderFormItem` 的定义，具体的值可以打开控制台查看。 +`formItemRender` 的定义，具体的值可以打开控制台查看。 ```tsx | pure - renderFormItem?: ( + formItemRender?: ( item: ProColumns, config: { value?: any; diff --git a/packages/table/src/components/table.en-US.$tab-api.md b/packages/table/src/components/table.en-US.$tab-api.md index 75add0e63cd4..98e945b1124c 100644 --- a/packages/table/src/components/table.en-US.$tab-api.md +++ b/packages/table/src/components/table.en-US.$tab-api.md @@ -58,14 +58,14 @@ You can hide some columns by default, but in the action column you can select ### Search form customization -When the built-in form items don't meet our basic needs, we need to customize the default components, which we can use with `fieldProps` and `renderFormItem`. +When the built-in form items don't meet our basic needs, we need to customize the default components, which we can use with `fieldProps` and `formItemRender`. `fieldProps` can pass the props through and set the select style and multi-select issues. -`renderFormItem` does the rewriting logic, passing in item and props for rendering, but note that we have to assign `value` and `onChange` to the props, otherwise the form won't get the parameters. +`formItemRender` does the rewriting logic, passing in item and props for rendering, but note that we have to assign `value` and `onChange` to the props, otherwise the form won't get the parameters. ```tsx | pure -renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, . .rest }, form) => { +formItemRender: (_, { type, defaultRender, formItemProps, fieldProps, . .rest }, form) => { if (type === 'form') { return null; } @@ -77,10 +77,10 @@ renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, . .rest }, }; ``` -The definition of `renderFormItem`, the exact value of which can be seen by opening the console. +The definition of `formItemRender`, the exact value of which can be seen by opening the console. ```tsx | pure - renderFormItem?: ( + formItemRender?: ( item: ProColumns, config: { value?: any; diff --git a/packages/table/src/components/table.en-US.md b/packages/table/src/components/table.en-US.md index 9b804bf7346c..4222ed9a9611 100644 --- a/packages/table/src/components/table.en-US.md +++ b/packages/table/src/components/table.en-US.md @@ -233,7 +233,7 @@ ref.current.cancelEditable(rowKey); | `formItemProps` | The configuration passed to Form.Item can be configured with rules, but the default query form rules does not take effect. Need to configure `ignoreRules` | `(form,config)=>formItemProps` \| `formItemProps` | - | | renderText | Render like table, but must return string. If you just want to convert enumeration, you can use [valueEnum](/components/schema#valueenum) | `(text: any,record: T,index: number,action: UseFetchDataAction ) => string` | - | | render | Render similar to table, the first parameter becomes dom, and the fourth parameter action is added | `(text: ReactNode,record: T,index: number,action: UseFetchDataAction) => ReactNode \| ReactNode[]` | - | -| renderFormItem | Render the input components of the query form | `(item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode` | - | +| formItemRender | Render the input components of the query form | `(item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode` | - | | search | Configuration column search related, false is hidden | `false` \| `{ transform: (value: any) => any }` | true | | search.transform | The key of the conversion value, generally used for the conversion of the event interval | `(value: any) => any` | - | | [editable](/components/editable-table) | Whether it is editable in the edit table, the parameters of the function are the same as the render of the table | `false` \| `(text: any, record: T,index: number) => boolean` | true | diff --git a/packages/table/src/components/table.md b/packages/table/src/components/table.md index 40e178df0a06..681edfb856c0 100644 --- a/packages/table/src/components/table.md +++ b/packages/table/src/components/table.md @@ -236,7 +236,7 @@ ref.current.cancelEditable(rowKey); | `formItemProps` | 传递给 Form.Item 的配置，可以配置 rules，但是默认的查询表单 rules 是不生效的。需要配置 `ignoreRules` | `(form,config)=>formItemProps` \| `formItemProps` | - | | renderText | 类似 table 的 render，但是必须返回 string，如果只是希望转化枚举，可以使用 [valueEnum](/components/schema#valueenum) | `(text: any,record: T,index: number,action: UseFetchDataAction) => string` | - | | render | 类似 table 的 render，第一个参数变成了 dom，增加了第四个参数 action | `(text: ReactNode,record: T,index: number,action: UseFetchDataAction) => ReactNode \| ReactNode[]` | - | -| renderFormItem | 渲染查询表单的输入组件 | `(item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode` | - | +| formItemRender | 渲染查询表单的输入组件 | `(item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode` | - | | search | 配置列的搜索相关，false 为隐藏 | `false` \| `{ transform: (value: any) => any }` | true | | search.transform | 转化值的 key, 一般用于时间区间的转化 | `(value: any) => any` | - | | [editable](/components/editable-table) | 在编辑表格中是否可编辑的，函数的参数和 table 的 render 一样 | `false` \| `(text: any, record: T,index: number) => boolean` | true | diff --git a/packages/table/src/demos/batchOption.tsx b/packages/table/src/demos/batchOption.tsx index ace937409f35..24c983aeba00 100644 --- a/packages/table/src/demos/batchOption.tsx +++ b/packages/table/src/demos/batchOption.tsx @@ -101,7 +101,7 @@ const columns: ProColumns[] = [ dataIndex: 'createdAt', valueType: 'date', sorter: (a, b) => a.createdAt - b.createdAt, - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/table/src/demos/customization-value-type.tsx b/packages/table/src/demos/customization-value-type.tsx index 57cc0d7d9a84..3cce89435dfd 100644 --- a/packages/table/src/demos/customization-value-type.tsx +++ b/packages/table/src/demos/customization-value-type.tsx @@ -136,7 +136,7 @@ export default () => { valueTypeMap: { link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -150,7 +150,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/table/src/demos/linkage_form.tsx b/packages/table/src/demos/linkage_form.tsx index b6e1b61b002c..a7513d0ffa6f 100644 --- a/packages/table/src/demos/linkage_form.tsx +++ b/packages/table/src/demos/linkage_form.tsx @@ -81,7 +81,7 @@ export default () => { key: 'direction', hideInTable: true, dataIndex: 'direction', - renderFormItem: (item, { type, defaultRender, ...rest }, form) => { + formItemRender: (item, { type, defaultRender, ...rest }, form) => { if (type === 'form') { return null; } diff --git a/packages/table/src/demos/open-rules.tsx b/packages/table/src/demos/open-rules.tsx index 158cd392dc6d..748f7dc9d61a 100644 --- a/packages/table/src/demos/open-rules.tsx +++ b/packages/table/src/demos/open-rules.tsx @@ -76,7 +76,7 @@ const columns: ProColumns[] = [ }, ], }, - renderFormItem: (_, { defaultRender }) => { + formItemRender: (_, { defaultRender }) => { return defaultRender(_); }, render: (_, record) => ( diff --git a/packages/table/src/demos/single-test.tsx b/packages/table/src/demos/single-test.tsx index 4c479475560b..5d6b4cd1cd85 100644 --- a/packages/table/src/demos/single-test.tsx +++ b/packages/table/src/demos/single-test.tsx @@ -105,7 +105,7 @@ const columns: ProColumns[] = [ noStyle: true, }, ignoreFormItem: true, - renderFormItem: () => { + formItemRender: () => { return ; }, }, @@ -118,7 +118,7 @@ const columns: ProColumns[] = [ formItemProps: { noStyle: true, }, - renderFormItem: (_, { defaultRender }) => defaultRender(_), + formItemRender: (_, { defaultRender }) => defaultRender(_), render: (_, record) => ( {record.labels.map(({ name, color }) => ( diff --git a/packages/table/src/demos/single.tsx b/packages/table/src/demos/single.tsx index 3b3d56293560..48ef18d69a63 100644 --- a/packages/table/src/demos/single.tsx +++ b/packages/table/src/demos/single.tsx @@ -83,7 +83,7 @@ const columns: ProColumns[] = [ title: '标签', dataIndex: 'labels', search: false, - renderFormItem: (_, { defaultRender }) => { + formItemRender: (_, { defaultRender }) => { return defaultRender(_); }, render: (_, record) => ( diff --git a/packages/table/src/demos/theme.tsx b/packages/table/src/demos/theme.tsx index efa76ffdedeb..ca5071a0d4f8 100644 --- a/packages/table/src/demos/theme.tsx +++ b/packages/table/src/demos/theme.tsx @@ -72,7 +72,7 @@ const columns: ProColumns[] = [ title: '标签', dataIndex: 'labels', search: false, - renderFormItem: (_, { defaultRender }) => { + formItemRender: (_, { defaultRender }) => { return defaultRender(_); }, render: (_, record) => ( diff --git a/packages/table/src/demos/valueTypeDate.tsx b/packages/table/src/demos/valueTypeDate.tsx index 8828c6965d2e..feb49a20685f 100644 --- a/packages/table/src/demos/valueTypeDate.tsx +++ b/packages/table/src/demos/valueTypeDate.tsx @@ -70,7 +70,7 @@ export default () => ( fieldProps: { // placeholder: ['1', '2'] }, - renderFormItem: (_, { type, defaultRender }) => { + formItemRender: (_, { type, defaultRender }) => { if (type === 'form') { return null; } diff --git a/packages/table/src/demos/valueType_select.tsx b/packages/table/src/demos/valueType_select.tsx index fad4528728bc..b8e8bab3c317 100644 --- a/packages/table/src/demos/valueType_select.tsx +++ b/packages/table/src/demos/valueType_select.tsx @@ -137,7 +137,7 @@ const columns: ProColumns[] = [ fieldProps: { // placeholder: [] }, - renderFormItem: (_, { type, defaultRender }) => { + formItemRender: (_, { type, defaultRender }) => { if (type === 'form') { return null; } diff --git a/packages/table/src/utils/cellRenderToFromItem.tsx b/packages/table/src/utils/cellRenderToFromItem.tsx index d68c87b2309b..d1f986bea8b5 100644 --- a/packages/table/src/utils/cellRenderToFromItem.tsx +++ b/packages/table/src/utils/cellRenderToFromItem.tsx @@ -184,8 +184,8 @@ const CellRenderFromItem = (props: CellRenderFromItemProps) => { /** * 如果没有自定义直接返回 */ - if (columnProps?.renderFormItem) { - fieldDom = columnProps.renderFormItem( + if (columnProps?.formItemRender) { + fieldDom = columnProps.formItemRender( { ...columnProps, index, @@ -233,7 +233,7 @@ const CellRenderFromItem = (props: CellRenderFromItemProps) => { if (formItemName.length === 0) return null; if ( - typeof columnProps?.renderFormItem === 'function' || + typeof columnProps?.formItemRender === 'function' || typeof columnProps?.fieldProps === 'function' || typeof columnProps?.formItemProps === 'function' ) { @@ -320,7 +320,7 @@ function cellRenderToFromItem( ? config.index : text, mode: config.mode, - renderFormItem: undefined, + formItemRender: undefined, valueType: valueType as ProFieldValueType, // @ts-ignore record: rowData, diff --git a/packages/table/src/utils/columnRender.tsx b/packages/table/src/utils/columnRender.tsx index 1df961784c61..3d137844fc69 100644 --- a/packages/table/src/utils/columnRender.tsx +++ b/packages/table/src/utils/columnRender.tsx @@ -148,7 +148,7 @@ export function columnRender({ ? textDom : genCopyable(textDom, columnProps, renderTextStr); - /** 如果是编辑模式，并且 renderFormItem 存在直接走 renderFormItem */ + /** 如果是编辑模式，并且 formItemRender 存在直接走 formItemRender */ if (mode === 'edit') { if (columnProps.valueType === 'option') { return ( diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 2381f6ed7f86..b753aeae3746 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -742,7 +742,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Features -- **table:** renderFormItem support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) +- **table:** formItemRender support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) ## [1.41.4](https://github.com/ant-design/pro-components/compare/@ant-design/pro-utils@1.41.3...@ant-design/pro-utils@1.41.4) (2022-05-20) @@ -1257,7 +1257,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **form:** fix select optionGroup no filter error ([#3100](https://github.com/ant-design/pro-components/issues/3100)) ([5a9419c](https://github.com/ant-design/pro-components/commit/5a9419c89e40cf6de953258ef00a382887922519)) -- **table:** remove onchange form renderFormItem ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) +- **table:** remove onchange form formItemRender ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) ## [1.19.2](https://github.com/ant-design/pro-components/compare/@ant-design/pro-utils@1.19.1...@ant-design/pro-utils@1.19.2) (2021-06-17) diff --git a/packages/utils/src/pickProProps/index.tsx b/packages/utils/src/pickProProps/index.tsx index 2b843dc4a877..bbe6dcd19de6 100644 --- a/packages/utils/src/pickProProps/index.tsx +++ b/packages/utils/src/pickProProps/index.tsx @@ -1,4 +1,4 @@ -const proFieldProps = `valueType request plain renderFormItem render text formItemProps valueEnum`; +const proFieldProps = `valueType request plain formItemRender render text formItemProps valueEnum`; const proFormProps = `fieldProps isDefaultDom groupProps contentRender submitterProps submitter`; diff --git a/packages/utils/src/typing.ts b/packages/utils/src/typing.ts index 1a216aaf1463..34680ec6be33 100644 --- a/packages/utils/src/typing.ts +++ b/packages/utils/src/typing.ts @@ -630,7 +630,7 @@ export type ProSchema< action: ProCoreActionType, ) => any; /** - * Render 方法只管理的只读模式，编辑模式需要使用 renderFormItem + * Render 方法只管理的只读模式，编辑模式需要使用 formItemRender * * @name 自定义只读模式的dom */ @@ -661,7 +661,7 @@ export type ProSchema< * * @name 自定义编辑模式 */ - renderFormItem?: ( + formItemRender?: ( schema: ProSchema< Entity, ExtraProps, @@ -719,7 +719,7 @@ export type ProSchema< dependencies?: NamePath[]; /** - * @name 忽略 FormItem，必须要和 renderFormItem 组件一起使用 + * @name 忽略 FormItem，必须要和 formItemRender 组件一起使用 */ ignoreFormItem?: boolean; diff --git a/tests/descriptions/__snapshots__/editor.test.tsx.snap b/tests/descriptions/__snapshots__/editor.test.tsx.snap index 0919ec1cb309..8f9d65ee5aed 100644 --- a/tests/descriptions/__snapshots__/editor.test.tsx.snap +++ b/tests/descriptions/__snapshots__/editor.test.tsx.snap @@ -166,7 +166,7 @@ exports[`Descriptions > 📝 columns support editable test 1`] = ` `; -exports[`Descriptions > 📝 renderFormItem run defaultRender 1`] = ` +exports[`Descriptions > 📝 formItemRender run defaultRender 1`] = `

[] = [ { dataIndex: 'index', valueType: 'indexBorder', - renderFormItem: () => , + formItemRender: () => , }, { title: '标题', @@ -231,7 +231,7 @@ describe('Descriptions', () => { }); }); - it('📝 renderFormItem run defaultRender', async () => { + it('📝 formItemRender run defaultRender', async () => { const wrapper = render( editable={{ @@ -240,7 +240,7 @@ describe('Descriptions', () => { columns={[ { dataIndex: 'title', - renderFormItem: (item, config) => { + formItemRender: (item, config) => { return config.defaultRender(item); }, }, diff --git a/tests/descriptions/index.test.tsx b/tests/descriptions/index.test.tsx index 153bf26fde52..1f20a28f8a42 100644 --- a/tests/descriptions/index.test.tsx +++ b/tests/descriptions/index.test.tsx @@ -177,7 +177,7 @@ describe('descriptions', () => { label="money" dataIndex="money" valueType="money" - renderFormItem={() => } + formItemRender={() => } /> ); diff --git a/tests/field/field.test.tsx b/tests/field/field.test.tsx index d91f196a9824..5123850c48bd 100644 --- a/tests/field/field.test.tsx +++ b/tests/field/field.test.tsx @@ -371,13 +371,13 @@ describe('Field', () => { vi.useRealTimers(); }); - it(`🐴 ${valueType} edit model support renderFormItem function`, async () => { + it(`🐴 ${valueType} edit model support formItemRender function`, async () => { const html = render( ( + formItemRender={() => ( <> default @@ -398,14 +398,14 @@ describe('Field', () => { html.unmount(); }); - it(`🐴 ${valueType} edit model support renderFormItem return null`, async () => { + it(`🐴 ${valueType} edit model support formItemRender return null`, async () => { const html = render( undefined} + formItemRender={() => undefined} valueEnum={{ 0: { text: '关闭', status: 'Default' }, 1: { text: '运行中', status: 'Processing' }, @@ -418,14 +418,14 @@ describe('Field', () => { html.unmount(); }); - it(`🐴 ${valueType} edit model support renderFormItem return 0`, async () => { + it(`🐴 ${valueType} edit model support formItemRender return 0`, async () => { const html = render( 0} + formItemRender={() => 0} valueEnum={{ 0: { text: '关闭', status: 'Default' }, 1: { text: '运行中', status: 'Processing' }, @@ -1097,14 +1097,14 @@ describe('Field', () => { expect(html.baseElement.textContent).toBe('qixian'); }); - it(`🐴 valueType renderFormItem ${valueType}`, async () => { + it(`🐴 valueType formItemRender ${valueType}`, async () => { if (valueType === 'option') return; const html = render( qixian} + formItemRender={() => qixian} />, ); await html.findAllByText('qixian'); @@ -1650,13 +1650,13 @@ describe('Field', () => { html.unmount(); }); - it(`🐴 valueType renderFormItem return number`, async () => { + it(`🐴 valueType formItemRender return number`, async () => { const html = render( 2} + formItemRender={() => 2} />, ); expect(html.baseElement.textContent).toBe('2'); diff --git a/tests/form/schemaForm.test.tsx b/tests/form/schemaForm.test.tsx index 1c73f07ea313..0972f31084aa 100644 --- a/tests/form/schemaForm.test.tsx +++ b/tests/form/schemaForm.test.tsx @@ -135,7 +135,7 @@ describe('SchemaForm', () => { it('😊 SchemaForm support shouldUpdate as true', async () => { const fieldPropsFn = vi.fn(); const formItemPropsFn = vi.fn(); - const renderFormItemFn = vi.fn(); + const formItemRenderFn = vi.fn(); const onValuesChangeFn = vi.fn(); const { container } = render( { fieldProps: { id: 'title', }, - renderFormItem: (schema, { defaultRender }) => { - renderFormItemFn(); + formItemRender: (schema, { defaultRender }) => { + formItemRenderFn(); return defaultRender(schema); }, }, @@ -169,7 +169,7 @@ describe('SchemaForm', () => { await waitFor(() => { expect(fieldPropsFn).toHaveBeenCalledTimes(1); expect(formItemPropsFn).toHaveBeenCalledTimes(1); - expect(renderFormItemFn).toHaveBeenCalledTimes(4); + expect(formItemRenderFn).toHaveBeenCalledTimes(4); }); fireEvent.change(container.querySelector('input#title')!, { @@ -179,7 +179,7 @@ describe('SchemaForm', () => { }); await waitFor(() => { - expect(renderFormItemFn).toHaveBeenCalledTimes(5); + expect(formItemRenderFn).toHaveBeenCalledTimes(5); expect(fieldPropsFn).toHaveBeenCalledTimes(1); expect(formItemPropsFn).toHaveBeenCalledTimes(1); expect(onValuesChangeFn).toHaveBeenCalled(); @@ -189,7 +189,7 @@ describe('SchemaForm', () => { it('😊 SchemaForm support shouldUpdate as function', async () => { const fieldPropsFn = vi.fn(); const formItemPropsFn = vi.fn(); - const renderFormItemFn = vi.fn(); + const formItemRenderFn = vi.fn(); const shouldUpdateFn = vi.fn(); const { container } = render( { fieldProps: { id: 'title', }, - renderFormItem: (schema, { defaultRender }) => { - renderFormItemFn(); + formItemRender: (schema, { defaultRender }) => { + formItemRenderFn(); return defaultRender(schema); }, }, @@ -241,7 +241,7 @@ describe('SchemaForm', () => { expect(shouldUpdateFn).not.toHaveBeenCalled(); expect(fieldPropsFn).toHaveBeenCalledTimes(1); expect(formItemPropsFn).toHaveBeenCalledTimes(1); - expect(renderFormItemFn).toHaveBeenCalledTimes(4); + expect(formItemRenderFn).toHaveBeenCalledTimes(4); }); fireEvent.change(container.querySelector('input#title')!, { @@ -251,7 +251,7 @@ describe('SchemaForm', () => { }); // Although shouldUpdate returns false, but using dependencies will still update await waitFor(() => { - expect(renderFormItemFn).toHaveBeenCalledTimes(5); + expect(formItemRenderFn).toHaveBeenCalledTimes(5); expect(formItemPropsFn).toHaveBeenCalledTimes(2); expect(fieldPropsFn).toHaveBeenCalledTimes(2); expect(shouldUpdateFn).toHaveBeenCalledTimes(1); @@ -264,7 +264,7 @@ describe('SchemaForm', () => { }); await waitFor(() => { - expect(renderFormItemFn).toHaveBeenCalledTimes(6); + expect(formItemRenderFn).toHaveBeenCalledTimes(6); expect(formItemPropsFn).toHaveBeenCalledTimes(3); expect(fieldPropsFn).toHaveBeenCalledTimes(3); expect(shouldUpdateFn).toHaveBeenCalledTimes(2); @@ -275,7 +275,7 @@ describe('SchemaForm', () => { it('😊 SchemaForm columns do not interfere with each other', async () => { const fieldPropsFn = vi.fn(); const formItemPropsFn = vi.fn(); - const renderFormItemFn = vi.fn(); + const formItemRenderFn = vi.fn(); const { container } = render( { fieldProps: { id: 'title', }, - renderFormItem: (schema, { defaultRender }) => { - renderFormItemFn(); + formItemRender: (schema, { defaultRender }) => { + formItemRenderFn(); return defaultRender(schema); }, }, @@ -308,7 +308,7 @@ describe('SchemaForm', () => { await waitFor(() => { expect(fieldPropsFn).toHaveBeenCalledTimes(1); expect(formItemPropsFn).toHaveBeenCalledTimes(1); - expect(renderFormItemFn).toHaveBeenCalledTimes(4); + expect(formItemRenderFn).toHaveBeenCalledTimes(4); }); fireEvent.change(container.querySelector('input#title')!, { @@ -318,7 +318,7 @@ describe('SchemaForm', () => { }); await waitFor(() => { - expect(renderFormItemFn).toHaveBeenCalledTimes(5); + expect(formItemRenderFn).toHaveBeenCalledTimes(5); expect(formItemPropsFn).toHaveBeenCalledTimes(1); expect(fieldPropsFn).toHaveBeenCalledTimes(1); }); @@ -408,7 +408,7 @@ describe('SchemaForm', () => { title: '标题', dataIndex: 'title', width: 200, - renderFormItem: () => { + formItemRender: () => { return ; }, }, @@ -418,7 +418,7 @@ describe('SchemaForm', () => { expect(screen.findByTestId('test')).toBeTruthy(); }); - it('😊 support SchemaForm renderFormItem return false', async () => { + it('😊 support SchemaForm formItemRender return false', async () => { const formRef = createRef(); const { container } = render( { dataIndex: 'title', width: 200, dependencies: ['title2'], - renderFormItem: (_, __, form) => { + formItemRender: (_, __, form) => { if (form.getFieldValue('title2') === 'show') { return ; } @@ -440,7 +440,7 @@ describe('SchemaForm', () => { title: '标题', dataIndex: 'title2', width: 200, - renderFormItem: () => { + formItemRender: () => { return ; }, }, @@ -467,7 +467,7 @@ describe('SchemaForm', () => { title: '标题', dataIndex: 'title', width: 200, - renderFormItem: (_, { defaultRender }) => { + formItemRender: (_, { defaultRender }) => { return defaultRender(_); }, }, @@ -486,7 +486,7 @@ describe('SchemaForm', () => { title: '标题', dataIndex: 'title', width: 200, - renderFormItem: () => { + formItemRender: () => { return ; }, }, @@ -495,7 +495,7 @@ describe('SchemaForm', () => { dataIndex: 'category', width: 200, hideInForm: true, - renderFormItem: () => { + formItemRender: () => { return ; }, }, @@ -859,7 +859,7 @@ describe('SchemaForm', () => { }, /** * 构造20个耗时组件测试一下 不要在`columns`中使用 - * 1、renderFormItem + * 1、formItemRender * 2、fieldProps（typeof fieldProps === 'function'时） * 3、formItemProps（typeof formItemProps === 'function'时） 以上三种用法会导致每个onValuesChange都去重复构建DomList。 目前只能先这样workaround了 */ @@ -882,7 +882,7 @@ describe('SchemaForm', () => { ...values, valueTypeMap: { test: { - renderFormItem: (text, props) => { + formItemRender: (text, props) => { return ; }, }, diff --git a/tests/table/__snapshots__/editor-table-two.test.tsx.snap b/tests/table/__snapshots__/editor-table-two.test.tsx.snap index cbcae8d9dd84..b1c3d028ea97 100644 --- a/tests/table/__snapshots__/editor-table-two.test.tsx.snap +++ b/tests/table/__snapshots__/editor-table-two.test.tsx.snap @@ -559,7 +559,7 @@ exports[`EditorProTable 2 > 📝 columns support editable test 1`] = ` `; -exports[`EditorProTable 2 > 📝 renderFormItem run defaultRender 1`] = ` +exports[`EditorProTable 2 > 📝 formItemRender run defaultRender 1`] = `
, + formItemRender: () => , }, { title: 'dateTime', diff --git a/tests/table/editor-table-two.test.tsx b/tests/table/editor-table-two.test.tsx index 8e9e5c511ee3..1f8aca1e77c0 100644 --- a/tests/table/editor-table-two.test.tsx +++ b/tests/table/editor-table-two.test.tsx @@ -89,7 +89,7 @@ const columns: ProColumns[] = [ dataIndex: 'index', valueType: 'indexBorder', width: 48, - renderFormItem: () => , + formItemRender: () => , }, { title: '标题', @@ -323,7 +323,7 @@ describe('EditorProTable 2', () => { fieldProps: { onChange: () => null, }, - renderFormItem: () => , + formItemRender: () => , ellipsis: true, tooltip: '标题过长会自动收缩', formItemProps: { @@ -414,7 +414,7 @@ describe('EditorProTable 2', () => { fieldProps: { onChange: () => null, }, - renderFormItem: () => , + formItemRender: () => , ellipsis: true, tooltip: '标题过长会自动收缩', formItemProps: { @@ -647,7 +647,7 @@ describe('EditorProTable 2', () => { dataIndex: 'index', valueType: 'indexBorder', width: 48, - renderFormItem: () => , + formItemRender: () => , }, { title: '标题', @@ -1265,7 +1265,7 @@ describe('EditorProTable 2', () => { wrapper.unmount(); }); - it('📝 renderFormItem run defaultRender', async () => { + it('📝 formItemRender run defaultRender', async () => { const wrapper = render( rowKey="id" @@ -1278,7 +1278,7 @@ describe('EditorProTable 2', () => { valueType: 'indexBorder', width: 48, title: '序号', - renderFormItem: (item, config) => { + formItemRender: (item, config) => { return config.defaultRender(item); }, }, diff --git a/tests/table/editor-table.test.tsx b/tests/table/editor-table.test.tsx index 738b0426cb1a..64644b70c0d4 100644 --- a/tests/table/editor-table.test.tsx +++ b/tests/table/editor-table.test.tsx @@ -88,7 +88,7 @@ const columns: ProColumns[] = [ dataIndex: 'index', valueType: 'indexBorder', width: 48, - renderFormItem: () => , + formItemRender: () => , }, { title: '标题', diff --git a/tests/table/search.test.tsx b/tests/table/search.test.tsx index 7bd2368a073c..360b0bb0b92a 100644 --- a/tests/table/search.test.tsx +++ b/tests/table/search.test.tsx @@ -424,7 +424,7 @@ describe('BasicTable Search', () => { html.unmount(); }); - it('🎏 renderFormItem test and fieldProps onChange', async () => { + it('🎏 formItemRender test and fieldProps onChange', async () => { const fn = vi.fn(); const onChangeFn = vi.fn(); const html = render( @@ -445,8 +445,8 @@ describe('BasicTable Search', () => { onChangeFn(e.target.value); }, }, - renderFormItem: () => { - return ; + formItemRender: () => { + return ; }, }, { @@ -460,13 +460,13 @@ describe('BasicTable Search', () => { />, ); - await html.findAllByPlaceholderText('renderFormItem'); + await html.findAllByPlaceholderText('formItemRender'); - expect(html.baseElement.querySelector('input#renderFormItem')).toBeTruthy(); + expect(html.baseElement.querySelector('input#formItemRender')).toBeTruthy(); act(() => { fireEvent.change( - html.baseElement.querySelector('input#renderFormItem')!, + html.baseElement.querySelector('input#formItemRender')!, { target: { value: '12' }, }, @@ -480,7 +480,7 @@ describe('BasicTable Search', () => { html.unmount(); }); - it('🎏 renderFormItem support return false', async () => { + it('🎏 formItemRender support return false', async () => { const formRef = createRef(); const html = render( { formItemProps: { className: 'money-class', }, - renderFormItem: () => false, + formItemRender: () => false, }, { title: 'Name', @@ -527,7 +527,7 @@ describe('BasicTable Search', () => { formItemProps: { className: 'money-class', }, - renderFormItem: () =>
, + formItemRender: () =>
, }, { title: 'Name', @@ -589,7 +589,7 @@ describe('BasicTable Search', () => { title: '金额', dataIndex: 'money', valueType: 'money', - renderFormItem: () => , + formItemRender: () => , }, { title: 'Name', @@ -619,7 +619,7 @@ describe('BasicTable Search', () => { title: '金额', dataIndex: 'money', valueType: 'money', - renderFormItem: () => , + formItemRender: () => , }, { title: 'Name', @@ -654,7 +654,7 @@ describe('BasicTable Search', () => { title: '金额', dataIndex: 'money', valueType: 'money', - renderFormItem: () => , + formItemRender: () => , }, { title: 'Name', diff --git a/tests/table/valueEnum.test.tsx b/tests/table/valueEnum.test.tsx index aa4f5e2aa4cb..e7b366201f17 100644 --- a/tests/table/valueEnum.test.tsx +++ b/tests/table/valueEnum.test.tsx @@ -14,7 +14,7 @@ const Demo = () => { valueTypeMap: { link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/tests/table/valueType.test.tsx b/tests/table/valueType.test.tsx index f9a6b4aa6400..04646be23488 100644 --- a/tests/table/valueType.test.tsx +++ b/tests/table/valueType.test.tsx @@ -93,7 +93,7 @@ describe('BasicTable valueType', () => { valueTypeMap: { link: { render: (text: any) => {text}, - renderFormItem: (_: any, props: any) => ( + formItemRender: (_: any, props: any) => ( { {fieldProps.color} ), - renderFormItem: (_: any, props: any) => ( + formItemRender: (_: any, props: any) => (