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

DNB Eufemia Design System UI Library

import React from 'react';
import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from "../../shared/component-helper.js";
import Button from "../button/Button.js";
import Tooltip from "../tooltip/Tooltip.js";
import { useSliderEvents } from "./hooks/useSliderEvents.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp, getFormattedNumber } from "./SliderHelpers.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function SliderThumb() {
  const {
    values
  } = useSliderProps();
  return _jsx(_Fragment, {
    children: values.map((value, i) => {
      return _jsx(Thumb, {
        value: value,
        currentIndex: i
      }, i);
    })
  });
}
function Thumb({
  value,
  currentIndex
}) {
  const {
    thumbIndex,
    isVertical,
    isReverse,
    showStatus,
    attributes,
    allProps,
    shouldAnimate
  } = useSliderProps();
  const {
    id,
    label,
    min,
    max,
    step,
    skeleton,
    disabled,
    suffix,
    numberFormat,
    tooltip,
    alwaysShowTooltip
  } = allProps;
  const index = thumbIndex.current;
  let percent = clamp((value - min) * 100 / (max - min));
  if (isReverse) {
    percent = 100 - percent;
  }
  const style = {
    zIndex: index === currentIndex ? 4 : 3,
    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
  };
  const {
    onThumbMouseDownHandler,
    onThumbMouseUpHandler,
    onHelperChangeHandler,
    onHelperFocusHandler
  } = useSliderEvents();
  const {
    number,
    aria
  } = getFormattedNumber(value, numberFormat);
  const helperParams = {};
  if (label) {
    helperParams['aria-labelledby'] = combineLabelledBy(helperParams, label ? id + '-label' : null);
  }
  if (showStatus || suffix) {
    helperParams['aria-describedby'] = combineDescribedBy(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
  }
  const thumbParams = attributes;
  const elemRef = React.useRef(undefined);
  const [forceActive, setForceActive] = React.useState(false);
  validateDOMAttributes(allProps, thumbParams);
  return _jsxs("span", {
    className: "dnb-slider__thumb",
    style: style,
    children: [_jsx("input", {
      id: `${id}-thumb-${currentIndex}`,
      type: "range",
      className: "dnb-slider__button-helper",
      min: min,
      max: max,
      step: step,
      value: value,
      disabled: disabled,
      onChange: onHelperChangeHandler,
      onFocus: event => {
        onHelperFocusHandler(event);
        setForceActive(true);
      },
      onBlur: () => setForceActive(false),
      onMouseDown: onThumbMouseDownHandler,
      onMouseUp: onThumbMouseUpHandler,
      "aria-valuemin": min,
      "aria-valuemax": max,
      "aria-valuenow": value,
      "aria-valuetext": aria ? aria : undefined,
      "aria-orientation": isVertical ? 'vertical' : 'horizontal',
      "data-index": currentIndex,
      ...helperParams
    }), _jsx(Button, {
      id: `${id}-button-${currentIndex}`,
      element: "span",
      type: "",
      variant: "secondary",
      disabled: disabled,
      skeleton: skeleton,
      ref: elemRef,
      ...thumbParams
    }), tooltip && _jsxs(Tooltip, {
      targetElement: elemRef,
      open: alwaysShowTooltip || forceActive || undefined,
      targetRefreshKey: value,
      showDelay: 1,
      hideDelay: 300,
      omitDescribedBy: true,
      children: [number || value, shouldAnimate]
    }, `group-${currentIndex}`)]
  });
}
//# sourceMappingURL=SliderThumb.js.map