useKeyboard.js 6.3 KB

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