@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
151 lines (150 loc) • 4.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SliderThumb = SliderThumb;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _componentHelper = require("../../shared/component-helper");
var _Button = _interopRequireDefault(require("../button/Button"));
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
var _useSliderEvents = require("./hooks/useSliderEvents");
var _useSliderProps = require("./hooks/useSliderProps");
var _SliderHelpers = require("./SliderHelpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function SliderThumb() {
const {
values
} = (0, _useSliderProps.useSliderProps)();
return _react.default.createElement(_react.default.Fragment, null, values.map((value, i) => {
return _react.default.createElement(Thumb, {
key: i,
value: value,
currentIndex: i
});
}));
}
function Thumb(_ref) {
let {
value,
currentIndex
} = _ref;
const {
thumbIndex,
isVertical,
isReverse,
showStatus,
attributes,
allProps,
shouldAnimate
} = (0, _useSliderProps.useSliderProps)();
const {
id,
label,
min,
max,
step,
skeleton,
disabled,
suffix,
numberFormat,
tooltip,
alwaysShowTooltip
} = allProps;
const index = thumbIndex.current;
let percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
if (isReverse) {
percent = 100 - percent;
}
const style = {
zIndex: index === currentIndex ? 4 : 3,
[`${isVertical ? 'top' : 'left'}`]: `${percent}%`
};
const {
number,
aria
} = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
const [showTooltip, setShowTooltip] = _react.default.useState(false);
const onMouseEnterHandler = () => {
setShowTooltip(true);
};
const onMouseLeaveHandler = () => {
setShowTooltip(false);
try {
elemRef.current.dispatchEvent(new Event('mouseleave'));
} catch (e) {
(0, _componentHelper.warn)(e);
}
};
const {
onThumbMouseDownHandler,
onThumbMouseUpHandler,
onHelperChangeHandler,
onHelperFocusHandler
} = (0, _useSliderEvents.useSliderEvents)();
const helperParams = {};
if (label) {
helperParams['aria-labelledby'] = (0, _componentHelper.combineLabelledBy)(helperParams, label ? id + '-label' : null);
}
if (showStatus || suffix) {
helperParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
}
const thumbParams = attributes;
if (tooltip) {
thumbParams.onMouseEnter = onMouseEnterHandler;
thumbParams.onMouseLeave = onMouseLeaveHandler;
thumbParams.onTouchStart = onMouseEnterHandler;
thumbParams.onTouchEnd = onMouseLeaveHandler;
helperParams.onBlur = onMouseLeaveHandler;
helperParams.onFocus = event => {
onHelperFocusHandler(event);
onMouseEnterHandler();
try {
elemRef.current.dispatchEvent(new Event('mouseenter'));
} catch (e) {
(0, _componentHelper.warn)(e);
}
};
}
(0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
const elemRef = _react.default.useRef();
return _react.default.createElement("span", {
className: "dnb-slider__thumb",
style: style
}, _react.default.createElement("input", _extends({
id: `${id}-thumb-${currentIndex}`,
type: "range",
className: "dnb-slider__button-helper",
min: min,
max: max,
step: step,
value: value,
disabled: disabled,
onChange: onHelperChangeHandler,
onFocus: onHelperFocusHandler,
onMouseDown: onThumbMouseDownHandler,
onMouseUp: onThumbMouseUpHandler,
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": value,
"aria-valuetext": aria ? aria : undefined,
"aria-orientation": isVertical ? 'vertical' : 'horizontal',
"data-index": currentIndex
}, helperParams)), _react.default.createElement(_Button.default, _extends({
id: `${id}-button-${currentIndex}`,
element: "span",
type: "",
variant: "secondary",
disabled: disabled,
skeleton: skeleton,
innerRef: elemRef
}, thumbParams)), tooltip && _react.default.createElement(_Tooltip.default, {
key: `group-${currentIndex}`,
targetElement: elemRef,
active: Boolean(showTooltip || alwaysShowTooltip),
showDelay: 1,
hideDelay: 300
}, number || value, shouldAnimate));
}
//# sourceMappingURL=SliderThumb.js.map