mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-24 15:38:45 +08:00
refactor: form use genHook (#34888)
This commit is contained in:
MadCcc
GitHub
parent
e5efbee968
commit
b7c7abfdd4
@ -1,4 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import type * as React from 'react';
|
||||
import type { ComponentToken as ButtonComponentToken } from '../../button/style';
|
||||
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
|
||||
@ -43,6 +43,7 @@ export interface OverrideToken {
|
||||
Cascader?: CascaderComponentToken;
|
||||
Divider?: DividerComponentToken;
|
||||
Empty?: EmptyComponentToken;
|
||||
Form?: {};
|
||||
Input?: {};
|
||||
InputNumber?: InputNumberComponentToken;
|
||||
Mentions?: MentionsComponentToken;
|
||||
|
||||
@ -2,15 +2,17 @@ import * as React from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import FieldForm, { List } 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 type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
|
||||
import type { ValidateErrorEntity } from 'rc-field-form/lib/interface';
|
||||
import type { Options } from 'scroll-into-view-if-needed';
|
||||
import type { ColProps } from '../grid/col';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { FormContext, FormContextProps } from './context';
|
||||
import { FormLabelAlign } from './interface';
|
||||
import type { FormContextProps } from './context';
|
||||
import { FormContext } from './context';
|
||||
import type { FormLabelAlign } from './interface';
|
||||
import useForm, { FormInstance } from './hooks/useForm';
|
||||
import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import SizeContext, { SizeContextProvider } from '../config-provider/SizeContext';
|
||||
import useStyle from './style';
|
||||
|
||||
export type RequiredMark = boolean | 'optional';
|
||||
@ -35,12 +37,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
|
||||
|
||||
const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
|
||||
const contextSize = React.useContext(SizeContext);
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
form: contextForm,
|
||||
iconPrefixCls,
|
||||
} = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext);
|
||||
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
@ -82,7 +79,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
|
||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls, getPrefixCls());
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const formClassName = classNames(
|
||||
prefixCls,
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { ReactNode, useContext, useMemo } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { useContext, useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form';
|
||||
import { FieldProps } from 'rc-field-form/lib/Field';
|
||||
import { Meta, NamePath } from 'rc-field-form/lib/interface';
|
||||
import type { FormInstance } from 'rc-field-form';
|
||||
import { Field, FieldContext, ListContext } from 'rc-field-form';
|
||||
import type { FieldProps } from 'rc-field-form/lib/Field';
|
||||
import type { Meta, NamePath } from 'rc-field-form/lib/interface';
|
||||
import { supportRef } from 'rc-util/lib/ref';
|
||||
import useState from 'rc-util/lib/hooks/useState';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
@ -16,14 +18,12 @@ import Row from '../grid/row';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { tuple } from '../_util/type';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import FormItemLabel, { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
|
||||
import FormItemInput, { FormItemInputProps } from './FormItemInput';
|
||||
import {
|
||||
FormContext,
|
||||
FormItemInputContext,
|
||||
NoStyleItemContext,
|
||||
FormItemStatusContextProps,
|
||||
} from './context';
|
||||
import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
|
||||
import FormItemLabel from './FormItemLabel';
|
||||
import type { FormItemInputProps } from './FormItemInput';
|
||||
import FormItemInput from './FormItemInput';
|
||||
import type { FormItemStatusContextProps } from './context';
|
||||
import { FormContext, FormItemInputContext, NoStyleItemContext } from './context';
|
||||
import { toArray, getFieldId } from './util';
|
||||
import { cloneElement, isValidElement } from '../_util/reactNode';
|
||||
import useFrameState from './hooks/useFrameState';
|
||||
@ -122,7 +122,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
|
||||
hidden,
|
||||
...restProps
|
||||
} = props;
|
||||
const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
|
||||
const { getPrefixCls } = useContext(ConfigContext);
|
||||
const { name: formName, requiredMark } = useContext(FormContext);
|
||||
const isRenderProps = typeof children === 'function';
|
||||
const notifyParentMetaChange = useContext(NoStyleItemContext);
|
||||
@ -136,7 +136,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
|
||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls, getPrefixCls());
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
// ========================= MISC =========================
|
||||
// Get `noStyle` required info
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
AliasToken,
|
||||
GenerateStyle,
|
||||
resetComponent,
|
||||
UseComponentStyleResult,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
} from '../../_util/theme';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, resetComponent } from '../../_util/theme';
|
||||
|
||||
interface FormToken extends AliasToken {
|
||||
formCls: string;
|
||||
interface FormToken extends FullToken<'Form'> {
|
||||
formItemCls: string;
|
||||
iconCls: string;
|
||||
rootPrefixCls: string;
|
||||
}
|
||||
|
||||
@ -86,14 +78,14 @@ const genFormSize = (token: FormToken, height: number): CSSObject => ({
|
||||
});
|
||||
|
||||
const genFormStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formCls } = token;
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[token.formCls]: {
|
||||
[token.componentCls]: {
|
||||
...resetComponent(token),
|
||||
...resetForm(token),
|
||||
|
||||
[`${formCls}-text`]: {
|
||||
[`${componentCls}-text`]: {
|
||||
display: 'inline-block',
|
||||
paddingInlineEnd: token.paddingSM,
|
||||
},
|
||||
@ -113,7 +105,7 @@ const genFormStyle: GenerateStyle<FormToken> = token => {
|
||||
};
|
||||
|
||||
const genFormItemStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formItemCls, iconCls, formCls, rootPrefixCls } = token;
|
||||
const { formItemCls, iconCls, componentCls, rootPrefixCls } = token;
|
||||
|
||||
return {
|
||||
[formItemCls]: {
|
||||
@ -192,7 +184,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
|
||||
lineHeight: 1,
|
||||
content: '"*"',
|
||||
|
||||
[`${formCls}-hide-required-mark &`]: {
|
||||
[`${componentCls}-hide-required-mark &`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
@ -203,7 +195,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
|
||||
marginInlineStart: token.marginXXS,
|
||||
color: token.colorTextSecondary,
|
||||
|
||||
[`${formCls}-hide-required-mark &`]: {
|
||||
[`${componentCls}-hide-required-mark &`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
@ -327,10 +319,10 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
|
||||
};
|
||||
|
||||
const genFormMotionStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formCls, rootPrefixCls } = token;
|
||||
const { componentCls, rootPrefixCls } = token;
|
||||
|
||||
return {
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
// Explain holder
|
||||
[`.${rootPrefixCls}-show-help`]: {
|
||||
transition: `height ${token.motionDurationSlow} linear,
|
||||
@ -374,10 +366,10 @@ const genFormMotionStyle: GenerateStyle<FormToken> = token => {
|
||||
};
|
||||
|
||||
const genHorizontalStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formCls, formItemCls, rootPrefixCls } = token;
|
||||
const { componentCls, formItemCls, rootPrefixCls } = token;
|
||||
|
||||
return {
|
||||
[`${formCls}-horizontal`]: {
|
||||
[`${componentCls}-horizontal`]: {
|
||||
[`${formItemCls}-label`]: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
@ -398,10 +390,10 @@ const genHorizontalStyle: GenerateStyle<FormToken> = token => {
|
||||
};
|
||||
|
||||
const genInlineStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formCls, formItemCls } = token;
|
||||
const { componentCls, formItemCls } = token;
|
||||
|
||||
return {
|
||||
[`${formCls}-inline`]: {
|
||||
[`${componentCls}-inline`]: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
|
||||
@ -425,7 +417,7 @@ const genInlineStyle: GenerateStyle<FormToken> = token => {
|
||||
flex: 'none',
|
||||
},
|
||||
|
||||
[`${formCls}-text`]: {
|
||||
[`${componentCls}-text`]: {
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
@ -453,13 +445,13 @@ const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
|
||||
});
|
||||
|
||||
const makeVerticalLayout = (token: FormToken): CSSObject => {
|
||||
const { formCls, formItemCls } = token;
|
||||
const { componentCls, formItemCls } = token;
|
||||
|
||||
return {
|
||||
[`${formItemCls} ${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
},
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
[formItemCls]: {
|
||||
flexWrap: 'wrap',
|
||||
|
||||
@ -474,10 +466,10 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
|
||||
};
|
||||
|
||||
const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
const { formCls, formItemCls, rootPrefixCls } = token;
|
||||
const { componentCls, formItemCls, rootPrefixCls } = token;
|
||||
|
||||
return {
|
||||
[`${formCls}-vertical`]: {
|
||||
[`${componentCls}-vertical`]: {
|
||||
[formItemCls]: {
|
||||
flexDirection: 'column',
|
||||
|
||||
@ -487,7 +479,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
},
|
||||
},
|
||||
|
||||
[`${formCls}-vertical ${formItemCls}-label,
|
||||
[`${componentCls}-vertical ${formItemCls}-label,
|
||||
.${rootPrefixCls}-col-24${formItemCls}-label,
|
||||
.${rootPrefixCls}-col-xl-24${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
@ -495,7 +487,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
|
||||
[`@media (max-width: ${token.screenSMMax}px)`]: {
|
||||
...makeVerticalLayout(token),
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
[`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
},
|
||||
@ -503,7 +495,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
},
|
||||
|
||||
[`@media (max-width: ${token.screenSMMax}px)`]: {
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
[`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
},
|
||||
@ -511,7 +503,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
},
|
||||
|
||||
[`@media (max-width: ${token.screenMDMax}px)`]: {
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
[`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
},
|
||||
@ -519,7 +511,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
},
|
||||
|
||||
[`@media (max-width: ${token.screenLGMax}px)`]: {
|
||||
[formCls]: {
|
||||
[componentCls]: {
|
||||
[`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: {
|
||||
...makeVerticalLayoutLabel(token),
|
||||
},
|
||||
@ -529,30 +521,19 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
rootPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
|
||||
const formToken: FormToken = {
|
||||
...token,
|
||||
formCls: `.${prefixCls}`,
|
||||
formItemCls: `.${prefixCls}-item`,
|
||||
iconCls: `.${iconPrefixCls}`,
|
||||
formItemCls: `${token.componentCls}-item`,
|
||||
rootPrefixCls,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genFormStyle(formToken),
|
||||
genFormItemStyle(formToken),
|
||||
genFormMotionStyle(formToken),
|
||||
genHorizontalStyle(formToken),
|
||||
genInlineStyle(formToken),
|
||||
genVerticalStyle(formToken),
|
||||
]),
|
||||
hashId,
|
||||
genFormStyle(formToken),
|
||||
genFormItemStyle(formToken),
|
||||
genFormMotionStyle(formToken),
|
||||
genHorizontalStyle(formToken),
|
||||
genInlineStyle(formToken),
|
||||
genVerticalStyle(formToken),
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user