@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.
77 lines • 2.48 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import Button from "./Button";
import Minus from "../../icons/Minus";
import Plus from "../../icons/Plus";
import defaultTheme from "../../defaultTheme";
const StyledStepper = styled.div.withConfig({
displayName: "Stepper__StyledStepper",
componentId: "sc-19chja2-0"
})(["display:flex;align-items:center;width:100%;flex:1 1 auto;"]);
const StyledStepperInput = styled.input.withConfig({
displayName: "Stepper__StyledStepperInput",
componentId: "sc-19chja2-1"
})(["", ""], ({
theme
}) => css(["width:100%;height:22px;padding:0;border:0;font-size:", ";font-weight:", ";color:", ";text-align:center;min-width:0;&:disabled{background-color:transparent;}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&:focus{outline:none;}"], theme.orbit.fontSizeTextLarge, theme.orbit.fontWeightBold, theme.orbit.paletteInkDark));
StyledStepperInput.defaultProps = {
theme: defaultTheme
};
const StepperStateless = ({
selected,
disabled,
dataTest,
value,
name,
minValue = Number.NEGATIVE_INFINITY,
maxValue = Number.POSITIVE_INFINITY,
onKeyDown,
onBlur,
onFocus,
onIncrement,
onDecrement,
titleIncrement,
titleDecrement,
disabledIncrement,
disabledDecrement
}) => {
return /*#__PURE__*/React.createElement(StyledStepper, {
"data-test": dataTest
}, /*#__PURE__*/React.createElement(Button, {
selected: selected,
disabled: disabled || disabledDecrement || typeof value === "number" && value <= +minValue,
iconLeft: /*#__PURE__*/React.createElement(Minus, null),
onClick: ev => {
if (onDecrement && !disabled) {
onDecrement(ev);
}
},
title: titleDecrement
}), /*#__PURE__*/React.createElement(StyledStepperInput, {
name: name,
disabled: disabled,
type: "text",
value: value || 0,
min: minValue,
max: maxValue,
onKeyDown: ev => {
if (onKeyDown) {
onKeyDown(ev);
}
},
onBlur: onBlur,
onFocus: onFocus,
readOnly: true
}), /*#__PURE__*/React.createElement(Button, {
selected: selected,
disabled: disabled || disabledIncrement || typeof value === "number" && value >= +maxValue,
iconLeft: /*#__PURE__*/React.createElement(Plus, null),
onClick: ev => {
if (onIncrement && !disabled) {
onIncrement(ev);
}
},
title: titleIncrement
}));
};
export default StepperStateless;