Handle.js 6.0 KB

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