react-otp-input-2/dist/index.modern.js

Updated version of react-otp-input with bug fixes.

import React, { Component, PureComponent } from 'react';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : 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 _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;

  _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}

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

var _excluded = ["placeholder", "separator", "isLastChild", "inputStyle", "focus", "isDisabled", "hasErrored", "errorStyle", "focusStyle", "disabledStyle", "shouldAutoFocus", "isInputNum", "index", "value", "className", "isInputSecure"];
var BACKSPACE = 8;
var LEFT_ARROW = 37;
var RIGHT_ARROW = 39;
var DELETE = 46;
var SPACEBAR = 32;

var isStyleObject = function isStyleObject(obj) {
  return typeof obj === 'object';
};

var SingleOtpInput = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(SingleOtpInput, _PureComponent);

  function SingleOtpInput(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _this.getClasses = function () {
      for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
        classes[_key] = arguments[_key];
      }

      return classes.filter(function (event) {
        return !isStyleObject(event) && event !== false;
      }).join(' ');
    };

    _this.getType = function () {
      var _this$props = _this.props,
          isInputSecure = _this$props.isInputSecure,
          isInputNum = _this$props.isInputNum;

      if (isInputSecure) {
        return 'password';
      }

      if (isInputNum) {
        return 'tel';
      }

      return 'text';
    };

    _this.input = React.createRef();
    return _this;
  }

  var _proto = SingleOtpInput.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this$props2 = this.props,
        focus = _this$props2.focus,
        shouldAutoFocus = _this$props2.shouldAutoFocus;
    var inputEl = this.input.current;

    if (inputEl && focus && shouldAutoFocus) {
      inputEl.focus();
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var focus = this.props.focus;
    var inputEl = this.input.current;

    if (prevProps.focus !== focus && inputEl && focus) {
      inputEl.focus();
      inputEl.select();
    }
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        placeholder = _this$props3.placeholder,
        separator = _this$props3.separator,
        isLastChild = _this$props3.isLastChild,
        inputStyle = _this$props3.inputStyle,
        focus = _this$props3.focus,
        isDisabled = _this$props3.isDisabled,
        hasErrored = _this$props3.hasErrored,
        errorStyle = _this$props3.errorStyle,
        focusStyle = _this$props3.focusStyle,
        disabledStyle = _this$props3.disabledStyle,
        isInputNum = _this$props3.isInputNum,
        index = _this$props3.index,
        value = _this$props3.value,
        className = _this$props3.className,
        rest = _objectWithoutPropertiesLoose(_this$props3, _excluded);

    return /*#__PURE__*/React.createElement("div", {
      className: className,
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement("input", _extends({
      "aria-label": "" + (index === 0 ? 'Please enter verification code. ' : '') + (isInputNum ? 'Digit' : 'Character') + " " + (index + 1),
      autoComplete: "off",
      style: Object.assign({
        width: '1em',
        textAlign: 'center'
      }, isStyleObject(inputStyle) && inputStyle, focus && isStyleObject(focusStyle) && focusStyle, isDisabled && isStyleObject(disabledStyle) && disabledStyle, hasErrored && isStyleObject(errorStyle) && errorStyle),
      placeholder: placeholder,
      className: this.getClasses(inputStyle, focus && focusStyle, isDisabled && disabledStyle, hasErrored && errorStyle),
      type: this.getType(),
      maxLength: isInputNum,
      ref: this.input,
      disabled: isDisabled,
      value: value ? value : ''
    }, rest)), !isLastChild && separator);
  };

  return SingleOtpInput;
}(PureComponent);

var OtpInput = /*#__PURE__*/function (_Component) {
  _inheritsLoose(OtpInput, _Component);

  function OtpInput() {
    var _this2;

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this2 = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this2.state = {
      activeInput: 0
    };

    _this2.getOtpValue = function () {
      return _this2.props.value ? _this2.props.value.toString().split('') : [];
    };

    _this2.getPlaceholderValue = function () {
      var _this2$props = _this2.props,
          placeholder = _this2$props.placeholder,
          numInputs = _this2$props.numInputs;

      if (typeof placeholder === 'string') {
        if (placeholder.length === numInputs) {
          return placeholder;
        }

        if (placeholder.length > 0) {
          console.error('Length of the placeholder should be equal to the number of inputs.');
        }
      }
    };

    _this2.handleOtpChange = function (otp) {
      var onChange = _this2.props.onChange;
      var otpValue = otp.join('');
      onChange(otpValue);
    };

    _this2.isInputValueValid = function (value) {
      var isTypeValid = _this2.props.isInputNum ? !isNaN(parseInt(value, 10)) : typeof value === 'string';
      return isTypeValid && value.trim().length === 1;
    };

    _this2.focusInput = function (input) {
      var numInputs = _this2.props.numInputs;
      var activeInput = Math.max(Math.min(numInputs - 1, input), 0);

      _this2.setState({
        activeInput: activeInput
      });
    };

    _this2.focusNextInput = function () {
      var activeInput = _this2.state.activeInput;

      _this2.focusInput(activeInput + 1);
    };

    _this2.focusPrevInput = function () {
      var activeInput = _this2.state.activeInput;

      _this2.focusInput(activeInput - 1);
    };

    _this2.changeCodeAtFocus = function (value) {
      var activeInput = _this2.state.activeInput;

      var otp = _this2.getOtpValue();

      otp[activeInput] = value[0];

      _this2.handleOtpChange(otp);
    };

    _this2.handleOnPaste = function (event) {
      event.preventDefault();
      var activeInput = _this2.state.activeInput;
      var _this2$props2 = _this2.props,
          numInputs = _this2$props2.numInputs,
          isDisabled = _this2$props2.isDisabled;

      if (isDisabled) {
        return;
      }

      var otp = _this2.getOtpValue();

      var nextActiveInput = activeInput;
      var pastedData = e.clipboardData.getData('text/plain').slice(0, numInputs - activeInput).split('');

      for (var pos = 0; pos < numInputs; ++pos) {
        if (pos >= activeInput && pastedData.length > 0) {
          otp[pos] = pastedData.shift();
          nextActiveInput++;
        }
      }

      _this2.setState({
        activeInput: nextActiveInput
      }, function () {
        _this2.focusInput(nextActiveInput);

        _this2.handleOtpChange(otp);
      });
    };

    _this2.handleOnChange = function (event) {
      var value = event.target.value;

      if (_this2.isInputValueValid(value)) {
        _this2.changeCodeAtFocus(value);
      }
    };

    _this2.handleOnKeyDown = function (event) {
      if (event.keyCode === BACKSPACE || event.key === 'Backspace') {
        event.preventDefault();

        _this2.changeCodeAtFocus('');

        _this2.focusPrevInput();
      } else if (event.keyCode === DELETE || event.key === 'Delete') {
        event.preventDefault();

        _this2.changeCodeAtFocus('');
      } else if (event.keyCode === LEFT_ARROW || event.key === 'ArrowLeft') {
        event.preventDefault();

        _this2.focusPrevInput();
      } else if (event.keyCode === RIGHT_ARROW || event.key === 'ArrowRight') {
        event.preventDefault();

        _this2.focusNextInput();
      } else if (event.keyCode === SPACEBAR || event.key === ' ' || event.key === 'Spacebar' || event.key === 'Space') {
        event.preventDefault();
      }
    };

    _this2.handleOnInput = function (event) {
      if (!event.target.value) return;

      if (event.target.value && event.target.value.length > 1) {
        event.preventDefault();
        var numInputs = _this2.props.numInputs;
        var activeInput = _this2.state.activeInput;

        var otp = _this2.getOtpValue();

        var pastedData = event.target.value.slice(0, numInputs - activeInput).split('');

        for (var pos = 0; pos < numInputs; ++pos) {
          if (pos >= activeInput && pastedData.length > 0) {
            otp[pos] = pastedData.shift();
          }
        }

        _this2.handleOtpChange(otp);

        _this2.focusInput(_this2.props.numInputs);
      } else if (_this2.isInputValueValid(event.target.value)) {
        _this2.focusNextInput();
      } else {
        if (!_this2.props.isInputNum) {
          var nativeEvent = event.nativeEvent;

          if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
            event.preventDefault();

            _this2.changeCodeAtFocus('');

            _this2.focusPrevInput();
          }
        }
      }
    };

    _this2.renderInputs = function () {
      var activeInput = _this2.state.activeInput;
      var _this2$props3 = _this2.props,
          numInputs = _this2$props3.numInputs,
          inputStyle = _this2$props3.inputStyle,
          focusStyle = _this2$props3.focusStyle,
          separator = _this2$props3.separator,
          isDisabled = _this2$props3.isDisabled,
          disabledStyle = _this2$props3.disabledStyle,
          hasErrored = _this2$props3.hasErrored,
          errorStyle = _this2$props3.errorStyle,
          shouldAutoFocus = _this2$props3.shouldAutoFocus,
          isInputNum = _this2$props3.isInputNum,
          isInputSecure = _this2$props3.isInputSecure,
          className = _this2$props3.className;
      var inputs = [];

      var otp = _this2.getOtpValue();

      var placeholder = _this2.getPlaceholderValue();

      var dataCy = _this2.props['data-cy'];
      var dataTestId = _this2.props['data-testid'];

      var _loop = function _loop(i) {
        inputs.push( /*#__PURE__*/React.createElement(SingleOtpInput, {
          placeholder: placeholder && placeholder[i],
          key: i,
          index: i,
          focus: activeInput === i,
          value: otp && otp[i],
          onChange: _this2.handleOnChange,
          onKeyDown: _this2.handleOnKeyDown,
          onInput: _this2.handleOnInput,
          onPaste: _this2.handleOnPaste,
          onFocus: function onFocus(event) {
            _this2.setState({
              activeInput: i
            });

            event.target.select();
          },
          onBlur: function onBlur() {
            return _this2.setState({
              activeInput: -1
            });
          },
          separator: separator,
          inputStyle: inputStyle,
          focusStyle: focusStyle,
          isLastChild: i === numInputs - 1,
          isDisabled: isDisabled,
          disabledStyle: disabledStyle,
          hasErrored: hasErrored,
          errorStyle: errorStyle,
          shouldAutoFocus: shouldAutoFocus,
          isInputNum: isInputNum,
          isInputSecure: isInputSecure,
          className: className,
          "data-cy": dataCy && dataCy + "-" + i,
          "data-testid": dataTestId && dataTestId + "-" + i
        }));
      };

      for (var i = 0; i < numInputs; i++) {
        _loop(i);
      }

      return inputs;
    };

    return _this2;
  }

  var _proto2 = OtpInput.prototype;

  _proto2.render = function render() {
    var containerStyle = this.props.containerStyle;
    return /*#__PURE__*/React.createElement("div", {
      style: Object.assign({
        display: 'flex'
      }, isStyleObject(containerStyle) && containerStyle),
      className: !isStyleObject(containerStyle) ? containerStyle : ''
    }, this.renderInputs());
  };

  return OtpInput;
}(Component);

OtpInput.defaultProps = {
  numInputs: 4,
  onChange: function onChange(otp) {
    return consosle.log(otp);
  },
  isDisabled: false,
  shouldAutoFocus: false,
  value: '',
  isInputSecure: false
};

export default OtpInput;
//# sourceMappingURL=index.modern.js.map