mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
20d5502193
* chore(deps-dev): bump eslint-config-airbnb from 18.2.1 to 19.0.0 Bumps [eslint-config-airbnb](https://github.com/airbnb/javascript) from 18.2.1 to 19.0.0. - [Release notes](https://github.com/airbnb/javascript/releases) - [Commits](https://github.com/airbnb/javascript/compare/eslint-config-airbnb-v18.2.1...eslint-config-airbnb-v19.0.0) --- updated-dependencies: - dependency-name: eslint-config-airbnb dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * chore: code style * memoize-one * add comment * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * improve useMemo deps Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
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 Col, { ColProps } from '../grid/col';
|
|
import { ValidateStatus } from './FormItem';
|
|
import { FormContext, FormItemPrefixContext } from './context';
|
|
import ErrorList from './ErrorList';
|
|
|
|
interface FormItemInputMiscProps {
|
|
prefixCls: string;
|
|
children: React.ReactNode;
|
|
errors: React.ReactNode[];
|
|
warnings: React.ReactNode[];
|
|
hasFeedback?: boolean;
|
|
validateStatus?: ValidateStatus;
|
|
/** @private Internal Usage, do not use in any of your production. */
|
|
_internalItemRender?: {
|
|
mark: string;
|
|
render: (
|
|
props: FormItemInputProps & FormItemInputMiscProps,
|
|
domList: {
|
|
input: JSX.Element;
|
|
errorList: JSX.Element;
|
|
extra: JSX.Element | null;
|
|
},
|
|
) => React.ReactNode;
|
|
};
|
|
}
|
|
|
|
export interface FormItemInputProps {
|
|
wrapperCol?: ColProps;
|
|
extra?: React.ReactNode;
|
|
status?: ValidateStatus;
|
|
help?: React.ReactNode;
|
|
}
|
|
|
|
const iconMap: { [key: string]: any } = {
|
|
success: CheckCircleFilled,
|
|
warning: ExclamationCircleFilled,
|
|
error: CloseCircleFilled,
|
|
validating: LoadingOutlined,
|
|
};
|
|
|
|
const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = props => {
|
|
const {
|
|
prefixCls,
|
|
status,
|
|
wrapperCol,
|
|
children,
|
|
errors,
|
|
warnings,
|
|
hasFeedback,
|
|
_internalItemRender: formItemRender,
|
|
validateStatus,
|
|
extra,
|
|
help,
|
|
} = props;
|
|
const baseClassName = `${prefixCls}-item`;
|
|
|
|
const formContext = React.useContext(FormContext);
|
|
|
|
const mergedWrapperCol: ColProps = wrapperCol || formContext.wrapperCol || {};
|
|
|
|
const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className);
|
|
|
|
// Should provides additional icon if `hasFeedback`
|
|
const IconNode = validateStatus && iconMap[validateStatus];
|
|
const icon =
|
|
hasFeedback && IconNode ? (
|
|
<span className={`${baseClassName}-children-icon`}>
|
|
<IconNode />
|
|
</span>
|
|
) : null;
|
|
|
|
// Pass to sub FormItem should not with col info
|
|
const subFormContext = React.useMemo(() => ({ ...formContext }), [formContext]);
|
|
delete subFormContext.labelCol;
|
|
delete subFormContext.wrapperCol;
|
|
|
|
const inputDom = (
|
|
<div className={`${baseClassName}-control-input`}>
|
|
<div className={`${baseClassName}-control-input-content`}>{children}</div>
|
|
{icon}
|
|
</div>
|
|
);
|
|
const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
|
|
const errorListDom = (
|
|
<FormItemPrefixContext.Provider value={formItemContext}>
|
|
<ErrorList
|
|
errors={errors}
|
|
warnings={warnings}
|
|
help={help}
|
|
helpStatus={status}
|
|
className={`${baseClassName}-explain-connected`}
|
|
/>
|
|
</FormItemPrefixContext.Provider>
|
|
);
|
|
|
|
// If extra = 0, && will goes wrong
|
|
// 0&&error -> 0
|
|
const extraDom = extra ? <div className={`${baseClassName}-extra`}>{extra}</div> : null;
|
|
|
|
const dom =
|
|
formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
|
|
formItemRender.render(props, { input: inputDom, errorList: errorListDom, extra: extraDom })
|
|
) : (
|
|
<>
|
|
{inputDom}
|
|
{errorListDom}
|
|
{extraDom}
|
|
</>
|
|
);
|
|
return (
|
|
<FormContext.Provider value={subFormContext}>
|
|
<Col {...mergedWrapperCol} className={className}>
|
|
{dom}
|
|
</Col>
|
|
</FormContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default FormItemInput;
|