@kiwicom/orbit-components/lib/Stepper/StepperStateless/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: 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: "StepperStateless__StyledStepper",
  componentId: "sc-er9xml-0"
})(["display:flex;width:100%;flex:1 1 auto;"]);

const StyledStepperInput = _styledComponents.default.input.withConfig({
  displayName: "StepperStateless__StyledStepperInput",
  componentId: "sc-er9xml-1"
})(["", ""], ({
  theme,
  size,
  disabled
}) => (0, _styledComponents.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.default
};

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.default, {
    disabled: disabled || disabledDecrement || typeof value === "number" && value <= +minValue,
    iconLeft: /*#__PURE__*/React.createElement(_Minus.default, 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.default, {
    disabled: disabled || disabledIncrement || typeof value === "number" && value >= +maxValue,
    iconLeft: /*#__PURE__*/React.createElement(_Plus.default, null),
    size: size,
    type: "secondary",
    onClick: ev => {
      if (onIncrement && !disabled) {
        onIncrement(ev);
      }
    },
    title: titleIncrement
  }));
};

var _default = StepperStateless;
exports.default = _default;