'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.styles = undefined; var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); 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 _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _warning = require('warning'); var _warning2 = _interopRequireDefault(_warning); var _keycode = require('keycode'); var _keycode2 = _interopRequireDefault(_keycode); var _activeElement = require('dom-helpers/activeElement'); var _activeElement2 = _interopRequireDefault(_activeElement); var _contains = require('dom-helpers/query/contains'); var _contains2 = _interopRequireDefault(_contains); var _inDOM = require('dom-helpers/util/inDOM'); var _inDOM2 = _interopRequireDefault(_inDOM); var _ownerDocument = require('dom-helpers/ownerDocument'); var _ownerDocument2 = _interopRequireDefault(_ownerDocument); var _RefHolder = require('../internal/RefHolder'); var _RefHolder2 = _interopRequireDefault(_RefHolder); var _Portal = require('../Portal'); var _Portal2 = _interopRequireDefault(_Portal); var _addEventListener = require('../utils/addEventListener'); var _addEventListener2 = _interopRequireDefault(_addEventListener); var _helpers = require('../utils/helpers'); var _withStyles = require('../styles/withStyles'); var _withStyles2 = _interopRequireDefault(_withStyles); var _ModalManager = require('./ModalManager'); var _ModalManager2 = _interopRequireDefault(_ModalManager); var _Backdrop = require('./Backdrop'); var _Backdrop2 = _interopRequireDefault(_Backdrop); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function getContainer(container, defaultContainer) { container = typeof container === 'function' ? container() : container; return _reactDom2.default.findDOMNode(container) || defaultContainer; } // @inheritedComponent Portal function getHasTransition(props) { return props.children ? props.children.props.hasOwnProperty('in') : false; } var styles = exports.styles = function styles(theme) { return { root: { display: 'flex', width: '100%', height: '100%', position: 'fixed', zIndex: theme.zIndex.modal, top: 0, left: 0 }, hidden: { visibility: 'hidden' } }; }; var Modal = function (_React$Component) { (0, _inherits3.default)(Modal, _React$Component); function Modal(props, context) { (0, _classCallCheck3.default)(this, Modal); var _this = (0, _possibleConstructorReturn3.default)(this, (Modal.__proto__ || (0, _getPrototypeOf2.default)(Modal)).call(this, props, context)); _this.dialog = null; _this.mounted = false; _this.mountNode = null; _this.handleRendered = function () { _this.autoFocus(); if (_this.props.onRendered) { _this.props.onRendered(); } }; _this.handleOpen = function () { var doc = (0, _ownerDocument2.default)(_this.mountNode); var container = getContainer(_this.props.container, doc.body); _this.props.manager.add(_this, container); _this.onDocumentKeydownListener = (0, _addEventListener2.default)(doc, 'keydown', _this.handleDocumentKeyDown); _this.onFocusinListener = (0, _addEventListener2.default)(doc, 'focus', _this.enforceFocus, true); }; _this.handleClose = function () { _this.props.manager.remove(_this); _this.onDocumentKeydownListener.remove(); _this.onFocusinListener.remove(); _this.restoreLastFocus(); }; _this.handleExited = function () { _this.setState({ exited: true }); _this.handleClose(); }; _this.handleBackdropClick = function (event) { if (event.target !== event.currentTarget) { return; } if (_this.props.onBackdropClick) { _this.props.onBackdropClick(event); } if (!_this.props.disableBackdropClick && _this.props.onClose) { _this.props.onClose(event, 'backdropClick'); } }; _this.handleDocumentKeyDown = function (event) { if (!_this.isTopModal() || (0, _keycode2.default)(event) !== 'esc') { return; } if (_this.props.onEscapeKeyDown) { _this.props.onEscapeKeyDown(event); } if (!_this.props.disableEscapeKeyDown && _this.props.onClose) { _this.props.onClose(event, 'escapeKeyDown'); } }; _this.checkForFocus = function () { if (_inDOM2.default) { _this.lastFocus = (0, _activeElement2.default)(); } }; _this.enforceFocus = function () { if (_this.props.disableEnforceFocus || !_this.mounted || !_this.isTopModal()) { return; } var dialogElement = _this.getDialogElement(); var currentActiveElement = (0, _activeElement2.default)((0, _ownerDocument2.default)(_this.mountNode)); if (dialogElement && !(0, _contains2.default)(dialogElement, currentActiveElement)) { dialogElement.focus(); } }; _this.state = { exited: !_this.props.open }; return _this; } (0, _createClass3.default)(Modal, [{ key: 'componentDidMount', value: function componentDidMount() { this.mounted = true; if (this.props.open) { this.handleOpen(); } } }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if (nextProps.open) { this.setState({ exited: false }); } else if (!getHasTransition(nextProps)) { // Otherwise let handleExited take care of marking exited. this.setState({ exited: true }); } } }, { key: 'componentWillUpdate', value: function componentWillUpdate(nextProps) { if (!this.props.open && nextProps.open) { this.checkForFocus(); } } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps) { if (prevProps.open && !this.props.open && !getHasTransition(this.props)) { // Otherwise handleExited will call this. this.handleClose(); } else if (!prevProps.open && this.props.open) { this.handleOpen(); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this.mounted = false; if (this.props.open || getHasTransition(this.props) && !this.state.exited) { this.handleClose(); } } }, { key: 'getDialogElement', value: function getDialogElement() { return _reactDom2.default.findDOMNode(this.dialog); } }, { key: 'autoFocus', value: function autoFocus() { if (this.props.disableAutoFocus) { return; } var dialogElement = this.getDialogElement(); var currentActiveElement = (0, _activeElement2.default)((0, _ownerDocument2.default)(this.mountNode)); if (dialogElement && !(0, _contains2.default)(dialogElement, currentActiveElement)) { this.lastFocus = currentActiveElement; if (!dialogElement.hasAttribute('tabIndex')) { process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, ['Material-UI: the modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n')) : void 0; dialogElement.setAttribute('tabIndex', -1); } dialogElement.focus(); } } }, { key: 'restoreLastFocus', value: function restoreLastFocus() { if (this.props.disableRestoreFocus) { return; } if (this.lastFocus) { this.lastFocus.focus(); this.lastFocus = null; } } }, { key: 'isTopModal', value: function isTopModal() { return this.props.manager.isTopModal(this); } }, { key: 'render', value: function render() { var _this2 = this; var _props = this.props, BackdropComponent = _props.BackdropComponent, BackdropProps = _props.BackdropProps, children = _props.children, classes = _props.classes, className = _props.className, container = _props.container, disableAutoFocus = _props.disableAutoFocus, disableBackdropClick = _props.disableBackdropClick, disableEnforceFocus = _props.disableEnforceFocus, disableEscapeKeyDown = _props.disableEscapeKeyDown, disableRestoreFocus = _props.disableRestoreFocus, hideBackdrop = _props.hideBackdrop, keepMounted = _props.keepMounted, onBackdropClick = _props.onBackdropClick, onClose = _props.onClose, onEscapeKeyDown = _props.onEscapeKeyDown, onRendered = _props.onRendered, open = _props.open, manager = _props.manager, other = (0, _objectWithoutProperties3.default)(_props, ['BackdropComponent', 'BackdropProps', 'children', 'classes', 'className', 'container', 'disableAutoFocus', 'disableBackdropClick', 'disableEnforceFocus', 'disableEscapeKeyDown', 'disableRestoreFocus', 'hideBackdrop', 'keepMounted', 'onBackdropClick', 'onClose', 'onEscapeKeyDown', 'onRendered', 'open', 'manager']); var exited = this.state.exited; var hasTransition = getHasTransition(this.props); var childProps = {}; if (!keepMounted && !open && (!hasTransition || exited)) { return null; } // It's a Transition like component if (hasTransition) { childProps.onExited = (0, _helpers.createChainedFunction)(this.handleExited, children.props.onExited); } if (children.props.role === undefined) { childProps.role = children.props.role || 'document'; } if (children.props.tabIndex === undefined) { childProps.tabIndex = children.props.tabIndex || '-1'; } return _react2.default.createElement( _Portal2.default, { ref: function ref(node) { _this2.mountNode = node ? node.getMountNode() : node; }, container: container, onRendered: this.handleRendered }, _react2.default.createElement( 'div', (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className, (0, _defineProperty3.default)({}, classes.hidden, exited)) }, other), hideBackdrop ? null : _react2.default.createElement(BackdropComponent, (0, _extends3.default)({ open: open, onClick: this.handleBackdropClick }, BackdropProps)), _react2.default.createElement( _RefHolder2.default, { ref: function ref(node) { _this2.dialog = node; } }, _react2.default.cloneElement(children, childProps) ) ) ); } }]); return Modal; }(_react2.default.Component); Modal.propTypes = process.env.NODE_ENV !== "production" ? { /** * A backdrop component. Useful for custom backdrop rendering. */ BackdropComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]), /** * Properties applied to the `Backdrop` element. */ BackdropProps: _propTypes2.default.object, /** * A single child content element. */ children: _propTypes2.default.element, /** * Useful to extend the style applied to components. */ classes: _propTypes2.default.object.isRequired, /** * @ignore */ className: _propTypes2.default.string, /** * A node, component instance, or function that returns either. * The `container` will have the portal children appended to it. */ container: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]), /** * If `true`, the modal will not automatically shift focus to itself when it opens, and * replace it to the last focused element when it closes. * This also works correctly with any modal children that have the `disableAutoFocus` prop. * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. */ disableAutoFocus: _propTypes2.default.bool, /** * If `true`, clicking the backdrop will not fire any callback. */ disableBackdropClick: _propTypes2.default.bool, /** * If `true`, the modal will not prevent focus from leaving the modal while open. * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. */ disableEnforceFocus: _propTypes2.default.bool, /** * If `true`, hitting escape will not fire any callback. */ disableEscapeKeyDown: _propTypes2.default.bool, /** * If `true`, the modal will not restore focus to previously focused element once * modal is hidden. */ disableRestoreFocus: _propTypes2.default.bool, /** * If `true`, the backdrop is not rendered. */ hideBackdrop: _propTypes2.default.bool, /** * Always keep the children in the DOM. * This property can be useful in SEO situation or * when you want to maximize the responsiveness of the Modal. */ keepMounted: _propTypes2.default.bool, /** * A modal manager used to track and manage the state of open * Modals. Useful when customizing how modals interact within a container. */ manager: _propTypes2.default.object, /** * Callback fired when the backdrop is clicked. */ onBackdropClick: _propTypes2.default.func, /** * Callback fired when the component requests to be closed. * The `reason` parameter can optionally be used to control the response to `onClose`. * * @param {object} event The event source of the callback * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"` */ onClose: _propTypes2.default.func, /** * Callback fired when the escape key is pressed, * `disableEscapeKeyDown` is false and the modal is in focus. */ onEscapeKeyDown: _propTypes2.default.func, /** * Callback fired once the children has been mounted into the `container`. * It signals that the `open={true}` property took effect. */ onRendered: _propTypes2.default.func, /** * If `true`, the modal is open. */ open: _propTypes2.default.bool.isRequired } : {}; Modal.defaultProps = { disableAutoFocus: false, disableBackdropClick: false, disableEnforceFocus: false, disableEscapeKeyDown: false, disableRestoreFocus: false, hideBackdrop: false, keepMounted: false, // Modals don't open on the server so this won't conflict with concurrent requests. manager: new _ModalManager2.default(), BackdropComponent: _Backdrop2.default }; exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiModal' })(Modal);