index.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import { __awaiter, __generator, __spreadArray } from "tslib";
  2. import { useRef, useState } from 'functional-mini/compat';
  3. import { useEffect, useEvent } from 'functional-mini/component';
  4. import '../_util/assert-component2';
  5. import { mountComponent } from '../_util/component';
  6. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  7. import { useInstanceBoundingClientRect } from '../_util/hooks/useInstanceBoundingClientRect';
  8. import { useComponentUpdateEffect } from '../_util/hooks/useLayoutEffect';
  9. import { useMixState } from '../_util/hooks/useMixState';
  10. import { CollapseFunctionalProps } from './props';
  11. import { useEvent as useStableCallback } from '../_util/hooks/useEvent';
  12. var Collapse = function (props) {
  13. var _a = useState([]), contentHeight = _a[0], setContentHeight = _a[1];
  14. var _b = useState(false), hasChange = _b[0], setHasChange = _b[1];
  15. var taskQueueRef = useRef();
  16. var previousValueRef = useRef([]);
  17. var _c = useMixState(props.defaultCurrent, {
  18. value: props.current,
  19. postState: function (val) {
  20. var current = __spreadArray([], (val || []), true);
  21. var items = props.items;
  22. current = current.filter(function (item) {
  23. if (!items[item] || items[item].disabled) {
  24. return false;
  25. }
  26. return true;
  27. });
  28. if (props.accordion) {
  29. current = current.length > 0 ? [current[0]] : [];
  30. }
  31. return {
  32. valid: true,
  33. value: __spreadArray([], current, true),
  34. };
  35. },
  36. }), value = _c[0], _d = _c[1], isControlled = _d.isControlled, update = _d.update;
  37. var triggerEvent = useComponentEvent(props).triggerEvent;
  38. useEvent('onChange', function (e) {
  39. var itemIndex = parseInt(e.currentTarget.dataset.index, 10);
  40. if (props.items[itemIndex] && props.items[itemIndex].disabled) {
  41. return;
  42. }
  43. var arr = value;
  44. var current = __spreadArray([], arr, true);
  45. var index = current.indexOf(itemIndex);
  46. if (index >= 0) {
  47. current.splice(index, 1);
  48. }
  49. else {
  50. if (props.accordion) {
  51. current = [itemIndex];
  52. }
  53. else {
  54. current.push(itemIndex);
  55. current.sort();
  56. }
  57. }
  58. if (!isControlled) {
  59. update(current);
  60. }
  61. triggerEvent('change', current);
  62. });
  63. var getBoundingClientRectWithBuilder = useInstanceBoundingClientRect().getBoundingClientRectWithBuilder;
  64. var updateContentHeight = useStableCallback(function (prevCurrent, nextCurrent) { return __awaiter(void 0, void 0, void 0, function () {
  65. var prevCurrentArray, nextCurrentArray, expandArray, closeArray, newContentHeight;
  66. return __generator(this, function (_a) {
  67. switch (_a.label) {
  68. case 0:
  69. prevCurrentArray = prevCurrent;
  70. nextCurrentArray = nextCurrent;
  71. expandArray = [];
  72. closeArray = [];
  73. nextCurrentArray.forEach(function (item) {
  74. if (prevCurrentArray.indexOf(item) < 0) {
  75. expandArray.push(item);
  76. }
  77. });
  78. prevCurrentArray.forEach(function (item) {
  79. if (nextCurrentArray.indexOf(item) < 0) {
  80. closeArray.push(item);
  81. }
  82. });
  83. return [4 /*yield*/, Promise.all(props.items.map(function (item, index) { return __awaiter(void 0, void 0, void 0, function () {
  84. var height;
  85. return __generator(this, function (_a) {
  86. switch (_a.label) {
  87. case 0:
  88. if (!(expandArray.indexOf(index) >= 0 ||
  89. closeArray.indexOf(index) >= 0)) return [3 /*break*/, 2];
  90. return [4 /*yield*/, getBoundingClientRectWithBuilder(function (id) { return ".ant-collapse-item-content".concat(id, "-").concat(index); })];
  91. case 1:
  92. height = (_a.sent()).height;
  93. return [2 /*return*/, "".concat(height, "px")];
  94. case 2: return [2 /*return*/, contentHeight[index]];
  95. }
  96. });
  97. }); }))];
  98. case 1:
  99. newContentHeight = _a.sent();
  100. if (closeArray.length === 0) {
  101. setContentHeight(newContentHeight);
  102. }
  103. else {
  104. setContentHeight(newContentHeight);
  105. taskQueueRef.current = function () {
  106. setTimeout(function () {
  107. setContentHeight(function (contentHeight) {
  108. return contentHeight.map(function (item, index) {
  109. if (closeArray.indexOf(index) >= 0) {
  110. return '0px';
  111. }
  112. return item;
  113. });
  114. });
  115. }, 10);
  116. };
  117. }
  118. return [2 /*return*/];
  119. }
  120. });
  121. }); });
  122. useEffect(function () {
  123. if (taskQueueRef.current) {
  124. var task = taskQueueRef.current;
  125. taskQueueRef.current = null;
  126. if (typeof task === 'function') {
  127. task();
  128. }
  129. }
  130. });
  131. useEffect(function () {
  132. var current = value;
  133. var contentHeight = props.items.map(function (item, index) {
  134. if (current.indexOf(index) >= 0) {
  135. return '';
  136. }
  137. return '0px';
  138. });
  139. setContentHeight(contentHeight);
  140. setHasChange(true);
  141. previousValueRef.current = value;
  142. }, []);
  143. useComponentUpdateEffect(function () {
  144. var previous = previousValueRef.current;
  145. previousValueRef.current = value;
  146. updateContentHeight(previous, value);
  147. }, [props.items, JSON.stringify(value)]);
  148. useEvent('resetContentHeight', function (e) {
  149. var index = parseInt(e.currentTarget.dataset.index, 10);
  150. if (value.indexOf(index) < 0) {
  151. return;
  152. }
  153. setContentHeight(function (oldContentHeight) {
  154. var newContentHeight = __spreadArray([], oldContentHeight, true);
  155. newContentHeight[index] = '';
  156. return newContentHeight;
  157. });
  158. });
  159. return {
  160. contentHeight: contentHeight,
  161. hasChange: hasChange,
  162. mixin: {
  163. value: value,
  164. },
  165. };
  166. };
  167. mountComponent(Collapse, CollapseFunctionalProps);