chore: unify useContext usage (#39314)

* feat: replace useContext to React.useContext

* docs(checkbox): update defaultValue、value type
This commit is contained in:
wangxingkang 2022-12-06 21:09:59 +08:00 committed by GitHub
parent 8cb46243fd
commit 2ad7a98368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 25 additions and 33 deletions

View File

@ -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 =====================

View File

@ -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);

View File

@ -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

View File

@ -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

View File

@ -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;

View File

@ -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();

View File

@ -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;

View File

@ -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.');

View File

@ -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 =====================

View File

@ -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 =====================