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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
var _span;
import React from 'react';
import { useSliderEvents } from "./hooks/useSliderEvents.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp } from "./SliderHelpers.js";
export function SliderMainTrack({
  children
}) {
  const {
    allProps,
    trackRef,
    animationTimeout
  } = useSliderProps();
  const {
    id
  } = allProps;
  const {
    onTrackMouseDownHandler,
    removeEvents
  } = useSliderEvents();
  React.useEffect(() => {
    return () => {
      removeEvents();
      clearTimeout(animationTimeout.current);
    };
  }, []);
  const trackParams = {
    onTouchStart: onTrackMouseDownHandler,
    onMouseDown: onTrackMouseDownHandler
  };
  return (React.createElement("span", _extends({
      id: id,
      ref: trackRef,
      className: "dnb-slider__track"
    }, trackParams), children)
  );
}
const trackObj = [['right', 'left'], ['bottom', 'top']];
export function SliderTrackBefore() {
  const {
    values: origValues,
    isVertical,
    isReverse,
    thumbIndex,
    allProps: {
      min,
      max
    }
  } = 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 ? clamp((upperValue - min) * 100 / (max - min)) : 0;
  const lowerValue = values[isBetween ? values.length - 1 : index > -1 ? index : 0];
  const lowerPercent = 100 - 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.createElement("span", {
    className: "dnb-slider__line dnb-slider__line__before",
    style: style
  });
}
export function SliderTrackAfter() {
  return _span || (_span = React.createElement("span", {
    className: "dnb-slider__line dnb-slider__line__after"
  }));
}
//# sourceMappingURL=SliderTrack.js.map