react-hichestan-numberinput/dist/CardNumberInput.js

A serie of react components to numbers in input specially persian numbers.

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _objects = _interopRequireDefault(require("shallow-equal/objects"));

var _util = require("./util");

var _excluded = ["value", "onChange", "onFocus", "onBlur", "onInput", "onPast", "onKeyDown", "onShowDialog", "pattern", "inputMode", "type", "inputRef", "getInputRef", "numberFormat", "defaultValue"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

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

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

var CARD_SEPERATOR = '-';
var SEPERATORES_REGEX = new RegExp("[ ".concat(CARD_SEPERATOR, "]"), 'g');
var MATCH_REGEX = new RegExp("[0-9]{4}[".concat(CARD_SEPERATOR, "][0-9]{4}[").concat(CARD_SEPERATOR, "][0-9]{4}[").concat(CARD_SEPERATOR, "][0-9]{4}"));
var EMPTY_VALUE = "    ".concat(CARD_SEPERATOR, "    ").concat(CARD_SEPERATOR, "    ").concat(CARD_SEPERATOR, "    ");

var CardNumberInput = /*#__PURE__*/function (_Component) {
  _inherits(CardNumberInput, _Component);

  var _super = _createSuper(CardNumberInput);

  function CardNumberInput(props) {
    var _this;

    _classCallCheck(this, CardNumberInput);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "readCardNumberFromValue", function (value) {
      if (!value) return;
      var latinNumberValue = (0, _util.mapToLatin)(value);
      var regEx = /[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}[^0-9]*[0-9]{4}/;
      var match = latinNumberValue.match(regEx);

      if (match) {
        var valueWithNoSeperator = match[0].replace(/[^0-9]*/g, '');
        return "".concat(valueWithNoSeperator.substring(0, 4)).concat(CARD_SEPERATOR).concat(valueWithNoSeperator.substring(4, 8)).concat(CARD_SEPERATOR).concat(valueWithNoSeperator.substring(8, 12)).concat(CARD_SEPERATOR).concat(valueWithNoSeperator.substring(12, 16));
      }

      var regEx4Digits = /[0-9]{4}/;
      var match4Digit = latinNumberValue.match(regEx4Digits);

      if (match4Digit) {
        _this.updateState(_this.updateValue(_this.inputRef.current, match4Digit[0], _this.props.numberFormat));

        return;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "readValues", function (value, numberFormat) {
      var valueToShow = _this.mapValue(value, numberFormat || _this.props.numberFormat);

      var valueIsValid = _this.isValueValidCardNumber(value);

      return {
        value: value,
        valueToShow: valueToShow,
        valueIsValid: valueIsValid,
        selectionStart: undefined,
        selectionEnd: undefined
      };
    });

    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (event) {
      if (_this.isValueEmpty(_this.values.value)) {
        _this.jumpTo(1);
      }

      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
      if (_this.props.onBlur) {
        _this.props.onBlur(event);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "jumpToNext", function () {
      var selectionStart = _this.inputRef.current.selectionStart;

      var whereTheCaretIs = _this.whereIsCaret(selectionStart);

      if (whereTheCaretIs < 4) {
        _this.jumpTo(whereTheCaretIs + 1);

        return true;
      }

      return false;
    });

    _defineProperty(_assertThisInitialized(_this), "jumpToPrevious", function () {
      var selectionStart = _this.inputRef.current.selectionStart;

      var whereTheCaretIs = _this.whereIsCaret(selectionStart);

      if (whereTheCaretIs > 1) {
        _this.jumpTo(whereTheCaretIs - 1);

        return true;
      }

      return false;
    });

    _defineProperty(_assertThisInitialized(_this), "isValueEmpty", function (value) {
      if (value.replace(SEPERATORES_REGEX, '') === '') return true;
      return false;
    });

    _defineProperty(_assertThisInitialized(_this), "jumpTo", function (section) {
      var caretPosition = (section - 1) * 5;
      _this.values.selectionStart = caretPosition;
      _this.values.selectionEnd = caretPosition;

      _this.inputRef.current.setSelectionRange(_this.values.selectionStart, _this.values.selectionEnd);
    });

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
      // console.log('keyCode: ', event.keyCode, 'key: ', event.key);
      if (_this.props.disabled || _this.props.readOnly) {
        event.preventDefault();
      } else if (event.keyCode === 8) {
        //backspace
        event.preventDefault();

        _this.updateState(_this.deleteValue(event.target, -1));
      } else if (event.keyCode === 46) {
        //delete
        event.preventDefault();

        _this.updateState(_this.deleteValue(event.target, 1));
      } else if (event.keyCode >= 48 && event.keyCode <= 57) {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, (event.keyCode - 48).toString(), _this.props.numberFormat));
      } else if (event.keyCode >= 96 && event.keyCode <= 105) {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, (event.keyCode - 96).toString(), _this.props.numberFormat));
      } else if (event.key >= '۰' && event.key <= '۹' || event.key >= '٠' && event.key <= '٩') {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, event.key, _this.props.numberFormat));
      } else if (event.key === '.' || event.key === '/' || event.key === '-' || event.key === '*' || event.key === '#' || event.keyCode === 188 || event.keyCode === 189 || event.keyCode === 190 || event.keyCode === 191) {
        event.preventDefault();

        if (event.ctrlKey || event.shiftKey || event.metaKey || event.key === '#') {
          _this.jumpToPrevious();
        } else {
          _this.jumpToNext();
        }
      } else if (event.keyCode >= 36 && event.keyCode <= 40) {//arrows
      } else if (event.keyCode === 9) {
        //tab
        if (Math.abs(_this.inputRef.current.selectionStart - _this.inputRef.current.selectionEnd) === _this.inputRef.current.value.length) {
          return;
        }

        if (event.ctrlKey || event.shiftKey || event.metaKey) {
          if (_this.jumpToPrevious()) event.preventDefault();
        } else {
          if (_this.jumpToNext()) event.preventDefault();
        }
      } else if (event.keyCode === 13) {
        //return
        _this.hideKeyboard();
      } else if ((event.ctrlKey || event.metaKey) && (event.keyCode === 67 || event.keyCode === 86 || event.keyCode === 88)) {//copy/paste/cut
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 82) {//refresh key
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 73) {//inspector
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 65) {//select all
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 76) {//location focus
      } else if (event.keyCode === 115) {
        // F4
        if (_this.props.onShowDialog) {
          event.preventDefault();

          _this.props.onShowDialog();
        }
      } else if (event.keyCode >= 112 && event.keyCode <= 123) {// All other F keys
      } else if (event.keyCode === 229) {
        //android bug workaround
        //K1 : I guess that we have to save the caret position as the input will change it, we need it to know where we have to jump to in handleInput function
        _this.values.selectionStart = _this.inputRef.current.selectionStart;
        _this.values.selectionEnd = _this.inputRef.current.selectionEnd; //  this.rr.current.innerText = `setting ss to ${this.values.selectionStart}  ${this.values.selectionEnd}`;
      } else {
        // console.log('other');
        // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey);
        //  this.rr.current.innerText = `keyCode: ${event.keyCode} key:  ${event.key} ctrlKey: ${event.ctrlKey}`;
        event.preventDefault();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "hideKeyboard", function () {
      _this.inputRef.current.blur();
    });

    _defineProperty(_assertThisInitialized(_this), "handlePaste", function (event) {
      event.preventDefault();
      if (_this.props.disabled || _this.props.readOnly) return;

      var valueFromClipboard = _this.readCardNumberFromValue((event.clipboardData || window.clipboardData).getData('text'));

      if (!valueFromClipboard) return;

      var values = _this.readValues(valueFromClipboard);

      if (values.valueIsValid) {
        _this.updateState(values);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleInput", function (event) {
      event.preventDefault();
      if (_this.props.disabled || _this.props.readOnly) return;
      if (_this.values.valueToShow === event.target.value) return;
      var inputValue = event.target.value; // const enteredValue = stripAnyThingButDigits(event.target.value);
      // this.rr.current.innerText = `V : ${inputValue}`;

      if (_this.inputRef.current.value !== _this.values.valueToShow) {
        _this.inputRef.current.value = _this.values.valueToShow;

        _this.inputRef.current.setSelectionRange(_this.values.selectionStart, _this.values.selectionEnd);
      }

      if ((0, _util.hasStringACharToGoToNext)(inputValue)) {
        _this.jumpToNext();
      } // this.updateState(this.rollbackValue());

    });

    _defineProperty(_assertThisInitialized(_this), "mapValue", function (value, numberFormat) {
      if (numberFormat === _util.NUMBER_FORMAT_FARSI) {
        var _mapped = (0, _util.mapToFarsi)(value);

        return _mapped;
      } else if (numberFormat === _util.NUMBER_FORMAT_LATIN) {
        var _mapped2 = (0, _util.mapToLatin)(value);

        return _mapped2;
      }

      var mapped = (0, _util.mapToFarsi)(value);
      return mapped;
    });

    _defineProperty(_assertThisInitialized(_this), "updateState", function (newState, noFireOnChange) {
      if (!newState) return;
      _this.values = newState;

      if (_this.values.valueIsValid === undefined) {
        _this.values.valueIsValid = _this.isValueValidCardNumber(_this.values.value);
      }

      var fireOnChangeInTheEnd = false; //console.log('values on updateState', this.values)

      if (_this.inputRef.current.value !== _this.values.valueToShow) {
        fireOnChangeInTheEnd = true;
        _this.inputRef.current.value = _this.values.valueToShow;
      }

      if (_this.inputRef.current === document.activeElement) {
        // console.log('has focus :D');
        _this.inputRef.current.setSelectionRange(_this.values.selectionStart, _this.values.selectionEnd);
      } else {// console.log('has not focus :(');
      }

      if (fireOnChangeInTheEnd) {
        if (!noFireOnChange) {
          _this.fireOnChange();
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "updateValue", function (element, enteredValue, numberFormat) {
      var enteredValueMapped = _this.mapValue(enteredValue, numberFormat);

      var valueToShow = element.value;

      if (valueToShow === '') {
        valueToShow = EMPTY_VALUE;
      }

      var selectionStart = element.selectionStart;
      var selectionEnd = element.selectionEnd;
      valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd);
      selectionStart += enteredValueMapped.length;
      var seperatorBefore = valueToShow.lastIndexOf(CARD_SEPERATOR, selectionStart - 1) + 1;
      var seperatorAfter = valueToShow.indexOf(CARD_SEPERATOR, selectionStart);
      if (seperatorAfter === -1) seperatorAfter = valueToShow.length;

      if (seperatorAfter - seperatorBefore > 4) {
        if (selectionStart - seperatorBefore >= 4) {
          valueToShow = valueToShow.substring(0, seperatorBefore) + valueToShow.substring(selectionStart - 4, selectionStart) + valueToShow.substring(seperatorAfter);
          selectionStart = seperatorBefore + 4;
        } else {
          valueToShow = valueToShow.substring(0, seperatorBefore + 4) + valueToShow.substring(seperatorAfter);
        }
      }

      var value = (0, _util.mapToLatin)(valueToShow);

      var valueIsValid = _this.isValueValidCardNumber(value);

      if (selectionStart < valueToShow.length && value.substring(selectionStart - 4, selectionStart).match(/[0-9]{4}/)) {
        selectionStart++;
      }

      selectionEnd = selectionStart;
      var values = {
        value: value,
        valueToShow: valueToShow,
        valueIsValid: valueIsValid,
        selectionStart: selectionStart,
        selectionEnd: selectionEnd
      };
      return values;
    });

    _defineProperty(_assertThisInitialized(_this), "whereIsCaret", function (selectionStart) {
      return Math.floor(selectionStart / 5) + 1;
    });

    _defineProperty(_assertThisInitialized(_this), "isValueValidCardNumber", function (value) {
      if (!value) return false;
      if (value.match(MATCH_REGEX)) return true;
      return false;
    });

    _defineProperty(_assertThisInitialized(_this), "resetValues", function () {
      var value = '';
      return {
        value: value,
        valueToShow: _this.mapValue(value, _this.props.numberFormat),
        valueIsValid: false,
        selectionStart: 0,
        selectionEnd: 0
      };
    });

    _defineProperty(_assertThisInitialized(_this), "deleteValue", function (element, qty) {
      var valueToShow = element.value;
      var selectionStart = element.selectionStart;
      var selectionEnd = element.selectionEnd;

      if (selectionStart === selectionEnd) {
        if (qty < 0) {
          if (selectionStart === 0) return;

          if (valueToShow.substring(selectionStart + qty, selectionStart) === CARD_SEPERATOR) {
            var newValues = _objectSpread({}, _this.values);

            newValues.selectionStart--;
            newValues.selectionEnd--;
            return newValues;
          }

          valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd);
          selectionStart += qty;
        } else {
          if (selectionEnd === valueToShow.length) return;
          if (valueToShow.substring(selectionStart, selectionStart + qty) === CARD_SEPERATOR) return;
          valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd + qty);
        }

        var nextSeperator = valueToShow.indexOf(CARD_SEPERATOR, selectionStart);

        if (nextSeperator === -1) {
          valueToShow = valueToShow + ' ';
        } else {
          valueToShow = valueToShow.substring(0, nextSeperator) + (0, _util.repeatStr)(' ', Math.abs(qty)) + valueToShow.substring(nextSeperator);
        }
      } else {
        if (valueToShow.substring(selectionStart, selectionEnd).indexOf(CARD_SEPERATOR) >= 0) {
          valueToShow = '';
          selectionStart = 0;
        } else {
          valueToShow = valueToShow.substring(0, selectionStart) + (0, _util.repeatStr)(' ', selectionEnd - selectionStart) + valueToShow.substring(selectionEnd);
        }
      }

      selectionEnd = selectionStart;
      var value = (0, _util.mapToLatin)(valueToShow);

      var valueIsValid = _this.isValueValidCardNumber(value);

      var values = {
        value: value,
        valueToShow: valueToShow,
        valueIsValid: valueIsValid,
        selectionStart: selectionStart,
        selectionEnd: selectionEnd
      };
      return values;
    });

    _defineProperty(_assertThisInitialized(_this), "fireOnChange", function () {
      if (_this.props.onChange) {
        var value = _this.values.value;

        if (_this.previousValue !== value) {
          _this.previousValue = value;
          var target = {
            name: _this.props.name,
            value: _this.values.value,
            valueIsValid: _this.values.valueIsValid
          };

          _this.props.onChange({
            target: target
          });
        }
      }
    });

    _this.emptyValue = _this.emptyValue.bind(_assertThisInitialized(_this));
    var ref = props.inputRef || props.getInputRef;

    if (ref && typeof ref === 'function') {
      ref = ref();
    }

    _this.inputRef = ref ? ref : /*#__PURE__*/_react.default.createRef(); // this.rr = React.createRef();

    _this.values = _this.readValues(props.value);
    _this.previousValue = _this.values.value;
    return _this;
  }
  /**
   * @param {string} value
   */


  _createClass(CardNumberInput, [{
    key: "emptyValue",
    value: function emptyValue() {
      this.updateState(this.resetValues());
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      if (nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat) {
        this.updateState(this.readValues(nextProps.value, nextProps.numberFormat), true);
      }

      if (!(0, _objects.default)(nextProps.style, this.props.style)) {
        return true;
      }

      if (nextProps.className !== this.props.className) {
        this.inputRef.current.className = nextProps.className;
      }

      if (nextProps.disabled !== this.props.disabled) {
        this.inputRef.current.disabled = nextProps.disabled;
      }

      if (nextProps.readOnly !== this.props.readOnly) {
        this.inputRef.current.readOnly = nextProps.readOnly;
      }

      if (nextProps.placeholder !== this.props.placeholder) {
        this.inputRef.current.placeholder = nextProps.placeholder;
      }

      return false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          value = _this$props.value,
          onChange = _this$props.onChange,
          onFocus = _this$props.onFocus,
          onBlur = _this$props.onBlur,
          onInput = _this$props.onInput,
          onPast = _this$props.onPast,
          onKeyDown = _this$props.onKeyDown,
          onShowDialog = _this$props.onShowDialog,
          pattern = _this$props.pattern,
          inputMode = _this$props.inputMode,
          type = _this$props.type,
          inputRef = _this$props.inputRef,
          getInputRef = _this$props.getInputRef,
          numberFormat = _this$props.numberFormat,
          defaultValue = _this$props.defaultValue,
          rest = _objectWithoutProperties(_this$props, _excluded);

      var valueToShow = this.values.valueToShow; // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more
      // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser

      return /*#__PURE__*/_react.default.createElement("input", _extends({
        ref: this.inputRef,
        type: "tel" // I tried to use text and using inputMode, but it does not work on Safari
        // inputMode={localInputMode}
        // xInputMode={localnputMode} // in firefox OS it is x-inputmode, I do not know how to handle it
        ,
        dir: "ltr" // pattern={localPattern}
        ,
        defaultValue: valueToShow,
        onKeyDown: this.handleKeyDown,
        onPaste: this.handlePaste,
        onInput: this.handleInput,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur
      }, rest)); //<p ref={this.rr} type={"text"}>empty</p></div>
    }
  }]);

  return CardNumberInput;
}(_react.Component);

_defineProperty(CardNumberInput, "propTypes", {
  /**
   * The ref to pass on the input, if empty it will be created internally
   */
  inputRef: _propTypes.default.any,
  getInputRef: _propTypes.default.any,

  /**
   * The name that will be set while firing the onChange event in the target object
   */
  name: _propTypes.default.string,

  /**
   * Callback function that is fired when the cart number value changes.
   */
  onChange: _propTypes.default.func,

  /**
   * Override the inline-styles of the root element.
   */
  style: _propTypes.default.object,

  /**
   * The css class name of the root element.
   */
  className: _propTypes.default.string,

  /**
   * Disables the card number.
   */
  disabled: _propTypes.default.bool,

  /**
   * makes the card number readonly.
   */
  readOnly: _propTypes.default.bool,

  /**
   * Callback function that is fired when a click event occurs on the input.
   */
  onClick: _propTypes.default.func,

  /**
   * Callback function that is fired when the input gains focus.
   */
  onFocus: _propTypes.default.func,

  /**
   * Sets the value for the card number input.
   */
  value: _propTypes.default.string
});

var _default = CardNumberInput;
exports.default = _default;