react-mdc-web/lib/Textfield/Field.js

React web components for Material Design

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

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

var propTypes = {
  box: _propTypes2.default.bool,
  children: _propTypes2.default.node,
  className: _propTypes2.default.string,
  disabled: _propTypes2.default.bool,
  focused: _propTypes2.default.bool,
  invalid: _propTypes2.default.bool,
  textarea: _propTypes2.default.bool,
  trailingIcon: _propTypes2.default.bool
};

var ROOT = 'mdc-text-field';
var TEXTAREA = ROOT + '--textarea';
var DISABLED = ROOT + '--disabled';
var FOCUSED = ROOT + '--focused';
var INVALID = ROOT + '--invalid';
var UPGRADED = ROOT + '--upgraded';
var BOX = ROOT + '--box';
var LEADING_ICON = ROOT + '--with-leading-icon';
var TRAILING_ICON = ROOT + '--with-trailing-icon';
var ICON = ROOT + '__icon';

var Field = function Field(_ref) {
  var _classnames;

  var className = _ref.className,
      box = _ref.box,
      focused = _ref.focused,
      disabled = _ref.disabled,
      invalid = _ref.invalid,
      children = _ref.children,
      textarea = _ref.textarea,
      trailingIcon = _ref.trailingIcon;

  var hasIcon = false;
  var childs = _react.Children.map(children, function (child) {
    if (child && child.type === _Icon2.default) {
      hasIcon = true;
      var childClassName = child.props.className;

      var classes = (0, _classnames3.default)(ICON, childClassName);
      return (0, _react.cloneElement)(child, { className: classes });
    }
    return child;
  });

  return _react2.default.createElement(
    'div',
    {
      className: (0, _classnames3.default)(ROOT, (_classnames = {}, _defineProperty(_classnames, TEXTAREA, textarea), _defineProperty(_classnames, BOX, box), _defineProperty(_classnames, FOCUSED, focused), _defineProperty(_classnames, DISABLED, disabled), _defineProperty(_classnames, INVALID, invalid), _defineProperty(_classnames, LEADING_ICON, hasIcon && !trailingIcon), _defineProperty(_classnames, TRAILING_ICON, hasIcon && trailingIcon), _classnames), UPGRADED, className)
    },
    childs
  );
};
Field.propTypes = propTypes;
exports.default = Field;