@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.
104 lines (103 loc) • 3.48 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import Minus from "../../icons/Minus";
import Plus from "../../icons/Plus";
import ButtonPrimitive from "../../primitives/ButtonPrimitive";
import useTheme from "../../hooks/useTheme";
const getMaxWidth = ({
maxWidth
}) => {
if (typeof maxWidth === "string") return maxWidth;
return `${parseInt(maxWidth.toString(), 10)}px`;
};
const stepperButtonMixin = ({
disabled,
active
}) => cx("[&_svg]:p-xxxs", "de:[&_svg]:h-icon-small de:[&_svg]:w-icon-small [&_svg]:h-icon-medium [&_svg]:w-icon-medium", "[&_svg]:rounded-circle", "focus:outline-0", "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2", !disabled && [active ? "[&_svg]:bg-blue-normal hover:[&_svg]:bg-blue-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-blue-light-active)]" : "[&_svg]:bg-cloud-normal hover:[&_svg]:bg-cloud-normal-hover [&_svg]:active:focus:shadow-[inset_0_0_0_2px_var(--palette-cloud-normal-active)]"], disabled && "[&_svg]:bg-cloud-normal");
const StepperStateless = ({
maxWidth = "120px",
disabled,
dataTest,
id,
value,
active,
name,
minValue = -Infinity,
maxValue = Infinity,
onKeyDown,
onBlur,
onFocus,
onIncrement,
onDecrement,
titleIncrement,
titleDecrement,
disabledIncrement,
disabledDecrement
}) => {
const theme = useTheme();
const iconStyles = {
foreground: active ? theme.orbit.paletteWhite : theme.orbit.paletteInkDark
};
const isMinusDisabled = disabled || disabledDecrement || typeof value === "number" && value <= +minValue;
const isPlusDisabled = disabled || disabledIncrement || typeof value === "number" && value >= +maxValue;
return /*#__PURE__*/React.createElement("div", {
"data-test": dataTest,
id: id,
className: "flex w-full flex-auto",
style: {
maxWidth: getMaxWidth({
maxWidth
})
}
}, /*#__PURE__*/React.createElement(ButtonPrimitive, {
className: stepperButtonMixin({
disabled: isMinusDisabled,
active
}),
disabled: isMinusDisabled,
iconLeft: /*#__PURE__*/React.createElement(Minus, {
size: "small"
}),
onClick: ev => {
if (onDecrement && !disabled) {
onDecrement(ev);
}
},
title: titleDecrement,
icons: iconStyles
}), /*#__PURE__*/React.createElement("input", {
className: cx("h-form-box-normal w-full min-w-0 border-0", "p-0 text-center", "text-large text-form-element-filled-foreground font-medium", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0", disabled ? "bg-transparent opacity-50" : "opacity-100", "focus:outline-0"),
name: name,
disabled: disabled,
type: "text",
value: Number(value) || 0,
min: minValue,
max: maxValue,
onKeyDown: ev => {
if (onKeyDown) {
onKeyDown(ev);
}
},
onBlur: onBlur,
onFocus: onFocus,
readOnly: true
}), /*#__PURE__*/React.createElement(ButtonPrimitive, {
className: stepperButtonMixin({
disabled: isPlusDisabled,
active
}),
disabled: isPlusDisabled,
iconLeft: /*#__PURE__*/React.createElement(Plus, {
size: "small"
}),
onClick: ev => {
if (onIncrement && !disabled) {
onIncrement(ev);
}
},
title: titleIncrement,
icons: iconStyles
}));
};
export default StepperStateless;