Handle.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  11. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  12. var _classnames = _interopRequireDefault(require("classnames"));
  13. var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
  14. var React = _interopRequireWildcard(require("react"));
  15. var _context = _interopRequireDefault(require("../context"));
  16. var _util = require("../util");
  17. var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "onDelete", "style", "render", "dragging", "draggingDelete", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
  18. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  19. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  20. var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
  21. var prefixCls = props.prefixCls,
  22. value = props.value,
  23. valueIndex = props.valueIndex,
  24. onStartMove = props.onStartMove,
  25. onDelete = props.onDelete,
  26. style = props.style,
  27. render = props.render,
  28. dragging = props.dragging,
  29. draggingDelete = props.draggingDelete,
  30. onOffsetChange = props.onOffsetChange,
  31. onChangeComplete = props.onChangeComplete,
  32. onFocus = props.onFocus,
  33. onMouseEnter = props.onMouseEnter,
  34. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  35. var _React$useContext = React.useContext(_context.default),
  36. min = _React$useContext.min,
  37. max = _React$useContext.max,
  38. direction = _React$useContext.direction,
  39. disabled = _React$useContext.disabled,
  40. keyboard = _React$useContext.keyboard,
  41. range = _React$useContext.range,
  42. tabIndex = _React$useContext.tabIndex,
  43. ariaLabelForHandle = _React$useContext.ariaLabelForHandle,
  44. ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle,
  45. ariaRequired = _React$useContext.ariaRequired,
  46. ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle,
  47. styles = _React$useContext.styles,
  48. classNames = _React$useContext.classNames;
  49. var handlePrefixCls = "".concat(prefixCls, "-handle");
  50. // ============================ Events ============================
  51. var onInternalStartMove = function onInternalStartMove(e) {
  52. if (!disabled) {
  53. onStartMove(e, valueIndex);
  54. }
  55. };
  56. var onInternalFocus = function onInternalFocus(e) {
  57. onFocus === null || onFocus === void 0 || onFocus(e, valueIndex);
  58. };
  59. var onInternalMouseEnter = function onInternalMouseEnter(e) {
  60. onMouseEnter(e, valueIndex);
  61. };
  62. // =========================== Keyboard ===========================
  63. var onKeyDown = function onKeyDown(e) {
  64. if (!disabled && keyboard) {
  65. var offset = null;
  66. // Change the value
  67. switch (e.which || e.keyCode) {
  68. case _KeyCode.default.LEFT:
  69. offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
  70. break;
  71. case _KeyCode.default.RIGHT:
  72. offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
  73. break;
  74. // Up is plus
  75. case _KeyCode.default.UP:
  76. offset = direction !== 'ttb' ? 1 : -1;
  77. break;
  78. // Down is minus
  79. case _KeyCode.default.DOWN:
  80. offset = direction !== 'ttb' ? -1 : 1;
  81. break;
  82. case _KeyCode.default.HOME:
  83. offset = 'min';
  84. break;
  85. case _KeyCode.default.END:
  86. offset = 'max';
  87. break;
  88. case _KeyCode.default.PAGE_UP:
  89. offset = 2;
  90. break;
  91. case _KeyCode.default.PAGE_DOWN:
  92. offset = -2;
  93. break;
  94. case _KeyCode.default.BACKSPACE:
  95. case _KeyCode.default.DELETE:
  96. onDelete === null || onDelete === void 0 || onDelete(valueIndex);
  97. break;
  98. }
  99. if (offset !== null) {
  100. e.preventDefault();
  101. onOffsetChange(offset, valueIndex);
  102. }
  103. }
  104. };
  105. var handleKeyUp = function handleKeyUp(e) {
  106. switch (e.which || e.keyCode) {
  107. case _KeyCode.default.LEFT:
  108. case _KeyCode.default.RIGHT:
  109. case _KeyCode.default.UP:
  110. case _KeyCode.default.DOWN:
  111. case _KeyCode.default.HOME:
  112. case _KeyCode.default.END:
  113. case _KeyCode.default.PAGE_UP:
  114. case _KeyCode.default.PAGE_DOWN:
  115. onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete();
  116. break;
  117. }
  118. };
  119. // ============================ Offset ============================
  120. var positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max);
  121. // ============================ Render ============================
  122. var divProps = {};
  123. if (valueIndex !== null) {
  124. var _getIndex;
  125. divProps = {
  126. tabIndex: disabled ? null : (0, _util.getIndex)(tabIndex, valueIndex),
  127. role: 'slider',
  128. 'aria-valuemin': min,
  129. 'aria-valuemax': max,
  130. 'aria-valuenow': value,
  131. 'aria-disabled': disabled,
  132. 'aria-label': (0, _util.getIndex)(ariaLabelForHandle, valueIndex),
  133. 'aria-labelledby': (0, _util.getIndex)(ariaLabelledByForHandle, valueIndex),
  134. 'aria-required': (0, _util.getIndex)(ariaRequired, valueIndex),
  135. 'aria-valuetext': (_getIndex = (0, _util.getIndex)(ariaValueTextFormatterForHandle, valueIndex)) === null || _getIndex === void 0 ? void 0 : _getIndex(value),
  136. 'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
  137. onMouseDown: onInternalStartMove,
  138. onTouchStart: onInternalStartMove,
  139. onFocus: onInternalFocus,
  140. onMouseEnter: onInternalMouseEnter,
  141. onKeyDown: onKeyDown,
  142. onKeyUp: handleKeyUp
  143. };
  144. }
  145. var handleNode = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
  146. ref: ref,
  147. className: (0, _classnames.default)(handlePrefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), valueIndex !== null && range), "".concat(handlePrefixCls, "-dragging"), dragging), "".concat(handlePrefixCls, "-dragging-delete"), draggingDelete), classNames.handle),
  148. style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), styles.handle)
  149. }, divProps, restProps));
  150. // Customize
  151. if (render) {
  152. handleNode = render(handleNode, {
  153. index: valueIndex,
  154. prefixCls: prefixCls,
  155. value: value,
  156. dragging: dragging,
  157. draggingDelete: draggingDelete
  158. });
  159. }
  160. return handleNode;
  161. });
  162. if (process.env.NODE_ENV !== 'production') {
  163. Handle.displayName = 'Handle';
  164. }
  165. var _default = exports.default = Handle;