zrmc/list/item.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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

var _icon2 = _interopRequireDefault(_icon);

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

var _2 = _interopRequireDefault(_);

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

/**
 * mdc-list-item
 * See:
 * https://material.io/components/web/catalog/lists/
 *
 */

/**
 * 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_LISTITEM = "mdc-list-item";

var ListItem = function ListItem(_ref) {
  var children = _ref.children,
      type = _ref.type,
      icon = _ref.icon,
      activated = _ref.activated,
      imgSrc = _ref.imgSrc,
      imgSize = _ref.imgSize,
      imgLabel = _ref.imgLabel,
      secondaryText = _ref.secondaryText,
      href = _ref.href,
      onClick = _ref.onClick,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "type", "icon", "activated", "imgSrc", "imgSize", "imgLabel", "secondaryText", "href", "onClick"]);

  var classes = MDC_LISTITEM;
  var graphic = void 0;
  if (activated) {
    classes += " mdc-list-item--activated";
  }
  if (icon) {
    graphic = _react2.default.createElement(
      _icon2.default,
      { className: "mdc-list-item__graphic", "aria-hidden": "true" },
      icon
    );
  } else if (imgSrc) {
    graphic = _react2.default.createElement("img", {
      className: "mdc-list-item__graphic",
      src: imgSrc,
      width: imgSize,
      height: imgSize,
      alt: imgLabel
    });
  }
  var meta = void 0;
  var text = _react.Children.map(children, function (child) {
    if (child.props && child.props.mdcElement === "mdc-list-item__meta") {
      meta = child;
      return null;
    }
    return child;
  });
  if (secondaryText) {
    text = _react2.default.createElement(
      "span",
      { className: "mdc-list-item__text" },
      text,
      _react2.default.createElement(
        "span",
        { className: "mdc-list-item__secondary-text" },
        secondaryText
      )
    );
  }
  var p = {};
  if (onClick) {
    p.onClick = onClick;
  }
  var el = void 0;
  if (type === "a" || href) {
    el = _react2.default.createElement(
      "a",
      (0, _extends3.default)({ className: classes, href: href }, p),
      graphic,
      text,
      meta
    );
  } else {
    p.role = "menuitem";
    p.onKeyPress = function () {};
    el = _react2.default.createElement(
      "li",
      (0, _extends3.default)({ className: classes }, p),
      graphic,
      text,
      meta
    );
  }
  return _2.default.render(el, props);
};

ListItem.defaultProps = {
  mdcElement: MDC_LISTITEM,
  children: null,
  type: "li",
  activated: false,
  icon: null,
  imgSrc: null,
  imgSize: 56,
  imgLabel: null,
  secondaryText: null,
  href: null,
  onClick: null
};

ListItem.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  type: _propTypes2.default.string,
  activated: _propTypes2.default.bool,
  icon: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
  imgSrc: _propTypes2.default.string,
  imgSize: _propTypes2.default.number,
  imgLabel: _propTypes2.default.string,
  secondaryText: _propTypes2.default.node,
  href: _propTypes2.default.string,
  onClick: _propTypes2.default.func
};

exports.default = ListItem;