test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: use React.useContext replace <Context.ConfigConsumer /> (#40091)

Browse Source 
* chore: use React.useContext replace <Context.ConfigConsumer />

* add
This commit is contained in:
lijianan 2023-01-09 10:04:35 +08:00 committed by GitHub
parent b242dde04c
commit 6b4f94785c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 72 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/cascader/index.tsx
View File

@ -14,7 +14,7 @@ import RcCascader from 'rc-cascader';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
@ -187,7 +187,9 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
}
// =================== No Found ====================
const mergedNotFoundContent = notFoundContent || (renderEmpty || defaultRenderEmpty)('Cascader');
const mergedNotFoundContent = notFoundContent || renderEmpty?.('Cascader') || (
<DefaultRenderEmpty componentName="Cascader" />
);
// ==================== Prefix =====================
const rootPrefixCls = getPrefixCls();

55
components/config-provider/defaultRenderEmpty.tsx
View File

@ -1,34 +1,33 @@
import * as React from 'react';
import React, { useContext } from 'react';
import { ConfigContext } from '.';
import type { ConfigConsumerProps } from '.';
import { ConfigConsumer } from '.';
import Empty from '../empty';
const defaultRenderEmpty = (componentName?: string): React.ReactNode => (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const prefix = getPrefixCls('empty');
interface EmptyProps {
componentName?: string;
}
switch (componentName) {
case 'Table':
case 'List':
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
const DefaultRenderEmpty: React.FC<EmptyProps> = (props) => {
const { componentName } = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefix = getPrefixCls('empty');
switch (componentName) {
case 'Table':
case 'List':
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
case 'Select':
case 'TreeSelect':
case 'Cascader':
case 'Transfer':
case 'Mentions':
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
/* istanbul ignore next */
default:
// Should never hit if we take all the component into consider.
return <Empty />;
}
};
case 'Select':
case 'TreeSelect':
case 'Cascader':
case 'Transfer':
case 'Mentions':
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
export type RenderEmptyHandler = (componentName?: string) => React.ReactNode;
/* istanbul ignore next */
default:
// Should never hit if we take all the component into consider.
return <Empty />;
}
}}
</ConfigConsumer>
);
export type RenderEmptyHandler = typeof defaultRenderEmpty;
export default defaultRenderEmpty;
export default DefaultRenderEmpty;

20
components/list/index.tsx
View File

@ -1,9 +1,8 @@
import classNames from 'classnames';
// eslint-disable-next-line import/no-named-as-default
import * as React from 'react';
import type { RenderEmptyHandler } from '../config-provider';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import { Row } from '../grid';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import type { PaginationConfig } from '../pagination';
@ -143,13 +142,8 @@ function List<T>({
const isSomethingAfterLastItem = () => !!(loadMore || pagination || footer);
const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => (
<div className={`${prefixCls}-empty-text`}>
{(locale && locale.emptyText) || renderEmptyHandler('List')}
</div>
);
const prefixCls = getPrefixCls('list', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
@ -253,7 +247,7 @@ function List<T>({
}
}, [grid?.column, currentBreakpoint]);
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
let childrenContent: React.ReactNode = isLoading && <div style={{ minHeight: 53 }} />;
if (splitDataSource.length > 0) {
const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
childrenContent = grid ? (
@ -268,7 +262,13 @@ function List<T>({
<ul className={`${prefixCls}-items`}>{items}</ul>
);
} else if (!children && !isLoading) {
childrenContent = renderEmptyFunc(prefixCls, renderEmpty || defaultRenderEmpty);
childrenContent = (
<div className={`${prefixCls}-empty-text`}>
{(locale && locale.emptyText) || renderEmpty?.('List') || (
<DefaultRenderEmpty componentName="List" />
)}
</div>
);
}
const paginationPosition = paginationProps.position || 'bottom';

20
components/mentions/index.tsx
View File

@ -9,7 +9,7 @@ import { composeRef } from 'rc-util/lib/ref';
// eslint-disable-next-line import/no-named-as-default
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import { FormItemInputContext } from '../form/context';
import genPurePanel from '../_util/PurePanel';
import Spin from '../spin';
@ -118,13 +118,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
setFocused(false);
};
const getNotFoundContent = () => {
const notFoundContentEle = React.useMemo<React.ReactNode>(() => {
if (notFoundContent !== undefined) {
return notFoundContent;
}
return (renderEmpty || defaultRenderEmpty)('Select');
};
return renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
}, [notFoundContent, renderEmpty]);
const getOptions = () => {
if (loading) {
@ -148,12 +147,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
]
: options;
const getFilterOption = (): any => {
if (loading) {
return loadingFilterOption;
}
return filterOption;
};
const mentionsfilterOption = loading ? loadingFilterOption : filterOption;
const prefixCls = getPrefixCls('mentions', customizePrefixCls);
@ -174,12 +168,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
const mentions = (
<RcMentions
prefixCls={prefixCls}
notFoundContent={getNotFoundContent()}
notFoundContent={notFoundContentEle}
className={mergedClassName}
disabled={disabled}
direction={direction}
{...restProps}
filterOption={getFilterOption()}
filterOption={mentionsfilterOption}
onFocus={onFocus}
onBlur={onBlur}
dropdownClassName={classNames(popupClassName, hashId)}

4
components/select/index.tsx
View File

@ -8,7 +8,7 @@ import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
@ -135,7 +135,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
} else if (mode === 'combobox') {
mergedNotFound = null;
} else {
mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
mergedNotFound = renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
}
// ===================== Icons =====================

9
components/table/InternalTable.tsx
View File

@ -6,7 +6,7 @@ import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { ConfigConsumerProps } from '../config-provider/context';
import { ConfigContext } from '../config-provider/context';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import useBreakpoint from '../grid/hooks/useBreakpoint';
@ -519,6 +519,11 @@ function InternalTable<RecordType extends object = any>(
className,
hashId,
);
const emptyText = (locale && locale.emptyText) || renderEmpty?.('Table') || (
<DefaultRenderEmpty componentName="Table" />
);
return wrapSSR(
<div ref={ref} className={wrapperClassNames} style={style}>
<Spin spinning={false} {...spinProps}>
@ -538,7 +543,7 @@ function InternalTable<RecordType extends object = any>(
data={pageData}
rowKey={getRowKey}
rowClassName={internalRowClassName}
emptyText={(locale && locale.emptyText) || (renderEmpty || defaultRenderEmpty)('Table')}
emptyText={emptyText}
// Internal
internalHooks={INTERNAL_HOOKS}
internalRefs={internalRefs as any}

18
components/transfer/index.tsx
View File

@ -1,9 +1,9 @@
import classNames from 'classnames';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import type { ChangeEvent, CSSProperties } from 'react';
import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import type { FormItemStatusContextProps } from '../form/context';
import { FormItemInputContext } from '../form/context';
import LocaleReceiver from '../locale/LocaleReceiver';
@ -201,12 +201,6 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
const getTitles = (transferLocale: TransferLocale): React.ReactNode[] =>
titles ?? transferLocale.titles ?? [];
const getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => ({
...transferLocale,
notFoundContent: renderEmpty('Transfer'),
...locale,
});
const handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
onScroll?.('left', e);
};
@ -338,6 +332,12 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
const { getPrefixCls, renderEmpty, direction } = configContext;
const { hasFeedback, status } = formItemContext;
const getLocale = (transferLocale: TransferLocale) => ({
...transferLocale,
notFoundContent: renderEmpty?.('Transfer') || <DefaultRenderEmpty componentName="Transfer" />,
...locale,
});
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
const mergedStatus = getMergedStatus(status, customStatus);
const mergedPagination = !children && pagination;
@ -359,7 +359,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
return (
<LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
{(contextLocale) => {
const listLocale = getLocale(contextLocale, renderEmpty || defaultRenderEmpty);
const listLocale = getLocale(contextLocale);
const [leftTitle, rightTitle] = getTitles(listLocale);
return (
<TransferFC prefixCls={prefixCls} className={cls} style={style}>

2
components/transfer/list.tsx
View File

@ -238,7 +238,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
const checkBox = (
<Checkbox
disabled={dataSource.length === 0 || props.disabled}
disabled={dataSource.length === 0 || disabled}
checked={checkStatus === 'all'}
indeterminate={checkStatus === 'part'}
className={`${prefixCls}-checkbox`}

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

@ -5,8 +5,9 @@ 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 type { Placement } from 'rc-select/lib/BaseSelect';
import { ConfigContext } from '../config-provider';
import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
@ -160,7 +161,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
if (notFoundContent !== undefined) {
mergedNotFound = notFoundContent;
} else {
mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
mergedNotFound = renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
}
// ==================== Render =====================
@ -173,13 +174,11 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
]);
// ===================== Placement =====================
const getPlacement = () => {
const getPlacement = (): Placement => {
if (placement !== undefined) {
return placement;
}
return direction === 'rtl'
? ('bottomRight' as SelectCommonPlacement)
: ('bottomLeft' as SelectCommonPlacement);
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
};
const mergedSize = compactSize || customizeSize || size;