@dnb/eufemia/components/slider/SliderMarker.js

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback } from 'react';
import { makeUniqueId } from "../../shared/component-helper.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp, getFormattedNumber } from "./SliderHelpers.js";
import Tooltip from "../tooltip/Tooltip.js";
export default function SliderMarker({
  value,
  text
}) {
  const {
    isReverse,
    isVertical,
    allProps
  } = useSliderProps();
  const {
    min,
    max,
    numberFormat
  } = allProps;
  const getParams = useCallback(() => {
    const markerId = `slider-marker-${makeUniqueId()}`;
    const {
      number,
      aria
    } = getFormattedNumber(value, numberFormat || {});
    let percent = clamp((value - min) * 100 / (max - min));
    if (isReverse) {
      percent = 100 - percent;
    }
    const params = {
      id: markerId,
      'aria-label': aria,
      tabIndex: 0,
      style: {
        [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
      },
      children: React.createElement(Tooltip, {
        targetSelector: `#${markerId}`
      }, text || number)
    };
    return params;
  }, [isReverse, isVertical, max, min, numberFormat, text, value]);
  if (!value) {
    return null;
  }
  const params = getParams();
  return React.createElement("mark", _extends({
    className: "dnb-slider__marker"
  }, params));
}
//# sourceMappingURL=SliderMarker.js.map