zrmc/components/button.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 _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 _icon = require("./icon");

var _icon2 = _interopRequireDefault(_icon);

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

var _2 = _interopRequireDefault(_);

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

/**
 * mdc-button
 *
 * See:
 * https://material.io/develop/web/components/buttons/
 *
 *
 */

/**
 * 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_BUTTON = "mdc-button";

var Button = function (_React$Component) {
  (0, _inherits3.default)(Button, _React$Component);

  function Button() {
    (0, _classCallCheck3.default)(this, Button);
    return (0, _possibleConstructorReturn3.default)(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
  }

  (0, _createClass3.default)(Button, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          cardAction = _props.cardAction,
          children = _props.children,
          dense = _props.dense,
          disabled = _props.disabled,
          icon = _props.icon,
          id = _props.id,
          link = _props.link,
          newTarget = _props.newTarget,
          onClick = _props.onClick,
          raised = _props.raised,
          ripple = _props.ripple,
          outlined = _props.outlined,
          unelevated = _props.unelevated,
          type = _props.type,
          props = (0, _objectWithoutProperties3.default)(_props, ["cardAction", "children", "dense", "disabled", "icon", "id", "link", "newTarget", "onClick", "raised", "ripple", "outlined", "unelevated", "type"]);

      var classes = MDC_BUTTON;
      // Special case for inner buttons of CardActions
      if (cardAction) {
        classes += " mdc-button--dense mdc-card__action";
      } else if (dense) {
        classes += " mdc-button--dense";
      }
      if (raised) {
        classes += " mdc-button--raised";
      }
      if (unelevated) {
        classes += " mdc-button--unelevated";
      }
      if (outlined) {
        classes += " mdc-button--outlined";
      }
      var i = "";
      if (icon) {
        i = _react2.default.createElement(_icon2.default, { className: "mdc-button__icon", name: icon });
      }
      var element = void 0;
      if (link) {
        element = _react2.default.createElement(
          "a",
          {
            id: id,
            href: link,
            className: classes,
            ref: function ref(e) {
              _this2.innerRef = e;
            },
            target: newTarget && "_blank",
            rel: newTarget && "noopener noreferrer"
          },
          i,
          children
        );
      } else {
        element = _react2.default.createElement(
          "button",
          {
            id: id,
            className: classes,
            onClick: onClick,
            disabled: disabled,
            type: type,
            ref: function ref(e) {
              _this2.innerRef = e;
            }
          },
          i,
          children
        );
      }
      return _2.default.render(element, props);
    }
  }]);
  return Button;
}(_react2.default.Component);

Button.defaultProps = {
  cardAction: false,
  children: null,
  dense: false,
  disabled: false,
  icon: null,
  id: null,
  link: null,
  mdcElement: MDC_BUTTON,
  onClick: null,
  raised: false,
  ripple: false,
  outlined: false,
  type: "button",
  unelevated: false
};

Button.propTypes = {
  cardAction: _propTypes2.default.bool,
  children: _propTypes2.default.node,
  dense: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  icon: _propTypes2.default.string,
  link: _propTypes2.default.string,
  newTarget: _propTypes2.default.bool,
  mdcElement: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  raised: _propTypes2.default.bool,
  ripple: _propTypes2.default.bool,
  outlined: _propTypes2.default.bool,
  unelevated: _propTypes2.default.bool,
  type: _propTypes2.default.string,
  id: _propTypes2.default.string
};

exports.default = Button;