preact-material-components/Menu/index.js

preact wrapper for "Material Components for the web"

"use strict";

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

var _preact = require("preact");

var _MaterialComponent = _interopRequireDefault(require("../MaterialComponent"));

var _menu = require("@material/menu");

var _List = _interopRequireDefault(require("../List"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/*
 * Default props for menu
 */
const defaultProps = {
  open: false
};
/**
 * @prop open = false
 */

class Menu extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'menu';
    this._mdcProps = ['open', 'open-from-top-left', 'open-from-top-right', 'open-from-bottom-left', 'open-from-bottom-right'];
    this._select = this._select.bind(this);
    this._cancel = this._cancel.bind(this);
  }

  componentDidMount() {
    this.MDComponent = new _menu.MDCMenu(this.control);
    this.MDComponent.listen('MDCMenu:selected', this._select);
    this.MDComponent.listen('MDCMenu:cancel', this._cancel);
    toggleMenu(defaultProps, this.props, this.MDComponent);
  }

  componentWillUnmount() {
    this.MDComponent.unlisten('MDCMenu:selected', this._select);
    this.MDComponent.unlisten('MDCMenu:cancel', this._cancel);
    this.MDComponent.destroy && this.MDComponent.destroy();
  }

  _select(e) {
    if (this.props.onSelect) {
      this.props.onSelect(e);
    }

    this._menuClosed();
  }

  _cancel(e) {
    if (this.props.onCancel) {
      this.props.onCancel(e);
    }

    this._menuClosed();
  }

  _menuClosed(e) {
    if (this.props.onMenuClosed) {
      this.props.onMenuClosed(e);
    }
  }

  componentWillUpdate(nextProps) {
    toggleMenu(this.props, nextProps, this.MDComponent);
  }

  materialDom(props) {
    return (0, _preact.h)("div", _extends({
      tabindex: "-1"
    }, props, {
      ref: this.setControlRef
    }), (0, _preact.h)(_List.default, {
      className: "mdc-menu__items",
      role: "menu",
      "aria-hidden": "true"
    }, props.children));
  }

}

class MenuAnchor extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'menu-anchor';
  }

}
/*
 * Function to add declarative opening/closing to drawer
 */


function toggleMenu(oldprops, newprops, menu) {
  if ('open' in oldprops && 'open' in newprops && oldprops.open !== newprops.open) {
    menu.open = newprops.open;
  }
}

Menu.Anchor = MenuAnchor;
Menu.Item = _List.default.Item;
var _default = Menu;
exports.default = _default;