mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
chore: unify useContext usage (#39314)
* feat: replace useContext to React.useContext * docs(checkbox): update defaultValue、value type
This commit is contained in:
parent
8cb46243fd
commit
2ad7a98368
@ -13,7 +13,6 @@ import type {
|
||||
import RcCascader from 'rc-cascader';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
@ -158,7 +157,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
direction: rootDirection,
|
||||
// virtual,
|
||||
// dropdownMatchSelectWidth,
|
||||
} = useContext(ConfigContext);
|
||||
} = React.useContext(ConfigContext);
|
||||
|
||||
const mergedDirection = direction || rootDirection;
|
||||
const isRtl = mergedDirection === 'rtl';
|
||||
@ -169,7 +168,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
hasFeedback,
|
||||
isFormItemInput,
|
||||
feedbackIcon,
|
||||
} = useContext(FormItemInputContext);
|
||||
} = React.useContext(FormItemInputContext);
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
// =================== Warning =====================
|
||||
|
@ -1,7 +1,6 @@
|
||||
import classNames from 'classnames';
|
||||
import RcCheckbox from 'rc-checkbox';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import warning from '../_util/warning';
|
||||
@ -65,8 +64,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
|
||||
) => {
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const checkboxGroup = React.useContext(GroupContext);
|
||||
const { isFormItemInput } = useContext(FormItemInputContext);
|
||||
const contextDisabled = useContext(DisabledContext);
|
||||
const { isFormItemInput } = React.useContext(FormItemInputContext);
|
||||
const contextDisabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;
|
||||
|
||||
const prevValue = React.useRef(restProps.value);
|
||||
|
@ -44,11 +44,11 @@ Checkbox component.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | Default selected value | string\[] | \[] | |
|
||||
| defaultValue | Default selected value | (string \| number)\[] | \[] | |
|
||||
| disabled | If disable all checkboxes | boolean | false | |
|
||||
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
|
||||
| options | Specifies options | string\[] \| number\[] \| Option\[] | \[] | |
|
||||
| value | Used for setting the currently selected value | string\[] | \[] | |
|
||||
| value | Used for setting the currently selected value | (string \| number)\[] | \[] | |
|
||||
| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |
|
||||
|
||||
### Methods
|
||||
|
@ -32,24 +32,24 @@ demo:
|
||||
|
||||
#### Checkbox
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------- | --------------------------------------- | ----------------- | ------ | ---- |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| checked | 指定当前是否选中 | boolean | false | |
|
||||
| defaultChecked | 初始是否选中 | boolean | false | |
|
||||
| disabled | 失效状态 | boolean | false | |
|
||||
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | false | |
|
||||
| onChange | 变化时的回调函数 | function(e: CheckboxChangeEvent) | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| checked | 指定当前是否选中 | boolean | false | |
|
||||
| defaultChecked | 初始是否选中 | boolean | false | |
|
||||
| disabled | 失效状态 | boolean | false | |
|
||||
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | false | |
|
||||
| onChange | 变化时的回调函数 | function(e: CheckboxChangeEvent) | - | |
|
||||
|
||||
#### Checkbox Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认选中的选项 | string\[] | \[] | |
|
||||
| defaultValue | 默认选中的选项 | (string \| number)\[] | \[] | |
|
||||
| disabled | 整组失效 | boolean | false | |
|
||||
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | |
|
||||
| options | 指定可选项 | string\[] \| number\[] \| Option\[] | \[] | |
|
||||
| value | 指定选中的选项 | string\[] | \[] | |
|
||||
| value | 指定选中的选项 | (string \| number)\[] | \[] | |
|
||||
| onChange | 变化时的回调函数 | function(checkedValue) | - | |
|
||||
|
||||
##### Option
|
||||
|
@ -6,7 +6,6 @@ import type { Meta, NamePath } from 'rc-field-form/lib/interface';
|
||||
import useState from 'rc-util/lib/hooks/useState';
|
||||
import { supportRef } from 'rc-util/lib/ref';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import useFormItemStatus from '../hooks/useFormItemStatus';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import { cloneElement, isValidElement } from '../../_util/reactNode';
|
||||
@ -107,12 +106,12 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
|
||||
validateTrigger,
|
||||
hidden,
|
||||
} = props;
|
||||
const { getPrefixCls } = useContext(ConfigContext);
|
||||
const { name: formName } = useContext(FormContext);
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const { name: formName } = React.useContext(FormContext);
|
||||
const isRenderProps = typeof children === 'function';
|
||||
const notifyParentMetaChange = useContext(NoStyleItemContext);
|
||||
const notifyParentMetaChange = React.useContext(NoStyleItemContext);
|
||||
|
||||
const { validateTrigger: contextValidateTrigger } = useContext(FieldContext);
|
||||
const { validateTrigger: contextValidateTrigger } = React.useContext(FieldContext);
|
||||
const mergedValidateTrigger =
|
||||
validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
|
||||
|
||||
|
@ -2,7 +2,6 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined';
|
||||
import classNames from 'classnames';
|
||||
import RcImage, { type ImageProps } from 'rc-image';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import defaultLocale from '../locale/en_US';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
@ -24,7 +23,7 @@ const Image: CompositionImage<ImageProps> = ({
|
||||
getPrefixCls,
|
||||
locale: contextLocale = defaultLocale,
|
||||
getPopupContainer: getContextPopupContainer,
|
||||
} = useContext(ConfigContext);
|
||||
} = React.useContext(ConfigContext);
|
||||
|
||||
const prefixCls = getPrefixCls('image', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
@ -5,7 +5,6 @@ import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
|
||||
import RcInputNumber from 'rc-input-number';
|
||||
import type { ValueType } from '@rc-component/mini-decimal';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import ConfigProvider, { ConfigContext } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
@ -83,7 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
status: contextStatus,
|
||||
isFormItemInput,
|
||||
feedbackIcon,
|
||||
} = useContext(FormItemInputContext);
|
||||
} = React.useContext(FormItemInputContext);
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
const mergeSize = compactSize || customizeSize || size;
|
||||
|
@ -2,7 +2,6 @@ import classNames from 'classnames';
|
||||
import RcCheckbox from 'rc-checkbox';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
@ -19,7 +18,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const innerRef = React.useRef<HTMLElement>();
|
||||
const mergedRef = composeRef(ref, innerRef);
|
||||
const { isFormItemInput } = useContext(FormItemInputContext);
|
||||
const { isFormItemInput } = React.useContext(FormItemInputContext);
|
||||
|
||||
warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
|
||||
|
||||
|
@ -7,7 +7,6 @@ import type { OptionProps } from 'rc-select/lib/Option';
|
||||
import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
@ -125,7 +124,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
hasFeedback,
|
||||
isFormItemInput,
|
||||
feedbackIcon,
|
||||
} = useContext(FormItemInputContext);
|
||||
} = React.useContext(FormItemInputContext);
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
// ===================== Empty =====================
|
||||
|
@ -5,7 +5,6 @@ import RcTreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode } from 'rc-tr
|
||||
import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeSelect';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
@ -143,7 +142,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
|
||||
hasFeedback,
|
||||
isFormItemInput,
|
||||
feedbackIcon,
|
||||
} = useContext(FormItemInputContext);
|
||||
} = React.useContext(FormItemInputContext);
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
// ===================== Icons =====================
|
||||
|
Loading…
Reference in New Issue
Block a user