zrmc/menu/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 _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(_);

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

/**
 * mdc-list-item
 * See:
 * https://material.io/components/web/catalog/menus/
 * https://material-components-web.appspot.com/simple-menu.html
 *
 */

var MDC_LIST_ITEM = "mdc-list-item"; /**
                                      * 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 MenuItem = function (_Component) {
  (0, _inherits3.default)(MenuItem, _Component);

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

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

    _this.setRef = function (c) {
      _this.innerRef = c;
    };

    _this.handleClick = function (e) {
      e.stopPropagation();

      if (_this.props.onSelected && _this.props.tabIndex > -1) {
        _this.props.onSelected(_this, _this.props.tabIndex);
      }
    };

    _this.innerRef = null;
    return _this;
  }

  (0, _createClass3.default)(MenuItem, [{
    key: "render",
    value: function render() {
      var _props = this.props,
          children = _props.children,
          tabIndex = _props.tabIndex,
          disabled = _props.disabled,
          selected = _props.selected,
          role = _props.role,
          onSelected = _props.onSelected,
          props = (0, _objectWithoutProperties3.default)(_props, ["children", "tabIndex", "disabled", "selected", "role", "onSelected"]);

      var classes = MDC_LIST_ITEM;

      var p = {};
      if (disabled) {
        p.disabled = "disabled";
        p["aria-disabled"] = "true";
        p.tabIndex = "-1";
      } else {
        p.tabIndex = Number(tabIndex).toString();
        if (selected) {
          p["aria-selected"] = "true";
        }
      }
      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
      return _2.default.render(_react2.default.createElement(
        "li",
        (0, _extends3.default)({
          className: classes,
          role: role
        }, p, {
          onKeyUp: function onKeyUp() {},
          onClick: this.handleClick,
          ref: this.setRef
        }),
        children
      ), props);
      /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
    }
  }]);
  return MenuItem;
}(_react.Component);

MenuItem.defaultProps = {
  mdcElement: MDC_LIST_ITEM,
  tabIndex: 0,
  disabled: false,
  selected: false,
  onSelected: null,
  role: "menuitem"
};

MenuItem.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.string.isRequired,
  tabIndex: _propTypes2.default.number,
  disabled: _propTypes2.default.bool,
  selected: _propTypes2.default.bool,
  onSelected: _propTypes2.default.func,
  role: _propTypes2.default.string
};

exports.default = MenuItem;