@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
66 lines • 2.39 kB
JavaScript
import * as React from "react";
import cx from "clsx";
import useTheme from "../../../hooks/useTheme";
export const calculateLeftPosition = (valueNow, valueMin, valueMax, isFirst, isSimple) => {
// if first, stick it to the left edge
if (isFirst) {
// if simple (one handle and without histogram)
if (isSimple) {
return +((valueNow - valueMin) / (valueMax - valueMin) * 100).toFixed(1);
}
return +((valueNow - valueMin) / (valueMax - valueMin + 1) * 100).toFixed(1);
}
// for every other handle stick on the right edge
return +((valueNow - valueMin + 1) / (valueMax - valueMin + 1) * 100).toFixed(1);
};
export const isFirst = (value, valueNow, index, hasHistogram) => {
if (Array.isArray(value)) {
const max = Math.max(...value);
const min = Math.min(...value);
const maxEqualsMin = max === min;
const minEqualsValueNow = min === valueNow;
if (index !== 0 && maxEqualsMin) return false;
return maxEqualsMin || minEqualsValueNow;
}
return !hasHistogram;
};
const Handle = ({
onMouseDown,
onFocus,
onTouchStart,
valueMax,
valueMin,
onTop,
value,
index,
ariaValueText,
ariaLabel,
hasHistogram,
dataTest
}) => {
const valueNow = Array.isArray(value) ? value[index] : value;
const first = isFirst(value, valueNow, index, hasHistogram);
const isSimple = !hasHistogram && !Array.isArray(value);
const left = calculateLeftPosition(valueNow, valueMin, valueMax, first, isSimple);
const theme = useTheme();
return /*#__PURE__*/React.createElement("div", {
className: cx("size-600 shadow-level1 bg-white-normal duration-fast tap-color-none hover:shadow-level2 active:shadow-level2 absolute bottom-0 flex cursor-pointer select-none items-center justify-center rounded-full transition-shadow ease-in-out", onTop && "z-20"),
style: {
insetInlineStart: `calc(${left}% - ${theme.orbit.space300})`
},
"data-test": dataTest,
tabIndex: 0,
role: "slider",
onMouseDown: onMouseDown,
onFocus: onFocus,
onTouchStart: onTouchStart,
"aria-valuemax": valueMax,
"aria-valuemin": valueMin,
"aria-valuenow": valueNow,
"aria-label": Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel,
"aria-valuetext": ariaValueText
}, /*#__PURE__*/React.createElement("div", {
className: "size-200 bg-blue-normal rounded-full"
}));
};
export default Handle;