@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.

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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";
const PrefixSuffix = styled((_ref) => {
  let {
    type
  } = _ref,
      props = _objectWithoutProperties(_ref, ["type"]);

  return React.createElement("div", props);
}).withConfig({
  displayName: "InputStepperStateless__PrefixSuffix",
  componentId: "ymyi85-0"
})(["flex-shrink:0;z-index:3;cursor:", ";"], ({
  disabled
}) => disabled && "not-allowed");
PrefixSuffix.defaultProps = {
  theme: defaultTheme
};
const StyledInputStepper = styled.div.withConfig({
  displayName: "InputStepperStateless__StyledInputStepper",
  componentId: "ymyi85-1"
})(["width:100%;margin-bottom:", ";", "{text-align:center;}", "{padding:0;pointer-events:auto;}"], getSpacingToken, Input, Prefix);
StyledInputStepper.defaultProps = {
  theme: defaultTheme
};
const StyledButtonWrapper = styled.div.withConfig({
  displayName: "InputStepperStateless__StyledButtonWrapper",
  componentId: "ymyi85-2"
})(["&:focus{outline:none;box-shadow:0 0 1px 1px ", ",0 0 1px 3px rgba(1,118,210,0.6);}&:focus:active{box-shadow:none;}"], ({
  theme
}) => theme.orbit.colorTextButtonWhiteBordered);
StyledButtonWrapper.defaultProps = {
  theme: defaultTheme
};

const InputStepperStateless = ({
  label,
  error,
  onBlur,
  onFocus,
  onChange,
  onKeyDown,
  help,
  disabled,
  name,
  dataTest,
  size = SIZE_OPTIONS.NORMAL,
  maxValue,
  minValue,
  required,
  tabIndex,
  forwardedRef,
  spaceAfter,
  value,
  onDecrement,
  onIncrement,
  disabledIncrement,
  disabledDecrement,
  titleIncrement,
  titleDecrement
}) => {
  return React.createElement(StyledInputStepper, {
    spaceAfter: spaceAfter
  }, React.createElement(InputField, {
    dataTest: dataTest,
    size: size,
    label: label,
    disabled: disabled,
    required: required,
    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: React.createElement(StyledButtonWrapper, {
      role: "button",
      tabIndex: "0",
      onKeyDown: onDecrement
    }, React.createElement(ButtonLink, {
      disabled: disabledDecrement || disabled || typeof value === "number" && value <= +minValue,
      iconLeft: React.createElement(MinusCircle, {
        color: "secondary"
      }),
      size: size,
      onClick: onDecrement,
      transparent: true,
      component: PrefixSuffix,
      title: titleDecrement
    })),
    suffix: React.createElement(StyledButtonWrapper, {
      role: "button",
      tabIndex: "0",
      onKeyDown: onIncrement
    }, React.createElement(ButtonLink, {
      disabled: disabledIncrement || disabled || typeof value === "number" && value >= +maxValue,
      iconLeft: React.createElement(PlusCircle, {
        color: "secondary"
      }),
      size: size,
      onClick: onIncrement,
      transparent: true,
      component: PrefixSuffix,
      title: titleIncrement
    }))
  }));
};

export default InputStepperStateless;