mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-04 23:16:50 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

refactor: form use genHook (#34888)

Browse Source
This commit is contained in:
MadCcc 2022-04-06 22:14:16 +08:00 committed by GitHub
parent e5efbee968
commit b7c7abfdd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/_util/theme/interface.ts
View File

@ -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 ButtonComponentToken } from '../../button/style';
import type { ComponentToken as DividerComponentToken } from '../../divider/style'; import type { ComponentToken as DividerComponentToken } from '../../divider/style';
import type { ComponentToken as EmptyComponentToken } from '../../empty/style'; import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
@ -43,6 +43,7 @@ export interface OverrideToken {
Cascader?: CascaderComponentToken; Cascader?: CascaderComponentToken;
Divider?: DividerComponentToken; Divider?: DividerComponentToken;
Empty?: EmptyComponentToken; Empty?: EmptyComponentToken;
Form?: {};
Input?: {}; Input?: {};
InputNumber?: InputNumberComponentToken; InputNumber?: InputNumberComponentToken;
Mentions?: MentionsComponentToken; Mentions?: MentionsComponentToken;

25
components/form/Form.tsx
View File

@ -2,15 +2,17 @@ import * as React from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import FieldForm, { List } from 'rc-field-form'; import FieldForm, { List } from 'rc-field-form';
import { FormProps as RcFormProps } from 'rc-field-form/lib/Form'; import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
import { ValidateErrorEntity } from 'rc-field-form/lib/interface'; import type { ValidateErrorEntity } from 'rc-field-form/lib/interface';
import { Options } from 'scroll-into-view-if-needed'; import type { Options } from 'scroll-into-view-if-needed';
import { ColProps } from '../grid/col'; import type { ColProps } from '../grid/col';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormContext, FormContextProps } from './context'; import type { FormContextProps } from './context';
import { FormLabelAlign } from './interface'; import { FormContext } from './context';
import type { FormLabelAlign } from './interface';
import useForm, { FormInstance } from './hooks/useForm'; 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'; import useStyle from './style';
export type RequiredMark = boolean | 'optional'; 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 InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
const contextSize = React.useContext(SizeContext); const contextSize = React.useContext(SizeContext);
const { const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext);
getPrefixCls,
direction,
form: contextForm,
iconPrefixCls,
} = React.useContext(ConfigContext);
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
@ -82,7 +79,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
const prefixCls = getPrefixCls('form', customizePrefixCls); const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style // Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls, getPrefixCls()); const [wrapSSR, hashId] = useStyle(prefixCls);
const formClassName = classNames( const formClassName = classNames(
prefixCls, prefixCls,

28
components/form/FormItem.tsx
View File

@ -1,9 +1,11 @@
import * as React from 'react'; 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 classNames from 'classnames';
import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form'; import type { FormInstance } from 'rc-field-form';
import { FieldProps } from 'rc-field-form/lib/Field'; import { Field, FieldContext, ListContext } from 'rc-field-form';
import { Meta, NamePath } from 'rc-field-form/lib/interface'; 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 { supportRef } from 'rc-util/lib/ref';
import useState from 'rc-util/lib/hooks/useState'; import useState from 'rc-util/lib/hooks/useState';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
@ -16,14 +18,12 @@ import Row from '../grid/row';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning'; import devWarning from '../_util/devWarning';
import FormItemLabel, { FormItemLabelProps, LabelTooltipType } from './FormItemLabel'; import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
import FormItemInput, { FormItemInputProps } from './FormItemInput'; import FormItemLabel from './FormItemLabel';
import { import type { FormItemInputProps } from './FormItemInput';
FormContext, import FormItemInput from './FormItemInput';
FormItemInputContext, import type { FormItemStatusContextProps } from './context';
NoStyleItemContext, import { FormContext, FormItemInputContext, NoStyleItemContext } from './context';
FormItemStatusContextProps,
} from './context';
import { toArray, getFieldId } from './util'; import { toArray, getFieldId } from './util';
import { cloneElement, isValidElement } from '../_util/reactNode'; import { cloneElement, isValidElement } from '../_util/reactNode';
import useFrameState from './hooks/useFrameState'; import useFrameState from './hooks/useFrameState';
@ -122,7 +122,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
hidden, hidden,
...restProps ...restProps
} = props; } = props;
const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); const { getPrefixCls } = useContext(ConfigContext);
const { name: formName, requiredMark } = useContext(FormContext); const { name: formName, requiredMark } = useContext(FormContext);
const isRenderProps = typeof children === 'function'; const isRenderProps = typeof children === 'function';
const notifyParentMetaChange = useContext(NoStyleItemContext); const notifyParentMetaChange = useContext(NoStyleItemContext);
@ -136,7 +136,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
const prefixCls = getPrefixCls('form', customizePrefixCls); const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style // Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls, getPrefixCls()); const [wrapSSR, hashId] = useStyle(prefixCls);
// ========================= MISC ========================= // ========================= MISC =========================
// Get `noStyle` required info // Get `noStyle` required info

77
components/form/style/index.tsx
View File

@ -1,18 +1,10 @@
// deps-lint-skip-all // deps-lint-skip-all
import { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
AliasToken, import { genComponentStyleHook, resetComponent } from '../../_util/theme';
GenerateStyle,
resetComponent,
UseComponentStyleResult,
useStyleRegister,
useToken,
} from '../../_util/theme';
interface FormToken extends AliasToken { interface FormToken extends FullToken<'Form'> {
formCls: string;
formItemCls: string; formItemCls: string;
iconCls: string;
rootPrefixCls: string; rootPrefixCls: string;
} }
@ -86,14 +78,14 @@ const genFormSize = (token: FormToken, height: number): CSSObject => ({
}); });
const genFormStyle: GenerateStyle<FormToken> = token => { const genFormStyle: GenerateStyle<FormToken> = token => {
const { formCls } = token; const { componentCls } = token;
return { return {
[token.formCls]: { [token.componentCls]: {
...resetComponent(token), ...resetComponent(token),
...resetForm(token), ...resetForm(token),
[`${formCls}-text`]: { [`${componentCls}-text`]: {
display: 'inline-block', display: 'inline-block',
paddingInlineEnd: token.paddingSM, paddingInlineEnd: token.paddingSM,
}, },
@ -113,7 +105,7 @@ const genFormStyle: GenerateStyle<FormToken> = token => {
}; };
const genFormItemStyle: GenerateStyle<FormToken> = token => { const genFormItemStyle: GenerateStyle<FormToken> = token => {
const { formItemCls, iconCls, formCls, rootPrefixCls } = token; const { formItemCls, iconCls, componentCls, rootPrefixCls } = token;
return { return {
[formItemCls]: { [formItemCls]: {
@ -192,7 +184,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
lineHeight: 1, lineHeight: 1,
content: '"*"', content: '"*"',
[`${formCls}-hide-required-mark &`]: { [`${componentCls}-hide-required-mark &`]: {
display: 'none', display: 'none',
}, },
}, },
@ -203,7 +195,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
marginInlineStart: token.marginXXS, marginInlineStart: token.marginXXS,
color: token.colorTextSecondary, color: token.colorTextSecondary,
[`${formCls}-hide-required-mark &`]: { [`${componentCls}-hide-required-mark &`]: {
display: 'none', display: 'none',
}, },
}, },
@ -327,10 +319,10 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
}; };
const genFormMotionStyle: GenerateStyle<FormToken> = token => { const genFormMotionStyle: GenerateStyle<FormToken> = token => {
const { formCls, rootPrefixCls } = token; const { componentCls, rootPrefixCls } = token;
return { return {
[formCls]: { [componentCls]: {
// Explain holder // Explain holder
[`.${rootPrefixCls}-show-help`]: { [`.${rootPrefixCls}-show-help`]: {
transition: `height ${token.motionDurationSlow} linear, transition: `height ${token.motionDurationSlow} linear,
@ -374,10 +366,10 @@ const genFormMotionStyle: GenerateStyle<FormToken> = token => {
}; };
const genHorizontalStyle: GenerateStyle<FormToken> = token => { const genHorizontalStyle: GenerateStyle<FormToken> = token => {
const { formCls, formItemCls, rootPrefixCls } = token; const { componentCls, formItemCls, rootPrefixCls } = token;
return { return {
[`${formCls}-horizontal`]: { [`${componentCls}-horizontal`]: {
[`${formItemCls}-label`]: { [`${formItemCls}-label`]: {
flexGrow: 0, flexGrow: 0,
}, },
@ -398,10 +390,10 @@ const genHorizontalStyle: GenerateStyle<FormToken> = token => {
}; };
const genInlineStyle: GenerateStyle<FormToken> = token => { const genInlineStyle: GenerateStyle<FormToken> = token => {
const { formCls, formItemCls } = token; const { componentCls, formItemCls } = token;
return { return {
[`${formCls}-inline`]: { [`${componentCls}-inline`]: {
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
@ -425,7 +417,7 @@ const genInlineStyle: GenerateStyle<FormToken> = token => {
flex: 'none', flex: 'none',
}, },
[`${formCls}-text`]: { [`${componentCls}-text`]: {
display: 'inline-block', display: 'inline-block',
}, },
@ -453,13 +445,13 @@ const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
}); });
const makeVerticalLayout = (token: FormToken): CSSObject => { const makeVerticalLayout = (token: FormToken): CSSObject => {
const { formCls, formItemCls } = token; const { componentCls, formItemCls } = token;
return { return {
[`${formItemCls} ${formItemCls}-label`]: { [`${formItemCls} ${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
}, },
[formCls]: { [componentCls]: {
[formItemCls]: { [formItemCls]: {
flexWrap: 'wrap', flexWrap: 'wrap',
@ -474,10 +466,10 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
}; };
const genVerticalStyle: GenerateStyle<FormToken> = token => { const genVerticalStyle: GenerateStyle<FormToken> = token => {
const { formCls, formItemCls, rootPrefixCls } = token; const { componentCls, formItemCls, rootPrefixCls } = token;
return { return {
[`${formCls}-vertical`]: { [`${componentCls}-vertical`]: {
[formItemCls]: { [formItemCls]: {
flexDirection: 'column', 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-24${formItemCls}-label,
.${rootPrefixCls}-col-xl-24${formItemCls}-label`]: { .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
@ -495,7 +487,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
[`@media (max-width: ${token.screenSMMax}px)`]: { [`@media (max-width: ${token.screenSMMax}px)`]: {
...makeVerticalLayout(token), ...makeVerticalLayout(token),
[formCls]: { [componentCls]: {
[`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: { [`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
}, },
@ -503,7 +495,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
}, },
[`@media (max-width: ${token.screenSMMax}px)`]: { [`@media (max-width: ${token.screenSMMax}px)`]: {
[formCls]: { [componentCls]: {
[`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: { [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
}, },
@ -511,7 +503,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
}, },
[`@media (max-width: ${token.screenMDMax}px)`]: { [`@media (max-width: ${token.screenMDMax}px)`]: {
[formCls]: { [componentCls]: {
[`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: { [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
}, },
@ -519,7 +511,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
}, },
[`@media (max-width: ${token.screenLGMax}px)`]: { [`@media (max-width: ${token.screenLGMax}px)`]: {
[formCls]: { [componentCls]: {
[`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: { [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: {
...makeVerticalLayoutLabel(token), ...makeVerticalLayoutLabel(token),
}, },
@ -529,30 +521,19 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default function useStyle( export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
prefixCls: string,
iconPrefixCls: string,
rootPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const formToken: FormToken = { const formToken: FormToken = {
...token, ...token,
formCls: `.${prefixCls}`, formItemCls: `${token.componentCls}-item`,
formItemCls: `.${prefixCls}-item`,
iconCls: `.${iconPrefixCls}`,
rootPrefixCls, rootPrefixCls,
}; };
return [ return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genFormStyle(formToken), genFormStyle(formToken),
genFormItemStyle(formToken), genFormItemStyle(formToken),
genFormMotionStyle(formToken), genFormMotionStyle(formToken),
genHorizontalStyle(formToken), genHorizontalStyle(formToken),
genInlineStyle(formToken), genInlineStyle(formToken),
genVerticalStyle(formToken), genVerticalStyle(formToken),
]),
hashId,
]; ];
} });