@kiwicom/orbit-components/lib/InputStepper/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
});
Object.defineProperty(exports, "InputStepperStateless", {
  enumerable: true,
  get: function () {
    return _InputStepperStateless.default;
  }
});
exports.default = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

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

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

var _InputStepperStateless = _interopRequireDefault(require("./InputStepperStateless"));

var _validateIncrement = _interopRequireDefault(require("../utils/validateIncrement"));

var _validateDecrement = _interopRequireDefault(require("../utils/validateDecrement"));

var _useStateWithCallback = _interopRequireDefault(require("../hooks/useStateWithCallback"));

var _useTranslate = _interopRequireDefault(require("../hooks/useTranslate"));

const _excluded = ["onChange", "defaultValue", "disabled"];
const InputStepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    onChange,
    defaultValue = 0,
    disabled = false
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  const translate = (0, _useTranslate.default)();
  const [value, setValue] = (0, _useStateWithCallback.default)(defaultValue, onChange);

  const incrementCounter = () => {
    const {
      maxValue = Number.POSITIVE_INFINITY,
      step = 1
    } = props;

    if (!disabled) {
      setValue((0, _validateIncrement.default)({
        value,
        maxValue,
        step
      }));
    }
  };

  const decrementCounter = () => {
    const {
      minValue = Number.NEGATIVE_INFINITY,
      step = 1
    } = props;

    if (!disabled) {
      setValue((0, _validateDecrement.default)({
        value,
        minValue,
        step
      }));
    }
  };

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

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

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

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

  const handleKeyDown = ev => {
    if (ev.keyCode === _keyMaps.default.ARROW_DOWN) {
      ev.preventDefault();
      decrementCounter();
    }

    if (ev.keyCode === _keyMaps.default.ARROW_UP) {
      ev.preventDefault();
      incrementCounter();
    }
  };

  const handleChange = ev => {
    const eventValue = ev && parseInt(ev.target.value, 10);
    const prevValue = value;
    const {
      maxValue,
      minValue
    } = props;
    if (disabled) return;

    if (prevValue <= eventValue) {
      setValue((0, _validateIncrement.default)({
        value,
        maxValue,
        step: 0
      }));
    }

    if (prevValue >= eventValue) {
      setValue((0, _validateDecrement.default)({
        value,
        minValue,
        step: 0
      }));
    }
  };

  const {
    label,
    error,
    onBlur,
    onFocus,
    help,
    name,
    dataTest,
    size = _consts.SIZE_OPTIONS.NORMAL,
    required,
    readOnly,
    minValue,
    maxValue,
    tabIndex,
    spaceAfter,
    width = "100%",
    titleIncrement,
    titleDecrement
  } = props;
  return /*#__PURE__*/React.createElement(_InputStepperStateless.default, {
    dataTest: dataTest,
    size: size,
    label: label,
    disabled: disabled,
    required: required,
    readOnly: readOnly,
    name: name,
    width: width,
    error: error,
    help: help,
    onChange: handleChange,
    onBlur: onBlur,
    onFocus: onFocus,
    onKeyDown: handleKeyDown,
    value: value || 0,
    minValue: minValue,
    maxValue: maxValue,
    tabIndex: tabIndex,
    forwardedRef: ref,
    spaceAfter: spaceAfter,
    onDecrement: handleDecrementCounter,
    onIncrement: handleIncrementCounter,
    titleIncrement: titleIncrement || translate("increment_value"),
    titleDecrement: titleDecrement || translate("decrement_value")
  });
});
InputStepper.displayName = "InputStepper";
var _default = InputStepper;
exports.default = _default;