@talixo/masked-input/dist/index.js

UI Component which represents Masked Input

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var shared = require('@talixo/shared');

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

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 inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var objectWithoutProperties = function (obj, keys) {
  var target = {};

  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
    target[i] = obj[i];
  }

  return target;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var moduleName = 'masked-input';

var propTypes = {
  /** Additional class name passed to wrapper. */
  className: PropTypes.string,

  /** Event called when input inside  input has lost focus. */
  onBlur: PropTypes.func,

  /** Event called when input inside has changed. */
  onChange: PropTypes.func,

  /** Event called when input is focused. */
  onFocus: PropTypes.func,

  /** Input element. */
  renderInput: PropTypes.node.isRequired,

  /** Function which returns masking element to render when input is blurred. First argument function is value passed
   * either by parent changing value prop or by children if `props.value` is undefined.
   * */
  renderMask: PropTypes.func.isRequired,

  /** Value to be passed to render mask function.  */
  value: PropTypes.any
};

var defaultProps = {};

/**
 * Component which represents Masked Input.
 *
 * @param {object} props
 * @param {string} [props.className]
 * @returns {React.Element}
 */

var MaskedInput = function (_React$Component) {
  inherits(MaskedInput, _React$Component);

  function MaskedInput() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, MaskedInput);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = MaskedInput.__proto__ || Object.getPrototypeOf(MaskedInput)).call.apply(_ref, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(MaskedInput, [{
    key: 'componentWillReceiveProps',


    /**
     * Update value inside state if it was updateed
     *
     * @param nextProps
     */
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.value !== undefined && nextProps.value !== this.state.value) {
        this.setState({ value: nextProps.value });
      }
    }

    /**
     * Handle focus change. Update focused inside state
     * and invoke passed onBlur/onFocus callbacks
     *
     * @param {boolean} focused
     * @param {*} args
     */


    /**
     * Update value inside state
     *
     * @param v
     * @param args
     */

    /**
     * Generate input props with new event handlers
     *
     * @returns {{onBlur: void | any, onFocus: void | any, onChange: MaskedInput.handleChange}}
     */


    /**
     * Create element from function passed to renderMask prop and apply class
     *
     * @returns {object|null}
     */

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          className = _props.className,
          error = _props.error,
          onBlur = _props.onBlur,
          onFocus = _props.onFocus,
          onChange = _props.onChange,
          renderInput = _props.renderInput,
          renderMask = _props.renderMask,
          passedProps = objectWithoutProperties(_props, ['className', 'error', 'onBlur', 'onFocus', 'onChange', 'renderInput', 'renderMask']);
      var _state = this.state,
          focused = _state.focused,
          value = _state.value;
      var getInputProps = this.getInputProps,
          maskRenderer = this.maskRenderer;


      var wrapperCls = shared.buildClassName(moduleName, className);
      var inputProps = getInputProps();

      return React.createElement(
        'div',
        Object.assign({ className: wrapperCls }, passedProps),
        !focused && value && maskRenderer(),
        React.cloneElement(renderInput, inputProps)
      );
    }
  }]);
  return MaskedInput;
}(React.Component);

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.state = {
    value: this.props.value === undefined ? null : this.props.value,
    focused: false };

  this.handleFocusChange = function (focused) {
    for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
      args[_key2 - 1] = arguments[_key2];
    }

    var _props2 = _this2.props,
        onFocus = _props2.onFocus,
        onBlur = _props2.onBlur;
    var _props$renderInput$pr = _this2.props.renderInput.props,
        childOnFocus = _props$renderInput$pr.onFocus,
        childOnBlur = _props$renderInput$pr.onBlur;

    // Updated state when focus changes

    _this2.setState({ focused: focused });

    // Invoke onFocus callback of MaskInput and/or children
    if (focused) {
      if (onFocus) onFocus.apply(undefined, [focused].concat(args));
      if (childOnFocus) childOnFocus.apply(undefined, args);
    }

    // Invoke onBLur callback of MaskInput and/or children
    if (!focused) {
      if (onBlur) onBlur.apply(undefined, [focused].concat(args));
      if (childOnBlur) childOnBlur.apply(undefined, args);
    }
  };

  this.focus = function () {
    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      args[_key3] = arguments[_key3];
    }

    _this2.handleFocusChange.apply(_this2, [true].concat(args));
  };

  this.blur = function () {
    for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
      args[_key4] = arguments[_key4];
    }

    _this2.handleFocusChange.apply(_this2, [false].concat(args));
  };

  this.handleChange = function (v) {
    for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
      args[_key5 - 1] = arguments[_key5];
    }

    var _props3 = _this2.props,
        onChange = _props3.onChange,
        value = _props3.value;
    var childOnChange = _this2.props.renderInput.props.onChange;

    // Invoke MaskInpu onChange callback if is set

    if (onChange) {
      onChange.apply(undefined, [v].concat(args));
    }

    // Invoke children onChange callback if is set
    if (childOnChange) {
      childOnChange.apply(undefined, [v].concat(args));
    }

    // If no value is passed from props update it to match the value passed by children
    if (value === undefined) {
      _this2.setState({ value: v });
    }
  };

  this.getInputProps = function () {
    var renderInput = _this2.props.renderInput;


    var newProps = Object.assign({}, renderInput.props, {
      onBlur: _this2.blur,
      onFocus: _this2.focus,
      onChange: _this2.handleChange
    });

    return newProps;
  };

  this.maskRenderer = function () {
    var renderMask = _this2.props.renderMask;
    var value = _this2.state.value;

    // Only generate element if input is not focused and value inside state exists

    var element = renderMask(value);
    return React.cloneElement(element, Object.assign({}, element.props, {
      className: shared.buildClassName([moduleName, 'mask'], element.props.className)
    }));
  };
};

MaskedInput.propTypes = propTypes;

MaskedInput.defaultProps = defaultProps;

exports.MaskedInput = MaskedInput;