@itwin/itwinui-react/cjs/core/Slider/Thumb.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'Thumb', {
  enumerable: true,
  get: function () {
    return Thumb;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _Tooltip = require('../Tooltip/Tooltip.js');
const _index = require('../../utils/index.js');
const Thumb = (props) => {
  let {
    value,
    index,
    minVal,
    maxVal,
    step,
    sliderMin,
    sliderMax,
    isActive,
    onThumbActivated,
    onThumbValueChanged,
    tooltipProps,
    thumbProps,
    disabled,
  } = props;
  let thumbRef = _react.useRef(null);
  let handleOnKeyboardEvent = _react.useCallback(
    (event, keyboardReleased) => {
      if (disabled || event.altKey) return;
      switch (event.key) {
        case 'ArrowLeft':
        case 'ArrowDown':
          onThumbValueChanged(
            index,
            Math.max(value - step, minVal),
            keyboardReleased,
          );
          break;
        case 'ArrowRight':
        case 'ArrowUp':
          onThumbValueChanged(
            index,
            Math.min(value + step, maxVal),
            keyboardReleased,
          );
          break;
        case 'Home':
          onThumbValueChanged(index, minVal, keyboardReleased);
          break;
        case 'End':
          onThumbValueChanged(index, maxVal, keyboardReleased);
          break;
        default:
          return;
      }
      event.preventDefault();
    },
    [disabled, onThumbValueChanged, index, value, step, minVal, maxVal],
  );
  let handlePointerDownOnThumb = _react.useCallback(() => {
    disabled || onThumbActivated(index);
  }, [disabled, index, onThumbActivated]);
  let adjustedValue = _react.useMemo(() => {
    if (value < sliderMin) return sliderMin;
    if (value > sliderMax) return sliderMax;
    return value;
  }, [sliderMax, sliderMin, value]);
  let lowPercent = _react.useMemo(() => {
    if (sliderMax === sliderMin) return 0;
    return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
  }, [adjustedValue, sliderMax, sliderMin]);
  let { style, className, ...rest } = thumbProps || {};
  return _react.createElement(
    _Tooltip.Tooltip,
    {
      placement: 'top',
      autoUpdateOptions: {
        animationFrame: true,
      },
      ariaStrategy: 'none',
      ...tooltipProps,
    },
    _react.createElement(_index.Box, {
      ...rest,
      ref: (0, _index.useMergedRefs)(thumbRef, thumbProps?.ref),
      style: {
        ...style,
        '--iui-slider-thumb-position': `${lowPercent}%`,
      },
      className: (0, _classnames.default)(
        'iui-slider-thumb',
        {
          'iui-active': isActive,
        },
        className,
      ),
      role: 'slider',
      tabIndex: disabled ? void 0 : 0,
      'aria-valuemin': minVal,
      'aria-valuenow': value,
      'aria-valuemax': maxVal,
      'aria-disabled': disabled,
      onPointerDown: handlePointerDownOnThumb,
      onKeyDown: (event) => handleOnKeyboardEvent(event, false),
      onKeyUp: (event) => handleOnKeyboardEvent(event, true),
    }),
  );
};