@kiwicom/orbit-components/es/InputStepper/index.js

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

  return React.createElement("div", props);
}).withConfig({
  displayName: "InputStepper__PrefixSuffix",
  componentId: "sc-1kqzp6i-0"
})(["flex-shrink:0;z-index:3;cursor:", ";"], ({
  disabled
}) => disabled && "not-allowed");
const StyledInputStepper = styled.div.withConfig({
  displayName: "InputStepper__StyledInputStepper",
  componentId: "sc-1kqzp6i-1"
})(["", "{text-align:center;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}}", "{padding:0;pointer-events:auto;}"], Input, Prefix);

class InputStepper extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      value: this.props.defaultValue || 0
    });

    _defineProperty(this, "incrementCounter", () => {
      const {
        value
      } = this.state;
      const {
        maxValue,
        step = 1
      } = this.props;
      const newValue = value + step;
      this.setState({
        value: maxValue && newValue > maxValue ? maxValue : newValue
      });
    });

    _defineProperty(this, "decrementCounter", () => {
      const {
        value
      } = this.state;
      const {
        minValue,
        step = 1
      } = this.props;
      const newValue = value - step;
      this.setState({
        value: minValue && newValue < minValue ? minValue : newValue
      });
    });

    _defineProperty(this, "handleKeyDown", ev => {
      ev.preventDefault();

      if (ev.keyCode === 40) {
        this.decrementCounter();
      }

      if (ev.keyCode === 38) {
        this.incrementCounter();
      }
    });

    _defineProperty(this, "handleChange", ev => {
      const {
        minValue = Number.NEGATIVE_INFINITY,
        maxValue = Number.POSITIVE_INFINITY
      } = this.props;
      const value = ev && parseInt(ev.target.value, 10);

      if (Number.isInteger(value) && value >= minValue && value <= maxValue) {
        this.setState({
          value
        });
      }
    });
  }

  componentDidUpdate() {
    const {
      onChange
    } = this.props;
    const {
      value
    } = this.state;

    if (onChange) {
      onChange(value);
    }
  }

  render() {
    const {
      label,
      error,
      onBlur,
      onFocus,
      help,
      disabled,
      name,
      dataTest,
      size = SIZE_OPTIONS.NORMAL,
      maxValue,
      minValue,
      required,
      forwardedRef
    } = this.props;
    const {
      value
    } = this.state;
    return React.createElement(StyledInputStepper, {
      dataTest: dataTest
    }, React.createElement(InputField, {
      size: size,
      label: label,
      disabled: disabled,
      required: required,
      name: name,
      error: error,
      help: help,
      type: "number",
      onChange: this.handleChange,
      onBlur: onBlur,
      onFocus: onFocus,
      onKeyDown: this.handleKeyDown,
      value: value || 0,
      minValue: minValue,
      maxValue: maxValue,
      ref: forwardedRef,
      prefix: React.createElement(ButtonLink, {
        disabled: disabled || !!minValue && value <= minValue,
        iconLeft: React.createElement(MinusCircle, {
          color: "secondary"
        }),
        size: size,
        onClick: this.decrementCounter,
        transparent: true,
        component: PrefixSuffix
      }),
      suffix: React.createElement(ButtonLink, {
        disabled: disabled || !!maxValue && value >= maxValue,
        iconLeft: React.createElement(PlusCircle, {
          color: "secondary"
        }),
        size: size,
        onClick: this.incrementCounter,
        transparent: true,
        component: PrefixSuffix
      })
    }));
  }

} // $FlowExpected


const ForwardedInputStepper = React.forwardRef((props, ref) => React.createElement(InputStepper, _extends({
  forwardedRef: ref
}, props)));
ForwardedInputStepper.displayName = "InputStepper";
export default ForwardedInputStepper;