@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.
136 lines • 4.85 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import styled, { css } from "styled-components";
import mq from "../../utils/mediaQuery";
import Minus from "../../icons/Minus";
import Plus from "../../icons/Plus";
import defaultTheme from "../../defaultTheme";
import Button from "../../primitives/ButtonPrimitive";
import useTheme from "../../hooks/useTheme";
import { defaultFocus } from "../../utils/common";
const getMaxWidth = ({
maxWidth
}) => {
if (typeof maxWidth === "string") return maxWidth;
return `${parseInt(maxWidth, 10)}px`;
};
const StyledStepper = styled.div.withConfig({
displayName: "StepperStateless__StyledStepper",
componentId: "sc-1nz7kdj-0"
})(["display:flex;width:100%;max-width:", ";flex:1 1 auto;"], getMaxWidth);
const iconMixin = css(["", ""], ({
theme,
isActive,
isDisabled
}) => css(["padding:2px;height:20px;width:20px;background:", ";border-radius:", ";", ";", ";"], isActive ? theme.orbit.paletteBlueNormal : theme.orbit.paletteCloudNormal, theme.orbit.borderRadiusCircle, mq.desktop(css(["height:16px;width:16px;"])), !isDisabled && css(["&:hover{background:", ";}&:focus,&:active{box-shadow:inset 0 0 0 2px ", ";}"], isActive ? theme.orbit.paletteBlueNormalHover : theme.orbit.paletteCloudNormalHover, isActive ? theme.orbit.paletteBlueLightActive : theme.orbit.paletteCloudNormalActive)));
const StyledMinusIcon = styled(Minus).withConfig({
displayName: "StepperStateless__StyledMinusIcon",
componentId: "sc-1nz7kdj-1"
})(["", ";"], iconMixin);
StyledMinusIcon.defaultProps = {
theme: defaultTheme
};
const StyledPlusIcon = styled(Plus).withConfig({
displayName: "StepperStateless__StyledPlusIcon",
componentId: "sc-1nz7kdj-2"
})(["", ";"], iconMixin);
StyledPlusIcon.defaultProps = {
theme: defaultTheme
};
const StyledStepperInput = styled.input.withConfig({
displayName: "StepperStateless__StyledStepperInput",
componentId: "sc-1nz7kdj-3"
})(["", ""], ({
theme,
disabled
}) => css(["width:100%;height:44px;padding:0;border:0;font-size:", ";font-weight:", ";color:", ";text-align:center;min-width:0;opacity:", ";background-color:", ";&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&:focus{outline:none;}"], theme.orbit.fontSizeTextLarge, theme.orbit.fontWeightMedium, theme.orbit.paletteInkDark, disabled ? "0.5" : "1", disabled && "transparent"));
StyledStepperInput.defaultProps = {
theme: defaultTheme
};
const StyledStepperButton = styled(Button).withConfig({
displayName: "StepperStateless__StyledStepperButton",
componentId: "sc-1nz7kdj-4"
})(["&:focus{outline:none;", ",", "{", "}}"], StyledMinusIcon, StyledPlusIcon, defaultFocus);
StyledStepperButton.defaultProps = {
theme: defaultTheme
};
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 commonButtonStyles = {
background: "transparent",
width: "44px"
};
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(StyledStepper, {
"data-test": dataTest,
id: id,
maxWidth: maxWidth
}, /*#__PURE__*/React.createElement(StyledStepperButton, _extends({
disabled: isMinusDisabled,
iconLeft: /*#__PURE__*/React.createElement(StyledMinusIcon, {
size: "small",
isActive: active,
isDisabled: isMinusDisabled
}),
onClick: ev => {
if (onDecrement && !disabled) {
onDecrement(ev);
}
},
title: titleDecrement,
icons: iconStyles
}, commonButtonStyles)), /*#__PURE__*/React.createElement(StyledStepperInput, {
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(StyledStepperButton, _extends({
disabled: isPlusDisabled,
iconLeft: /*#__PURE__*/React.createElement(StyledPlusIcon, {
size: "small",
isActive: active,
isDisabled: isPlusDisabled
}),
onClick: ev => {
if (onIncrement && !disabled) {
onIncrement(ev);
}
},
title: titleIncrement,
icons: iconStyles
}, commonButtonStyles)));
};
export default StepperStateless;