import * as React from 'react'; import { useMemo } from 'react'; import classNames from 'classnames'; import FieldForm, { List, useWatch } from 'rc-field-form'; import { FormProps as RcFormProps } from 'rc-field-form/lib/Form'; import { ValidateErrorEntity } from 'rc-field-form/lib/interface'; import { Options } from 'scroll-into-view-if-needed'; import { ColProps } from '../grid/col'; import { ConfigContext } from '../config-provider'; import { FormContext, FormContextProps } from './context'; import { FormLabelAlign } from './interface'; import useForm, { FormInstance } from './hooks/useForm'; import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext'; export type RequiredMark = boolean | 'optional'; export type FormLayout = 'horizontal' | 'inline' | 'vertical'; export interface FormProps extends Omit, 'form'> { prefixCls?: string; colon?: boolean; name?: string; layout?: FormLayout; labelAlign?: FormLabelAlign; labelWrap?: boolean; labelCol?: ColProps; wrapperCol?: ColProps; form?: FormInstance; size?: SizeType; scrollToFirstError?: Options | boolean; requiredMark?: RequiredMark; /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */ hideRequiredMark?: boolean; } const InternalForm: React.ForwardRefRenderFunction = (props, ref) => { const contextSize = React.useContext(SizeContext); const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, className = '', size = contextSize, form, colon, labelAlign, labelWrap, labelCol, wrapperCol, hideRequiredMark, layout = 'horizontal', scrollToFirstError, requiredMark, onFinishFailed, name, ...restFormProps } = props; const mergedRequiredMark = useMemo(() => { if (requiredMark !== undefined) { return requiredMark; } if (contextForm && contextForm.requiredMark !== undefined) { return contextForm.requiredMark; } if (hideRequiredMark) { return false; } return true; }, [hideRequiredMark, requiredMark, contextForm]); const mergedColon = colon ?? contextForm?.colon; const prefixCls = getPrefixCls('form', customizePrefixCls); const formClassName = classNames( prefixCls, { [`${prefixCls}-${layout}`]: true, [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false, [`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-${size}`]: size, }, className, ); const [wrapForm] = useForm(form); const { __INTERNAL__ } = wrapForm; __INTERNAL__.name = name; const formContextValue = useMemo( () => ({ name, labelAlign, labelCol, labelWrap, wrapperCol, vertical: layout === 'vertical', colon: mergedColon, requiredMark: mergedRequiredMark, itemRef: __INTERNAL__.itemRef, form: wrapForm, }), [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm], ); React.useImperativeHandle(ref, () => wrapForm); const onInternalFinishFailed = (errorInfo: ValidateErrorEntity) => { onFinishFailed?.(errorInfo); let defaultScrollToFirstError: Options = { block: 'nearest' }; if (scrollToFirstError && errorInfo.errorFields.length) { if (typeof scrollToFirstError === 'object') { defaultScrollToFirstError = scrollToFirstError; } wrapForm.scrollToField(errorInfo.errorFields[0].name, defaultScrollToFirstError); } }; return ( ); }; const Form = React.forwardRef(InternalForm) as ( props: React.PropsWithChildren> & { ref?: React.Ref> }, ) => React.ReactElement; export { useForm, List, FormInstance, useWatch }; export default Form;