@rzymek/react-mfb/build/menu.js

React component for a material menu à la Google Inbox and Evernote

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc && desc.writable) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };

var React = require("react");
var PropTypes = require("prop-types");

var getClasses = require("./utils/get-classes");
var getChildren = require("./utils/get-children");
var childrenValidator = require("./utils/children-validator");

var Menu = (function (_React$Component) {
  function Menu(props) {
    _classCallCheck(this, Menu);

    _get(Object.getPrototypeOf(Menu.prototype), "constructor", this).call(this, props);
    this.state = {
      isOpen: false
    };

    this.toggleMenu = this.toggleMenu.bind(this);
  }

  _inherits(Menu, _React$Component);

  _createClass(Menu, {
    toggleMenu: {
      value: function toggleMenu(evt) {
        evt.preventDefault();

        if (this.props.method === "hover") {
          return;
        }
        // flip the state from open to close and viceversa
        this.setState({
          isOpen: !this.state.isOpen
        });
      }
    },
    render: {
      value: function render() {
        var classes = getClasses(this.props);
        var buttons = getChildren(this.props.children);

        var main = buttons.main && React.cloneElement(buttons.main, {
          onClick: this.toggleMenu
        });

        return React.createElement(
          "ul",
          { className: classes,
            "data-mfb-toggle": this.props.method,
            "data-mfb-state": this.state.isOpen ? "open" : "closed" },
          React.createElement(
            "li",
            { className: "mfb-component__wrap" },
            main,
            React.createElement(
              "ul",
              { className: "mfb-component__list" },
              buttons.child
            )
          )
        );
      }
    }
  });

  return Menu;
})(React.Component);

Menu.propTypes = {
  effect: PropTypes.oneOf(["zoomin", "slidein", "slidein-spring", "fountain"]).isRequired,
  position: PropTypes.oneOf(["tl", "tr", "bl", "br"]).isRequired,
  children: childrenValidator
};

module.exports = Menu;