@itwin/itwinui-react/DEV-cjs/core/Slider/Track.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'Track', {
  enumerable: true,
  get: function () {
    return Track;
  },
});
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 _index = require('../../utils/index.js');
function shouldDisplaySegment(segmentIndex, mode) {
  if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) return true;
  if ('even-segments' === mode && 0 === segmentIndex % 2) return true;
  return false;
}
function generateSegments(values, min, max) {
  let segments = [];
  let newValues = [...values];
  newValues.sort((a, b) => a - b);
  if (
    0 === newValues.length ||
    newValues[0] < min ||
    newValues[newValues.length - 1] > max ||
    min === max
  )
    return [];
  let lastValue = min;
  for (let i = 0; i < newValues.length; i++) {
    segments.push({
      left: lastValue,
      right: newValues[i],
    });
    lastValue = newValues[i];
  }
  segments.push({
    left: lastValue,
    right: max,
  });
  return segments;
}
const Track = (props) => {
  let {
    className,
    trackDisplayMode,
    sliderMin,
    sliderMax,
    values,
    orientation,
  } = props;
  let [segments, setSegments] = _react.useState(() =>
    generateSegments(values, sliderMin, sliderMax),
  );
  _react.useEffect(() => {
    setSegments(generateSegments(values, sliderMin, sliderMax));
  }, [values, sliderMin, sliderMax]);
  return _react.createElement(
    _react.Fragment,
    null,
    'none' !== trackDisplayMode &&
      segments.map((segment, index) => {
        let lowPercent =
          segment.left >= sliderMin && sliderMax !== sliderMin
            ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
            : 0;
        let highPercent =
          segment.right >= sliderMin && sliderMax !== sliderMin
            ? 100.0 -
              (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
            : 100;
        return _react.createElement(
          _react.Fragment,
          {
            key: index,
          },
          shouldDisplaySegment(index, trackDisplayMode)
            ? _react.createElement(_index.Box, {
                className: (0, _classnames.default)(
                  'iui-slider-track',
                  className,
                ),
                style: {
                  ...('horizontal' === orientation
                    ? {
                        insetInlineStart: `${lowPercent}%`,
                        insetInlineEnd: `${highPercent}%`,
                      }
                    : {
                        insetBlockStart: `${highPercent}%`,
                        insetBlockEnd: `${lowPercent}%`,
                      }),
                },
              })
            : null,
        );
      }),
  );
};