@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 (83 loc) • 3.03 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Button = _interopRequireDefault(require("./Button"));
var _Minus = _interopRequireDefault(require("../../icons/Minus"));
var _Plus = _interopRequireDefault(require("../../icons/Plus"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
const StyledStepper = _styledComponents.default.div.withConfig({
displayName: "Stepper__StyledStepper",
componentId: "sc-19chja2-0"
})(["display:flex;align-items:center;width:100%;flex:1 1 auto;"]);
const StyledStepperInput = _styledComponents.default.input.withConfig({
displayName: "Stepper__StyledStepperInput",
componentId: "sc-19chja2-1"
})(["", ""], ({
theme
}) => (0, _styledComponents.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.default
};
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.default, {
selected: selected,
disabled: disabled || disabledDecrement || typeof value === "number" && value <= +minValue,
iconLeft: /*#__PURE__*/React.createElement(_Minus.default, 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.default, {
selected: selected,
disabled: disabled || disabledIncrement || typeof value === "number" && value >= +maxValue,
iconLeft: /*#__PURE__*/React.createElement(_Plus.default, null),
onClick: ev => {
if (onIncrement && !disabled) {
onIncrement(ev);
}
},
title: titleIncrement
}));
};
var _default = StepperStateless;
exports.default = _default;