mask-input/lib/MaskInput.js

Mask input component. Allow to input formatted values with fixed length or apply custom formatting function, to format values with any length

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _inputCore = require('input-core');

var _subscribeEvent = require('subscribe-event');

var _subscribeEvent2 = _interopRequireDefault(_subscribeEvent);

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

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

var KEYBOARD = {
  BACKSPACE: 8,
  DELETE: 46
};
/**
 * Adapter of react-maskInput to vanilaJs
 */

var MaskInput = function () {
  function MaskInput(element, _ref) {
    var _this = this;

    var _ref$mask = _ref.mask,
        mask = _ref$mask === undefined ? _inputCore.defaults.mask : _ref$mask,
        _ref$value = _ref.value,
        value = _ref$value === undefined ? '' : _ref$value,
        reformat = _ref.reformat,
        maskString = _ref.maskString,
        _ref$maskChar = _ref.maskChar,
        maskChar = _ref$maskChar === undefined ? _inputCore.defaults.maskChar : _ref$maskChar,
        _ref$maskFormat = _ref.maskFormat,
        maskFormat = _ref$maskFormat === undefined ? _inputCore.defaults.maskFormat : _ref$maskFormat,
        showMask = _ref.showMask,
        alwaysShowMask = _ref.alwaysShowMask,
        onChange = _ref.onChange;

    _classCallCheck(this, MaskInput);

    this.showValue = function () {
      if (_this.showMask && (_this.canSetSelection || _this.props.alwaysShowMask)) {
        _this.element.value = _this.input.getMaskedValue();
        return;
      }
      _this.element.value = _this.input.getVisibleValue();
    };

    this.setSelection = function () {
      if (!_this.canSetSelection) {
        return;
      }
      var selection = _this.input.getSelection();
      _this.element.setSelectionRange(selection.start, selection.end);

      var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) {
        return setTimeout(fn, 0);
      };
      // For android
      raf(function () {
        return _this.element.setSelectionRange(selection.start, selection.end);
      });
    };

    this.onPaste = function (e) {
      e.preventDefault();
      _this.getSelection();

      // getData value needed for IE also works in FF & Chrome
      _this.input.paste(e.clipboardData.getData('Text'));

      _this.showValue();

      // Timeout needed for IE
      setTimeout(_this.setSelection, 0);

      _this.props.onChange && _this.props.onChange(e);
    };

    this.onChange = function (e) {
      var currentValue = void 0;
      if (_this.showMask && (_this.canSetSelection || _this.props.alwaysShowMask)) {
        currentValue = _this.input.getMaskedValue();
      } else {
        currentValue = _this.input.getVisibleValue();
      }

      // fix conflict by update value in mask model
      if (e.target.value !== currentValue) {
        _this.getSelection();
        _this.input.setValue(e.target.value);

        _this.showValue();

        setTimeout(_this.setSelection, 0);
      }
      _this.props.onChange && _this.props.onChange(e);
    };

    this.onKeyPress = function (e) {
      if (e.metaKey || e.altKey || e.ctrlKey || e.key === 'Enter') {
        return;
      }

      e.preventDefault();
      _this.getSelection();
      _this.input.input(e.key || e.data || String.fromCharCode(e.which));
      _this.showValue();
      _this.setSelection();
      _this.props.onChange && _this.props.onChange(e);
    };

    this.onKeyDown = function (e) {
      if (e.which === KEYBOARD.BACKSPACE) {
        e.preventDefault();
        _this.getSelection();
        _this.input.removePreviosOrSelected();

        _this.showValue();
        _this.setSelection();

        _this.props.onChange && _this.props.onChange(e);
      }

      if (e.which === KEYBOARD.DELETE) {
        e.preventDefault();
        _this.getSelection();
        _this.input.removeNextOrSelected();

        _this.showValue();
        _this.setSelection();

        _this.props.onChange && _this.props.onChange(e);
      }
    };

    this.onFocus = function () {
      _this.canSetSelection = true;
    };

    this.onBlur = function () {
      _this.canSetSelection = false;
    };

    this.input = this.input = (0, _inputCore.createInput)({
      value: value,
      reformat: reformat,
      maskString: maskString,
      maskChar: maskChar,
      mask: mask,
      maskFormat: maskFormat
    });

    this.props = {
      mask: mask,
      value: value,
      reformat: reformat,
      maskChar: maskChar,
      maskFormat: maskFormat,
      maskString: maskString,
      showMask: showMask,
      alwaysShowMask: alwaysShowMask,
      onChange: onChange
    };

    this.showMask = alwaysShowMask || showMask;

    this.element = element;
    this.showValue();
    this.subscribe();
  }

  _createClass(MaskInput, [{
    key: 'getSelection',
    value: function getSelection() {
      this.input.setSelection({
        start: this.element.selectionStart,
        end: this.element.selectionEnd
      });
    }
  }, {
    key: 'subscribe',
    value: function subscribe() {
      this.unsubscribe = {
        onPaste: (0, _subscribeEvent2.default)(this.element, 'paste', this.onPaste),
        onKeyDown: (0, _subscribeEvent2.default)(this.element, 'keydown', this.onKeyDown),
        onKeyPress: (0, _subscribeEvent2.default)(this.element, this.keyPressPropName(), this.onKeyPress),
        onChange: (0, _subscribeEvent2.default)(this.element, 'change', this.onChange),
        onFocus: (0, _subscribeEvent2.default)(this.element, 'focus', this.onFocus),
        onBlur: (0, _subscribeEvent2.default)(this.element, 'blur', this.onBlur)
      };
    }
  }, {
    key: 'keyPressPropName',
    value: function keyPressPropName() {
      if (typeof navigator !== 'undefined' && navigator.userAgent.match(/Android/i)) {
        return 'beforeinput';
      }
      return 'keypress';
    }
  }, {
    key: 'setProps',
    value: function setProps(_ref2) {
      var mask = _ref2.mask,
          value = _ref2.value,
          reformat = _ref2.reformat,
          maskString = _ref2.maskString,
          maskChar = _ref2.maskChar,
          maskFormat = _ref2.maskFormat,
          showMask = _ref2.showMask,
          alwaysShowMask = _ref2.alwaysShowMask,
          onChange = _ref2.onChange;

      var updated = false;

      if (this.props.onChange !== onChange) {
        this.props.onChange = onChange;
      }

      if (this.props.alwaysShowMask !== alwaysShowMask || this.props.showMask !== showMask) {
        this.showMask = alwaysShowMask || showMask;

        this.props.alwaysShowMask = alwaysShowMask;
        this.props.showMask = showMask;

        updated = true;
      }

      if (maskFormat && maskFormat !== this.props.maskFormat) {
        this.input.setMaskFormat(maskFormat);

        this.props.maskFormat = maskFormat;

        updated = true;
      }

      if (mask !== this.props.mask) {
        this.input.setMask(mask);

        this.props.mask = mask;

        updated = true;
      }

      if (maskString !== this.props.maskString) {
        this.input.setMaskString(maskString);

        this.props.maskString = maskString;

        updated = true;
      }

      if (maskChar !== this.props.maskChar) {
        this.input.setMaskChar(maskChar);

        this.props.maskChar = maskChar;

        updated = true;
      }

      if (reformat !== this.props.reformat) {
        this.input.setReformat(reformat);

        this.props.reformat = reformat;

        updated = true;
      }

      if (value !== this.props.value) {
        this.input.setValue(value);

        this.props.value = value;

        updated = true;
      }

      if (updated) {
        this.showValue();
        this.setSelection();
      }
    }
  }, {
    key: 'destroy',
    value: function destroy() {
      this.unsubscribe.onPaste();
      this.unsubscribe.onKeyDown();
      this.unsubscribe.onKeyPress();
      this.unsubscribe.onChange();
      this.unsubscribe.onFocus();
      this.unsubscribe.onBlur();
    }
  }]);

  return MaskInput;
}();

exports.default = MaskInput;