import * as React from 'react'; import classNames from 'classnames'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import useMemo from 'rc-util/lib/hooks/useMemo'; import CSSMotion from 'rc-animate/lib/CSSMotion'; import Col, { ColProps } from '../grid/col'; import { ValidateStatus } from './FormItem'; import { FormContext } from './context'; import { useCacheErrors } from './util'; interface FormItemInputMiscProps { prefixCls: string; children: React.ReactNode; errors: React.ReactNode[]; hasFeedback?: boolean; validateStatus?: ValidateStatus; onDomErrorVisibleChange: (visible: boolean) => void; } export interface FormItemInputProps { wrapperCol?: ColProps; help?: React.ReactNode; extra?: React.ReactNode; } const iconMap: { [key: string]: any } = { success: CheckCircleFilled, warning: ExclamationCircleFilled, error: CloseCircleFilled, validating: LoadingOutlined, }; const FormItemInput: React.FC = ({ prefixCls, wrapperCol, children, help, errors, onDomErrorVisibleChange, hasFeedback, validateStatus, extra, }) => { const [, forceUpdate] = React.useState({}); const baseClassName = `${prefixCls}-item`; const formContext = React.useContext(FormContext); const mergedWrapperCol: ColProps = wrapperCol || formContext.wrapperCol || {}; const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className); const [visible, cacheErrors] = useCacheErrors( errors, changedVisible => { if (changedVisible) { /** * We trigger in sync to avoid dom shaking but this get warning in react 16.13. * So use Promise to keep in micro async to handle this. * https://github.com/ant-design/ant-design/issues/21698#issuecomment-593743485 */ Promise.resolve().then(() => { onDomErrorVisibleChange(true); }); } forceUpdate({}); }, !!help, ); const memoErrors = useMemo( () => cacheErrors, visible, (_, nextVisible) => nextVisible, ); // Should provides additional icon if `hasFeedback` const IconNode = validateStatus && iconMap[validateStatus]; const icon = hasFeedback && IconNode ? ( ) : null; // Pass to sub FormItem should not with col info const subFormContext = { ...formContext }; delete subFormContext.labelCol; delete subFormContext.wrapperCol; return (
{children}
{icon}
{ onDomErrorVisibleChange(false); }} motionAppear removeOnLeave > {({ className: motionClassName }: { className: string }) => { return (
{memoErrors.map((error, index) => ( // eslint-disable-next-line react/no-array-index-key
{error}
))}
); }}
{extra &&
{extra}
}
); }; export default FormItemInput;