Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mui-modal-provider
Advanced tools
mui-modal-provider - npm Package Compare versions
Comparing version 2.1.0 to 2.2.0
@@ -1,4 +0,4 @@ | ||
| import React from 'react'; | ||
| import { ReactNode } from 'react'; | ||
| export interface ModalProviderProps { | ||
| children: React.ReactNode; | ||
| children: ReactNode; | ||
| /** | ||
@@ -8,3 +8,13 @@ * Enable it if you want to use mui < 5 version | ||
| legacy?: boolean; | ||
| /** | ||
| * Enable it if you want to wrap the modals with the Suspense feature. | ||
| * @see https://beta.reactjs.org/reference/react/Suspense | ||
| */ | ||
| suspense?: boolean; | ||
| /** | ||
| * Custom fallback for the Suspense fallback | ||
| * @see https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading | ||
| */ | ||
| fallback?: ReactNode | null; | ||
| } | ||
| export default function ModalProvider({ children, legacy, }: ModalProviderProps): JSX.Element; | ||
| export default function ModalProvider({ children, legacy, suspense, fallback, }: ModalProviderProps): JSX.Element; |
@@ -11,6 +11,5 @@ 'use strict'; | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
@@ -22,9 +21,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
@@ -35,3 +31,2 @@ if (source == null) return {}; | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
@@ -42,3 +37,2 @@ key = sourceKeys[i]; | ||
| } | ||
| return target; | ||
@@ -48,3 +42,2 @@ } | ||
| var Types; | ||
| (function (Types) { | ||
@@ -58,3 +51,2 @@ Types["SHOW"] = "SHOW"; | ||
| })(Types || (Types = {})); | ||
| var initialState = {}; | ||
@@ -66,8 +58,7 @@ function reducer(state, action) { | ||
| var _extends2; | ||
| var _action$payload = action.payload, | ||
| id = _action$payload.id, | ||
| component = _action$payload.component, | ||
| props = _action$payload.props, | ||
| options = _action$payload.options; | ||
| id = _action$payload.id, | ||
| component = _action$payload.component, | ||
| props = _action$payload.props, | ||
| options = _action$payload.options; | ||
| return _extends({}, state, (_extends2 = {}, _extends2[id] = { | ||
@@ -81,13 +72,9 @@ component: component, | ||
| } | ||
| case Types.HIDE: | ||
| { | ||
| var _extends3; | ||
| var _id = action.payload.id; | ||
| if (!state[_id]) { | ||
| return state; | ||
| } | ||
| return _extends({}, state, (_extends3 = {}, _extends3[_id] = _extends({}, state[_id], { | ||
@@ -99,15 +86,11 @@ props: _extends({}, state[_id].props, { | ||
| } | ||
| case Types.UPDATE: | ||
| { | ||
| var _extends4; | ||
| var _action$payload2 = action.payload, | ||
| _id2 = _action$payload2.id, | ||
| _props = _action$payload2.props; | ||
| _id2 = _action$payload2.id, | ||
| _props = _action$payload2.props; | ||
| if (!state[_id2]) { | ||
| return state; | ||
| } | ||
| return _extends({}, state, (_extends4 = {}, _extends4[_id2] = _extends({}, state[_id2], { | ||
@@ -117,13 +100,9 @@ props: _extends({}, state[_id2].props, _props) | ||
| } | ||
| case Types.DESTROY: | ||
| { | ||
| var _id3 = action.payload.id; | ||
| var newState = _extends({}, state); | ||
| delete newState[_id3]; | ||
| return newState; | ||
| } | ||
| case Types.DESTROY_BY_ROOT_ID: | ||
@@ -136,7 +115,5 @@ { | ||
| var _extends5; | ||
| return _extends({}, acc, (_extends5 = {}, _extends5[key] = state[key], _extends5)); | ||
| }, {}); | ||
| } | ||
| default: | ||
@@ -171,11 +148,8 @@ throw new Error('Unexpected action'); | ||
| } | ||
| var buf = []; | ||
| var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| var charlen = chars.length; | ||
| for (var i = 0; i < len; i++) { | ||
| buf[i] = chars.charAt(Math.floor(Math.random() * charlen)); | ||
| } | ||
| return buf.join(''); | ||
@@ -187,12 +161,13 @@ }; | ||
| var children = _ref.children, | ||
| _ref$legacy = _ref.legacy, | ||
| legacy = _ref$legacy === void 0 ? false : _ref$legacy; | ||
| _ref$legacy = _ref.legacy, | ||
| legacy = _ref$legacy === void 0 ? false : _ref$legacy, | ||
| _ref$suspense = _ref.suspense, | ||
| suspense = _ref$suspense === void 0 ? true : _ref$suspense, | ||
| _ref$fallback = _ref.fallback, | ||
| fallback = _ref$fallback === void 0 ? null : _ref$fallback; | ||
| var _React$useReducer = React__default.useReducer(reducer, initialState), | ||
| state = _React$useReducer[0], | ||
| dispatch = _React$useReducer[1]; | ||
| state = _React$useReducer[0], | ||
| dispatch = _React$useReducer[1]; | ||
| var _update = React__default.useCallback(function (id, _ref2) { | ||
| var props = _objectWithoutPropertiesLoose(_ref2, _excluded); | ||
| if (!id) { | ||
@@ -202,3 +177,2 @@ console.error(MISSED_MODAL_ID_ERROR_MESSAGE); | ||
| } | ||
| dispatch({ | ||
@@ -212,3 +186,2 @@ type: Types.UPDATE, | ||
| }, [dispatch]); | ||
| var _hide = React__default.useCallback(function (id) { | ||
@@ -219,3 +192,2 @@ if (!id) { | ||
| } | ||
| dispatch({ | ||
@@ -228,3 +200,2 @@ type: Types.HIDE, | ||
| }, [dispatch]); | ||
| var _destroy = React__default.useCallback(function (id) { | ||
@@ -235,3 +206,2 @@ if (!id) { | ||
| } | ||
| dispatch({ | ||
@@ -244,3 +214,2 @@ type: Types.DESTROY, | ||
| }, [dispatch]); | ||
| var destroyByRootId = React__default.useCallback(function (rootId) { | ||
@@ -251,3 +220,2 @@ if (!rootId) { | ||
| } | ||
| dispatch({ | ||
@@ -262,7 +230,5 @@ type: Types.DESTROY_BY_ROOT_ID, | ||
| var id = uid(8); | ||
| if (options && options.rootId) { | ||
| id = options.rootId + "." + id; | ||
| } | ||
| dispatch({ | ||
@@ -290,10 +256,8 @@ type: Types.SHOW, | ||
| }, [dispatch, _hide, _destroy, _update]); | ||
| var renderState = function renderState() { | ||
| return Object.keys(state).map(function (id) { | ||
| var _state$id = state[id], | ||
| Component = _state$id.component, | ||
| props = _state$id.props, | ||
| options = _state$id.options; | ||
| Component = _state$id.component, | ||
| props = _state$id.props, | ||
| options = _state$id.options; | ||
| var handleClose = function handleClose() { | ||
@@ -305,3 +269,2 @@ if (options && options.destroyOnClose) { | ||
| } | ||
| if (props && props.onClose) { | ||
@@ -311,21 +274,14 @@ props.onClose.apply(props, arguments); | ||
| }; | ||
| var handleExited = function handleExited() { | ||
| var _props$TransitionProp; | ||
| if (props != null && props.onExited) { | ||
| props.onExited.apply(props, arguments); | ||
| } | ||
| if (props != null && (_props$TransitionProp = props.TransitionProps) != null && _props$TransitionProp.onExited) { | ||
| var _props$TransitionProp2; | ||
| (_props$TransitionProp2 = props.TransitionProps).onExited.apply(_props$TransitionProp2, arguments); | ||
| } | ||
| _destroy(id); | ||
| }; | ||
| var extraProps = {}; | ||
| if (!legacy) { | ||
@@ -342,3 +298,2 @@ extraProps = { | ||
| } | ||
| return React__default.createElement(Component, Object.assign({}, props, { | ||
@@ -350,3 +305,3 @@ key: id, | ||
| }; | ||
| var SuspenseWrapper = suspense ? React.Suspense : React.Fragment; | ||
| return React__default.createElement(ModalContext.Provider, { | ||
@@ -361,3 +316,5 @@ value: { | ||
| } | ||
| }, children, renderState()); | ||
| }, children, React__default.createElement(SuspenseWrapper, { | ||
| fallback: fallback | ||
| }, renderState())); | ||
| } | ||
@@ -373,11 +330,8 @@ | ||
| } | ||
| var _defaultOptions$optio = _extends({}, defaultOptions, options), | ||
| disableAutoDestroy = _defaultOptions$optio.disableAutoDestroy; | ||
| disableAutoDestroy = _defaultOptions$optio.disableAutoDestroy; | ||
| var _useContext = React.useContext(ModalContext), | ||
| showModal = _useContext.showModal, | ||
| destroy = _useContext.destroyModalsByRootId, | ||
| otherContextProps = _objectWithoutPropertiesLoose(_useContext, _excluded$1); | ||
| showModal = _useContext.showModal, | ||
| destroy = _useContext.destroyModalsByRootId, | ||
| otherContextProps = _objectWithoutPropertiesLoose(_useContext, _excluded$1); | ||
| var id = React.useRef(uid(6)); | ||
@@ -384,0 +338,0 @@ React.useEffect(function () { |
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,e,t=require("react"),n=(o=t)&&"object"==typeof o&&"default"in o?o.default:o;function r(){return(r=Object.assign||function(o){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n])}return o}).apply(this,arguments)}function a(o,e){if(null==o)return{};var t,n,r={},a=Object.keys(o);for(n=0;n<a.length;n++)e.indexOf(t=a[n])>=0||(r[t]=o[t]);return r}!function(o){o.SHOW="SHOW",o.HIDE="HIDE",o.UPDATE="UPDATE",o.DESTROY="DESTROY",o.DESTROY_BY_ROOT_ID="DESTROY_BY_ROOT_ID",o.UNKNOWN="UNKNOWN"}(e||(e={}));var s={};function i(o,t){switch(t.type){case e.SHOW:var n,a=t.payload,s=a.options;return r({},o,((n={})[a.id]={component:a.component,props:r({},a.props,{open:!0}),options:s},n));case e.HIDE:var i,d=t.payload.id;return o[d]?r({},o,((i={})[d]=r({},o[d],{props:r({},o[d].props,{open:!1})}),i)):o;case e.UPDATE:var u,l=t.payload,c=l.id;return o[c]?r({},o,((u={})[c]=r({},o[c],{props:r({},o[c].props,l.props)}),u)):o;case e.DESTROY:var p=t.payload.id,f=r({},o);return delete f[p],f;case e.DESTROY_BY_ROOT_ID:var y=t.payload.rootId;return Object.keys(o).filter((function(o){return o.split(".")[0]!==y})).reduce((function(e,t){var n;return r({},e,((n={})[t]=o[t],n))}),{});default:throw new Error("Unexpected action")}}var d=t.createContext({state:s,hideModal:function(){},showModal:function(){return{id:"id",hide:function(){},destroy:function(){},update:function(){}}},destroyModal:function(){},updateModal:function(){},destroyModalsByRootId:function(){}}),u=function(o){void 0===o&&(o=8);for(var e=[],t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",n=t.length,r=0;r<o;r++)e[r]=t.charAt(Math.floor(Math.random()*n));return e.join("")},l=["open"],c=["showModal","destroyModalsByRootId"],p={disableAutoDestroy:!1};exports.default=function(o){var t=o.children,c=o.legacy,p=void 0!==c&&c,f=n.useReducer(i,s),y=f[0],O=f[1],E=n.useCallback((function(o,t){var n=a(t,l);o?O({type:e.UPDATE,payload:{id:o,props:n}}):console.error("[ERROR]: Modal ID is missing")}),[O]),R=n.useCallback((function(o){o?O({type:e.HIDE,payload:{id:o}}):console.error("[ERROR]: Modal ID is missing")}),[O]),v=n.useCallback((function(o){o?O({type:e.DESTROY,payload:{id:o}}):console.error("[ERROR]: Modal ID is missing")}),[O]),D=n.useCallback((function(o){o?O({type:e.DESTROY_BY_ROOT_ID,payload:{rootId:o}}):console.error("[ERROR]: Modal root ID is missing")}),[O]),M=n.useCallback((function(o,t,n){var r=u(8);return n&&n.rootId&&(r=n.rootId+"."+r),O({type:e.SHOW,payload:{id:r,component:o,props:t,options:n}}),{id:r,hide:function(){return R(r)},destroy:function(){return v(r)},update:function(o){return E(r,o)}}}),[O,R,v,E]);return n.createElement(d.Provider,{value:{state:y,updateModal:E,hideModal:R,destroyModal:v,showModal:M,destroyModalsByRootId:D}},t,Object.keys(y).map((function(o){var e,t=y[o],a=t.component,s=t.props,i=t.options,d=function(){var e,t;null!=s&&s.onExited&&s.onExited.apply(s,arguments),null!=s&&null!=(e=s.TransitionProps)&&e.onExited&&(t=s.TransitionProps).onExited.apply(t,arguments),v(o)};return e=p?{onExited:d}:{TransitionProps:r({},null==s?void 0:s.TransitionProps,{onExited:d})},n.createElement(a,Object.assign({},s,{key:o,onClose:function(){i&&i.destroyOnClose?v(o):R(o),s&&s.onClose&&s.onClose.apply(s,arguments)}},i&&!i.destroyOnClose&&e))})))},exports.useModal=function(o){void 0===o&&(o=p);var e=r({},p,o).disableAutoDestroy,n=t.useContext(d),s=n.showModal,i=n.destroyModalsByRootId,l=a(n,c),f=t.useRef(u(6));return t.useEffect((function(){return function(){e||i(f.current)}}),[e,i]),r({showModal:t.useCallback((function(o,e,t){return s(o,e,r({rootId:f.current},t))}),[s])},l)}; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,e,t=require("react"),n=(o=t)&&"object"==typeof o&&"default"in o?o.default:o;function r(){return(r=Object.assign?Object.assign.bind():function(o){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n])}return o}).apply(this,arguments)}function a(o,e){if(null==o)return{};var t,n,r={},a=Object.keys(o);for(n=0;n<a.length;n++)e.indexOf(t=a[n])>=0||(r[t]=o[t]);return r}!function(o){o.SHOW="SHOW",o.HIDE="HIDE",o.UPDATE="UPDATE",o.DESTROY="DESTROY",o.DESTROY_BY_ROOT_ID="DESTROY_BY_ROOT_ID",o.UNKNOWN="UNKNOWN"}(e||(e={}));var s={};function i(o,t){switch(t.type){case e.SHOW:var n,a=t.payload,s=a.options;return r({},o,((n={})[a.id]={component:a.component,props:r({},a.props,{open:!0}),options:s},n));case e.HIDE:var i,d=t.payload.id;return o[d]?r({},o,((i={})[d]=r({},o[d],{props:r({},o[d].props,{open:!1})}),i)):o;case e.UPDATE:var l,u=t.payload,c=u.id;return o[c]?r({},o,((l={})[c]=r({},o[c],{props:r({},o[c].props,u.props)}),l)):o;case e.DESTROY:var p=t.payload.id,f=r({},o);return delete f[p],f;case e.DESTROY_BY_ROOT_ID:var y=t.payload.rootId;return Object.keys(o).filter((function(o){return o.split(".")[0]!==y})).reduce((function(e,t){var n;return r({},e,((n={})[t]=o[t],n))}),{});default:throw new Error("Unexpected action")}}var d=t.createContext({state:s,hideModal:function(){},showModal:function(){return{id:"id",hide:function(){},destroy:function(){},update:function(){}}},destroyModal:function(){},updateModal:function(){},destroyModalsByRootId:function(){}}),l=function(o){void 0===o&&(o=8);for(var e=[],t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",n=t.length,r=0;r<o;r++)e[r]=t.charAt(Math.floor(Math.random()*n));return e.join("")},u=["open"],c=["showModal","destroyModalsByRootId"],p={disableAutoDestroy:!1};exports.default=function(o){var c=o.children,p=o.legacy,f=void 0!==p&&p,y=o.suspense,O=void 0===y||y,E=o.fallback,R=void 0===E?null:E,v=n.useReducer(i,s),D=v[0],M=v[1],I=n.useCallback((function(o,t){var n=a(t,u);o?M({type:e.UPDATE,payload:{id:o,props:n}}):console.error("[ERROR]: Modal ID is missing")}),[M]),b=n.useCallback((function(o){o?M({type:e.HIDE,payload:{id:o}}):console.error("[ERROR]: Modal ID is missing")}),[M]),h=n.useCallback((function(o){o?M({type:e.DESTROY,payload:{id:o}}):console.error("[ERROR]: Modal ID is missing")}),[M]),T=n.useCallback((function(o){o?M({type:e.DESTROY_BY_ROOT_ID,payload:{rootId:o}}):console.error("[ERROR]: Modal root ID is missing")}),[M]),m=n.useCallback((function(o,t,n){var r=l(8);return n&&n.rootId&&(r=n.rootId+"."+r),M({type:e.SHOW,payload:{id:r,component:o,props:t,options:n}}),{id:r,hide:function(){return b(r)},destroy:function(){return h(r)},update:function(o){return I(r,o)}}}),[M,b,h,I]);return n.createElement(d.Provider,{value:{state:D,updateModal:I,hideModal:b,destroyModal:h,showModal:m,destroyModalsByRootId:T}},c,n.createElement(O?t.Suspense:t.Fragment,{fallback:R},Object.keys(D).map((function(o){var e,t=D[o],a=t.component,s=t.props,i=t.options,d=function(){var e,t;null!=s&&s.onExited&&s.onExited.apply(s,arguments),null!=s&&null!=(e=s.TransitionProps)&&e.onExited&&(t=s.TransitionProps).onExited.apply(t,arguments),h(o)};return e=f?{onExited:d}:{TransitionProps:r({},null==s?void 0:s.TransitionProps,{onExited:d})},n.createElement(a,Object.assign({},s,{key:o,onClose:function(){i&&i.destroyOnClose?h(o):b(o),s&&s.onClose&&s.onClose.apply(s,arguments)}},i&&!i.destroyOnClose&&e))}))))},exports.useModal=function(o){void 0===o&&(o=p);var e=r({},p,o).disableAutoDestroy,n=t.useContext(d),s=n.showModal,i=n.destroyModalsByRootId,u=a(n,c),f=t.useRef(l(6));return t.useEffect((function(){return function(){e||i(f.current)}}),[e,i]),r({showModal:t.useCallback((function(o,e,t){return s(o,e,r({rootId:f.current},t))}),[s])},u)}; | ||
| //# sourceMappingURL=mui-modal-provider.cjs.production.min.js.map |
@@ -1,8 +0,7 @@ | ||
| import React, { createContext, useContext, useRef, useEffect, useCallback } from 'react'; | ||
| import React, { createContext, Suspense, Fragment, useContext, useRef, useEffect, useCallback } from 'react'; | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
@@ -14,9 +13,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
@@ -27,3 +23,2 @@ if (source == null) return {}; | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
@@ -34,3 +29,2 @@ key = sourceKeys[i]; | ||
| } | ||
| return target; | ||
@@ -40,3 +34,2 @@ } | ||
| var Types; | ||
| (function (Types) { | ||
@@ -50,3 +43,2 @@ Types["SHOW"] = "SHOW"; | ||
| })(Types || (Types = {})); | ||
| var initialState = {}; | ||
@@ -58,8 +50,7 @@ function reducer(state, action) { | ||
| var _extends2; | ||
| var _action$payload = action.payload, | ||
| id = _action$payload.id, | ||
| component = _action$payload.component, | ||
| props = _action$payload.props, | ||
| options = _action$payload.options; | ||
| id = _action$payload.id, | ||
| component = _action$payload.component, | ||
| props = _action$payload.props, | ||
| options = _action$payload.options; | ||
| return _extends({}, state, (_extends2 = {}, _extends2[id] = { | ||
@@ -73,13 +64,9 @@ component: component, | ||
| } | ||
| case Types.HIDE: | ||
| { | ||
| var _extends3; | ||
| var _id = action.payload.id; | ||
| if (!state[_id]) { | ||
| return state; | ||
| } | ||
| return _extends({}, state, (_extends3 = {}, _extends3[_id] = _extends({}, state[_id], { | ||
@@ -91,15 +78,11 @@ props: _extends({}, state[_id].props, { | ||
| } | ||
| case Types.UPDATE: | ||
| { | ||
| var _extends4; | ||
| var _action$payload2 = action.payload, | ||
| _id2 = _action$payload2.id, | ||
| _props = _action$payload2.props; | ||
| _id2 = _action$payload2.id, | ||
| _props = _action$payload2.props; | ||
| if (!state[_id2]) { | ||
| return state; | ||
| } | ||
| return _extends({}, state, (_extends4 = {}, _extends4[_id2] = _extends({}, state[_id2], { | ||
@@ -109,13 +92,9 @@ props: _extends({}, state[_id2].props, _props) | ||
| } | ||
| case Types.DESTROY: | ||
| { | ||
| var _id3 = action.payload.id; | ||
| var newState = _extends({}, state); | ||
| delete newState[_id3]; | ||
| return newState; | ||
| } | ||
| case Types.DESTROY_BY_ROOT_ID: | ||
@@ -128,7 +107,5 @@ { | ||
| var _extends5; | ||
| return _extends({}, acc, (_extends5 = {}, _extends5[key] = state[key], _extends5)); | ||
| }, {}); | ||
| } | ||
| default: | ||
@@ -163,11 +140,8 @@ throw new Error('Unexpected action'); | ||
| } | ||
| var buf = []; | ||
| var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| var charlen = chars.length; | ||
| for (var i = 0; i < len; i++) { | ||
| buf[i] = chars.charAt(Math.floor(Math.random() * charlen)); | ||
| } | ||
| return buf.join(''); | ||
@@ -179,12 +153,13 @@ }; | ||
| var children = _ref.children, | ||
| _ref$legacy = _ref.legacy, | ||
| legacy = _ref$legacy === void 0 ? false : _ref$legacy; | ||
| _ref$legacy = _ref.legacy, | ||
| legacy = _ref$legacy === void 0 ? false : _ref$legacy, | ||
| _ref$suspense = _ref.suspense, | ||
| suspense = _ref$suspense === void 0 ? true : _ref$suspense, | ||
| _ref$fallback = _ref.fallback, | ||
| fallback = _ref$fallback === void 0 ? null : _ref$fallback; | ||
| var _React$useReducer = React.useReducer(reducer, initialState), | ||
| state = _React$useReducer[0], | ||
| dispatch = _React$useReducer[1]; | ||
| state = _React$useReducer[0], | ||
| dispatch = _React$useReducer[1]; | ||
| var _update = React.useCallback(function (id, _ref2) { | ||
| var props = _objectWithoutPropertiesLoose(_ref2, _excluded); | ||
| if (!id) { | ||
@@ -194,3 +169,2 @@ console.error(MISSED_MODAL_ID_ERROR_MESSAGE); | ||
| } | ||
| dispatch({ | ||
@@ -204,3 +178,2 @@ type: Types.UPDATE, | ||
| }, [dispatch]); | ||
| var _hide = React.useCallback(function (id) { | ||
@@ -211,3 +184,2 @@ if (!id) { | ||
| } | ||
| dispatch({ | ||
@@ -220,3 +192,2 @@ type: Types.HIDE, | ||
| }, [dispatch]); | ||
| var _destroy = React.useCallback(function (id) { | ||
@@ -227,3 +198,2 @@ if (!id) { | ||
| } | ||
| dispatch({ | ||
@@ -236,3 +206,2 @@ type: Types.DESTROY, | ||
| }, [dispatch]); | ||
| var destroyByRootId = React.useCallback(function (rootId) { | ||
@@ -243,3 +212,2 @@ if (!rootId) { | ||
| } | ||
| dispatch({ | ||
@@ -254,7 +222,5 @@ type: Types.DESTROY_BY_ROOT_ID, | ||
| var id = uid(8); | ||
| if (options && options.rootId) { | ||
| id = options.rootId + "." + id; | ||
| } | ||
| dispatch({ | ||
@@ -282,10 +248,8 @@ type: Types.SHOW, | ||
| }, [dispatch, _hide, _destroy, _update]); | ||
| var renderState = function renderState() { | ||
| return Object.keys(state).map(function (id) { | ||
| var _state$id = state[id], | ||
| Component = _state$id.component, | ||
| props = _state$id.props, | ||
| options = _state$id.options; | ||
| Component = _state$id.component, | ||
| props = _state$id.props, | ||
| options = _state$id.options; | ||
| var handleClose = function handleClose() { | ||
@@ -297,3 +261,2 @@ if (options && options.destroyOnClose) { | ||
| } | ||
| if (props && props.onClose) { | ||
@@ -303,21 +266,14 @@ props.onClose.apply(props, arguments); | ||
| }; | ||
| var handleExited = function handleExited() { | ||
| var _props$TransitionProp; | ||
| if (props != null && props.onExited) { | ||
| props.onExited.apply(props, arguments); | ||
| } | ||
| if (props != null && (_props$TransitionProp = props.TransitionProps) != null && _props$TransitionProp.onExited) { | ||
| var _props$TransitionProp2; | ||
| (_props$TransitionProp2 = props.TransitionProps).onExited.apply(_props$TransitionProp2, arguments); | ||
| } | ||
| _destroy(id); | ||
| }; | ||
| var extraProps = {}; | ||
| if (!legacy) { | ||
@@ -334,3 +290,2 @@ extraProps = { | ||
| } | ||
| return React.createElement(Component, Object.assign({}, props, { | ||
@@ -342,3 +297,3 @@ key: id, | ||
| }; | ||
| var SuspenseWrapper = suspense ? Suspense : Fragment; | ||
| return React.createElement(ModalContext.Provider, { | ||
@@ -353,3 +308,5 @@ value: { | ||
| } | ||
| }, children, renderState()); | ||
| }, children, React.createElement(SuspenseWrapper, { | ||
| fallback: fallback | ||
| }, renderState())); | ||
| } | ||
@@ -365,11 +322,8 @@ | ||
| } | ||
| var _defaultOptions$optio = _extends({}, defaultOptions, options), | ||
| disableAutoDestroy = _defaultOptions$optio.disableAutoDestroy; | ||
| disableAutoDestroy = _defaultOptions$optio.disableAutoDestroy; | ||
| var _useContext = useContext(ModalContext), | ||
| showModal = _useContext.showModal, | ||
| destroy = _useContext.destroyModalsByRootId, | ||
| otherContextProps = _objectWithoutPropertiesLoose(_useContext, _excluded$1); | ||
| showModal = _useContext.showModal, | ||
| destroy = _useContext.destroyModalsByRootId, | ||
| otherContextProps = _objectWithoutPropertiesLoose(_useContext, _excluded$1); | ||
| var id = useRef(uid(6)); | ||
@@ -376,0 +330,0 @@ useEffect(function () { |
@@ -9,3 +9,4 @@ import { ReactNode, FC } from 'react'; | ||
| export declare const LegacyModalProviderWrapper: FC<Props>; | ||
| export declare const NoSuspenseModalProviderWrapper: FC<Props>; | ||
| export declare const ModalContextProviderWrapper: FC<Props>; | ||
| export {}; |
| { | ||
| "version": "2.1.0", | ||
| "version": "2.2.0", | ||
| "license": "MIT", | ||
@@ -73,3 +73,4 @@ "name": "mui-modal-provider", | ||
| "json", | ||
| "text" | ||
| "text", | ||
| "html" | ||
| ], | ||
@@ -76,0 +77,0 @@ "testPathIgnorePatterns": [ |
@@ -63,6 +63,14 @@ # mui-modal-provider | ||
| ## Compatibility | ||
| ## API | ||
| For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider. | ||
| ### Modal Provider | ||
| | Property | Type | Default | Description | Required | | ||
| |--|--|--|--|--| | ||
| | `legacy` | `Boolean` | `false` | Set to `true` if you want to use mui < 5 version. | false | | ||
| | `suspense` | `Boolean` | `true` | Wraps your modal with the [Suspense](https://beta.reactjs.org/reference/react/Suspense) | false | | ||
| | `fallback` | `Nullable<ReactNode>` | `null` | Custom component for the Suspense [fallback](https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) prop | false | | ||
| | `children` | `ReactNode` | `undefined` | - | true | ||
| *The rest will be added later... Look at examples* 😊 | ||
| ## Examples | ||
@@ -72,2 +80,6 @@ | ||
| ## Compatibility | ||
| For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider. | ||
| ## Developing & linking locally | ||
@@ -74,0 +86,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.16%
816
- Number of lines in readme file
- increased by14.63%
94
Worsened metrics
- Total package byte prevSize
- decreased by-0.12%
83864
No dependency changes