@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; }

import * as React from "react";
import { SIZE_OPTIONS } from "../InputField/consts";
import KEY_CODE_MAP from "../common/keyMaps";
import InputStepperStateless from "./InputStepperStateless";
import validateIncrement from "../utils/validateIncrement";
import validateDecrement from "../utils/validateDecrement";

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

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

    _defineProperty(this, "setValueAndInjectCallback", value => {
      const {
        onChange
      } = this.props;

      if (onChange) {
        onChange(value);
      }

      this.setState({
        value
      });
    });

    _defineProperty(this, "incrementCounter", () => {
      const {
        value
      } = this.state;
      const {
        maxValue = Number.POSITIVE_INFINITY,
        step = 1
      } = this.props;
      this.setValueAndInjectCallback(validateIncrement({
        value,
        maxValue,
        step
      }));
    });

    _defineProperty(this, "decrementCounter", () => {
      const {
        value
      } = this.state;
      const {
        minValue = Number.NEGATIVE_INFINITY,
        step = 1
      } = this.props;
      this.setValueAndInjectCallback(validateDecrement({
        value,
        minValue,
        step
      }));
    });

    _defineProperty(this, "handleIncrementCounter", ev => {
      if (ev && ev.type === "click") {
        this.incrementCounter();
      }

      if (ev && ev.type === "keydown") {
        if (ev.keyCode === KEY_CODE_MAP.SPACE) {
          ev.preventDefault();
          this.incrementCounter();
        } else if (ev.keyCode === KEY_CODE_MAP.ENTER) {
          this.incrementCounter();
        }
      }
    });

    _defineProperty(this, "handleDecrementCounter", ev => {
      if (ev && ev.type === "click") {
        this.decrementCounter();
      }

      if (ev && ev.type === "keydown") {
        if (ev.keyCode === KEY_CODE_MAP.SPACE) {
          ev.preventDefault();
          this.decrementCounter();
        } else if (ev.keyCode === KEY_CODE_MAP.ENTER) {
          this.decrementCounter();
        }
      }
    });

    _defineProperty(this, "handleKeyDown", ev => {
      if (ev.keyCode === KEY_CODE_MAP.ARROW_DOWN) {
        ev.preventDefault();
        this.decrementCounter();
      }

      if (ev.keyCode === KEY_CODE_MAP.ARROW_UP) {
        ev.preventDefault();
        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);
      const prevValue = this.state.value;

      if (prevValue <= value) {
        this.setState({
          value: validateIncrement({
            value,
            maxValue,
            step: 0
          })
        });
      }

      if (prevValue >= value) {
        this.setState({
          value: validateDecrement({
            value,
            minValue,
            step: 0
          })
        });
      }
    });
  }

  render() {
    const {
      label,
      error,
      onBlur,
      onFocus,
      help,
      disabled,
      name,
      dataTest,
      size = SIZE_OPTIONS.NORMAL,
      maxValue,
      minValue,
      required,
      tabIndex,
      forwardedRef,
      spaceAfter,
      titleIncrement,
      titleDecrement
    } = this.props;
    const {
      value
    } = this.state;
    return React.createElement(InputStepperStateless, {
      dataTest: dataTest,
      size: size,
      label: label,
      disabled: disabled,
      required: required,
      name: name,
      error: error,
      help: help,
      onChange: this.handleChange,
      onBlur: onBlur,
      onFocus: onFocus,
      onKeyDown: this.handleKeyDown,
      value: value || 0,
      minValue: minValue,
      maxValue: maxValue,
      tabIndex: tabIndex,
      forwardedRef: forwardedRef,
      spaceAfter: spaceAfter,
      onDecrement: this.handleDecrementCounter,
      onIncrement: this.handleIncrementCounter,
      titleIncrement: titleIncrement,
      titleDecrement: titleDecrement
    });
  }

} // $FlowExpected


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