123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
- var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "onDelete", "style", "render", "dragging", "draggingDelete", "onOffsetChange", "onChangeComplete", "onFocus", "onMouseEnter"];
- import cls from 'classnames';
- import KeyCode from "rc-util/es/KeyCode";
- import * as React from 'react';
- import SliderContext from "../context";
- import { getDirectionStyle, getIndex } from "../util";
- var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
- var prefixCls = props.prefixCls,
- value = props.value,
- valueIndex = props.valueIndex,
- onStartMove = props.onStartMove,
- onDelete = props.onDelete,
- style = props.style,
- render = props.render,
- dragging = props.dragging,
- draggingDelete = props.draggingDelete,
- onOffsetChange = props.onOffsetChange,
- onChangeComplete = props.onChangeComplete,
- onFocus = props.onFocus,
- onMouseEnter = props.onMouseEnter,
- restProps = _objectWithoutProperties(props, _excluded);
- var _React$useContext = React.useContext(SliderContext),
- min = _React$useContext.min,
- max = _React$useContext.max,
- direction = _React$useContext.direction,
- disabled = _React$useContext.disabled,
- keyboard = _React$useContext.keyboard,
- range = _React$useContext.range,
- tabIndex = _React$useContext.tabIndex,
- ariaLabelForHandle = _React$useContext.ariaLabelForHandle,
- ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle,
- ariaRequired = _React$useContext.ariaRequired,
- ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle,
- styles = _React$useContext.styles,
- classNames = _React$useContext.classNames;
- var handlePrefixCls = "".concat(prefixCls, "-handle");
- // ============================ Events ============================
- var onInternalStartMove = function onInternalStartMove(e) {
- if (!disabled) {
- onStartMove(e, valueIndex);
- }
- };
- var onInternalFocus = function onInternalFocus(e) {
- onFocus === null || onFocus === void 0 || onFocus(e, valueIndex);
- };
- var onInternalMouseEnter = function onInternalMouseEnter(e) {
- onMouseEnter(e, valueIndex);
- };
- // =========================== Keyboard ===========================
- var onKeyDown = function onKeyDown(e) {
- if (!disabled && keyboard) {
- var offset = null;
- // Change the value
- switch (e.which || e.keyCode) {
- case KeyCode.LEFT:
- offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
- break;
- case KeyCode.RIGHT:
- offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
- break;
- // Up is plus
- case KeyCode.UP:
- offset = direction !== 'ttb' ? 1 : -1;
- break;
- // Down is minus
- case KeyCode.DOWN:
- offset = direction !== 'ttb' ? -1 : 1;
- break;
- case KeyCode.HOME:
- offset = 'min';
- break;
- case KeyCode.END:
- offset = 'max';
- break;
- case KeyCode.PAGE_UP:
- offset = 2;
- break;
- case KeyCode.PAGE_DOWN:
- offset = -2;
- break;
- case KeyCode.BACKSPACE:
- case KeyCode.DELETE:
- onDelete === null || onDelete === void 0 || onDelete(valueIndex);
- break;
- }
- if (offset !== null) {
- e.preventDefault();
- onOffsetChange(offset, valueIndex);
- }
- }
- };
- var handleKeyUp = function handleKeyUp(e) {
- switch (e.which || e.keyCode) {
- case KeyCode.LEFT:
- case KeyCode.RIGHT:
- case KeyCode.UP:
- case KeyCode.DOWN:
- case KeyCode.HOME:
- case KeyCode.END:
- case KeyCode.PAGE_UP:
- case KeyCode.PAGE_DOWN:
- onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete();
- break;
- }
- };
- // ============================ Offset ============================
- var positionStyle = getDirectionStyle(direction, value, min, max);
- // ============================ Render ============================
- var divProps = {};
- if (valueIndex !== null) {
- var _getIndex;
- divProps = {
- tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
- role: 'slider',
- 'aria-valuemin': min,
- 'aria-valuemax': max,
- 'aria-valuenow': value,
- 'aria-disabled': disabled,
- 'aria-label': getIndex(ariaLabelForHandle, valueIndex),
- 'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
- 'aria-required': getIndex(ariaRequired, valueIndex),
- 'aria-valuetext': (_getIndex = getIndex(ariaValueTextFormatterForHandle, valueIndex)) === null || _getIndex === void 0 ? void 0 : _getIndex(value),
- 'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
- onMouseDown: onInternalStartMove,
- onTouchStart: onInternalStartMove,
- onFocus: onInternalFocus,
- onMouseEnter: onInternalMouseEnter,
- onKeyDown: onKeyDown,
- onKeyUp: handleKeyUp
- };
- }
- var handleNode = /*#__PURE__*/React.createElement("div", _extends({
- ref: ref,
- 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),
- style: _objectSpread(_objectSpread(_objectSpread({}, positionStyle), style), styles.handle)
- }, divProps, restProps));
- // Customize
- if (render) {
- handleNode = render(handleNode, {
- index: valueIndex,
- prefixCls: prefixCls,
- value: value,
- dragging: dragging,
- draggingDelete: draggingDelete
- });
- }
- return handleNode;
- });
- if (process.env.NODE_ENV !== 'production') {
- Handle.displayName = 'Handle';
- }
- export default Handle;
|