@kiwicom/orbit-components/es/Slider/components/Bar/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

import * as React from "react";
import cx from "clsx";
export const calculateBarPosition = (value, max, min, hasHistogram) => {
  if (Array.isArray(value)) {
    return {
      left: +((value[0] - min) / (max - min + 1) * 100).toFixed(1),
      width: +((value[value.length - 1] - value[0] + 1) / (max - min + 1) * 100).toFixed(1)
    };
  }
  const addition = hasHistogram ? 1 : 0;
  return {
    left: 0,
    width: +((value - min + addition) / (max - min + addition) * 100).toFixed(1)
  };
};
const BarPart = ({
  className,
  style
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: cx("h-100 rounded-100 absolute top-1/2 -translate-y-1/2", className),
    style: style
  });
};
const Bar = ({
  onMouseDown,
  value,
  max,
  min,
  hasHistogram,
  ref
}) => {
  const {
    left,
    width
  } = calculateBarPosition(value, max, min, hasHistogram);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    React.createElement("div", {
      className: "h-600 tap-color-none relative w-full cursor-pointer select-none",
      ref: ref,
      onMouseDown: onMouseDown
    }, /*#__PURE__*/React.createElement(BarPart, {
      className: "bg-cloud-normal left-0 w-full"
    }), /*#__PURE__*/React.createElement(BarPart, {
      className: "bg-blue-normal",
      style: {
        insetInlineStart: `${left}%`,
        width: `${width}%`
      }
    }))
  );
};
export default Bar;