mui-modal-provider - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/ModalContext.d.ts

@@ -13,3 +13,4 @@ /// <reference types="react" />
     destroyModal(id: string): void;
+    updateModal(id: string, props: IProps): void;
 }
 export declare const ModalContext: import("react").Context<IModalContext>;

dist/mui-modal-provider.cjs.development.js

@@ -73,3 +73,4 @@ 'use strict';
   },
-  destroyModal: function destroyModal() {}
+  destroyModal: function destroyModal() {},
+  updateModal: function updateModal() {}
 });
@@ -97,2 +98,11 @@
   }, []);
+  var updateModal = React__default.useCallback(function (id, props) {
+    return setState(function (prevState) {
+      var _extends3;
+
+      return !prevState[id] ? prevState : _extends({}, prevState, (_extends3 = {}, _extends3[id] = _extends({}, prevState[id], {
+        props: _extends({}, prevState[id] ? prevState[id].props : {}, props)
+      }), _extends3));
+    });
+  }, []);
   var destroyModal = React__default.useCallback(function (id) {
@@ -108,5 +118,5 @@ return setState(function (prevState) {
     setState(function (prevState) {
-      var _extends3;
+      var _extends4;
 
-      return _extends({}, prevState, (_extends3 = {}, _extends3[id] = {
+      return _extends({}, prevState, (_extends4 = {}, _extends4[id] = {
         component: component,
@@ -116,3 +126,3 @@ props: _extends({}, props, {
         })
-      }, _extends3));
+      }, _extends4));
     });
@@ -128,12 +138,6 @@ return {
       update: function update(newProps) {
-        return setState(function (prevState) {
-          var _extends4;
-
-          return !prevState[id] ? prevState : _extends({}, prevState, (_extends4 = {}, _extends4[id] = _extends({}, prevState[id], {
-            props: _extends({}, prevState[id] ? prevState[id].props : {}, newProps)
-          }), _extends4));
-        });
+        return updateModal(id, newProps);
       }
     };
-  }, [destroyModal, hideModal]);
+  }, [destroyModal, hideModal, updateModal]);
 
@@ -175,2 +179,3 @@ var renderState = function renderState() {
       destroyModal: destroyModal,
+      updateModal: updateModal,
       state: state
@@ -177,0 +182,0 @@ }

dist/mui-modal-provider.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t;function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function o(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:String(e)}var u=e.createContext({state:{},hideModal:function(){},showModal:function(){return{id:"id",hide:function(){},destroy:function(){},update:function(){}}},destroyModal:function(){}}),i={};exports.ModalContext=u,exports.default=function(t){var e=t.children,a=n.useState(i),c=a[0],s=a[1],f=n.useCallback((function(t){return s((function(e){var n;return r({},e,((n={})[t]=r({},e[t],{props:r({},e[t]?e[t].props:{},{open:!1})}),n))}))}),[]),l=n.useCallback((function(t){return s((function(e){return function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r<u.length;r++)e.indexOf(n=u[r])>=0||(o[n]=t[n]);return o}(e,[t].map(o))}))}),[]),p=n.useCallback((function(t,e){var n=Math.random().toString(36).substr(2,9);return s((function(o){var u;return r({},o,((u={})[n]={component:t,props:r({},e,{open:!0})},u))})),{id:n,hide:function(){return f(n)},destroy:function(){return l(n)},update:function(t){return s((function(e){var o;return e[n]?r({},e,((o={})[n]=r({},e[n],{props:r({},e[n]?e[n].props:{},t)}),o)):e}))}}}),[l,f]);return n.createElement(u.Provider,{value:{hideModal:f,showModal:p,destroyModal:l,state:c}},e,Object.keys(c).map((function(t){var e=c[t],r=e.component,o=e.props;return r?n.createElement(r,Object.assign({},o,{key:t,onClose:function(){o&&o.onClose&&o.onClose(),f(t)},onExited:function(){o&&o.onExited&&o.onExited(),l(t)}})):null})))},exports.useModal=function(){return e.useContext(u)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t;function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function o(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:String(e)}var u=e.createContext({state:{},hideModal:function(){},showModal:function(){return{id:"id",hide:function(){},destroy:function(){},update:function(){}}},destroyModal:function(){},updateModal:function(){}}),i={};exports.ModalContext=u,exports.default=function(t){var e=t.children,a=n.useState(i),c=a[0],l=a[1],f=n.useCallback((function(t){return l((function(e){var n;return r({},e,((n={})[t]=r({},e[t],{props:r({},e[t]?e[t].props:{},{open:!1})}),n))}))}),[]),s=n.useCallback((function(t,e){return l((function(n){var o;return n[t]?r({},n,((o={})[t]=r({},n[t],{props:r({},n[t]?n[t].props:{},e)}),o)):n}))}),[]),d=n.useCallback((function(t){return l((function(e){return function(t,e){if(null==t)return{};var n,r,o={},u=Object.keys(t);for(r=0;r<u.length;r++)e.indexOf(n=u[r])>=0||(o[n]=t[n]);return o}(e,[t].map(o))}))}),[]),p=n.useCallback((function(t,e){var n=Math.random().toString(36).substr(2,9);return l((function(o){var u;return r({},o,((u={})[n]={component:t,props:r({},e,{open:!0})},u))})),{id:n,hide:function(){return f(n)},destroy:function(){return d(n)},update:function(t){return s(n,t)}}}),[d,f,s]);return n.createElement(u.Provider,{value:{hideModal:f,showModal:p,destroyModal:d,updateModal:s,state:c}},e,Object.keys(c).map((function(t){var e=c[t],r=e.component,o=e.props;return r?n.createElement(r,Object.assign({},o,{key:t,onClose:function(){o&&o.onClose&&o.onClose(),f(t)},onExited:function(){o&&o.onExited&&o.onExited(),d(t)}})):null})))},exports.useModal=function(){return e.useContext(u)};
 //# sourceMappingURL=mui-modal-provider.cjs.production.min.js.map

dist/mui-modal-provider.esm.js

@@ -66,3 +66,4 @@ import React, { createContext, useContext } from 'react';
   },
-  destroyModal: function destroyModal() {}
+  destroyModal: function destroyModal() {},
+  updateModal: function updateModal() {}
 });
@@ -90,2 +91,11 @@
   }, []);
+  var updateModal = React.useCallback(function (id, props) {
+    return setState(function (prevState) {
+      var _extends3;
+
+      return !prevState[id] ? prevState : _extends({}, prevState, (_extends3 = {}, _extends3[id] = _extends({}, prevState[id], {
+        props: _extends({}, prevState[id] ? prevState[id].props : {}, props)
+      }), _extends3));
+    });
+  }, []);
   var destroyModal = React.useCallback(function (id) {
@@ -101,5 +111,5 @@ return setState(function (prevState) {
     setState(function (prevState) {
-      var _extends3;
+      var _extends4;
 
-      return _extends({}, prevState, (_extends3 = {}, _extends3[id] = {
+      return _extends({}, prevState, (_extends4 = {}, _extends4[id] = {
         component: component,
@@ -109,3 +119,3 @@ props: _extends({}, props, {
         })
-      }, _extends3));
+      }, _extends4));
     });
@@ -121,12 +131,6 @@ return {
       update: function update(newProps) {
-        return setState(function (prevState) {
-          var _extends4;
-
-          return !prevState[id] ? prevState : _extends({}, prevState, (_extends4 = {}, _extends4[id] = _extends({}, prevState[id], {
-            props: _extends({}, prevState[id] ? prevState[id].props : {}, newProps)
-          }), _extends4));
-        });
+        return updateModal(id, newProps);
       }
     };
-  }, [destroyModal, hideModal]);
+  }, [destroyModal, hideModal, updateModal]);
 
@@ -168,2 +172,3 @@ var renderState = function renderState() {
       destroyModal: destroyModal,
+      updateModal: updateModal,
       state: state
@@ -170,0 +175,0 @@ }

package.json

 {
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -8,2 +8,4 @@ # mui-modal-provider
 
+MUI-modal-provider is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and [React Hooks](https://en.reactjs.org/docs/hooks-intro.html) for simplified work with modals (dialogs) built on [Material-UI](https://www.material-ui.com) or custom solutions with suitable props.
+
 ## Install
@@ -17,93 +19,86 @@
 
-App.js
-
 ```jsx
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ModalProvider, { useModal } from 'mui-modal-provider';
-import Blog from './components/Blog';
-
-export default function App() {
-  return (
-    <ModalProvider>
-      <Blog>
-    </ModalProvider>
-  )
-}
-```
-
-components/Blog.js
-
-```jsx
-import React from 'react';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
-import { useModal } from 'mui-modal-provider';
 
-import HelloWorldDialog from './HelloWorldDialog.js';
+const HelloWorldDialog = ({
+  title,
+  description,
+  onCancel,
+  onConfirm,
+  ...props
+}) => (
+  <Dialog open={false} {...props}>
+    <DialogTitle>{title}</DialogTitle>
+    <DialogContent>
+      <DialogContentText>{description}</DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={onCancel} color="primary">
+        Cancel
+      </Button>
+      <Button onClick={onConfirm} color="primary">
+        Ok
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
 
-export default function Blog() {
+const Demo = () => {
   const { showModal } = useModal();
 
   const handleClick = () => {
+    let timeoutId;
+
+    // Show `HelloWorldDialog` with initial props
     const modal = showModal(HelloWorldDialog, {
       title: 'Hello World',
       description: 'description text',
-      onConfirm: () => {
-        console.log('ok');
-        modal.hide();
-      },
-      onCancel: () => {
-        console.log('cancel');
-        modal.hide();
+      onConfirm: () => modal.hide(),
+      onCancel: () => modal.hide(),
+      onExited: () => {
+        // =========================
+        // ⚠️ Be careful with setImmediate, setInterval and setTimeout
+        // ⚠️ don't forget to clean up id after closing dialog.
+        // ⚠️ use `onExited` or `onClose` callback for this.
+        // =========================
+        clearTimeout(timeoutId);
       }
     });
+
+    // Updating props if needed.
+    timeoutId = setTimeout(() => {
+      modal.update({
+        title: 'Updated hello world',
+        description: 'updated description text',
+      });
+    }, 1000);
   };
 
   return (
-    <div>
-      <Button
-        variant="contained"
-        onClick={handleClick}
-        color="primary"
-      >
-        show modal
-      </Button>
-    <div>
+    <Button
+      variant="contained"
+      onClick={handleClick}
+      color="primary"
+    >
+      show modal
+    </Button>
   )
 }
-```
 
-components/HelloWorldDialog.js
+const App = () => (
+  <ModalProvider>
+    <Demo />
+  </ModalProvider>
+);
 
-```jsx
-import React from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import Dialog from '@material-ui/core/Dialog';
-import Button from '@material-ui/core/Button';
+ReactDOM.render(<App />, document.getElementById('root'));
+```
 
-export default function HelloWorldDialog({
-  title = '',
-  description = '',
-  onCancel,
-  onConfirm,
-  ...props
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{description}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onCancel} color="primary">
-          Cancel
-        </Button>
-        <Button onClick={onConfirm} color="primary">
-          Ok
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-```

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41152

increased by5.91%

Lines of code

357

increased by3.48%

Worsened metrics

Number of lines in readme file

103

decreased by-4.63%

No dependency changes