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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback } from 'react';
import { makeUniqueId } from '../../shared/component-helper';
import { useSliderProps } from './hooks/useSliderProps';
import { clamp, getFormattedNumber } from './SliderHelpers';
import Tooltip from '../tooltip/Tooltip';
export default function SliderMarker(_ref) {
  let {
    value,
    text
  } = _ref;
  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