react-easily-modal
Version:
It is an easy-to-use modal library exclusively for react.js.
3 lines (2 loc) • 13.8 kB
JavaScript
;function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=t(n),r=t(require("styled-components"));function o(){o=function(){return t};var t={},n=Object.prototype,e=n.hasOwnProperty,r=Object.defineProperty||function(t,n,e){t[n]=e.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",u=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function l(t,n,e){return Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}),t[n]}try{l({},"")}catch(t){l=function(t,n,e){return t[n]=e}}function s(t,n,e,o){var i=Object.create((n&&n.prototype instanceof d?n:d).prototype),a=new O(o||[]);return r(i,"_invoke",{value:E(t,e,a)}),i}function f(t,n,e){try{return{type:"normal",arg:t.call(n,e)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var p={};function d(){}function m(){}function h(){}var v={};l(v,a,(function(){return this}));var y=Object.getPrototypeOf,g=y&&y(y(k([])));g&&g!==n&&e.call(g,a)&&(v=g);var w=h.prototype=d.prototype=Object.create(v);function b(t){["next","throw","return"].forEach((function(n){l(t,n,(function(t){return this._invoke(n,t)}))}))}function x(t,n){var o;r(this,"_invoke",{value:function(r,i){function a(){return new n((function(o,a){!function r(o,i,a,u){var c=f(t[o],t,i);if("throw"!==c.type){var l=c.arg,s=l.value;return s&&"object"==typeof s&&e.call(s,"__await")?n.resolve(s.__await).then((function(t){r("next",t,a,u)}),(function(t){r("throw",t,a,u)})):n.resolve(s).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,u)}))}u(c.arg)}(r,i,o,a)}))}return o=o?o.then(a,a):a()}})}function E(t,n,e){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return{value:void 0,done:!0}}for(e.method=o,e.arg=i;;){var a=e.delegate;if(a){var u=L(a,e);if(u){if(u===p)continue;return u}}if("next"===e.method)e.sent=e._sent=e.arg;else if("throw"===e.method){if("suspendedStart"===r)throw r="completed",e.arg;e.dispatchException(e.arg)}else"return"===e.method&&e.abrupt("return",e.arg);r="executing";var c=f(t,n,e);if("normal"===c.type){if(r=e.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:e.done}}"throw"===c.type&&(r="completed",e.method="throw",e.arg=c.arg)}}}function L(t,n){var e=n.method,r=t.iterator[e];if(void 0===r)return n.delegate=null,"throw"===e&&t.iterator.return&&(n.method="return",n.arg=void 0,L(t,n),"throw"===n.method)||"return"!==e&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+e+"' method")),p;var o=f(r,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,p;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=void 0),n.delegate=null,p):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,p)}function N(t){var n={tryLoc:t[0]};1 in t&&(n.catchLoc=t[1]),2 in t&&(n.finallyLoc=t[2],n.afterLoc=t[3]),this.tryEntries.push(n)}function j(t){var n=t.completion||{};n.type="normal",delete n.arg,t.completion=n}function O(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(N,this),this.reset(!0)}function k(t){if(t){var n=t[a];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,o=function n(){for(;++r<t.length;)if(e.call(t,r))return n.value=t[r],n.done=!1,n;return n.value=void 0,n.done=!0,n};return o.next=o}}return{next:M}}function M(){return{value:void 0,done:!0}}return m.prototype=h,r(w,"constructor",{value:h,configurable:!0}),r(h,"constructor",{value:m,configurable:!0}),m.displayName=l(h,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var n="function"==typeof t&&t.constructor;return!!n&&(n===m||"GeneratorFunction"===(n.displayName||n.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,l(t,c,"GeneratorFunction")),t.prototype=Object.create(w),t},t.awrap=function(t){return{__await:t}},b(x.prototype),l(x.prototype,u,(function(){return this})),t.AsyncIterator=x,t.async=function(n,e,r,o,i){void 0===i&&(i=Promise);var a=new x(s(n,e,r,o),i);return t.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},b(w),l(w,c,"Generator"),l(w,a,(function(){return this})),l(w,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var n=Object(t),e=[];for(var r in n)e.push(r);return e.reverse(),function t(){for(;e.length;){var r=e.pop();if(r in n)return t.value=r,t.done=!1,t}return t.done=!0,t}},t.values=k,O.prototype={constructor:O,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(j),!t)for(var n in this)"t"===n.charAt(0)&&e.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function r(e,r){return a.type="throw",a.arg=t,n.next=e,r&&(n.method="next",n.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var u=e.call(i,"catchLoc"),c=e.call(i,"finallyLoc");if(u&&c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,n){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&e.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=n,i?(this.method="next",this.next=i.finallyLoc,p):this.complete(a)},complete:function(t,n){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&n&&(this.next=n),p},finish:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),j(e),p}},catch:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.tryLoc===t){var r=e.completion;if("throw"===r.type){var o=r.arg;j(e)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,e){return this.delegate={iterator:k(t),resultName:n,nextLoc:e},"next"===this.method&&(this.arg=void 0),p}},t}function i(t,n,e,r,o,i,a){try{var u=t[i](a),c=u.value}catch(t){return void e(t)}u.done?n(c):Promise.resolve(c).then(r,o)}function a(t){return function(){var n=this,e=arguments;return new Promise((function(r,o){var a=t.apply(n,e);function u(t){i(a,r,o,u,c,"next",t)}function c(t){i(a,r,o,u,c,"throw",t)}u(void 0)}))}}function u(){return(u=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}function c(t,n){return n||(n=t.slice(0)),t.raw=n,t}var l,s,f,p=function(){var t=n.useContext(g),e=t.modals,r=t.setModals,i=t.scrollRelease,u=t.scrollFreeze,c=function(t,n){void 0===n&&(n=!1);var r=e.current;return n?r.length>0&&r[r.length-1].component.name===t.name:r.some((function(n){return n.component.name===t.name}))},l=function(t){var n=t.component,o=t.props,i=t.isScrollFreeze;return new Promise((function(t,a){var l,s,f={id:-1,props:o,component:n,resolve:t,reject:a};i&&u&&u();var p=e.current,d=c(f.component,!0);null!=o&&o.duplicateCheck&&(d=c(f.component)),d||(f.id=(null!=(l=null==(s=p[p.length-1])?void 0:s.id)?l:-1)+1,r([].concat(p,[f])))}))},s=function(t){var n=e.current.filter((function(n){return n.id!==t}));r(n),!n.length&&i&&i()};return{modals:e,modal:function(){var t=a(o().mark((function t(n,e){return o().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",l({component:n,props:e,isScrollFreeze:!0}));case 1:case"end":return t.stop()}}),t)})));return function(n,e){return t.apply(this,arguments)}}(),scrollModal:function(){var t=a(o().mark((function t(n,e){return o().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",l({component:n,props:e,isScrollFreeze:!1}));case 1:case"end":return t.stop()}}),t)})));return function(n,e){return t.apply(this,arguments)}}(),closeModal:s,resolveModal:function(t,n){t.resolve(n),s(t.id)},checkModal:c,resetModal:function(){r([]),i&&i()},scrollRelease:i}},d=function(t){var r=t.is;return r?e.createElement(n.Suspense,null,e.createElement(r,t.props)):e.createElement(e.Fragment,null)},m=r((function(t){var r=t.className,o=t.modal,i=n.useContext(g).className,a=p(),c=a.closeModal,l=a.resolveModal,s=a.scrollRelease,f=b(o,c),m=f.transitionClass,h=f.animationClassName,v=f.closeModal;return n.useEffect((function(){return function(){s&&s()}}),[]),e.createElement("div",{className:r+" "+i+" "+m},e.createElement(d,{is:o.component,key:o.id,props:u({},o.props,{close:function(){return function(t){h?v():c(t.id)}(o)},resolve:function(t){return function(t,n){l(t,n)}(o,t)}})}))}))(l||(l=c(["\n visibility: hidden;\n \n >.dim{\n transition: opacity 0.1s;\n }\n\n &.enter, &.leave{ \n visibility: visible; \n \n >.dim{\n opacity: 1;\n }\n }\n &.enter-done, &.leave-done{\n visibility: visible;\n }\n &.enter{\n .modal-cont{\n animation-name: ",";\n animation-duration: ",";\n animation-timing-function: ",";\n animation-direction: normal;\n }\n }\n &.leave{\n .modal-cont{\n animation-name: ",";\n animation-duration: ",";\n animation-timing-function: ",";\n animation-direction: reverse;\n }\n }\n"])),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.name?"modal-"+(null==(r=i.props)||null==(o=r.animation)?void 0:o.name):"none"}),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.duration?(null==(r=i.props)||null==(o=r.animation)?void 0:o.duration)+"ms":x+"ms"}),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.timingFunction?""+(null==(r=i.props)||null==(o=r.animation)?void 0:o.timingFunction):"ease-in-out"}),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.name?"modal-"+(null==(r=i.props)||null==(o=r.animation)?void 0:o.name):"none"}),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.duration?(null==(r=i.props)||null==(o=r.animation)?void 0:o.duration)+"ms":x+"ms"}),(function(t){var n,e,r,o,i=t.modal;return null!=(n=i.props)&&null!=(e=n.animation)&&e.timingFunction?""+(null==(r=i.props)||null==(o=r.animation)?void 0:o.timingFunction):"ease-in-out"})),h=e.memo(m),v={modals:{current:[]},setModals:function(){}},y=r.div(s||(s=c(["\n position: absolute; left:0; top: 0; z-index: 9999;\n > button { position: fixed; left:0; top: 0; z-index: 9999; }\n"]))),g=n.createContext(v),w=r((function(t){var n=t.children;return e.createElement("div",{className:t.className},!!t.showDim&&e.createElement("div",{tabIndex:-1,role:"button","aria-label":"modal-dim",className:"dim",onClick:t.close}),e.createElement("div",{className:"modal-cont"},n))}))(f||(f=c(["\n position: fixed; top: 0; left:0; bottom: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center;\n button{ cursor:pointer; border: none; background-color: transparent; }\n .dim{ position: absolute; top: 0; left:0; bottom: 0; right: 0; z-index: 1; background-color: rgba(0,0,0,0.5); }\n .modal-cont{ position: relative; z-index: 2; width: 500px; height: 500px; padding: 20px; border-radius: 8px; background-color: white; }\n\n &.fade{ opacity: 0; transition-property: opacity;\n &.enter{ opacity: 1; }\n &.leave{ opacity: 0; }\n }\n\n @keyframes fade {\n 0%{ opacity: 0; }\n 100%{ opacity: 1;}\n }\n"]))),b=function(t,e){var r=n.useRef([]),o=(t.props||{}).animation||{},i=o.duration,a=void 0===i?x:i,u=o.name,c=void 0===u?"":u,l=n.useState(!1),s=l[0],f=l[1],p=n.useState(!1),d=p[0],m=p[1],h=n.useMemo((function(){var t="";return s&&!d?t="enter":!s&&d?t="leave":s&&d&&(t="enter-done"),t}),[s,d]);return n.useEffect((function(){return f(!0),function(){r.current.forEach((function(t){window.clearTimeout(t)}))}}),[]),n.useEffect((function(){!function(){if(s){var t=window.setTimeout((function(){m((function(t){return!t}))}),c?a:0);r.current.push(t)}}()}),[s]),{transitionClass:h,animationClassName:c,closeModal:function(){if(s&&d){f(!1);var n=window.setTimeout((function(){e(t.id)}),c?a-50:0);r.current.push(n)}}}},x=250;exports.DEFAULT_ANIMATION_DURATION=x,exports.ModalProvider=function(t){var r=t.className,o=void 0===r?"jw-modal":r,i=t.animation,a=t.children,c=t.backActionControl,l=t.pathname,s=t.scrollRelease,f=t.scrollFreeze,p=n.useRef([]),d=n.useState([]),m=d[0],w=d[1],b=n.useMemo((function(){return u({},v,{className:o,animation:i,modals:p,setModals:w,scrollRelease:s,scrollFreeze:f})}),[o,i,s,f]);return n.useEffect((function(){c&&c.func({modals:p})}),[].concat((null==c?void 0:c.deps)||[],[c])),n.useEffect((function(){w([]),s&&s()}),[l]),e.createElement(g.Provider,{value:b},e.createElement(y,null,m.map((function(t){return e.createElement(h,{key:t.id,modal:t})}))),a)},exports.ModalTemplate=w,exports.useModal=p,exports.useModalAnimation=b;
//# sourceMappingURL=react-easily-modal.cjs.production.min.js.map