@kiwicom/orbit-components/es/Stepper/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 StepperStateless from "./StepperStateless";
import validateIncrement from "../utils/validateIncrement";
import validateDecrement from "../utils/validateDecrement";
import useStateWithCallback from "../hooks/useStateWithCallback";

const Stepper = (_ref) => {
  let {
    onChange,
    defaultValue = 0
  } = _ref,
      props = _objectWithoutProperties(_ref, ["onChange", "defaultValue"]);

  const [value, setValue] = useStateWithCallback(defaultValue, onChange);

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

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

  const handleKeyDown = ev => {
    if (ev.keyCode === 40) {
      ev.preventDefault();
      decrementCounter();
    }

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

  const {
    onBlur,
    onFocus,
    disabled,
    name,
    dataTest,
    minValue,
    maxValue,
    titleIncrement,
    titleDecrement
  } = props;
  return React.createElement(StepperStateless, {
    disabled: disabled,
    dataTest: dataTest,
    value: value,
    name: name,
    minValue: minValue,
    maxValue: maxValue,
    onKeyDown: handleKeyDown,
    onBlur: onBlur,
    onFocus: onFocus,
    onIncrement: incrementCounter,
    onDecrement: decrementCounter,
    titleIncrement: titleIncrement,
    titleDecrement: titleDecrement
  });
};

export default Stepper;
export { default as StepperStateless } from "./StepperStateless";