Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
1,513 additions
and
15 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,300 @@ | ||
"use strict"; | ||
|
||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.bodyOpenClassName = exports.portalClassName = undefined; | ||
|
||
var _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; }; | ||
|
||
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 _react2 = _interopRequireDefault(_react); | ||
|
||
var _reactDom = require("react-dom"); | ||
|
||
var _reactDom2 = _interopRequireDefault(_reactDom); | ||
|
||
var _propTypes = require("prop-types"); | ||
|
||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
|
||
var _ModalPortal = require("./ModalPortal"); | ||
|
||
var _ModalPortal2 = _interopRequireDefault(_ModalPortal); | ||
|
||
var _ariaAppHider = require("../helpers/ariaAppHider"); | ||
|
||
var ariaAppHider = _interopRequireWildcard(_ariaAppHider); | ||
|
||
var _safeHTMLElement = require("../helpers/safeHTMLElement"); | ||
|
||
var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement); | ||
|
||
var _reactLifecyclesCompat = require("react-lifecycles-compat"); | ||
|
||
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 _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 _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; } | ||
|
||
var portalClassName = exports.portalClassName = "ReactModalPortal"; | ||
var bodyOpenClassName = exports.bodyOpenClassName = "ReactModal__Body--open"; | ||
|
||
var isReact16 = _safeHTMLElement.canUseDOM && _reactDom2.default.createPortal !== undefined; | ||
|
||
var createHTMLElement = function createHTMLElement(name) { | ||
return document.createElement(name); | ||
}; | ||
|
||
var getCreatePortal = function getCreatePortal() { | ||
return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer; | ||
}; | ||
|
||
function getParentElement(parentSelector) { | ||
return parentSelector(); | ||
} | ||
|
||
var Modal = function (_Component) { | ||
_inherits(Modal, _Component); | ||
|
||
function Modal() { | ||
var _ref; | ||
|
||
var _temp, _this, _ret; | ||
|
||
_classCallCheck(this, Modal); | ||
|
||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
|
||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () { | ||
!isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node); | ||
var parent = getParentElement(_this.props.parentSelector); | ||
if (parent && parent.contains(_this.node)) { | ||
parent.removeChild(_this.node); | ||
} else { | ||
// eslint-disable-next-line no-console | ||
console.warn('React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks."); | ||
} | ||
}, _this.portalRef = function (ref) { | ||
_this.portal = ref; | ||
}, _this.renderPortal = function (props) { | ||
var createPortal = getCreatePortal(); | ||
var portal = createPortal(_this, _react2.default.createElement(_ModalPortal2.default, _extends({ defaultStyles: Modal.defaultStyles }, props)), _this.node); | ||
_this.portalRef(portal); | ||
}, _temp), _possibleConstructorReturn(_this, _ret); | ||
} | ||
|
||
_createClass(Modal, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
if (!_safeHTMLElement.canUseDOM) return; | ||
|
||
if (!isReact16) { | ||
this.node = createHTMLElement("div"); | ||
} | ||
this.node.className = this.props.portalClassName; | ||
|
||
var parent = getParentElement(this.props.parentSelector); | ||
parent.appendChild(this.node); | ||
|
||
!isReact16 && this.renderPortal(this.props); | ||
} | ||
}, { | ||
key: "getSnapshotBeforeUpdate", | ||
value: function getSnapshotBeforeUpdate(prevProps) { | ||
var prevParent = getParentElement(prevProps.parentSelector); | ||
var nextParent = getParentElement(this.props.parentSelector); | ||
return { prevParent: prevParent, nextParent: nextParent }; | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate(prevProps, _, snapshot) { | ||
if (!_safeHTMLElement.canUseDOM) return; | ||
var _props = this.props, | ||
isOpen = _props.isOpen, | ||
portalClassName = _props.portalClassName; | ||
|
||
|
||
if (prevProps.portalClassName !== portalClassName) { | ||
this.node.className = portalClassName; | ||
} | ||
|
||
var prevParent = snapshot.prevParent, | ||
nextParent = snapshot.nextParent; | ||
|
||
if (nextParent !== prevParent) { | ||
prevParent.removeChild(this.node); | ||
nextParent.appendChild(this.node); | ||
} | ||
|
||
// Stop unnecessary renders if modal is remaining closed | ||
if (!prevProps.isOpen && !isOpen) return; | ||
|
||
!isReact16 && this.renderPortal(this.props); | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
if (!_safeHTMLElement.canUseDOM || !this.node || !this.portal) return; | ||
|
||
var state = this.portal.state; | ||
var now = Date.now(); | ||
var closesAt = state.isOpen && this.props.closeTimeoutMS && (state.closesAt || now + this.props.closeTimeoutMS); | ||
|
||
if (closesAt) { | ||
if (!state.beforeClose) { | ||
this.portal.closeWithTimeout(); | ||
} | ||
|
||
setTimeout(this.removePortal, closesAt - now); | ||
} else { | ||
this.removePortal(); | ||
} | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
if (!_safeHTMLElement.canUseDOM || !isReact16) { | ||
return null; | ||
} | ||
|
||
if (!this.node && isReact16) { | ||
this.node = createHTMLElement("div"); | ||
} | ||
|
||
var createPortal = getCreatePortal(); | ||
return createPortal(_react2.default.createElement(_ModalPortal2.default, _extends({ | ||
ref: this.portalRef, | ||
defaultStyles: Modal.defaultStyles | ||
}, this.props)), this.node); | ||
} | ||
}], [{ | ||
key: "setAppElement", | ||
value: function setAppElement(element) { | ||
ariaAppHider.setElement(element); | ||
} | ||
|
||
/* eslint-disable react/no-unused-prop-types */ | ||
|
||
/* eslint-enable react/no-unused-prop-types */ | ||
|
||
}]); | ||
|
||
return Modal; | ||
}(_react.Component); | ||
|
||
Modal.propTypes = { | ||
isOpen: _propTypes2.default.bool.isRequired, | ||
style: _propTypes2.default.shape({ | ||
content: _propTypes2.default.object, | ||
overlay: _propTypes2.default.object | ||
}), | ||
portalClassName: _propTypes2.default.string, | ||
bodyOpenClassName: _propTypes2.default.string, | ||
htmlOpenClassName: _propTypes2.default.string, | ||
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({ | ||
base: _propTypes2.default.string.isRequired, | ||
afterOpen: _propTypes2.default.string.isRequired, | ||
beforeClose: _propTypes2.default.string.isRequired | ||
})]), | ||
overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({ | ||
base: _propTypes2.default.string.isRequired, | ||
afterOpen: _propTypes2.default.string.isRequired, | ||
beforeClose: _propTypes2.default.string.isRequired | ||
})]), | ||
appElement: _propTypes2.default.oneOfType([_safeHTMLElement2.default, _propTypes2.default.instanceOf(_safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(_safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]), | ||
onAfterOpen: _propTypes2.default.func, | ||
onRequestClose: _propTypes2.default.func, | ||
closeTimeoutMS: _propTypes2.default.number, | ||
ariaHideApp: _propTypes2.default.bool, | ||
shouldFocusAfterRender: _propTypes2.default.bool, | ||
shouldCloseOnOverlayClick: _propTypes2.default.bool, | ||
shouldReturnFocusAfterClose: _propTypes2.default.bool, | ||
preventScroll: _propTypes2.default.bool, | ||
parentSelector: _propTypes2.default.func, | ||
aria: _propTypes2.default.object, | ||
data: _propTypes2.default.object, | ||
role: _propTypes2.default.string, | ||
contentLabel: _propTypes2.default.string, | ||
shouldCloseOnEsc: _propTypes2.default.bool, | ||
overlayRef: _propTypes2.default.func, | ||
contentRef: _propTypes2.default.func, | ||
id: _propTypes2.default.string, | ||
overlayElement: _propTypes2.default.func, | ||
contentElement: _propTypes2.default.func | ||
}; | ||
Modal.defaultProps = { | ||
isOpen: false, | ||
portalClassName: portalClassName, | ||
bodyOpenClassName: bodyOpenClassName, | ||
role: "dialog", | ||
ariaHideApp: true, | ||
closeTimeoutMS: 0, | ||
shouldFocusAfterRender: true, | ||
shouldCloseOnEsc: true, | ||
shouldCloseOnOverlayClick: true, | ||
shouldReturnFocusAfterClose: true, | ||
preventScroll: false, | ||
parentSelector: function parentSelector() { | ||
return document.body; | ||
}, | ||
overlayElement: function overlayElement(props, contentEl) { | ||
return _react2.default.createElement( | ||
"div", | ||
props, | ||
contentEl | ||
); | ||
}, | ||
contentElement: function contentElement(props, children) { | ||
return _react2.default.createElement( | ||
"div", | ||
props, | ||
children | ||
); | ||
} | ||
}; | ||
Modal.defaultStyles = { | ||
overlay: { | ||
position: "fixed", | ||
top: 0, | ||
left: 0, | ||
right: 0, | ||
bottom: 0, | ||
backgroundColor: "rgba(255, 255, 255, 0.75)" | ||
}, | ||
content: { | ||
position: "absolute", | ||
top: "40px", | ||
left: "40px", | ||
right: "40px", | ||
bottom: "40px", | ||
border: "1px solid #ccc", | ||
background: "#fff", | ||
overflow: "auto", | ||
WebkitOverflowScrolling: "touch", | ||
borderRadius: "4px", | ||
outline: "none", | ||
padding: "20px" | ||
} | ||
}; | ||
|
||
|
||
(0, _reactLifecyclesCompat.polyfill)(Modal); | ||
|
||
if (process.env.NODE_ENV !== "production") { | ||
Modal.setCreateHTMLElement = function (fn) { | ||
return createHTMLElement = fn; | ||
}; | ||
} | ||
|
||
exports.default = Modal; |
Oops, something went wrong.