ListBody.js 4.8 KB

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