zrmc/components/textfield.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require("../");

var _2 = _interopRequireDefault(_);

var _icon = require("./icon");

var _icon2 = _interopRequireDefault(_icon);

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

/**
 * mdc-text-field
 * See
 * https://material.io/develop/web/components/input-controls/text-field/
 */

/**
 * Copyright (c) 2015-present, CWB SAS
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var MDC_TEXTFIELD = "mdc-text-field";

var TextField = function (_Component) {
  (0, _inherits3.default)(TextField, _Component);

  function TextField(props) {
    (0, _classCallCheck3.default)(this, TextField);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TextField.__proto__ || Object.getPrototypeOf(TextField)).call(this, props));

    _initialiseProps.call(_this);

    var value = props.defaultValue || "";
    _this.state = { focused: false, value: value };
    return _this;
  }

  (0, _createClass3.default)(TextField, [{
    key: "getValue",
    value: function getValue() {
      return this.state.value;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          mdcElement = _props.mdcElement,
          label = _props.label,
          id = _props.id,
          type = _props.type,
          disabled = _props.disabled,
          onChange = _props.onChange,
          dense = _props.dense,
          helperText = _props.helperText,
          htPersistent = _props.htPersistent,
          htValidationMsg = _props.htValidationMsg,
          fullwidth = _props.fullwidth,
          isTextarea = _props.isTextarea,
          isBoxed = _props.isBoxed,
          outlined = _props.outlined,
          leadingIcon = _props.leadingIcon,
          trailingIcon = _props.trailingIcon,
          onClickLI = _props.onClickLI,
          onClickTI = _props.onClickTI,
          noFloatingLabel = _props.noFloatingLabel,
          pattern = _props.pattern,
          props = (0, _objectWithoutProperties3.default)(_props, ["mdcElement", "label", "id", "type", "disabled", "onChange", "dense", "helperText", "htPersistent", "htValidationMsg", "fullwidth", "isTextarea", "isBoxed", "outlined", "leadingIcon", "trailingIcon", "onClickLI", "onClickTI", "noFloatingLabel", "pattern"]);
      var _state = this.state,
          focused = _state.focused,
          value = _state.value;

      var isValid = pattern ? RegExp(pattern).test(value) : true;
      var classes = MDC_TEXTFIELD + " mdc-text-field--upgraded";
      var lc = "mdc-floating-label";
      var bc = "mdc-text-field__bottom-line";
      if (focused) {
        classes += " mdc-text-field--focused";
        if (!noFloatingLabel) {
          lc += " mdc-floating-label--float-above";
        }
        bc += " mdc-text-field__bottom-line--active";
      }
      if (outlined) {
        classes += " mdc-text-field--outlined";
      }
      if (!isValid) {
        classes += " mdc-text-field--invalid";
      }
      var li = void 0;
      var ti = void 0;
      var tabIndex = null;
      if (leadingIcon) {
        classes += " mdc-text-field--with-leading-icon";
        if (onClickLI) {
          tabIndex = "0";
        }
        li = _react2.default.createElement(_icon2.default, {
          className: "mdc-text-field__icon",
          name: leadingIcon,
          tabIndex: tabIndex,
          onClick: function onClick(e) {
            e.preventDefault();
            if (onClickLI) {
              onClickLI();
            }
          }
        });
      }
      tabIndex = null;
      if (trailingIcon) {
        classes += " mdc-text-field--with-trailing-icon";
        if (onClickTI) {
          tabIndex = "0";
        }
        ti = _react2.default.createElement(_icon2.default, {
          className: "mdc-text-field__icon",
          name: trailingIcon,
          tabIndex: tabIndex,
          onClick: function onClick(e) {
            e.preventDefault();
            if (onClickTI) {
              onClickTI();
            }
          }
        });
      }

      var p = _2.default.sanitizeProps(props);

      if (disabled) {
        classes += " mdc-text-field--disabled";
        p.disabled = "disabled";
      }
      if (dense) {
        classes += " mdc-text-field--dense";
      }
      if (fullwidth) {
        classes += " mdc-text-field--fullwidth";
        p.placeholder = label;
        p["aria-label"] = label;
      }
      if (isBoxed) {
        classes += " mdc-text-field--box";
      }
      var sc = {};

      if (value && value.trim().length > 0) {
        if (noFloatingLabel) {
          sc.display = "none";
        } else if (!focused) {
          lc += " mdc-floating-label--float-above";
        }
      }

      var cid = _2.default.generateId(id);

      if (helperText) {
        p["aria-controls"] = cid + "-helper-text";
      }

      var input = void 0;
      p.type = type;
      p.id = cid;
      p.className = "mdc-text-field__input";
      p.onBlur = this.onBlur;
      p.onFocus = this.onFocus;
      p.onChange = this.onChange;
      p.ref = function (c) {
        _this2.inputRef = c;
      };
      if (isTextarea) {
        classes += " mdc-text-field--textarea";
        input = _react2.default.createElement("textarea", p);
      } else {
        input = _react2.default.createElement("input", p);
      }
      var labelElement = void 0;
      /* eslint-disable jsx-a11y/label-has-for */
      if (!fullwidth) {
        labelElement = _react2.default.createElement(
          "label",
          {
            focused: focused.toString(),
            className: lc,
            htmlFor: cid,
            style: sc,
            ref: function ref(c) {
              _this2.labelRef = c;
            }
          },
          label
        );
      }
      var bcElement1 = void 0;
      var bcElement2 = void 0;
      if (outlined) {
        bcElement1 = _react2.default.createElement(
          "div",
          { className: "mdc-text-field__outline" },
          _react2.default.createElement(
            "svg",
            null,
            _react2.default.createElement("path", { className: "mdc-text-field__outline-path" })
          )
        );
        bcElement2 = _react2.default.createElement("div", { className: "mdc-text-field__idle-outline" });
      } else {
        bcElement1 = _react2.default.createElement("div", { className: bc });
      }

      var element = _2.default.render(_react2.default.createElement(
        "div",
        { className: classes },
        li,
        input,
        labelElement,
        ti,
        bcElement1,
        bcElement2
      ), props);
      /* eslint-enable jsx-a11y/label-has-for */
      if (helperText) {
        var cht = "mdc-text-field-helper-text";
        if (htPersistent) {
          cht += " mdc-text-field-helper-text--persistent";
        }
        if (htValidationMsg) {
          cht += " mdc-text-field-helper-text--validation-msg";
        }
        element = _react2.default.createElement(
          "div",
          { className: "zrmc-text-field-wrapper" },
          element,
          _react2.default.createElement(
            "p",
            { className: cht, "aria-hidden": "true" },
            helperText
          )
        );
      }
      return element;
    }
  }]);
  return TextField;
}(_react.Component);

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

  this.onBlur = function () {
    _this3.setState({ focused: false });
  };

  this.onFocus = function () {
    _this3.setState({ focused: true });
  };

  this.onChange = function (e) {
    if (_this3.inputRef) {
      var value = _this3.inputRef.value;

      _this3.setState({ value: value });
      if (_this3.props.noFloatingLabel) {
        if (value && value.length > 0) {
          _this3.labelRef.setAttribute("style", "display: none;");
        } else {
          _this3.labelRef.setAttribute("style", "");
        }
      }
      if (_this3.props.onChange) {
        _this3.props.onChange(e);
      }
    }
  };
};

exports.default = TextField;


TextField.defaultProps = {
  mdcElement: MDC_TEXTFIELD,
  label: null,
  id: null,
  type: "text",
  disabled: false,
  onChange: function onChange() {},
  dense: false,
  helperText: null,
  htPersistent: false,
  htValidationMsg: false,
  fullwidth: false,
  isTextarea: false,
  isBoxed: false,
  outlined: false,
  leadingIcon: null,
  trailingIcon: null,
  onClickLI: null,
  onClickTI: null,
  noFloatingLabel: false,
  defaultValue: undefined
};

TextField.propTypes = {
  mdcElement: _propTypes2.default.string,
  label: _propTypes2.default.string,
  id: _propTypes2.default.string,
  type: _propTypes2.default.string,
  disabled: _propTypes2.default.bool,
  onChange: _propTypes2.default.func,
  dense: _propTypes2.default.bool,
  helperText: _propTypes2.default.string,
  htPersistent: _propTypes2.default.bool,
  htValidationMsg: _propTypes2.default.bool,
  fullwidth: _propTypes2.default.bool,
  isTextarea: _propTypes2.default.bool,
  isBoxed: _propTypes2.default.bool,
  outlined: _propTypes2.default.bool,
  leadingIcon: _propTypes2.default.string,
  trailingIcon: _propTypes2.default.string,
  onClickLI: _propTypes2.default.func,
  onClickTI: _propTypes2.default.func,
  defaultValue: _propTypes2.default.string,
  noFloatingLabel: _propTypes2.default.bool,
  pattern: _propTypes2.default.string
};