GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor: add useSize replace React.useContext (#42282) 

* refactor: add useSize

* fix

* fix

* fix

* fix

* fix
pull/42313/head
lijianan 2 years ago
committed by GitHub
parent
2be6c47f1b
commit
9d1854763d
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 178 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      components/_util/hooks/useSize.ts
  2. 4
      components/avatar/avatar.tsx
  3. 7
      components/button/button.tsx
  4. 42
      components/card/Card.tsx
  5. 21
      components/cascader/index.tsx
  6. 9
      components/collapse/Collapse.tsx
  7. 5
      components/config-provider/SizeContext.tsx
  8. 17
      components/config-provider/__tests__/useSize.test.tsx
  9. 22
      components/config-provider/hooks/useSize.ts
  10. 18
      components/date-picker/generatePicker/generateRangePicker.tsx
  11. 14
      components/date-picker/generatePicker/generateSinglePicker.tsx
  12. 2
      components/descriptions/index.tsx
  13. 15
      components/form/Form.tsx
  14. 24
      components/input-number/index.tsx
  15. 17
      components/input/Input.tsx
  16. 8
      components/input/Search.tsx
  17. 27
      components/input/TextArea.tsx
  18. 6
      components/pagination/Pagination.tsx
  19. 9
      components/radio/group.tsx
  20. 7
      components/segmented/index.tsx
  21. 5
      components/select/index.tsx
  22. 17
      components/space/Compact.tsx
  23. 8
      components/steps/index.tsx
  24. 13
      components/switch/index.tsx
  25. 6
      components/table/InternalTable.tsx
  26. 13
      components/tabs/index.tsx
  27. 6
      components/tree-select/index.tsx
  28. 2
      scripts/check-commit.ts

16
components/_util/hooks/useSize.ts
View File

@ -1,16 +0,0 @@
import React from 'react';
import type { SizeType } from '../../config-provider/SizeContext';
import SizeContext from '../../config-provider/SizeContext';
const useSize = <T extends string>(customizeSize?: T) => {
const size = React.useContext<SizeType>(SizeContext);
const mergeSize = React.useMemo<T>(() => {
if (!customizeSize) {
return size as T;
}
return customizeSize ?? size;
}, [customizeSize, size]);
return mergeSize;
};
export default useSize;

4
components/avatar/avatar.tsx
View File

@ -2,11 +2,11 @@ import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import type { Breakpoint } from '../_util/responsiveObserver';
import { responsiveArray } from '../_util/responsiveObserver';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import type { AvatarSize } from './SizeContext';
import SizeContext from './SizeContext';
import useStyle from './style';

7
components/button/button.tsx
View File

@ -16,7 +16,7 @@ import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import { useCompactItemContext } from '../space/Compact';
import LoadingIcon from './LoadingIcon';
import Group, { GroupSizeContext } from './button-group';
@ -124,7 +124,6 @@ const InternalButton: React.ForwardRefRenderFunction<
const [wrapSSR, hashId] = useStyle(prefixCls);
const size = useContext(SizeContext);
const disabled = useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
@ -204,7 +203,9 @@ const InternalButton: React.ForwardRefRenderFunction<
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
const sizeFullname = compactSize || groupSize || customizeSize || size;
const sizeFullname = useSize((ctxSize) => compactSize ?? groupSize ?? customizeSize ?? ctxSize);
const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
const iconType = innerLoading ? 'loading' : icon;

42
components/card/Card.tsx
View File

@ -2,12 +2,11 @@ import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import Skeleton from '../skeleton';
import type { TabsProps } from '../tabs';
import Tabs from '../tabs';
import Grid from './Grid';
import useStyle from './style';
export type CardType = 'inner';
@ -55,24 +54,7 @@ function getAction(actions: React.ReactNode[]) {
return actionList;
}
const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const onTabChange = (key: string) => {
props.onTabChange?.(key);
};
const isContainGrid = () => {
let containGrid;
React.Children.forEach(props.children, (element: JSX.Element) => {
if (element && element.type && element.type === Grid) {
containGrid = true;
}
});
return containGrid;
};
const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
@ -97,6 +79,22 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
...others
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const onTabChange = (key: string) => {
props.onTabChange?.(key);
};
const isContainGrid = React.useMemo<boolean>(() => {
let containGrid = false;
React.Children.forEach(children, (element: JSX.Element) => {
if (element && element.type && element.type === Grid) {
containGrid = true;
}
});
return containGrid;
}, [children]);
const prefixCls = getPrefixCls('card', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
@ -116,7 +114,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
};
let head: React.ReactNode;
const mergedSize = customizeSize || size;
const mergedSize = useSize(customizeSize);
const tabSize = !mergedSize || mergedSize === 'default' ? 'large' : mergedSize;
const tabs =
tabList && tabList.length ? (
@ -160,7 +158,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: hoverable,
[`${prefixCls}-contain-grid`]: isContainGrid(),
[`${prefixCls}-contain-grid`]: isContainGrid,
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-type-${type}`]: !!type,

21
components/cascader/index.tsx
View File

@ -14,25 +14,23 @@ import RcCascader from 'rc-cascader';
import type { Placement } from 'rc-select/lib/BaseSelect';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import { useCompactItemContext } from '../space/Compact';
import genPurePanel from '../_util/PurePanel';
import type { SelectCommonPlacement } from '../_util/motion';
import { getTransitionDirection, getTransitionName } from '../_util/motion';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import getIcons from '../select/utils/iconUtil';
import genPurePanel from '../_util/PurePanel';
import useSelectStyle from '../select/style';
import useBuiltinPlacements from '../select/useBuiltinPlacements';
import useShowArrow from '../select/useShowArrow';
import getIcons from '../select/utils/iconUtil';
import { useCompactItemContext } from '../space/Compact';
import useStyle from './style';
// Align the design since we use `rc-select` in root. This help:
@ -232,8 +230,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
}, [showSearch]);
// ===================== Size ======================
const size = React.useContext(SizeContext);
const mergedSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

9
components/collapse/Collapse.tsx
View File

@ -2,19 +2,17 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
import classNames from 'classnames';
import RcCollapse from 'rc-collapse';
import type { CSSMotionProps } from 'rc-motion';
import * as React from 'react';
import toArray from 'rc-util/lib/Children/toArray';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import initCollapseMotion from '../_util/motion';
import { cloneElement } from '../_util/reactNode';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import type { CollapsibleType } from './CollapsePanel';
import CollapsePanel from './CollapsePanel';
import useStyle from './style';
/** @deprecated Please use `start` | `end` instead */
@ -56,7 +54,6 @@ interface PanelProps {
const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const {
prefixCls: customizePrefixCls,
@ -70,7 +67,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
expandIcon,
} = props;
const mergedSize = customizeSize || size || 'middle';
const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const [wrapSSR, hashId] = useStyle(prefixCls);

5
components/config-provider/SizeContext.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import useSize from './hooks/useSize';
export type SizeType = 'small' | 'middle' | 'large' | undefined;
@ -10,8 +11,8 @@ export interface SizeContextProps {
}
export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => {
const originSize = React.useContext<SizeType>(SizeContext);
return <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>;
const mergedSize = useSize(size);
return <SizeContext.Provider value={mergedSize}>{children}</SizeContext.Provider>;
};
export default SizeContext;

17
components/config-provider/__tests__/useSize.test.tsx
View File

@ -0,0 +1,17 @@
import React from 'react';
import { render } from '../../../tests/utils';
import useSize from '../hooks/useSize';
describe('useSize', () => {
it('useSize', () => {
const Demo: React.FC<{ size?: any }> = ({ size }) => <div>{useSize(size)}</div>;
const { container, rerender } = render(<Demo />);
expect(container.querySelector<HTMLDivElement>('div')?.textContent).toBe('');
rerender(<Demo size="test-size1" />);
expect(container.querySelector<HTMLDivElement>('div')?.textContent).toBe('test-size1');
rerender(<Demo size={() => 'test-size2'} />);
expect(container.querySelector<HTMLDivElement>('div')?.textContent).toBe('test-size2');
rerender(<Demo size={1} />);
expect(container.querySelector<HTMLDivElement>('div')?.textContent).toBe('');
});
});

22
components/config-provider/hooks/useSize.ts
View File

@ -0,0 +1,22 @@
import React from 'react';
import type { SizeType } from '../SizeContext';
import SizeContext from '../SizeContext';
const useSize = <T>(customSize?: T | ((ctxSize: SizeType) => T)): T => {
const size = React.useContext<SizeType>(SizeContext);
const mergedSize = React.useMemo<T>(() => {
if (!customSize) {
return size as T;
}
if (typeof customSize === 'string') {
return customSize ?? size;
}
if (customSize instanceof Function) {
return customSize(size);
}
return size as T;
}, [customSize, size]);
return mergedSize;
};
export default useSize;

18
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -9,20 +9,19 @@ import * as React from 'react';
import { forwardRef, useContext, useImperativeHandle } from 'react';
import type { RangePickerProps } from '.';
import { Components, getTimeProps } from '.';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import warning from '../../_util/warning';
import { ConfigContext } from '../../config-provider';
import DisabledContext from '../../config-provider/DisabledContext';
import SizeContext from '../../config-provider/SizeContext';
import useSize from '../../config-provider/hooks/useSize';
import { FormItemInputContext } from '../../form/context';
import { useLocale } from '../../locale';
import { useCompactItemContext } from '../../space/Compact';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import warning from '../../_util/warning';
import enUS from '../locale/en_US';
import useStyle from '../style';
import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
import type { CommonPickerMethods, PickerComponentClass } from './interface';
import useStyle from '../style';
export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type InternalRangePickerProps = RangePickerProps<DateType> & {};
type DateRangePickerProps = RangePickerProps<DateType> & {
@ -79,8 +78,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
}
// ===================== Size =====================
const size = React.useContext(SizeContext);
const mergedSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
@ -132,11 +130,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls as string,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback),
hashId,
compactItemClassnames,
className,

14
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -9,21 +9,20 @@ import * as React from 'react';
import { forwardRef, useContext, useImperativeHandle } from 'react';
import type { PickerProps, PickerTimeProps } from '.';
import { Components, getTimeProps } from '.';
import type { InputStatus } from '../../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import warning from '../../_util/warning';
import { ConfigContext } from '../../config-provider';
import DisabledContext from '../../config-provider/DisabledContext';
import SizeContext from '../../config-provider/SizeContext';
import useSize from '../../config-provider/hooks/useSize';
import { FormItemInputContext } from '../../form/context';
import { useLocale } from '../../locale';
import { useCompactItemContext } from '../../space/Compact';
import type { InputStatus } from '../../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import warning from '../../_util/warning';
import enUS from '../locale/en_US';
import useStyle from '../style';
import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
import useStyle from '../style';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type CustomPickerProps = {
status?: InputStatus;
@ -104,8 +103,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
}
// ===================== Size =====================
const size = React.useContext(SizeContext);
const mergedSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/descriptions/index.tsx
View File

@ -2,12 +2,12 @@
import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray';
import * as React from 'react';
import useSize from '../_util/hooks/useSize';
import { cloneElement } from '../_util/reactNode';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserver';
import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObserver';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import DescriptionsItem from './Item';
import Row from './Row';
import useStyle from './style';

15
components/form/Form.tsx
View File

@ -8,14 +8,14 @@ import type { Options } from 'scroll-into-view-if-needed';
import { ConfigContext } from '../config-provider';
import DisabledContext, { DisabledContextProvider } from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext, { SizeContextProvider } from '../config-provider/SizeContext';
import { SizeContextProvider } from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import type { ColProps } from '../grid/col';
import type { FormContextProps } from './context';
import { FormContext } from './context';
import useForm, { type FormInstance } from './hooks/useForm';
import type { FormLabelAlign } from './interface';
import useFormWarning from './hooks/useFormWarning';
import type { FormLabelAlign } from './interface';
import useStyle from './style';
export type RequiredMark = boolean | 'optional';
@ -41,7 +41,6 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
}
const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
const contextSize = React.useContext(SizeContext);
const contextDisabled = React.useContext(DisabledContext);
const { getPrefixCls, direction, form: contextForm } = React.useContext(ConfigContext);
@ -49,7 +48,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
prefixCls: customizePrefixCls,
className,
rootClassName,
size = contextSize,
size,
disabled = contextDisabled,
form,
colon,
@ -66,6 +65,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
...restFormProps
} = props;
const mergedSize = useSize(size);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
useFormWarning(props);
@ -100,7 +101,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
[`${prefixCls}-${layout}`]: true,
[`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-${mergedSize}`]: mergedSize,
},
hashId,
className,
@ -156,7 +157,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
return wrapSSR(
<DisabledContextProvider disabled={disabled}>
<SizeContextProvider size={size}>
<SizeContextProvider size={mergedSize}>
<FormContext.Provider value={formContextValue}>
<FieldForm
id={name}

24
components/input-number/index.tsx
View File

@ -5,15 +5,15 @@ import classNames from 'classnames';
import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
import RcInputNumber from 'rc-input-number';
import * as React from 'react';
import { cloneElement } from '../_util/reactNode';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import ConfigProvider, { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext, NoFormStyle } from '../form/context';
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
import { cloneElement } from '../_util/reactNode';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import useStyle from './style';
export interface InputNumberProps<T extends ValueType = ValueType>
@ -32,7 +32,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const [focused, setFocus] = React.useState(false);
const inputRef = React.useRef<HTMLInputElement>(null);
@ -87,7 +87,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
} = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const mergeSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const hasPrefix = prefix != null || hasFeedback;
const hasAddon = !!(addonBefore || addonAfter);
@ -98,8 +98,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
const inputNumberClass = classNames(
{
[`${prefixCls}-lg`]: mergeSize === 'large',
[`${prefixCls}-sm`]: mergeSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
@ -132,8 +132,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
{
[`${prefixCls}-affix-wrapper-focused`]: focused,
[`${prefixCls}-affix-wrapper-disabled`]: props.disabled,
[`${prefixCls}-affix-wrapper-sm`]: mergeSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergeSize === 'large',
[`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-affix-wrapper-readonly`]: readOnly,
[`${prefixCls}-affix-wrapper-borderless`]: !bordered,
@ -184,8 +184,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
const mergedGroupClassName = classNames(
`${prefixCls}-group-wrapper`,
{
[`${prefixCls}-group-wrapper-sm`]: mergeSize === 'small',
[`${prefixCls}-group-wrapper-lg`]: mergeSize === 'large',
[`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
[`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
[`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
},
getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),

17
components/input/Input.tsx
View File

@ -1,24 +1,22 @@
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import classNames from 'classnames';
import type { InputProps as RcInputProps, InputRef } from 'rc-input';
import type { InputRef, InputProps as RcInputProps } from 'rc-input';
import RcInput from 'rc-input';
import type { BaseInputProps } from 'rc-input/lib/interface';
import { composeRef } from 'rc-util/lib/ref';
import React, { forwardRef, useContext, useEffect, useRef } from 'react';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext, NoFormStyle } from '../form/context';
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import warning from '../_util/warning';
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
import { hasPrefixSuffix } from './utils';
// CSSINJS
import useStyle from './style';
import { hasPrefixSuffix } from './utils';
export interface InputFocusOptions extends FocusOptions {
cursor?: 'start' | 'end' | 'all';
@ -99,8 +97,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
// ===================== Size =====================
const size = React.useContext(SizeContext);
const mergedSize = compactSize || customSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

8
components/input/Search.tsx
View File

@ -2,11 +2,11 @@ import SearchOutlined from '@ant-design/icons/SearchOutlined';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react';
import { cloneElement } from '../_util/reactNode';
import Button from '../button';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import { useCompactItemContext } from '../space/Compact';
import { cloneElement } from '../_util/reactNode';
import type { InputProps, InputRef } from './Input';
import Input from './Input';
@ -42,14 +42,14 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const contextSize = React.useContext(SizeContext);
const composedRef = React.useRef<boolean>(false);
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const { compactSize } = useCompactItemContext(prefixCls, direction);
const size = compactSize || customizeSize || contextSize;
const size = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const inputRef = React.useRef<InputRef>(null);

27
components/input/TextArea.tsx
View File

@ -1,21 +1,21 @@
import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea/lib/interface';
import type { TextAreaRef as RcTextAreaRef } from 'rc-textarea';
import { forwardRef } from 'react';
import * as React from 'react';
import RcTextArea from 'rc-textarea';
import classNames from 'classnames';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import classNames from 'classnames';
import type { BaseInputProps } from 'rc-input/lib/interface';
import { FormItemInputContext } from '../form/context';
import useStyle from './style';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import type { TextAreaRef as RcTextAreaRef } from 'rc-textarea';
import RcTextArea from 'rc-textarea';
import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea/lib/interface';
import * as React from 'react';
import { forwardRef } from 'react';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import type { InputFocusOptions } from './Input';
import { triggerFocus } from './Input';
import DisabledContext from '../config-provider/DisabledContext';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
export interface TextAreaProps extends Omit<RcTextAreaProps, 'suffix'> {
bordered?: boolean;
@ -47,8 +47,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
const { getPrefixCls, direction } = React.useContext(ConfigContext);
// ===================== Size =====================
const size = React.useContext(SizeContext);
const mergedSize = customizeSize || size;
const mergedSize = useSize(customizeSize);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

6
components/pagination/Pagination.tsx
View File

@ -8,7 +8,7 @@ import RcPagination from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import { useLocale } from '../locale';
import { MiddleSelect, MiniSelect } from './Select';
@ -99,8 +99,8 @@ const Pagination: React.FC<PaginationProps> = ({
const locale = { ...contextLocale, ...customLocale };
const size = React.useContext(SizeContext);
const mergedSize = customizeSize ?? size;
const mergedSize = useSize(customizeSize);
const isSmall = mergedSize === 'small' || !!(xs && !mergedSize && responsive);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);

9
components/radio/group.tsx
View File

@ -1,18 +1,16 @@
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import { RadioGroupContextProvider } from './context';
import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupProps } from './interface';
import Radio from './radio';
import useStyle from './style';
const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const [value, setValue] = useMergedState(props.defaultValue, {
value: props.value,
@ -86,7 +84,8 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
});
}
const mergedSize = customizeSize || size;
const mergedSize = useSize(customizeSize);
const classString = classNames(
groupPrefixCls,
`${groupPrefixCls}-${buttonStyle}`,

7
components/segmented/index.tsx
View File

@ -6,11 +6,9 @@ import type {
} from 'rc-segmented';
import RcSegmented from 'rc-segmented';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useStyle from './style';
export type { SegmentedValue } from 'rc-segmented';
@ -61,8 +59,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
const [wrapSSR, hashId] = useStyle(prefixCls);
// ===================== Size =====================
const size = React.useContext(SizeContext);
const mergedSize = customSize || size;
const mergedSize = useSize(customSize);
// syntactic sugar to support `icon` for Segmented Item
const extendedOptions = React.useMemo<RCSegmentedProps['options']>(

5
components/select/index.tsx
View File

@ -15,8 +15,8 @@ import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import { useCompactItemContext } from '../space/Compact';
import useStyle from './style';
@ -96,7 +96,6 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
dropdownMatchSelectWidth,
select,
} = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const prefixCls = getPrefixCls('select', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
@ -161,7 +160,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
hashId,
);
const mergedSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

17
components/space/Compact.tsx
View File

@ -5,8 +5,8 @@ import * as React from 'react';
import type { DirectionType } from '../config-provider';
import { ConfigContext } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import useStyle from './style';
export interface SpaceCompactItemContextType {
@ -23,9 +23,10 @@ export const SpaceCompactItemContext = React.createContext<SpaceCompactItemConte
export const useCompactItemContext = (prefixCls: string, direction: DirectionType) => {
const compactItemContext = React.useContext(SpaceCompactItemContext);
const compactItemClassnames = React.useMemo(() => {
if (!compactItemContext) return '';
const compactItemClassnames = React.useMemo<string>(() => {
if (!compactItemContext) {
return '';
}
const { compactDirection, isFirstItem, isLastItem } = compactItemContext;
const separator = compactDirection === 'vertical' ? '-vertical-' : '-';
@ -65,10 +66,9 @@ const CompactItem: React.FC<React.PropsWithChildren<SpaceCompactItemContextType>
const Compact: React.FC<SpaceCompactProps> = (props) => {
const { getPrefixCls, direction: directionConfig } = React.useContext(ConfigContext);
const sizeInContext = React.useContext(SizeContext);
const {
size = sizeInContext || 'middle',
size,
direction,
block,
prefixCls: customizePrefixCls,
@ -78,6 +78,8 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
...restProps
} = props;
const mergedSize = useSize((ctx) => size ?? ctx ?? 'middle');
const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const clx = classNames(
@ -99,11 +101,10 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
() =>
childNodes.map((child, i) => {
const key = (child && child.key) || `${prefixCls}-item-${i}`;
return (
<CompactItem
key={key}
compactSize={size}
compactSize={mergedSize}
compactDirection={direction}
isFirstItem={i === 0 && (!compactItemContext || compactItemContext?.isFirstItem)}
isLastItem={

8
components/steps/index.tsx
View File

@ -4,17 +4,17 @@ import classNames from 'classnames';
import RcSteps from 'rc-steps';
import type {
ProgressDotRender,
StepIconRender,
StepsProps as RcStepsProps,
StepIconRender,
} from 'rc-steps/lib/Steps';
import * as React from 'react';
import Tooltip from '../tooltip';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import Progress from '../progress';
import useLegacyItems from './useLegacyItems';
import Tooltip from '../tooltip';
import useStyle from './style';
import useSize from '../_util/hooks/useSize';
import useLegacyItems from './useLegacyItems';
export interface StepProps {
className?: string;

13
components/switch/index.tsx
View File

@ -2,13 +2,11 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import RcSwitch from 'rc-switch';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import SizeContext from '../config-provider/SizeContext';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import useSize from '../config-provider/hooks/useSize';
import useStyle from './style';
export type SwitchSize = 'small' | 'default';
@ -65,7 +63,6 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
@ -81,9 +78,11 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const mergedSize = useSize(customizeSize);
const classes = classNames(
{
[`${prefixCls}-small`]: (customizeSize || size) === 'small',
[`${prefixCls}-small`]: mergedSize === 'small',
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-rtl`]: direction === 'rtl',
},

6
components/table/InternalTable.tsx
View File

@ -8,10 +8,10 @@ import type { Breakpoint } from '../_util/responsiveObserver';
import scrollTo from '../_util/scrollTo';
import warning from '../_util/warning';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import type { ConfigConsumerProps } from '../config-provider/context';
import { ConfigContext } from '../config-provider/context';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import useSize from '../config-provider/hooks/useSize';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import defaultLocale from '../locale/en_US';
import Pagination from '../pagination';
@ -173,8 +173,6 @@ const InternalTable = <RecordType extends AnyObject = any>(
const tableProps: TableProps<RecordType> = omit(props, ['className', 'style', 'columns']);
const size = React.useContext<SizeType>(SizeContext);
const {
locale: contextLocale = defaultLocale,
direction,
@ -183,7 +181,7 @@ const InternalTable = <RecordType extends AnyObject = any>(
getPopupContainer: getContextPopupContainer,
} = React.useContext<ConfigConsumerProps>(ConfigContext);
const mergedSize = customizeSize || size;
const mergedSize = useSize(customizeSize);
const tableLocale: TableLocale = { ...contextLocale.Table, ...locale };
const rawData: readonly RecordType[] = dataSource || EMPTY_LIST;

13
components/tabs/index.tsx
View File

@ -6,14 +6,13 @@ import type { TabsProps as RcTabsProps } from 'rc-tabs';
import RcTabs from 'rc-tabs';
import type { EditableConfig } from 'rc-tabs/lib/interface';
import * as React from 'react';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import warning from '../_util/warning';
import useSize from '../config-provider/hooks/useSize';
import TabPane, { type TabPaneProps } from './TabPane';
import useAnimateConfig from './hooks/useAnimateConfig';
import useLegacyItems from './hooks/useLegacyItems';
import TabPane, { type TabPaneProps } from './TabPane';
import useStyle from './style';
export type TabsType = 'line' | 'card' | 'editable-card';
@ -36,7 +35,7 @@ function Tabs({
type,
className,
rootClassName,
size: propSize,
size: customSize,
onEdit,
hideAdd,
centered,
@ -75,9 +74,7 @@ function Tabs({
const mergedAnimated = useAnimateConfig(prefixCls, animated);
const contextSize = React.useContext<SizeType>(SizeContext);
const size = propSize !== undefined ? propSize : contextSize;
const size = useSize(customSize);
return wrapSSR(
<RcTabs

6
components/tree-select/index.tsx
View File

@ -15,8 +15,8 @@ import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import useSelectStyle from '../select/style';
import useBuiltinPlacements from '../select/useBuiltinPlacements';
@ -108,7 +108,6 @@ const InternalTreeSelect = <
virtual,
dropdownMatchSelectWidth,
} = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
if (process.env.NODE_ENV !== 'production') {
warning(
@ -192,7 +191,8 @@ const InternalTreeSelect = <
const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements);
const mergedSize = compactSize || customizeSize || size;
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;

2
scripts/check-commit.ts
View File

@ -17,7 +17,7 @@ function exitProcess(code = 1) {
async function checkVersion() {
try {
const { versions } = await fetch('http://registry.npmjs.org/antd').then((res: any) =>
const { versions } = await fetch('http://registry.npmjs.org/antd').then((res: Response) =>
res.json(),
);
if (version in versions) {

Write Preview
Loading…
Cancel
Save