zrmc/menu/menu.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

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-simple-menu
 * See:
 * https://material.io/components/web/catalog/menus/
 * https://material-components-web.appspot.com/simple-menu.html
 *
 * TODO:
 * - animation
 * - autoposition
 * - autofocus
 * see https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu/foundation.js
 *
 */

var MDC_SIMPLE_MENU = "mdc-menu"; /**
                                   * 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 Menu = function (_Component) {
  (0, _inherits3.default)(Menu, _Component);

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

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

    _this.handleOnSelected = function (child, index) {
      if (_this.props.onSelected) {
        _this.props.onSelected(child, index);
      }

      if (_this.props.onClose) {
        _this.props.onClose();
      }
    };

    _this.selectedRef = null;
    return _this;
  }

  (0, _createClass3.default)(Menu, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateFocus();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.updateFocus();
    }
  }, {
    key: "updateFocus",
    value: function updateFocus() {
      if (this.selectedRef && this.selectedRef.innerRef) {
        this.selectedRef.innerRef.focus();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          children = _props.children,
          open = _props.open,
          focusedIndex = _props.focusedIndex,
          props = (0, _objectWithoutProperties3.default)(_props, ["children", "open", "focusedIndex"]);

      var classes = MDC_SIMPLE_MENU;
      this.selectedRef = null;
      if (open) {
        classes += " " + MDC_SIMPLE_MENU + "--open";
      }
      var element = _react2.default.createElement(
        "div",
        {
          className: classes,
          tabIndex: "-1",
          ref: function ref(c) {
            _this2.innerRef = c;
          }
        },
        _react2.default.createElement(
          "ul",
          {
            className: MDC_SIMPLE_MENU + "__items mdc-list",
            role: "menu",
            "aria-hidden": "true"
          },
          _react.Children.map(children, function (child, index) {
            if (child.props.mdcElement === "mdc-list-item") {
              var tabIndex = child.props.tabIndex;


              var newProps = {};
              newProps.onSelected = function (c, i) {
                _this2.handleOnSelected(c, index);

                if (child.props.onSelected) {
                  child.props.onSelected(c, i);
                }
              };

              if (focusedIndex === index) {
                newProps.selected = true;
                newProps.ref = function (c) {
                  _this2.selectedRef = c;
                };
              }

              if (tabIndex > -1) {
                return _react2.default.cloneElement(child, (0, _extends3.default)({}, child.props, newProps));
              }
            }

            return child;
          })
        )
      );
      return _2.default.render(element, props);
    }
  }]);
  return Menu;
}(_react.Component);

exports.default = Menu;


Menu.defaultProps = {
  mdcElement: MDC_SIMPLE_MENU,
  open: false,
  onSelected: null,
  onClose: null,
  anchorCorner: null,
  anchorMargin: null,
  focusedIndex: -1
};

Menu.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node.isRequired,
  open: _propTypes2.default.bool,
  onSelected: _propTypes2.default.func,
  onClose: _propTypes2.default.func,
  anchorCorner: _propTypes2.default.oneOf(["top_start", "top_end", "bottom_start", "bottom_end"]),
  anchorMargin: _propTypes2.default.shape({
    top: _propTypes2.default.string,
    left: _propTypes2.default.string,
    bottom: _propTypes2.default.string,
    right: _propTypes2.default.string
  }),
  focusedIndex: _propTypes2.default.number
};