useKeyboard.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  8. var _vue = require("vue");
  9. var _vcSelect = require("../../vc-select");
  10. var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));
  11. var _useSearchOptions = require("../hooks/useSearchOptions");
  12. var _default = function _default(context, options, fieldNames, activeValueCells, setActiveValueCells,
  13. // containerRef: Ref<HTMLElement>,
  14. onKeyBoardSelect) {
  15. var baseProps = (0, _vcSelect.useBaseProps)();
  16. var rtl = (0, _vue.computed)(function () {
  17. return baseProps.direction === 'rtl';
  18. });
  19. var _ref = [(0, _vue.ref)([]), (0, _vue.ref)(), (0, _vue.ref)([])],
  20. validActiveValueCells = _ref[0],
  21. lastActiveIndex = _ref[1],
  22. lastActiveOptions = _ref[2];
  23. (0, _vue.watchEffect)(function () {
  24. var activeIndex = -1;
  25. var currentOptions = options.value;
  26. var mergedActiveIndexes = [];
  27. var mergedActiveValueCells = [];
  28. var len = activeValueCells.value.length;
  29. // Fill validate active value cells and index
  30. var _loop = function _loop(i) {
  31. // Mark the active index for current options
  32. var nextActiveIndex = currentOptions.findIndex(function (option) {
  33. return option[fieldNames.value.value] === activeValueCells.value[i];
  34. });
  35. if (nextActiveIndex === -1) {
  36. return "break";
  37. }
  38. activeIndex = nextActiveIndex;
  39. mergedActiveIndexes.push(activeIndex);
  40. mergedActiveValueCells.push(activeValueCells.value[i]);
  41. currentOptions = currentOptions[activeIndex][fieldNames.value.children];
  42. };
  43. for (var i = 0; i < len && currentOptions; i += 1) {
  44. var _ret = _loop(i);
  45. if (_ret === "break") break;
  46. }
  47. // Fill last active options
  48. var activeOptions = options.value;
  49. for (var _i = 0; _i < mergedActiveIndexes.length - 1; _i += 1) {
  50. activeOptions = activeOptions[mergedActiveIndexes[_i]][fieldNames.value.children];
  51. }
  52. var _ref2 = [mergedActiveValueCells, activeIndex, activeOptions];
  53. validActiveValueCells.value = _ref2[0];
  54. lastActiveIndex.value = _ref2[1];
  55. lastActiveOptions.value = _ref2[2];
  56. });
  57. // Update active value cells and scroll to target element
  58. var internalSetActiveValueCells = function internalSetActiveValueCells(next) {
  59. setActiveValueCells(next);
  60. };
  61. // Same options offset
  62. var offsetActiveOption = function offsetActiveOption(offset) {
  63. var len = lastActiveOptions.value.length;
  64. var currentIndex = lastActiveIndex.value;
  65. if (currentIndex === -1 && offset < 0) {
  66. currentIndex = len;
  67. }
  68. for (var i = 0; i < len; i += 1) {
  69. currentIndex = (currentIndex + offset + len) % len;
  70. var option = lastActiveOptions.value[currentIndex];
  71. if (option && !option.disabled) {
  72. var value = option[fieldNames.value.value];
  73. var nextActiveCells = validActiveValueCells.value.slice(0, -1).concat(value);
  74. internalSetActiveValueCells(nextActiveCells);
  75. return;
  76. }
  77. }
  78. };
  79. // Different options offset
  80. var prevColumn = function prevColumn() {
  81. if (validActiveValueCells.value.length > 1) {
  82. var nextActiveCells = validActiveValueCells.value.slice(0, -1);
  83. internalSetActiveValueCells(nextActiveCells);
  84. } else {
  85. baseProps.toggleOpen(false);
  86. }
  87. };
  88. var nextColumn = function nextColumn() {
  89. var _lastActiveOptions$va;
  90. var nextOptions = ((_lastActiveOptions$va = lastActiveOptions.value[lastActiveIndex.value]) === null || _lastActiveOptions$va === void 0 ? void 0 : _lastActiveOptions$va[fieldNames.value.children]) || [];
  91. var nextOption = nextOptions.find(function (option) {
  92. return !option.disabled;
  93. });
  94. if (nextOption) {
  95. var nextActiveCells = [].concat((0, _toConsumableArray2.default)(validActiveValueCells.value), [nextOption[fieldNames.value.value]]);
  96. internalSetActiveValueCells(nextActiveCells);
  97. }
  98. };
  99. context.expose({
  100. // scrollTo: treeRef.current?.scrollTo,
  101. onKeydown: function onKeydown(event) {
  102. var which = event.which;
  103. switch (which) {
  104. // >>> Arrow keys
  105. case _KeyCode.default.UP:
  106. case _KeyCode.default.DOWN:
  107. {
  108. var offset = 0;
  109. if (which === _KeyCode.default.UP) {
  110. offset = -1;
  111. } else if (which === _KeyCode.default.DOWN) {
  112. offset = 1;
  113. }
  114. if (offset !== 0) {
  115. offsetActiveOption(offset);
  116. }
  117. break;
  118. }
  119. case _KeyCode.default.LEFT:
  120. {
  121. if (rtl.value) {
  122. nextColumn();
  123. } else {
  124. prevColumn();
  125. }
  126. break;
  127. }
  128. case _KeyCode.default.RIGHT:
  129. {
  130. if (rtl.value) {
  131. prevColumn();
  132. } else {
  133. nextColumn();
  134. }
  135. break;
  136. }
  137. case _KeyCode.default.BACKSPACE:
  138. {
  139. if (!baseProps.searchValue) {
  140. prevColumn();
  141. }
  142. break;
  143. }
  144. // >>> Select
  145. case _KeyCode.default.ENTER:
  146. {
  147. if (validActiveValueCells.value.length) {
  148. var option = lastActiveOptions.value[lastActiveIndex.value];
  149. // Search option should revert back of origin options
  150. var originOptions = (option === null || option === void 0 ? void 0 : option[_useSearchOptions.SEARCH_MARK]) || [];
  151. if (originOptions.length) {
  152. onKeyBoardSelect(originOptions.map(function (opt) {
  153. return opt[fieldNames.value.value];
  154. }), originOptions[originOptions.length - 1]);
  155. } else {
  156. onKeyBoardSelect(validActiveValueCells.value, option);
  157. }
  158. }
  159. break;
  160. }
  161. // >>> Close
  162. case _KeyCode.default.ESC:
  163. {
  164. baseProps.toggleOpen(false);
  165. if (open) {
  166. event.stopPropagation();
  167. }
  168. }
  169. }
  170. },
  171. onKeyup: function onKeyup() {}
  172. });
  173. };
  174. exports.default = _default;