UNPKG

react-modal-construction-kit

Version:
1 lines 10.9 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","react-transition-group","react-dom"],t):"object"==typeof exports?exports.ReactModalConstructionKit=t(require("prop-types"),require("react"),require("react-transition-group"),require("react-dom")):e.ReactModalConstructionKit=t(e.PropTypes,e.React,e.ReactTransitionGroup,e.ReactDom)}(window,function(e,t,n,o){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=8)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=l(n(2)),r=n(6),a=l(n(1));function l(e){return e&&e.__esModule?e:{default:e}}var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"componentWillUnmount",value:function(){this.defaultNode&&document.body.removeChild(this.defaultNode),this.defaultNode=null}},{key:"render",value:function(){return this.props.node||this.defaultNode||(this.defaultNode=document.createElement("div"),document.body.appendChild(this.defaultNode)),(0,r.createPortal)(this.props.children,this.props.node||this.defaultNode)}}]),t}();s.propTypes={children:a.default.node.isRequired,node:a.default.any},t.default=s},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getTransitionStyles=void 0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=s(n(2)),r=s(n(1)),a=s(n(0)),l=n(3);function s(e){return e&&e.__esModule?e:{default:e}}var u=t.getTransitionStyles=function(e){return{exited:{display:"none"},entering:{opacity:.01},entered:{opacity:e},exiting:{opacity:.01}}},d=function(e){var t=e.isVisible,n=e.zIndex,r=e.transitionDuration,s=e.opacity,d=e.onClick,c=e.className,p=o({},function(e){return{position:"fixed",top:0,right:0,bottom:0,left:0,willChange:"opacity",backgroundColor:"black",transition:"opacity "+e+"ms ease-in-out"}}(r),{zIndex:n||500});return i.default.createElement(a.default,null,i.default.createElement(l.Transition,{in:t,timeout:r},function(e){return i.default.createElement("div",{className:c,onClick:d,style:o({},p,u(s)[e])})}))};d.propTypes={isVisible:r.default.bool.isRequired,transitionDuration:r.default.number,zIndex:r.default.number,opacity:r.default.number,onClick:r.default.func,className:r.default.string},d.defaultProps={transitionDuration:150,zIndex:500,opacity:.7,backgroundColor:"black"},t.default=d},function(e,t,n){"use strict";function o(){var e=document.createElement("div");e.style.position="absolute",e.style.top="-9999px",e.style.width="50px",e.style.height="50px",e.style.overflow="scroll",document.body.appendChild(e);var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t}function i(e){document.body.style.paddingRight=e>0?e+"px":null}function r(){return document.body.clientWidth<window.innerWidth}Object.defineProperty(t,"__esModule",{value:!0}),t.getScrollbarWidth=o,t.setScrollbarWidth=i,t.isBodyOverflowing=r,t.getOriginalBodyPadding=function(){var e=window.getComputedStyle(document.body,null);return parseInt(e&&e.getPropertyValue("padding-right")||0,10)},t.conditionallyUpdateScrollbar=function(){var e=o();r()&&i(0+e)},t.noop=function(){}},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getTransitionStyles=void 0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=d(n(2)),a=d(n(1)),l=d(n(0)),s=n(3),u=n(5);function d(e){return e&&e.__esModule?e:{default:e}}var c=t.getTransitionStyles=function(){return{exited:{display:"none"},entering:{opacity:.01,transform:"scale(1.05)"},entered:{opacity:1,transform:"none"},exiting:{opacity:.01,transform:"scale(0.90)"}}},p=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.onOpened=function(e,t){var o=n.props,i=o.onOpened,r=o.onEntered;i(),r(e,t)},n.onClosed=function(e){var t=n.props,o=t.onClosed,i=t.onExited;o(),i(e),n.destroy(),n._isMounted&&n.setState({isOpen:!1})},n.handleEscape=function(e){var t=n.props,o=t.isOpen,i=t.hasEscapeClose,r=t.onClosed;o&&i&&27===e.keyCode&&r&&r()},n.handleClick=function(e){!n.contentRef.contains(e.target)&&n.props.onClosed()},n.element=null,n.originalBodyPadding=null,n.state={isOpen:e.isOpen},e.isOpen&&n.init(),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,r.default.Component),i(t,[{key:"componentDidMount",value:function(){this.props.onEnter&&this.props.onEnter(),this.state.isOpen&&this.props.autoFocus&&this.setFocus(),window.addEventListener("keydown",this.handleEscape,!0),this._isMounted=!0}},{key:"componentWillReceiveProps",value:function(e){e.isOpen&&!this.props.isOpen&&this.setState({isOpen:e.isOpen})}},{key:"componentWillUpdate",value:function(e,t){t.isOpen&&!this.state.isOpen&&this.init()}},{key:"componentDidUpdate",value:function(e,t){this.props.autoFocus&&this.state.isOpen&&!t.isOpen&&this.setFocus()}},{key:"componentWillUnmount",value:function(){this.props.onExit&&this.props.onExit(),this.state.isOpen&&this.destroy(),window.removeEventListener("keydown",this.handleEscape,!0),this._isMounted=!1}},{key:"setFocus",value:function(){this.dialogRef&&this.dialogRef.parentNode&&"function"==typeof this.dialogRef.parentNode.focus&&this.dialogRef.parentNode.focus()}},{key:"init",value:function(){this.element=document.createElement("div"),this.element.setAttribute("tabindex","-1"),this.element.style.position="relative",this.element.style.zIndex=this.props.zIndex,this.originalBodyPadding=(0,u.getOriginalBodyPadding)(),(0,u.conditionallyUpdateScrollbar)(),document.body.appendChild(this.element),this._bodyStyleAdded||(document.body.style.overflow="hidden",this._bodyStyleAdded=!0)}},{key:"destroy",value:function(){this.element&&(document.body.removeChild(this.element),this.element=null),this._bodyStyleAdded&&(document.body.style.overflow=null,this._bodyStyleAdded=!1),(0,u.setScrollbarWidth)(this.originalBodyPadding)}},{key:"render",value:function(){var e=this;if(!this.state.isOpen)return null;var t=this.props,n=t.isOpen,i=t.role,a=t.transitionDuration,u=t.children,d=t.className,p=t.dialogClassName,f=t.contentClassName,y=t.hasOutsideClickClose,h=function(e){var t=e.zIndex,n=e.isCentered,o=e.transitionDuration;return{component:{overflowX:"hidden",overflowY:"auto",position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:t,outline:0,transition:"opacity "+o/2+"ms linear, transform "+o+"ms ease-out"},dialog:{display:"flex",alignItems:"center",position:"relative",maxWidth:"500px",margin:n?"0 auto":"1.75rem auto",minHeight:n&&"100%",width:"auto",boxSizing:"border-box",pointerEvents:"none"},content:{position:"relative",WebkitBoxOrient:"vertical",WebkitBoxDirection:"normal",MsFlexDirection:"column",flexDirection:"column",width:"100%",pointerEvents:"auto",backgroundColor:"white",backgroundClip:"padding-box",outline:0,display:"flex",boxSizing:"border-box"}}}(this.props);return r.default.createElement(l.default,{node:this.element},r.default.createElement(s.Transition,{appear:!0,onEntered:this.onOpened,onExited:this.onClosed,timeout:a,in:n},function(t){return r.default.createElement("div",{onClick:y?e.handleClick:null,tabIndex:"-1",role:i,className:d,style:o({},h.component,c()[t])},r.default.createElement("div",{className:p,style:h.dialog,role:"document",ref:function(t){e.dialogRef=t}},r.default.createElement("div",{className:f,ref:function(t){e.contentRef=t},style:h.content},u)))}))}}]),t}();p.propTypes={isOpen:a.default.bool,autoFocus:a.default.bool,hasEscapeClose:a.default.bool,hasOutsideClickClose:a.default.bool,role:a.default.string,onEnter:a.default.func,onExit:a.default.func,onOpened:a.default.func,onClosed:a.default.func,zIndex:a.default.number,children:a.default.node.isRequired,onEntered:a.default.func,onExited:a.default.func,transitionDuration:a.default.number,className:a.default.string,dialogClassName:a.default.string,contentClassName:a.default.string,isCentered:a.default.bool},p.defaultProps={isOpen:!1,autoFocus:!0,role:"dialog",zIndex:750,onOpened:u.noop,hasEscapeClose:!0,hasOutsideClickClose:!0,onClosed:u.noop,transitionDuration:300,onEntered:u.noop,onExited:u.noop,isCentered:!0},t.default=p},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Portal=t.Overlay=t.Modal=void 0;var o=a(n(7)),i=a(n(4)),r=a(n(0));function a(e){return e&&e.__esModule?e:{default:e}}t.Modal=o.default,t.Overlay=i.default,t.Portal=r.default}])});