@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
128 lines (127 loc) • 4.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SliderThumb = SliderThumb;
var _react = _interopRequireDefault(require("react"));
var _componentHelper = require("../../shared/component-helper.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip.js"));
var _useSliderEvents = require("./hooks/useSliderEvents.js");
var _useSliderProps = require("./hooks/useSliderProps.js");
var _SliderHelpers = require("./SliderHelpers.js");
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({
value,
currentIndex
}) {
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 {
onThumbMouseDownHandler,
onThumbMouseUpHandler,
onHelperChangeHandler,
onHelperFocusHandler
} = (0, _useSliderEvents.useSliderEvents)();
const {
number,
aria
} = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
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;
const elemRef = _react.default.useRef();
const [forceActive, setForceActive] = _react.default.useState(false);
(0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
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: event => {
onHelperFocusHandler(event);
setForceActive(true);
},
onBlur: () => setForceActive(false),
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,
forceActive: Boolean(alwaysShowTooltip || forceActive),
targetRefreshKey: value,
showDelay: 1,
hideDelay: 300,
omitDescribedBy: true
}, number || value, shouldAnimate));
}
//# sourceMappingURL=SliderThumb.js.map