@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;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _useSliderEvents = require("./hooks/useSliderEvents");
var _useSliderProps = require("./hooks/useSliderProps");
var _SliderHelpers = require("./SliderHelpers");
var _span;
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 SliderMainTrack(_ref) {
  let {
    children
  } = _ref;
  const {
    allProps,
    trackRef,
    animationTimeout
  } = (0, _useSliderProps.useSliderProps)();
  const {
    id
  } = allProps;
  const {
    onTrackMouseDownHandler,
    removeEvents
  } = (0, _useSliderEvents.useSliderEvents)();
  _react.default.useEffect(() => {
    return () => {
      removeEvents();
      clearTimeout(animationTimeout.current);
    };
  }, []);
  const trackParams = {
    onTouchStart: onTrackMouseDownHandler,
    onMouseDown: onTrackMouseDownHandler
  };
  return (_react.default.createElement("span", _extends({
      id: id,
      ref: trackRef,
      className: "dnb-slider__track"
    }, trackParams), 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 _react.default.createElement("span", {
    className: "dnb-slider__line dnb-slider__line__before",
    style: style
  });
}
function SliderTrackAfter() {
  return _span || (_span = _react.default.createElement("span", {
    className: "dnb-slider__line dnb-slider__line__after"
  }));
}
//# sourceMappingURL=SliderTrack.js.map