paper-input/dist/index.js

Paper Input React component

'use strict';

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

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

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

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

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

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

function _possibleConstructorReturn(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; }

function _inherits(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 PaperInput = function (_React$Component) {
  _inherits(PaperInput, _React$Component);

  function PaperInput(props) {
    _classCallCheck(this, PaperInput);

    var _this = _possibleConstructorReturn(this, (PaperInput.__proto__ || Object.getPrototypeOf(PaperInput)).call(this, props));

    _this._value = props.value || props.defaultValue || '';
    _this.state = {
      touched: false,
      dirty: !!_this._value,
      focused: false
    };
    _this.input = null;
    ['handleBlurCapture', 'handleChange', 'handleFocus', 'handleKeyDown', 'handleInputRef'].forEach(function (meth) {
      return _this[meth] = _this[meth].bind(_this);
    });
    return _this;
  }

  _createClass(PaperInput, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.value != null) this._value = nextProps.value;
      this.setState({
        dirty: !!this._value
      });
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.input.setCustomValidity(this.shouldDisplayError() ? this.props.error : '');
    }
  }, {
    key: 'getValue',
    value: function getValue() {
      return this.input.value;
    }

    // convenience method to be called by a container component

  }, {
    key: 'cancel',
    value: function cancel() {
      this.input.value = '';
      this.setState({ dirty: false });
    }
  }, {
    key: 'handleBlurCapture',
    value: function handleBlurCapture(e) {
      if (this.props.onBlurCapture) this.props.onBlurCapture(e);
      this.setState({ dirty: !!this._value, focused: false });
    }
  }, {
    key: 'handleChange',
    value: function handleChange(e) {
      this._value = e.target.value;
      if (this.props.onChange) this.props.onChange(e);
      this.setState({ dirty: !!this._value });
    }
  }, {
    key: 'handleFocus',
    value: function handleFocus(e) {
      if (this.props.onFocus) this.props.onFocus(e);
      this.setState({ touched: true, focused: true });
    }
  }, {
    key: 'handleKeyDown',
    value: function handleKeyDown(e) {
      if (this.props.onKeyDown) this.props.onKeyDown(e);
      if (!this.state.touched) this.setState({ touched: true });
    }
  }, {
    key: 'handleInputRef',
    value: function handleInputRef(ref) {
      this.input = ref;
    }
  }, {
    key: 'shouldDisplayError',
    value: function shouldDisplayError() {
      return this.props.error && (this.state.touched && this.state.dirty || this.props.mustDisplayError);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props;
      var floatLabel = _props.floatLabel;
      var className = _props.className;
      var label = _props.label;
      var error = _props.error;
      var large = _props.large;
      var name = _props.name;
      var autoFocus = _props.autoFocus;
      var value = _props.value;
      var placeholder = _props.placeholder;
      var type = _props.type;
      var required = _props.required;
      var defaultValue = _props.defaultValue;
      var disabled = _props.disabled;
      var readOnly = _props.readOnly;
      var autoComplete = _props.autoComplete;


      var inputProps = { name: name, autoComplete: autoComplete, autoFocus: autoFocus, value: value, placeholder: placeholder, type: type, required: required, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly };

      var _state = this.state;
      var dirty = _state.dirty;
      var touched = _state.touched;
      var focused = _state.focused;

      var containerClassNames = (0, _classnames3.default)(_defineProperty({
        'paper-input': true,
        'float-label': !!floatLabel,
        big: large
      }, className, !!className));
      var inputClassNames = (0, _classnames3.default)({ dirty: dirty, touched: touched });

      ;
      if (inputProps.placeholder && !focused) {
        inputProps = Object.assign({}, inputProps, { placeholder: undefined });
      }

      return _react2.default.createElement(
        'div',
        { className: containerClassNames },
        _react2.default.createElement('input', _extends({}, inputProps, {
          ref: this.handleInputRef,
          className: inputClassNames,
          onBlurCapture: this.handleBlurCapture,
          onChange: this.handleChange,
          onFocus: this.handleFocus,
          onKeyDown: this.handleKeyDown
        })),
        _react2.default.createElement(
          'label',
          { htmlFor: inputProps.name },
          label
        ),
        _react2.default.createElement('span', { className: 'border-line' }),
        this.shouldDisplayError() && _react2.default.createElement(
          'span',
          { className: 'error' },
          error
        )
      );
    }
  }]);

  return PaperInput;
}(_react2.default.Component);

exports.default = PaperInput;
var _React$PropTypes = _react2.default.PropTypes;
var bool = _React$PropTypes.bool;
var func = _React$PropTypes.func;
var string = _React$PropTypes.string;

PaperInput.propTypes = {
  className: string,
  defaultValue: string,
  error: string,
  floatLabel: bool,
  label: string.isRequired,
  large: bool,
  mustDisplayError: bool,
  name: string.isRequired,
  onBlurCapture: func,
  onChange: func,
  onFocus: func,
  onKeyDown: func,
  placeholder: string,
  type: string,
  value: string,
  autoFocus: bool,
  required: bool,
  disabled: bool,
  readOnly: bool
};
PaperInput.defaultProps = {
  floatLabel: true,
  type: 'text'
};