quernest / mui-modal-provider Goto Github PK

test coverage must be above 90%

When using the module federation vite plugin, such an error appears:

It turned out to be solved only by correcting imports. #76

@Quernest How can I update props?

it should include:

• auto destroy modal on close;
• remove onExited prop where it is not needed;

Regular Modal component (without Transition) does not have built-in onExited callback inside which the current version of mui-modal-provider library destroys modals (clears memory).

So do not forget to destroy modals manually or using the destroyOnClose option.

showModal(
  SimpleModal,
  undefined,
  {
    destroyOnClose: true // <-- automatically removes modals that do not have the onExited flag
  }
)

peerDeps is currently:

  "peerDependencies": {
    "@types/react": "^16.8.6",
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },

The react deps should probably be updated to handle React 17+.

Also @types/react is probably not necessary as a peer dep.

Hi, I'm dealing with a situation where I have a dropdown menu which shows a list of options. When the user clicks on an option, it triggers the modal which displays a message, does some background work, and auto-closes. However, when the user clicks the dropdown option, this hides the dropdown menu and automatically unmounts the dropdown option's component. Unfortunately, this is also causing the modal to disappear (a bit surprisingly) even though the modal is rendered at the root of the DOM tree instead of within the component and thus there should be no impact on modal visibility.

I read #5 posted in 2020 and it looks like this behavior was set up on purpose to handle scenarios where the user clicks the browser back button. In my case, I am not worried about the browser back button since the modal auto-closes. Is it possible for us to add a flag option to the showModal command so that it will not destroy the modal on component unmount if the flag is set to true?

(I can not move up the code for showing the modal out of the option component into the dropdown component because that would break the SRP principle. I also have a bunch of options for the user to select to do different things and show various modals, so moving all that code into the dropdown component would cause its code size to grow unreasonably large)

As an aside, thanks again for making this great package - I've used it probably 10 times now in various places in my app.

@Quernest maybe we can add wrapper function for showModal function in the useModal hook. This wrapper will track modal ids which were created in some component. And in useModal hook we will use useEffect to find out when component which created some modals is destroyed. And when it is destroyed we can use destroyModal to close modals created by this component?

Because if we do not close modals manually when browser back button it is pressed and some component which created modals is destroyed we can have different issues.

Originally posted by @pavelspichonak in #4 (comment)

Hi, I tried setting up a lazy-loaded dialog that optionally renders based on what the user selects.

const LazyLoadedDialog = React.lazy(() => import('./MyDialog');

...

showModal(LazyLoadedDialog);

Unfortunately, this doesn't seem to work since showModal is expecting the dialog to be an immediately available component. Is there a way to adjust the showModal function to show lazy-loaded dialogs to help boost app performance?

(Btw, this is a really awesome npm library! I use it at work to make managing modals super easy)

disableAutoDestroy: false and destroyOnClose : false are not honored (at least not always).

https://github.com/Quernest/mui-modal-provider/blob/master/src/modal-provider.tsx#L165

The onExited should have an options (options.destroyOnClose || disableAutoDestroy) check before calling destroy?

1.12.3 -> 2.0.0

How can I close dialog on back button pressed? and prevent back action in navigator?

Will mui-modal-provider support react 18?

First of all thanks for the awesome package, it makes opening dialogs a whole lot easier ❤️

I just installed your package and got this error:
'./dist/modal.esm.js' does not exist, did you mean './dist/index.js'?'

Locally I hot fixed the issue by removing the "module" line from package.json in your installed package.

- "module": "dist/modal.esm.js",
  "main": "dist/index.js",

Looking at the tree of the installfolder

tree node_modules/mui-modal-provider
node_modules/mui-modal-provider
├── LICENSE
├── README.md
├── dist
│   ├── ModalContext.d.ts
│   ├── ModalProvider.d.ts
│   ├── constants.d.ts
│   ├── index.d.ts
│   ├── index.js
│   ├── mui-modal-provider.cjs.development.js
│   ├── mui-modal-provider.cjs.development.js.map
│   ├── mui-modal-provider.cjs.production.min.js
│   ├── mui-modal-provider.cjs.production.min.js.map
│   ├── mui-modal-provider.esm.js
│   ├── mui-modal-provider.esm.js.map
│   ├── reducer.d.ts
│   ├── test-utils
│   │   ├── LegacyModal.d.ts
│   │   ├── Modal.d.ts
│   │   └── index.d.ts
│   ├── types.d.ts
│   ├── useModal.d.ts
│   └── utils.d.ts
└── package.json

I guess this line should be changed into (tested works)

- "module": "dist/modal.esm.js",
+ "module": "dist/mui-modal-provider.esm.js",

Is it a known issue/just a factor of React Contexts that all components using this library rerenders when a new library calls useModal?

I'm wanting to create a self contained Dialog that has some logic in it as well. When the OK button is pressed, the business logic executes and the modal is closed. Is it possible to call hideModal from within the dialog itself?

const ConfirmationDialog: React.FC<Props> = ({ title, description, ...props }) => {
    const { hideModal } = useModal();
    const handleClose = () => {
        // Do stuff here
        ...
        hideModal(); // What is the modal id?
    };
    return (
        <Dialog {...props}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>
                <DialogContentText>{description}</DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose} color="primary">
                    Ok
                </Button>
            </DialogActions>
        </Dialog>
    );
};

Meanwhile somewhere else in my app:

showModal(ConfirmationDialog, {
  title: 'Hello World',
  description: 'description text',
});

Thanks for a great library!

If the component hosting useMount was unmounted for some reason before the onClose is called the ModalProvider will fail with an error. This will of course also bypass most error boundaries due to how high up ModalProvider normally would be.

This is because DESTROY_BY_ROOT_ID runs and then HIDE runs and the state is missing the id in payload.id.

https://codesandbox.io/s/vigorous-benz-ign4q?file=/src/App.js

This can happen in real apps if a modal does async things as part of its confirm button. e.g. A confirm dialog's confirm button makes an API call, then on success emits a snackbar and closes the dialog. If that API call had side effects (react-query, GraphQL libraries) that happens to change the app to a state where the component that happens to be hosting useModal no longer exists.

Here https://github.com/Quernest/mui-modal-provider/blob/master/src/ModalProvider.tsx#L87 we call hideModal(id); , it called when user touched backdrop

I want to prevent auto hide on backdrop click , user cannot close modal anyway!

README.md

• keywords

https://material-ui.com/ru/components/modal/

Hey, is there a way to disable the closing of an dialog, when clicked outside the dialog?
Unfortunately disableBackdropClick has been removed

Hi community,

I'm using this library in one of our projects for a long time. Today we have found a bug in our application, because someone has moved the <ModalProvider /> down in the component tree and it wasn't noticed until now, because we have a specific scenario where we use it and it was above the <ModalProvider />. Then I've started wondering how there weren't some errors, like usually happens when you don't use the Provider, and tries to call useContext e.g.:

const useSomeContext = () => {
  const context = useContext(SomeContext);
  if (context === undefined) {
    throw new Error('useSomeContext must be used within a SomeContextProvider');
  }
  return context;
};

Then I took a look at the file node_modules/mui-modal-provider/dist/mui-modal-provider.cjs.development.js and saw that on line 305 the library is making use of the useContext there. Couldn't this solution I have proposed above be applied there, just to avoid "hidden bugs" like this one we have gone through? I'd be open to contribute if that's something interesting to be applied.

1. Using latest 4 version of material-ui with latest version of typescript I have modal window types like this:

import { ReactNode } from 'react';
import { DialogProps } from '@material-ui/core/Dialog';

export interface IProps extends DialogProps {}

and I get typescript errors:

and I have to update types like this:

import { ReactNode } from 'react';
import { DialogProps } from '@material-ui/core/Dialog';

export interface IProps extends DialogProps {
  onClose: () => void;
  onExited: () => void;
}

Is it your package typings issue or not?

2. now I can pass any props to showModal method.
   Is it possible to update typings to be able to pass only that props which passed modal component supports?

For example if I use showModal like this:

showModal(Modal, modalPropsObject);

I'd like to be able to pass only that props which Modal component declared in its typings for typescript?

Originally posted by @pavelspichonak in #5 (comment)

Material UI v4.12.0 and v5 have changed the Dialog API from taking onExited to instead taking a TransitionProps object with onExited in it.

We cannot override onClose because of

and it's not possible to keep dialog open when clicking on backdrop

Hi, thanks for this awesome library, however, I have some problem regarding to closing current modal and open another new one. Here is the example

  const loginModal = showModal(LoginModal, {
    onClose: () => {},
    onRedirectForgetPwd: () => {},
    onRedirectRegister: () => {
      loginModal.hide();
      showModal(RegisterModal)
    },
  });

  const registerModal = showModal(RegisterModal, {
    onClose: () => {},
    onRedirectLogin: () => {
      registerModal.hide();
      showModal(LoginModal)
    },
  });

onRedirectxxx was indicated a callback funnction to trigger modal useState().
How can I archive this working? Any clues?

Perhaps the best answer is to:

1. Have a fallback (destructing is nice)
2. export the fallback modal (so that my usecase can do an === compare and disable).
3. Move the exception to the fallback functions.

This would

1. Allow the existing API.
2. Fail fast for people who don't do an explicit check
3. Allow for no provider detection (my usecase)

const modal = useModal();
if (modal === FallbackModal) {
  // disable
} else { 
  const { showModal } = modal;
  // showmaol
}

Originally posted by @michaeltford in #84 (comment)

Is there a way to disable closing when clicking outside the modal?

I upgraded mui-modal-provider from 1.3.2 to latest version
If you run the following code, you can see it works well on version 1.3.2 but we have error on latest version

If you clock on Simple dialog twice you can see

Cannot read property 'props' of undefined

import React from "react";
import ModalProvider, { useModal } from "mui-modal-provider";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import Button from "@material-ui/core/Button";

// ✔️ create the dialog you want to use
const SimpleDialog = ({ title, ...props }) => (
  <Dialog {...props}>
    <DialogTitle>{title}</DialogTitle>
  </Dialog>
);

const Test = ({ onClick, title = "Simple dialog" }) => {
  const { showModal, hideModal } = useModal();

  return (
    <Button
      variant="contained"
      onClick={() => {
        if (onClick) {
          onClick(hideModal);
        }
        showModal(SimpleDialog, { title });
      }}
      color="primary"
    >
      simple dialog
    </Button>
  );
};

const App = () => {
  const title = <Test onClick={(hideModal) => hideModal()} />;

  return (
    <ModalProvider>
      <Test title={title} />
    </ModalProvider>
  );
};

export default App;