ListBody.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import useMergedState from "rc-util/es/hooks/useMergedState";
  5. import Pagination from '../pagination';
  6. import ListItem from './ListItem';
  7. export const OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'];
  8. const parsePagination = pagination => {
  9. const defaultPagination = {
  10. simple: true,
  11. showSizeChanger: false,
  12. showLessItems: false
  13. };
  14. return Object.assign(Object.assign({}, defaultPagination), pagination);
  15. };
  16. const TransferListBody = (props, ref) => {
  17. const {
  18. prefixCls,
  19. filteredRenderItems,
  20. selectedKeys,
  21. disabled: globalDisabled,
  22. showRemove,
  23. pagination,
  24. onScroll,
  25. onItemSelect,
  26. onItemRemove
  27. } = props;
  28. const [current, setCurrent] = React.useState(1);
  29. const mergedPagination = React.useMemo(() => {
  30. if (!pagination) {
  31. return null;
  32. }
  33. const convertPagination = typeof pagination === 'object' ? pagination : {};
  34. return parsePagination(convertPagination);
  35. }, [pagination]);
  36. const [pageSize, setPageSize] = useMergedState(10, {
  37. value: mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.pageSize
  38. });
  39. React.useEffect(() => {
  40. if (mergedPagination) {
  41. const maxPageCount = Math.ceil(filteredRenderItems.length / pageSize);
  42. setCurrent(Math.min(current, maxPageCount));
  43. }
  44. }, [filteredRenderItems, mergedPagination, pageSize]);
  45. const onInternalClick = (item, e) => {
  46. onItemSelect(item.key, !selectedKeys.includes(item.key), e);
  47. };
  48. const onRemove = item => {
  49. onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove([item.key]);
  50. };
  51. const onPageChange = cur => {
  52. setCurrent(cur);
  53. };
  54. const onSizeChange = (cur, size) => {
  55. setCurrent(cur);
  56. setPageSize(size);
  57. };
  58. const memoizedItems = React.useMemo(() => {
  59. const displayItems = mergedPagination ? filteredRenderItems.slice((current - 1) * pageSize, current * pageSize) : filteredRenderItems;
  60. return displayItems;
  61. }, [current, filteredRenderItems, mergedPagination, pageSize]);
  62. React.useImperativeHandle(ref, () => ({
  63. items: memoizedItems
  64. }));
  65. const paginationNode = mergedPagination ? (/*#__PURE__*/React.createElement(Pagination, {
  66. size: "small",
  67. disabled: globalDisabled,
  68. simple: mergedPagination.simple,
  69. pageSize: pageSize,
  70. showLessItems: mergedPagination.showLessItems,
  71. showSizeChanger: mergedPagination.showSizeChanger,
  72. className: `${prefixCls}-pagination`,
  73. total: filteredRenderItems.length,
  74. current: current,
  75. onChange: onPageChange,
  76. onShowSizeChange: onSizeChange
  77. })) : null;
  78. const cls = classNames(`${prefixCls}-content`, {
  79. [`${prefixCls}-content-show-remove`]: showRemove
  80. });
  81. return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
  82. className: cls,
  83. onScroll: onScroll
  84. }, (memoizedItems || []).map(({
  85. renderedEl,
  86. renderedText,
  87. item
  88. }) => (/*#__PURE__*/React.createElement(ListItem, {
  89. key: item.key,
  90. item: item,
  91. renderedText: renderedText,
  92. renderedEl: renderedEl,
  93. prefixCls: prefixCls,
  94. showRemove: showRemove,
  95. onClick: onInternalClick,
  96. onRemove: onRemove,
  97. checked: selectedKeys.includes(item.key),
  98. disabled: globalDisabled || item.disabled
  99. })))), paginationNode);
  100. };
  101. if (process.env.NODE_ENV !== 'production') {
  102. TransferListBody.displayName = 'TransferListBody';
  103. }
  104. export default /*#__PURE__*/React.forwardRef(TransferListBody);