@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.
84 lines (82 loc) • 2.31 kB
JavaScript
import * as React from "react";
import styled 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: "StepperStateless__StyledStepper",
componentId: "dh3icj-0"
})(["display:flex;width:100%;flex:1 1 auto;"]);
const StyledStepperInput = styled.input.withConfig({
displayName: "StepperStateless__StyledStepperInput",
componentId: "dh3icj-1"
})(["width:100%;height:32px;padding:0;border:0;font-size:", ";font-weight:", ";color:", ";text-align:center;min-width:0;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&:focus{outline:none;}"], ({
theme
}) => theme.orbit.fontSizeInputNormal, ({
theme
}) => theme.orbit.fontWeightBold, ({
theme
}) => theme.orbit.paletteInkNormal);
StyledStepperInput.defaultProps = {
theme: defaultTheme
};
const StepperStateless = ({
disabled,
dataTest,
value,
name,
minValue,
maxValue,
onKeyDown,
onBlur,
onFocus,
onIncrement,
onDecrement,
titleIncrement,
titleDecrement,
disabledIncrement,
disabledDecrement
}) => {
return React.createElement(StyledStepper, {
"data-test": dataTest
}, React.createElement(Button, {
disabled: disabled || disabledDecrement || typeof value === "number" && value <= +minValue,
iconLeft: React.createElement(Minus, null),
type: "secondary",
size: "small",
onClick: ev => {
if (onDecrement) {
onDecrement(ev);
}
},
title: titleDecrement
}), 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
}), React.createElement(Button, {
disabled: disabled || disabledIncrement || typeof value === "number" && value >= +maxValue,
iconLeft: React.createElement(Plus, null),
type: "secondary",
size: "small",
onClick: ev => {
if (onIncrement) {
onIncrement(ev);
}
},
title: titleIncrement
}));
};
export default StepperStateless;