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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SliderMainTrack = SliderMainTrack;
exports.SliderTrackAfter = SliderTrackAfter;
exports.SliderTrackBefore = SliderTrackBefore;
var _react = _interopRequireDefault(require("react"));
var _useSliderEvents = require("./hooks/useSliderEvents.js");
var _useSliderProps = require("./hooks/useSliderProps.js");
var _SliderHelpers = require("./SliderHelpers.js");
var _useMountEffect = _interopRequireDefault(require("../../shared/helpers/useMountEffect.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _span;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SliderMainTrack({
  children
}) {
  const {
    allProps,
    trackRef,
    animationTimeout
  } = (0, _useSliderProps.useSliderProps)();
  const {
    id
  } = allProps;
  const {
    onTrackMouseDownHandler,
    removeEvents
  } = (0, _useSliderEvents.useSliderEvents)();
  (0, _useMountEffect.default)(() => {
    return () => {
      removeEvents();
      clearTimeout(animationTimeout.current);
    };
  });
  const trackParams = {
    onTouchStart: onTrackMouseDownHandler,
    onMouseDown: onTrackMouseDownHandler
  };
  return ((0, _jsxRuntime.jsx)("span", {
      id: id,
      ref: trackRef,
      className: "dnb-slider__track",
      ...trackParams,
      children: children
    })
  );
}
const trackObj = [['right', 'left'], ['bottom', 'top']];
function SliderTrackBefore() {
  const {
    values: origValues,
    isVertical,
    isReverse,
    thumbIndex,
    allProps: {
      min,
      max
    }
  } = (0, _useSliderProps.useSliderProps)();
  const values = origValues.sort((a, b) => a - b);
  const isBetween = values.length >= 2;
  if (isBetween && values[0] > values[values.length - 1]) {
    values.reverse();
  }
  const index = thumbIndex.current;
  const upperValue = values[isBetween ? 0 : index > -1 ? index : 0];
  const upperPercent = isBetween ? (0, _SliderHelpers.clamp)((upperValue - min) * 100 / (max - min)) : 0;
  const lowerValue = values[isBetween ? values.length - 1 : index > -1 ? index : 0];
  const lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
  const units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
  const style = {};
  style[units[isReverse ? 1 : 0]] = `${lowerPercent}%`;
  style[units[isReverse ? 0 : 1]] = `${upperPercent}%`;
  return (0, _jsxRuntime.jsx)("span", {
    className: "dnb-slider__line dnb-slider__line__before",
    style: style
  });
}
function SliderTrackAfter() {
  return _span || (_span = (0, _jsxRuntime.jsx)("span", {
    className: "dnb-slider__line dnb-slider__line__after"
  }));
}
//# sourceMappingURL=SliderTrack.js.map