UNPKG

material-components

Version:

Stateless UI components for react that follow material design

229 lines (189 loc) 7.87 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); 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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 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; } var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _reactTransitionGroup = require('react-transition-group'); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _mask = require('../mask'); var _mask2 = _interopRequireDefault(_mask); var _item = require('./item'); var _item2 = _interopRequireDefault(_item); var _separator = require('./separator'); var _separator2 = _interopRequireDefault(_separator); var _helpersScreen = require('../helpers/screen'); var _helpersScreen2 = _interopRequireDefault(_helpersScreen); var Menu = (function (_Component) { _inherits(Menu, _Component); function Menu() { _classCallCheck(this, Menu); _get(Object.getPrototypeOf(Menu.prototype), 'constructor', this).apply(this, arguments); } _createClass(Menu, [{ key: 'getChildContext', value: function getChildContext() { var _this = this; return { closeMenuHandler: function closeMenuHandler() { return _this.onClose(); } }; } }, { key: 'onClose', value: function onClose() { if (typeof this.props.onClose === 'function') { this.props.onClose(); } } }, { key: 'checkBounds', value: function checkBounds() { var menuElement = _reactDom2['default'].findDOMNode(this.refs.menu); if (menuElement) { var screenHeight = _helpersScreen2['default'].getSize().height; var _menuElement$getBoundingClientRect = menuElement.getBoundingClientRect(); var _top = _menuElement$getBoundingClientRect.top; var bottom = _menuElement$getBoundingClientRect.bottom; var originalHeight = bottom - _top; var minHeight = 32 * 8 + 20; var offsetTop = _top < 6 ? Math.ceil((_top - 16) / -32) * 32 : 0; var offsetBottom = bottom > screenHeight - 6 ? Math.ceil((bottom - screenHeight + 16) / 32) * 32 : 0; var height = bottom - _top - offsetTop - offsetBottom; if (height < minHeight) { height = minHeight > originalHeight ? originalHeight : minHeight; if (_top + offsetTop + height + 16 > screenHeight) { offsetTop -= _top + offsetTop + height + 16 - screenHeight; } } menuElement.style.top = menuElement.offsetTop + offsetTop + 'px'; menuElement.style.height = height + 'px'; menuElement.scrollTop += offsetTop; } } }, { key: 'componentDidMount', value: function componentDidMount() { var _this2 = this; this.checkBounds(); // close the options when resizing the window window.addEventListener('resize', this._resize = function () { if (_this2.props.isOpen) { _this2.onClose(); } }); } }, { key: 'componentDidUpdate', value: function componentDidUpdate() { this.checkBounds(); } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { window.removeEventListener('resize', this._resize); } }, { key: 'render', value: function render() { var _this3 = this; var _props = this.props; var children = _props.children; var className = _props.className; var isOpen = _props.isOpen; var rightAlign = _props.rightAlign; var style = _props.style; var menuStyle = { zIndex: 1001, padding: '10px 0', backgroundColor: '#fff', color: '#000', position: 'absolute', overflowY: 'auto', scrollbar: 'width: 4px', top: '-8px' }; if (rightAlign) { menuStyle.right = '0'; } var menu = isOpen ? _react2['default'].createElement( _reactTransitionGroup.CSSTransition, { key: 'menu', classNames: 'popup', timeout: { enter: 400, exit: 400 } }, _react2['default'].createElement( 'div', { style: { zIndex: 1000 } }, _react2['default'].createElement(_mask2['default'], { dark: false, onClick: function () { return _this3.onClose(); } }), _react2['default'].createElement( 'div', { ref: 'menu', className: (0, _classnames2['default'])('transition', 'paper1', className), style: Object.assign(menuStyle, style) }, children ) ) ) : null; return _react2['default'].createElement( _reactTransitionGroup.TransitionGroup, { style: { zIndex: 1000, position: 'absolute', width: rightAlign ? null : '100%' } }, menu ); } }], [{ key: 'displayName', value: 'Menu', enumerable: true }, { key: 'propTypes', value: { children: _propTypes2['default'].node, className: _propTypes2['default'].string, isOpen: _propTypes2['default'].bool, onClose: _propTypes2['default'].func, rightAlign: _propTypes2['default'].bool, style: _propTypes2['default'].object }, enumerable: true }, { key: 'defaultProps', value: { className: '', isOpen: false, rightAlign: false, style: {} }, enumerable: true }, { key: 'childContextTypes', value: { closeMenuHandler: _propTypes2['default'].func }, enumerable: true }]); return Menu; })(_react.Component); Menu.Item = _item2['default']; Menu.Separator = _separator2['default']; exports['default'] = Menu; module.exports = exports['default'];