mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
chore(list): improve code (#24280)
* chore(list): improve code * Update index.tsx
This commit is contained in:
parent
ce78029933
commit
baa56b6d85
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { ListGridType, ListContext } from './index';
|
||||
import { Col } from '../grid';
|
||||
@ -136,9 +135,4 @@ const Item: ListItemTypeProps = props => {
|
||||
|
||||
Item.Meta = Meta;
|
||||
|
||||
Item.contextTypes = {
|
||||
grid: PropTypes.any,
|
||||
itemLayout: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Item;
|
||||
|
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Spin, { SpinProps } from '../spin';
|
||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||
import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
|
||||
@ -67,7 +66,26 @@ export const ListContext = React.createContext<ListConsumerProps>({});
|
||||
|
||||
export const ListConsumer = ListContext.Consumer;
|
||||
|
||||
function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
function List<T>({
|
||||
pagination = false as ListProps<any>['pagination'],
|
||||
prefixCls: customizePrefixCls,
|
||||
bordered = false,
|
||||
split = true,
|
||||
className,
|
||||
children,
|
||||
itemLayout,
|
||||
loadMore,
|
||||
grid,
|
||||
dataSource = [],
|
||||
size,
|
||||
header,
|
||||
footer,
|
||||
loading = false,
|
||||
rowKey,
|
||||
renderItem,
|
||||
locale,
|
||||
...rest
|
||||
}: ListProps<T>) {
|
||||
const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
|
||||
|
||||
const [paginationCurrent, setPaginationCurrent] = React.useState(
|
||||
@ -98,9 +116,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
|
||||
const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
|
||||
|
||||
const renderItem = (item: any, index: number) => {
|
||||
const { rowKey } = props;
|
||||
if (!props.renderItem) return null;
|
||||
const renderInnerItem = (item: any, index: number) => {
|
||||
if (!renderItem) return null;
|
||||
|
||||
let key;
|
||||
|
||||
@ -118,17 +135,14 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
|
||||
keys[index] = key;
|
||||
|
||||
return props.renderItem(item, index);
|
||||
return renderItem(item, index);
|
||||
};
|
||||
|
||||
const isSomethingAfterLastItem = () => {
|
||||
const { loadMore, footer } = props;
|
||||
return !!(loadMore || pagination || footer);
|
||||
};
|
||||
|
||||
const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
|
||||
const { locale } = props;
|
||||
|
||||
return (
|
||||
<div className={`${prefixCls}-empty-text`}>
|
||||
{(locale && locale.emptyText) || renderEmptyHandler('List')}
|
||||
@ -136,23 +150,6 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
);
|
||||
};
|
||||
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
bordered,
|
||||
split,
|
||||
className,
|
||||
children,
|
||||
itemLayout,
|
||||
loadMore,
|
||||
grid,
|
||||
dataSource = [],
|
||||
size,
|
||||
header,
|
||||
footer,
|
||||
loading,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const prefixCls = getPrefixCls('list', customizePrefixCls);
|
||||
let loadingProp = loading;
|
||||
if (typeof loadingProp === 'boolean') {
|
||||
@ -246,7 +243,7 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
|
||||
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
|
||||
if (splitDataSource.length > 0) {
|
||||
const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
|
||||
const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
|
||||
const childrenList = React.Children.map(items, (child: any, index) =>
|
||||
cloneElement(child, {
|
||||
key: keys[index],
|
||||
@ -265,8 +262,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
const paginationPosition = paginationProps.position || 'bottom';
|
||||
|
||||
return (
|
||||
<ListContext.Provider value={{ grid: props.grid, itemLayout: props.itemLayout }}>
|
||||
<div className={classString} {...omit(rest, ['rowKey', 'renderItem', 'locale'])}>
|
||||
<ListContext.Provider value={{ grid, itemLayout }}>
|
||||
<div className={classString} {...rest}>
|
||||
{(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
|
||||
{header && <div className={`${prefixCls}-header`}>{header}</div>}
|
||||
<Spin {...loadingProp}>
|
||||
@ -281,14 +278,6 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
);
|
||||
}
|
||||
|
||||
List.defaultProps = {
|
||||
dataSource: [],
|
||||
bordered: false,
|
||||
split: true,
|
||||
loading: false,
|
||||
pagination: false as ListProps<any>['pagination'],
|
||||
};
|
||||
|
||||
List.Item = Item;
|
||||
|
||||
export default List;
|
||||
|
Loading…
Reference in New Issue
Block a user