@kevincuadros/react-code/dist/react-code.esm.js

> Pin input component for React

import React, { useRef, useState, useEffect, useMemo } 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 styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\r\n\r\n.InputValidator_input_item__-hc2e::-webkit-outer-spin-button,\r\n.InputValidator_input_item__-hc2e::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.InputValidator_input_item__-hc2e {\r\n  border: 2px solid #ccc;\r\n  width: 30px;\r\n  height: 45px;\r\n  margin: 0 5px;\r\n  -webkit-appearance: none;\r\n  text-align: center;\r\n  font-size: 1.5rem;\r\n  outline: none;\r\n  border-radius: 5px;\r\n}\r\n\r\n.InputValidator_input_item__-hc2e:focus {\r\n  border: 2px solid rgb(5, 142, 255);\r\n}\r\n\r\ninput::placeholder{\r\n  color: #ccc;\r\n}\r\n\r\ninput:focus::placeholder {\r\n  color: transparent;\r\n}";
styleInject(css_248z);

var PinCode = function PinCode(_ref) {
  var length = _ref.length,
      onChange = _ref.onChange,
      placeholder = _ref.placeholder,
      inputStyle = _ref.inputStyle,
      className = _ref.className,
      valueToValidate = _ref.valueToValidate,
      _ref$invalidBorderCol = _ref.invalidBorderColor,
      invalidBorderColor = _ref$invalidBorderCol === void 0 ? '#ff0000' : _ref$invalidBorderCol,
      _ref$validBorderColor = _ref.validBorderColor,
      validBorderColor = _ref$validBorderColor === void 0 ? '#00ff00' : _ref$validBorderColor,
      _ref$autoFocus = _ref.autoFocus,
      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
  var inputRef = useRef([]);

  var _useState = useState(['']),
      inputValues = _useState[0],
      setInputValues = _useState[1];

  useEffect(function () {
    onChange(inputValues.join(''));
  }, [inputValues]);
  useEffect(function () {
    setInputValues(Array(length).fill(''));
  }, [length]);

  var focusHandler = function focusHandler(inputIndex, step) {
    var nextIndex = step === 'next' ? inputIndex + 1 : inputIndex - 1;
    var nextInput = inputRef.current[nextIndex];
    step === 'next' ? inputIndex < length - 1 && nextInput.focus() : inputIndex > 0 && nextInput.focus();
  };

  var handleOnKeyDown = function handleOnKeyDown(e, currentIndex) {
    switch (e.key) {
      case 'ArrowRight':
        focusHandler(currentIndex, 'next');
        break;

      case 'ArrowLeft':
        focusHandler(currentIndex, 'previous');
        break;

      case 'Backspace':
        inputValues[currentIndex] === '' && focusHandler(currentIndex, 'previous');
        var deleteValueByIndex = inputValues.map(function (_, i) {
          return i === currentIndex ? '' : inputValues[i];
        });
        setInputValues(deleteValueByIndex);
        break;
    }
  };

  var handleChange = function handleChange(e, currentIndex) {
    var value = e.target.value;
    if (!value) return;
    var updatedValueByIndex = inputValues.map(function (_, indexValues) {
      return indexValues === currentIndex ? value : inputValues[indexValues];
    });
    setInputValues(updatedValueByIndex);
    focusHandler(currentIndex, 'next');
  };

  var style = useMemo(function () {
    if (length !== inputValues.join('').length) return inputStyle;

    if (valueToValidate === inputValues.join('')) {
      return _extends({}, inputStyle, {
        border: "2px solid " + validBorderColor
      });
    }

    return _extends({}, inputStyle, {
      border: "2px solid " + invalidBorderColor
    });
  }, [length, inputValues]);
  return React.createElement(React.Fragment, null, inputValues.map(function (value, index) {
    return React.createElement("input", {
      placeholder: placeholder,
      style: valueToValidate ? style : inputStyle,
      type: "text",
      key: index,
      autoFocus: autoFocus ? index === 0 : false,
      className: "input_item " + className,
      maxLength: 1,
      onKeyDown: function onKeyDown(e) {
        return handleOnKeyDown(e, index);
      },
      onChange: function onChange(e) {
        return handleChange(e, index);
      },
      ref: function ref(el) {
        return inputRef.current[index] = el;
      },
      value: value
    });
  }));
};

export { PinCode };
//# sourceMappingURL=react-code.esm.js.map