@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled from "styled-components";
import { SIZE_OPTIONS } from "../../InputField/consts";
import PlusCircle from "../../icons/PlusCircle";
import MinusCircle from "../../icons/MinusCircle";
import ButtonLink from "../../ButtonLink";
import InputField, { Input, Prefix } from "../../InputField";
import defaultTheme from "../../defaultTheme";
import getSpacingToken from "../../common/getSpacingToken";
var StyledInputStepper = styled.div.withConfig({
  displayName: "InputStepperStateless__StyledInputStepper",
  componentId: "ymyi85-0"
})(["width:100%;margin-bottom:", ";font-family:", ";", "{text-align:center;&[type=\"number\"]{-moz-appearance:textfield;}}", "{padding:0;pointer-events:auto;}"], getSpacingToken, function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontFamily;
}, Input, Prefix); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledInputStepper.defaultProps = {
  theme: defaultTheme
};

var InputStepperStateless = function InputStepperStateless(_ref2) {
  var label = _ref2.label,
      error = _ref2.error,
      onBlur = _ref2.onBlur,
      onFocus = _ref2.onFocus,
      onChange = _ref2.onChange,
      onKeyDown = _ref2.onKeyDown,
      help = _ref2.help,
      disabled = _ref2.disabled,
      name = _ref2.name,
      dataTest = _ref2.dataTest,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? SIZE_OPTIONS.NORMAL : _ref2$size,
      maxValue = _ref2.maxValue,
      minValue = _ref2.minValue,
      required = _ref2.required,
      readOnly = _ref2.readOnly,
      tabIndex = _ref2.tabIndex,
      forwardedRef = _ref2.forwardedRef,
      spaceAfter = _ref2.spaceAfter,
      value = _ref2.value,
      onDecrement = _ref2.onDecrement,
      onIncrement = _ref2.onIncrement,
      disabledIncrement = _ref2.disabledIncrement,
      disabledDecrement = _ref2.disabledDecrement,
      titleIncrement = _ref2.titleIncrement,
      titleDecrement = _ref2.titleDecrement;
  return /*#__PURE__*/React.createElement(StyledInputStepper, {
    spaceAfter: spaceAfter
  }, /*#__PURE__*/React.createElement(InputField, {
    dataTest: dataTest,
    size: size,
    label: label,
    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, {
      type: "primary",
      disabled: disabledDecrement || disabled || typeof value === "number" && value <= +minValue,
      compact: true,
      iconLeft: /*#__PURE__*/React.createElement(MinusCircle, null),
      size: size,
      onClick: !disabled ? onDecrement : undefined,
      title: titleDecrement,
      asComponent: function asComponent(props) {
        return /*#__PURE__*/React.createElement("div", props);
      }
    }),
    suffix: /*#__PURE__*/React.createElement(ButtonLink, {
      disabled: disabledIncrement || disabled || typeof value === "number" && value >= +maxValue,
      type: "primary",
      compact: true,
      iconLeft: /*#__PURE__*/React.createElement(PlusCircle, null),
      size: size,
      onClick: !disabled ? onIncrement : undefined,
      title: titleIncrement,
      asComponent: function asComponent(props) {
        return /*#__PURE__*/React.createElement("div", props);
      }
    })
  }));
};

export default InputStepperStateless;