ListBody.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
  3. import { defineComponent, computed, ref, watch } from 'vue';
  4. import classNames from '../_util/classNames';
  5. import ListItem from './ListItem';
  6. import Pagination from '../pagination';
  7. import PropTypes from '../_util/vue-types';
  8. import { booleanType } from '../_util/type';
  9. export const transferListBodyProps = {
  10. prefixCls: String,
  11. filteredRenderItems: PropTypes.array.def([]),
  12. selectedKeys: PropTypes.array,
  13. disabled: booleanType(),
  14. showRemove: booleanType(),
  15. pagination: PropTypes.any,
  16. onItemSelect: Function,
  17. onScroll: Function,
  18. onItemRemove: Function
  19. };
  20. function parsePagination(pagination) {
  21. if (!pagination) {
  22. return null;
  23. }
  24. const defaultPagination = {
  25. pageSize: 10,
  26. simple: true,
  27. showSizeChanger: false,
  28. showLessItems: false
  29. };
  30. if (typeof pagination === 'object') {
  31. return _extends(_extends({}, defaultPagination), pagination);
  32. }
  33. return defaultPagination;
  34. }
  35. const ListBody = defineComponent({
  36. compatConfig: {
  37. MODE: 3
  38. },
  39. name: 'ListBody',
  40. inheritAttrs: false,
  41. props: transferListBodyProps,
  42. emits: ['itemSelect', 'itemRemove', 'scroll'],
  43. setup(props, _ref) {
  44. let {
  45. emit,
  46. expose
  47. } = _ref;
  48. const current = ref(1);
  49. const handleItemSelect = item => {
  50. const {
  51. selectedKeys
  52. } = props;
  53. const checked = selectedKeys.indexOf(item.key) >= 0;
  54. emit('itemSelect', item.key, !checked);
  55. };
  56. const handleItemRemove = item => {
  57. emit('itemRemove', [item.key]);
  58. };
  59. const handleScroll = e => {
  60. emit('scroll', e);
  61. };
  62. const mergedPagination = computed(() => parsePagination(props.pagination));
  63. watch([mergedPagination, () => props.filteredRenderItems], () => {
  64. if (mergedPagination.value) {
  65. // Calculate the page number
  66. const maxPageCount = Math.ceil(props.filteredRenderItems.length / mergedPagination.value.pageSize);
  67. current.value = Math.min(current.value, maxPageCount);
  68. }
  69. }, {
  70. immediate: true
  71. });
  72. const items = computed(() => {
  73. const {
  74. filteredRenderItems
  75. } = props;
  76. let displayItems = filteredRenderItems;
  77. if (mergedPagination.value) {
  78. displayItems = filteredRenderItems.slice((current.value - 1) * mergedPagination.value.pageSize, current.value * mergedPagination.value.pageSize);
  79. }
  80. return displayItems;
  81. });
  82. const onPageChange = cur => {
  83. current.value = cur;
  84. };
  85. expose({
  86. items
  87. });
  88. return () => {
  89. const {
  90. prefixCls,
  91. filteredRenderItems,
  92. selectedKeys,
  93. disabled: globalDisabled,
  94. showRemove
  95. } = props;
  96. let paginationNode = null;
  97. if (mergedPagination.value) {
  98. paginationNode = _createVNode(Pagination, {
  99. "simple": mergedPagination.value.simple,
  100. "showSizeChanger": mergedPagination.value.showSizeChanger,
  101. "showLessItems": mergedPagination.value.showLessItems,
  102. "size": "small",
  103. "disabled": globalDisabled,
  104. "class": `${prefixCls}-pagination`,
  105. "total": filteredRenderItems.length,
  106. "pageSize": mergedPagination.value.pageSize,
  107. "current": current.value,
  108. "onChange": onPageChange
  109. }, null);
  110. }
  111. const itemsList = items.value.map(_ref2 => {
  112. let {
  113. renderedEl,
  114. renderedText,
  115. item
  116. } = _ref2;
  117. const {
  118. disabled
  119. } = item;
  120. const checked = selectedKeys.indexOf(item.key) >= 0;
  121. return _createVNode(ListItem, {
  122. "disabled": globalDisabled || disabled,
  123. "key": item.key,
  124. "item": item,
  125. "renderedText": renderedText,
  126. "renderedEl": renderedEl,
  127. "checked": checked,
  128. "prefixCls": prefixCls,
  129. "onClick": handleItemSelect,
  130. "onRemove": handleItemRemove,
  131. "showRemove": showRemove
  132. }, null);
  133. });
  134. return _createVNode(_Fragment, null, [_createVNode("ul", {
  135. "class": classNames(`${prefixCls}-content`, {
  136. [`${prefixCls}-content-show-remove`]: showRemove
  137. }),
  138. "onScroll": handleScroll
  139. }, [itemsList]), paginationNode]);
  140. };
  141. }
  142. });
  143. export default ListBody;