@kiwicom/orbit-components/lib/InputStepper/InputStepperStateless/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 = _interopRequireDefault(require("styled-components"));

var _consts = require("../../InputField/consts");

var _PlusCircle = _interopRequireDefault(require("../../icons/PlusCircle"));

var _MinusCircle = _interopRequireDefault(require("../../icons/MinusCircle"));

var _ButtonLink = _interopRequireDefault(require("../../ButtonLink"));

var _InputField = _interopRequireWildcard(require("../../InputField"));

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _getSpacingToken = _interopRequireDefault(require("../../common/getSpacingToken"));

const StyledInputStepper = _styledComponents.default.div.withConfig({
  displayName: "InputStepperStateless__StyledInputStepper",
  componentId: "sc-1u2800i-0"
})(["width:100%;margin-bottom:", ";font-family:", ";", "{text-align:center;&[type=\"number\"]{-moz-appearance:textfield;}}", "{padding:0;pointer-events:auto;}"], _getSpacingToken.default, ({
  theme
}) => theme.orbit.fontFamily, _InputField.Input, _InputField.Prefix); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledInputStepper.defaultProps = {
  theme: _defaultTheme.default
};

const InputStepperStateless = ({
  label,
  error,
  onBlur,
  onFocus,
  onChange,
  onKeyDown,
  help,
  disabled,
  name,
  dataTest,
  size = _consts.SIZE_OPTIONS.NORMAL,
  maxValue,
  minValue,
  required,
  readOnly,
  tabIndex,
  forwardedRef,
  spaceAfter,
  value,
  onDecrement,
  onIncrement,
  disabledIncrement,
  width,
  disabledDecrement,
  titleIncrement,
  titleDecrement
}) => {
  return /*#__PURE__*/React.createElement(StyledInputStepper, {
    spaceAfter: spaceAfter
  }, /*#__PURE__*/React.createElement(_InputField.default, {
    dataTest: dataTest,
    size: size,
    label: label,
    width: width,
    disabled: disabled,
    required: required,
    readOnly: readOnly,
    name: name,
    error: error,
    help: help,
    type: typeof value === "number" ? "number" : "text",
    onChange: onChange,
    onBlur: onBlur,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    value: value,
    minValue: minValue,
    maxValue: maxValue,
    tabIndex: tabIndex,
    ref: forwardedRef,
    prefix: /*#__PURE__*/React.createElement(_ButtonLink.default, {
      type: "primary",
      disabled: disabledDecrement || disabled || typeof value === "number" && value <= +minValue,
      compact: true,
      iconLeft: /*#__PURE__*/React.createElement(_MinusCircle.default, null),
      size: size,
      onClick: !disabled ? onDecrement : undefined,
      title: titleDecrement,
      asComponent: props => /*#__PURE__*/React.createElement("div", props)
    }),
    suffix: /*#__PURE__*/React.createElement(_ButtonLink.default, {
      disabled: disabledIncrement || disabled || typeof value === "number" && value >= +maxValue,
      type: "primary",
      compact: true,
      iconLeft: /*#__PURE__*/React.createElement(_PlusCircle.default, null),
      size: size,
      onClick: !disabled ? onIncrement : undefined,
      title: titleIncrement,
      asComponent: props => /*#__PURE__*/React.createElement("div", props)
    })
  }));
};

var _default = InputStepperStateless;
exports.default = _default;