index.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. "use client";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import * as React from 'react';
  12. import classNames from 'classnames';
  13. import extendsObject from '../_util/extendsObject';
  14. import { responsiveArray } from '../_util/responsiveObserver';
  15. import { ConfigContext } from '../config-provider';
  16. import { useComponentConfig } from '../config-provider/context';
  17. import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
  18. import useSize from '../config-provider/hooks/useSize';
  19. import { Row } from '../grid';
  20. import useBreakpoint from '../grid/hooks/useBreakpoint';
  21. import Pagination from '../pagination';
  22. import Spin from '../spin';
  23. import { ListContext } from './context';
  24. import Item from './Item';
  25. import useStyle from './style';
  26. function InternalList(props, ref) {
  27. const {
  28. pagination = false,
  29. prefixCls: customizePrefixCls,
  30. bordered = false,
  31. split = true,
  32. className,
  33. rootClassName,
  34. style,
  35. children,
  36. itemLayout,
  37. loadMore,
  38. grid,
  39. dataSource = [],
  40. size: customizeSize,
  41. header,
  42. footer,
  43. loading = false,
  44. rowKey,
  45. renderItem,
  46. locale
  47. } = props,
  48. rest = __rest(props, ["pagination", "prefixCls", "bordered", "split", "className", "rootClassName", "style", "children", "itemLayout", "loadMore", "grid", "dataSource", "size", "header", "footer", "loading", "rowKey", "renderItem", "locale"]);
  49. const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
  50. const [paginationCurrent, setPaginationCurrent] = React.useState(paginationObj.defaultCurrent || 1);
  51. const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
  52. const {
  53. getPrefixCls,
  54. direction,
  55. className: contextClassName,
  56. style: contextStyle
  57. } = useComponentConfig('list');
  58. const {
  59. renderEmpty
  60. } = React.useContext(ConfigContext);
  61. const defaultPaginationProps = {
  62. current: 1,
  63. total: 0,
  64. position: 'bottom'
  65. };
  66. const triggerPaginationEvent = eventName => (page, pageSize) => {
  67. var _a;
  68. setPaginationCurrent(page);
  69. setPaginationSize(pageSize);
  70. if (pagination) {
  71. (_a = pagination === null || pagination === void 0 ? void 0 : pagination[eventName]) === null || _a === void 0 ? void 0 : _a.call(pagination, page, pageSize);
  72. }
  73. };
  74. const onPaginationChange = triggerPaginationEvent('onChange');
  75. const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
  76. const renderInternalItem = (item, index) => {
  77. if (!renderItem) {
  78. return null;
  79. }
  80. let key;
  81. if (typeof rowKey === 'function') {
  82. key = rowKey(item);
  83. } else if (rowKey) {
  84. key = item[rowKey];
  85. } else {
  86. key = item.key;
  87. }
  88. if (!key) {
  89. key = `list-item-${index}`;
  90. }
  91. return /*#__PURE__*/React.createElement(React.Fragment, {
  92. key: key
  93. }, renderItem(item, index));
  94. };
  95. const isSomethingAfterLastItem = !!(loadMore || pagination || footer);
  96. const prefixCls = getPrefixCls('list', customizePrefixCls);
  97. // Style
  98. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  99. let loadingProp = loading;
  100. if (typeof loadingProp === 'boolean') {
  101. loadingProp = {
  102. spinning: loadingProp
  103. };
  104. }
  105. const isLoading = !!(loadingProp === null || loadingProp === void 0 ? void 0 : loadingProp.spinning);
  106. const mergedSize = useSize(customizeSize);
  107. // large => lg
  108. // small => sm
  109. let sizeCls = '';
  110. switch (mergedSize) {
  111. case 'large':
  112. sizeCls = 'lg';
  113. break;
  114. case 'small':
  115. sizeCls = 'sm';
  116. break;
  117. default:
  118. break;
  119. }
  120. const classString = classNames(prefixCls, {
  121. [`${prefixCls}-vertical`]: itemLayout === 'vertical',
  122. [`${prefixCls}-${sizeCls}`]: sizeCls,
  123. [`${prefixCls}-split`]: split,
  124. [`${prefixCls}-bordered`]: bordered,
  125. [`${prefixCls}-loading`]: isLoading,
  126. [`${prefixCls}-grid`]: !!grid,
  127. [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem,
  128. [`${prefixCls}-rtl`]: direction === 'rtl'
  129. }, contextClassName, className, rootClassName, hashId, cssVarCls);
  130. const paginationProps = extendsObject(defaultPaginationProps, {
  131. total: dataSource.length,
  132. current: paginationCurrent,
  133. pageSize: paginationSize
  134. }, pagination || {});
  135. const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
  136. paginationProps.current = Math.min(paginationProps.current, largestPage);
  137. const paginationContent = pagination && (/*#__PURE__*/React.createElement("div", {
  138. className: classNames(`${prefixCls}-pagination`)
  139. }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
  140. align: "end"
  141. }, paginationProps, {
  142. onChange: onPaginationChange,
  143. onShowSizeChange: onPaginationShowSizeChange
  144. }))));
  145. let splitDataSource = _toConsumableArray(dataSource);
  146. if (pagination) {
  147. if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
  148. splitDataSource = _toConsumableArray(dataSource).splice((paginationProps.current - 1) * paginationProps.pageSize, paginationProps.pageSize);
  149. }
  150. }
  151. const needResponsive = Object.keys(grid || {}).some(key => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key));
  152. const screens = useBreakpoint(needResponsive);
  153. const currentBreakpoint = React.useMemo(() => {
  154. for (let i = 0; i < responsiveArray.length; i += 1) {
  155. const breakpoint = responsiveArray[i];
  156. if (screens[breakpoint]) {
  157. return breakpoint;
  158. }
  159. }
  160. return undefined;
  161. }, [screens]);
  162. const colStyle = React.useMemo(() => {
  163. if (!grid) {
  164. return undefined;
  165. }
  166. const columnCount = currentBreakpoint && grid[currentBreakpoint] ? grid[currentBreakpoint] : grid.column;
  167. if (columnCount) {
  168. return {
  169. width: `${100 / columnCount}%`,
  170. maxWidth: `${100 / columnCount}%`
  171. };
  172. }
  173. }, [JSON.stringify(grid), currentBreakpoint]);
  174. let childrenContent = isLoading && /*#__PURE__*/React.createElement("div", {
  175. style: {
  176. minHeight: 53
  177. }
  178. });
  179. if (splitDataSource.length > 0) {
  180. const items = splitDataSource.map(renderInternalItem);
  181. childrenContent = grid ? (/*#__PURE__*/React.createElement(Row, {
  182. gutter: grid.gutter
  183. }, React.Children.map(items, child => (/*#__PURE__*/React.createElement("div", {
  184. key: child === null || child === void 0 ? void 0 : child.key,
  185. style: colStyle
  186. }, child))))) : (/*#__PURE__*/React.createElement("ul", {
  187. className: `${prefixCls}-items`
  188. }, items));
  189. } else if (!children && !isLoading) {
  190. childrenContent = /*#__PURE__*/React.createElement("div", {
  191. className: `${prefixCls}-empty-text`
  192. }, (locale === null || locale === void 0 ? void 0 : locale.emptyText) || (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('List')) || /*#__PURE__*/React.createElement(DefaultRenderEmpty, {
  193. componentName: "List"
  194. }));
  195. }
  196. const paginationPosition = paginationProps.position;
  197. const contextValue = React.useMemo(() => ({
  198. grid,
  199. itemLayout
  200. }), [JSON.stringify(grid), itemLayout]);
  201. return wrapCSSVar(/*#__PURE__*/React.createElement(ListContext.Provider, {
  202. value: contextValue
  203. }, /*#__PURE__*/React.createElement("div", Object.assign({
  204. ref: ref,
  205. style: Object.assign(Object.assign({}, contextStyle), style),
  206. className: classString
  207. }, rest), (paginationPosition === 'top' || paginationPosition === 'both') && paginationContent, header && /*#__PURE__*/React.createElement("div", {
  208. className: `${prefixCls}-header`
  209. }, header), /*#__PURE__*/React.createElement(Spin, Object.assign({}, loadingProp), childrenContent, children), footer && /*#__PURE__*/React.createElement("div", {
  210. className: `${prefixCls}-footer`
  211. }, footer), loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)));
  212. }
  213. const ListWithForwardRef = /*#__PURE__*/React.forwardRef(InternalList);
  214. if (process.env.NODE_ENV !== 'production') {
  215. ListWithForwardRef.displayName = 'List';
  216. }
  217. const List = ListWithForwardRef;
  218. List.Item = Item;
  219. export default List;