164 lines
6.0 KiB
JavaScript
164 lines
6.0 KiB
JavaScript
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; |