@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.
85 lines (82 loc) • 2.73 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: "StepperStateless__StyledStepper",
componentId: "sc-er9xml-0"
})(["display:flex;width:100%;flex:1 1 auto;"]);
const StyledStepperInput = styled.input.withConfig({
displayName: "StepperStateless__StyledStepperInput",
componentId: "sc-er9xml-1"
})(["", ""], ({
theme,
size,
disabled
}) => css(["width:100%;height:", ";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;}"], size === "small" ? "32px" : "44px", size === "small" ? theme.orbit.fontSizeInputNormal : theme.orbit.fontSizeTextLarge, theme.orbit.fontWeightBold, theme.orbit.paletteInkNormal, disabled ? "0.5" : "1", disabled && "transparent")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledStepperInput.defaultProps = {
theme: defaultTheme
};
const StepperStateless = ({
disabled,
dataTest,
value,
name,
size = "small",
minValue,
maxValue,
onKeyDown,
onBlur,
onFocus,
onIncrement,
onDecrement,
titleIncrement,
titleDecrement,
disabledIncrement,
disabledDecrement
}) => {
return /*#__PURE__*/React.createElement(StyledStepper, {
"data-test": dataTest
}, /*#__PURE__*/React.createElement(Button, {
disabled: disabled || disabledDecrement || typeof value === "number" && value <= +minValue,
iconLeft: /*#__PURE__*/React.createElement(Minus, null),
type: "secondary",
size: size,
onClick: ev => {
if (onDecrement && !disabled) {
onDecrement(ev);
}
},
title: titleDecrement
}), /*#__PURE__*/React.createElement(StyledStepperInput, {
name: name,
disabled: disabled,
type: "text",
size: size,
value: value || 0,
min: minValue,
max: maxValue,
onKeyDown: ev => {
if (onKeyDown) {
onKeyDown(ev);
}
},
onBlur: onBlur,
onFocus: onFocus,
readOnly: true
}), /*#__PURE__*/React.createElement(Button, {
disabled: disabled || disabledIncrement || typeof value === "number" && value >= +maxValue,
iconLeft: /*#__PURE__*/React.createElement(Plus, null),
size: size,
type: "secondary",
onClick: ev => {
if (onIncrement && !disabled) {
onIncrement(ev);
}
},
title: titleIncrement
}));
};
export default StepperStateless;