@dnb/eufemia/cjs/components/slider/SliderThumb.js

DNB Eufemia Design System UI Library

"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");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SliderThumb() {
  const {
    values
  } = (0, _useSliderProps.useSliderProps)();
  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: values.map((value, i) => {
      return (0, _jsxRuntime.jsx)(Thumb, {
        value: value,
        currentIndex: i
      }, 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(undefined);
  const [forceActive, setForceActive] = _react.default.useState(false);
  (0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
  return (0, _jsxRuntime.jsxs)("span", {
    className: "dnb-slider__thumb",
    style: style,
    children: [(0, _jsxRuntime.jsx)("input", {
      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
    }), (0, _jsxRuntime.jsx)(_Button.default, {
      id: `${id}-button-${currentIndex}`,
      element: "span",
      type: "",
      variant: "secondary",
      disabled: disabled,
      skeleton: skeleton,
      ref: elemRef,
      ...thumbParams
    }), tooltip && (0, _jsxRuntime.jsxs)(_Tooltip.default, {
      targetElement: elemRef,
      open: alwaysShowTooltip || forceActive || undefined,
      targetRefreshKey: value,
      showDelay: 1,
      hideDelay: 300,
      omitDescribedBy: true,
      children: [number || value, shouldAnimate]
    }, `group-${currentIndex}`)]
  });
}
//# sourceMappingURL=SliderThumb.js.map