zrmc/components/icon.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _2 = _interopRequireDefault(_);

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

/**
 * material-icons
 * See:
 * https://material.io/develop/web/components/buttons/icon-buttons/
 *
 */

var MDC_ICON = "mdc-icon-button"; /**
                                   * 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 Icon = function Icon(_ref) {
  var name = _ref.name,
      fa = _ref.fa,
      componentName = _ref.componentName,
      color = _ref.color,
      label = _ref.label,
      onClick = _ref.onClick,
      children = _ref.children,
      isButton = _ref.isButton,
      props = (0, _objectWithoutProperties3.default)(_ref, ["name", "fa", "componentName", "color", "label", "onClick", "children", "isButton"]);

  var classes = MDC_ICON;
  if (!isButton) {
    classes = "zrmc-icon";
  }
  var p = _2.default.sanitizeProps(props);
  if (color) {
    p.style = {};
    p.style.color = color;
  }
  if (label) {
    p["aria-label"] = label;
  }
  var ch = children;
  var n = name;
  var f = fa;
  p.className = classes;
  if (ch && typeof ch === "string") {
    if (ch.startsWith("fa-")) {
      f = ch.substring(3);
    } else {
      n = ch;
    }
  }
  if (f) {
    p.className += " fa fa-" + f + " fa-fw";
    ch = null;
  } else if (n) {
    ch = n;
    if (isButton) {
      p.className += " material-icons";
    } else {
      p.className = "material-icons";
    }
  }
  if (onClick) {
    p.role = "button";
    p.tabIndex = "0";
    p.onKeyUp = function () {};
    p.onClick = onClick;
  }
  var element = _react2.default.createElement(componentName, p, ch);
  return _2.default.render(element, props);
};

Icon.defaultProps = {
  mdcElement: MDC_ICON,
  componentName: "i",
  color: null,
  label: null,
  fa: null,
  onClick: null,
  children: null,
  isButton: false
};

Icon.propTypes = {
  mdcElement: _propTypes2.default.string,
  componentName: _propTypes2.default.string,
  name: _propTypes2.default.string,
  color: _propTypes2.default.string,
  label: _propTypes2.default.string,
  fa: _propTypes2.default.string,
  isButton: _propTypes2.default.bool,
  onClick: _propTypes2.default.func,
  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string])
};

exports.default = Icon;