rmwc/Menu/index.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SimpleMenu = exports.Menu = exports.MenuAnchor = exports.MenuItem = exports.MenuItems = exports.MenuRoot = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _mdc = require('@material/menu/dist/mdc.menu');

var _List = require('../List');

var _Base = require('../Base');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/****************************************************************
 * Private
 ****************************************************************/
var MenuRoot = exports.MenuRoot = (0, _Base.simpleTag)({
  displayName: 'MenuRoot',
  classNames: function classNames(props) {
    return ['mdc-menu'];
  },
  defaultProps: {
    tabIndex: '-1'
  }
});

var MenuItems = exports.MenuItems = (0, _Base.simpleTag)({
  displayName: 'MenuItems',
  tag: _List.List,
  classNames: 'mdc-list mdc-menu__items',
  defaultProps: {
    role: 'menu',
    'aria-hidden': 'true'
  }
});

/****************************************************************
 * Public
 ****************************************************************/

/** This is just the ListItem component exported from the Menu module for convenience. */
var MenuItem = exports.MenuItem = function MenuItem(props) {
  return React.createElement(_List.ListItem, Object.assign({ role: 'menuitem', tabIndex: '0' }, props));
};

MenuItem.displayName = 'MenuItem';

/** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuAnchors position to absolute. */
var MenuAnchor = exports.MenuAnchor = (0, _Base.simpleTag)({
  displayName: 'MenuAnchor',
  classNames: 'mdc-menu-anchor'
});

var ANCHOR_CORNER_MAP = {
  bottomEnd: 'BOTTOM_END',
  bottomLeft: 'BOTTOM_LEFT',
  bottomRight: 'BOTTOM_RIGHT',
  bottomStart: 'BOTTOM_START',
  topEnd: 'TOP_END',
  topLeft: 'TOP_LEFT',
  topRight: 'TOP_RIGHT',
  topStart: 'TOP_START'
};

// prettier-ignore

/** A menu component */
var Menu = exports.Menu = function (_withFoundation) {
  _inherits(Menu, _withFoundation);

  function Menu() {
    _classCallCheck(this, Menu);

    return _possibleConstructorReturn(this, (Menu.__proto__ || Object.getPrototypeOf(Menu)).apply(this, arguments));
  }

  _createClass(Menu, [{
    key: 'syncWithProps',
    value: function syncWithProps(nextProps) {
      var _this2 = this;

      // open
      (0, _Base.syncFoundationProp)(nextProps.open, this.open, function () {
        _this2.open = !!nextProps.open;
      });

      // anchorCorner
      if (this.foundation_ && nextProps.anchorCorner !== undefined && _mdc.MDCMenuFoundation.Corner[ANCHOR_CORNER_MAP[nextProps.anchorCorner]] !== this.foundation_.anchorCorner_) {
        this.setAnchorCorner(_mdc.MDCMenuFoundation.Corner[ANCHOR_CORNER_MAP[nextProps.anchorCorner]]);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          open = _props.open,
          onClose = _props.onClose,
          onCancel = _props.onCancel,
          onSelected = _props.onSelected,
          anchorCorner = _props.anchorCorner,
          rest = _objectWithoutProperties(_props, ['children', 'open', 'onClose', 'onCancel', 'onSelected', 'anchorCorner']);

      var root_ = this.foundationRefs.root_;


      return React.createElement(
        MenuRoot,
        Object.assign({}, rest, { elementRef: root_ }),
        React.createElement(
          MenuItems,
          null,
          children
        )
      );
    }
  }]);

  return Menu;
}((0, _Base.withFoundation)({
  constructor: _mdc.MDCMenu,
  adapter: {
    registerBodyClickHandler: function registerBodyClickHandler(handler) {
      // Corrects a sync issue with MDC, it was registering even though the menu was closed
      // This has to do with the necessity to sync the foundation and react whenever an event fires
      // $FlowFixMe
      this.open && document.body.addEventListener('click', handler);
    },
    notifySelected: function notifySelected(evtData) {
      var evt = this.emit(_mdc.MDCMenuFoundation.strings.SELECTED_EVENT, {
        index: evtData.index,
        item: this.items[evtData.index]
      });
      this.props.onClose && this.props.onClose(evt);
    },
    notifyCancel: function notifyCancel() {
      var evt = this.emit(_mdc.MDCMenuFoundation.strings.CANCEL_EVENT, {});
      this.props.onClose && this.props.onClose(evt);
    }
  }
}));

Object.defineProperty(Menu, 'displayName', {
  enumerable: true,
  writable: true,
  value: 'Menu'
});

/**
 * A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuAnchor
 */
var SimpleMenu = exports.SimpleMenu = function (_React$Component) {
  _inherits(SimpleMenu, _React$Component);

  function SimpleMenu() {
    var _ref;

    var _temp, _this3, _ret;

    _classCallCheck(this, SimpleMenu);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this3 = _possibleConstructorReturn(this, (_ref = SimpleMenu.__proto__ || Object.getPrototypeOf(SimpleMenu)).call.apply(_ref, [this].concat(args))), _this3), Object.defineProperty(_this3, 'state', {
      enumerable: true,
      writable: true,
      value: {
        open: false
      }
    }), _temp), _possibleConstructorReturn(_this3, _ret);
  }

  _createClass(SimpleMenu, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.syncWithOpenProp(this.props.open);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.syncWithOpenProp(nextProps.open);
    }
  }, {
    key: 'syncWithOpenProp',
    value: function syncWithOpenProp(open) {
      if (open !== undefined && this.state.open !== open) {
        this.setState({ open: open });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props2 = this.props,
          handle = _props2.handle,
          onClose = _props2.onClose,
          children = _props2.children,
          _props2$rootProps = _props2.rootProps,
          rootProps = _props2$rootProps === undefined ? {} : _props2$rootProps,
          open = _props2.open,
          rest = _objectWithoutProperties(_props2, ['handle', 'onClose', 'children', 'rootProps', 'open']);

      var wrappedHandle = React.cloneElement(handle, Object.assign({}, handle.props, {
        onClick: function onClick(evt) {
          _this4.setState({ open: true });
          if (handle.props.onClick) {
            handle.props.onClick(evt);
          }
        }
      }));

      var wrappedOnClose = function wrappedOnClose(evt) {
        _this4.setState({ open: false });
        if (onClose) {
          onClose(evt);
        }
      };
      return React.createElement(
        MenuAnchor,
        rootProps,
        React.createElement(
          Menu,
          Object.assign({}, rest, { onClose: wrappedOnClose, open: this.state.open }),
          children
        ),
        wrappedHandle
      );
    }
  }]);

  return SimpleMenu;
}(React.Component);

Object.defineProperty(SimpleMenu, 'displayName', {
  enumerable: true,
  writable: true,
  value: 'SimpleMenu'
});