diff --git a/packages/form/src/components/FormItem/index.tsx b/packages/form/src/components/FormItem/index.tsx index 0a93deee682a..19c97b20d322 100644 --- a/packages/form/src/components/FormItem/index.tsx +++ b/packages/form/src/components/FormItem/index.tsx @@ -182,18 +182,64 @@ const WarpFormItem: React.FC< help, ...props }) => { - const formDom = useMemo(() => { - let getValuePropsFunc: any = (value: any) => { - const newValue = convertValue?.(value, props.name!) ?? value; - if (props.getValueProps) return props.getValueProps(newValue); - return { - [valuePropName || 'value']: newValue, + const formDom = useMemo(() => { + let getValuePropsFunc: any = (value: any) => { + const newValue = convertValue?.(value, props.name!) ?? value; + if (props.getValueProps) return props.getValueProps(newValue); + return { + [valuePropName || 'value']: newValue, + }; }; - }; - if (!convertValue && !props.getValueProps) { - getValuePropsFunc = undefined; - } - if (!addonAfter && !addonBefore) { + if (!convertValue && !props.getValueProps) { + getValuePropsFunc = undefined; + } + + const prepareItemRender = ( + inputProps: FormItemProps & { + errors: React.ReactNode[]; + warnings: React.ReactNode[]; + }, + doms: { + input: JSX.Element; + errorList: JSX.Element; + extra: JSX.Element; + }) => { + + const nextInput = (addonAfter || addonBefore) + ? ( +
+ {addonBefore ? ( +
{addonBefore}
+ ) : null} + {doms.input} + {addonAfter ? ( +
{addonAfter}
+ ) : null} +
+ ) + : doms.input + + const nextErrorList = typeof help === 'function' + ? help({ + errors: inputProps.errors, + warnings: inputProps.warnings, + }) + : doms.errorList + + return { + ...doms, + input: nextInput, + errorList: nextErrorList + } + } + return ( ( - <> - {doms.input} - {typeof help === 'function' - ? help({ - errors: inputProps.errors, - warnings: inputProps.warnings, - }) - : doms.errorList} - {doms.extra} - - ), + prepare: prepareItemRender, + // Legacy + render(...args: Parameters) { + const { input, errorList, extra } = prepareItemRender(...args); + return ( + <> + {input} + {errorList} + {extra} + + ) + } }} > {children} ); - } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [addonAfter, addonBefore, children, convertValue?.toString(), props]); return ( - ( - <> -
- {addonBefore ? ( -
{addonBefore}
- ) : null} - {doms.input} - {addonAfter ? ( -
{addonAfter}
- ) : null} -
- {typeof help === 'function' - ? help({ - errors: inputProps.errors, - warnings: inputProps.warnings, - }) - : doms.errorList} - {doms.extra} - - ), + - {children} -
+ {formDom} + ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [addonAfter, addonBefore, children, convertValue?.toString(), props]); - - return ( - - {formDom} - - ); -}; + }; export type ProFormItemProps = FormItemProps & { ignoreFormItem?: boolean;