ant-design/components/list/index.tsx

284 lines
7.6 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import classNames from 'classnames';
2019-08-05 18:38:10 +08:00
import Spin, { SpinProps } from '../spin';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
import { RenderEmptyHandler, ConfigContext } from '../config-provider';
import Pagination, { PaginationConfig } from '../pagination';
2017-08-14 11:08:19 +08:00
import { Row } from '../grid';
import Item from './Item';
import { cloneElement } from '../_util/reactNode';
export { ListItemProps, ListItemMetaProps } from './Item';
export type ColumnCount = number;
2017-11-21 19:02:04 +08:00
2018-12-07 20:02:01 +08:00
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
2017-08-14 22:25:17 +08:00
export interface ListGridType {
2017-08-14 11:08:19 +08:00
gutter?: number;
2017-11-21 19:02:04 +08:00
column?: ColumnCount;
xs?: ColumnCount;
sm?: ColumnCount;
md?: ColumnCount;
lg?: ColumnCount;
xl?: ColumnCount;
xxl?: ColumnCount;
2017-08-14 11:08:19 +08:00
}
export type ListSize = 'small' | 'default' | 'large';
export type ListItemLayout = 'horizontal' | 'vertical';
2019-03-28 18:55:52 +08:00
export interface ListProps<T> {
bordered?: boolean;
className?: string;
2019-05-08 22:54:17 +08:00
style?: React.CSSProperties;
children?: React.ReactNode;
dataSource?: T[];
extra?: React.ReactNode;
grid?: ListGridType;
id?: string;
itemLayout?: ListItemLayout;
loading?: boolean | SpinProps;
loadMore?: React.ReactNode;
pagination?: PaginationConfig | false;
prefixCls?: string;
rowKey?: ((item: T) => string) | string;
renderItem?: (item: T, index: number) => React.ReactNode;
size?: ListSize;
split?: boolean;
header?: React.ReactNode;
footer?: React.ReactNode;
2018-12-26 16:01:00 +08:00
locale?: ListLocale;
}
2017-11-21 19:02:04 +08:00
export interface ListLocale {
emptyText: React.ReactNode | (() => React.ReactNode);
2017-11-21 19:02:04 +08:00
}
export interface ListConsumerProps {
grid?: any;
itemLayout?: string;
}
export const ListContext = React.createContext<ListConsumerProps>({});
export const ListConsumer = ListContext.Consumer;
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(
paginationObj.defaultCurrent || 1,
);
const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
2017-11-17 11:25:29 +08:00
const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
const defaultPaginationProps = {
current: 1,
total: 0,
};
const keys: { [key: string]: string } = {};
const triggerPaginationEvent = (eventName: string) => {
return (page: number, pageSize: number) => {
setPaginationCurrent(page);
setPaginationSize(pageSize);
if (pagination && (pagination as any)[eventName]) {
(pagination as any)[eventName](page, pageSize);
}
};
};
const onPaginationChange = triggerPaginationEvent('onChange');
const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
const renderInnerItem = (item: any, index: number) => {
if (!renderItem) return null;
let key;
if (typeof rowKey === 'function') {
key = rowKey(item);
} else if (typeof rowKey === 'string') {
key = item[rowKey];
} else {
key = item.key;
}
if (!key) {
key = `list-item-${index}`;
}
keys[index] = key;
return renderItem(item, index);
2018-12-07 20:02:01 +08:00
};
const isSomethingAfterLastItem = () => {
2017-10-26 15:36:48 +08:00
return !!(loadMore || pagination || footer);
};
2017-10-26 15:36:48 +08:00
const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
2018-12-26 16:01:00 +08:00
return (
<div className={`${prefixCls}-empty-text`}>
{(locale && locale.emptyText) || renderEmptyHandler('List')}
2018-12-26 16:01:00 +08:00
</div>
);
2018-12-07 20:02:01 +08:00
};
2017-11-17 11:25:29 +08:00
const prefixCls = getPrefixCls('list', customizePrefixCls);
let loadingProp = loading;
if (typeof loadingProp === 'boolean') {
loadingProp = {
spinning: loadingProp,
};
}
const isLoading = loadingProp && loadingProp.spinning;
// large => lg
// small => sm
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
break;
default:
break;
}
const classString = classNames(prefixCls, className, {
[`${prefixCls}-vertical`]: itemLayout === 'vertical',
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-split`]: split,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-loading`]: isLoading,
[`${prefixCls}-grid`]: grid,
[`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const paginationProps = {
...defaultPaginationProps,
total: dataSource.length,
current: paginationCurrent,
pageSize: paginationSize,
...(pagination || {}),
};
const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
if (paginationProps.current > largestPage) {
paginationProps.current = largestPage;
}
const paginationContent = pagination ? (
<div className={`${prefixCls}-pagination`}>
<Pagination
{...paginationProps}
onChange={onPaginationChange}
onShowSizeChange={onPaginationShowSizeChange}
/>
</div>
) : null;
let splitDataSource = [...dataSource];
if (pagination) {
if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
splitDataSource = [...dataSource].splice(
(paginationProps.current - 1) * paginationProps.pageSize,
paginationProps.pageSize,
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
);
2017-11-17 11:25:29 +08:00
}
}
const screens = useBreakpoint();
const currentBreakpoint = React.useMemo(() => {
for (let i = 0; i < responsiveArray.length; i += 1) {
const breakpoint: Breakpoint = responsiveArray[i];
if (screens[breakpoint]) {
return breakpoint;
}
}
return undefined;
}, [screens]);
const colStyle = React.useMemo(() => {
if (!grid) {
return undefined;
}
const columnCount =
currentBreakpoint && grid[currentBreakpoint] ? grid[currentBreakpoint] : grid.column;
if (columnCount) {
return {
width: `${100 / columnCount}%`,
maxWidth: `${100 / columnCount}%`,
};
}
}, [grid?.column, currentBreakpoint]);
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
if (splitDataSource.length > 0) {
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],
colStyle,
}),
);
childrenContent = grid ? (
<Row gutter={grid.gutter}>{childrenList}</Row>
) : (
<ul className={`${prefixCls}-items`}>{childrenList}</ul>
);
} else if (!children && !isLoading) {
childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
}
2017-08-14 11:08:19 +08:00
const paginationPosition = paginationProps.position || 'bottom';
return (
<ListContext.Provider value={{ grid, itemLayout }}>
<div className={classString} {...rest}>
{(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
{header && <div className={`${prefixCls}-header`}>{header}</div>}
<Spin {...loadingProp}>
{childrenContent}
{children}
</Spin>
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
2018-12-07 20:02:01 +08:00
{loadMore ||
((paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)}
</div>
</ListContext.Provider>
);
}
List.Item = Item;
export default List;