ListBody.js 4.5 KB

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