Add mui v5 dialog helper #65

Author: supnate

src/index.test.js

@@ -11,6 +11,7 @@ import NiceModal, {
   antdModal,
   antdModalV5,
   muiDialog,
+  muiDialogV5,
   bootstrapDialog,
   reducer,
 } from './index';
@@ -179,12 +180,12 @@ test('useModal by id of declared modal via ModalDef', async () => {
     modal = useModal('mytestmodal2');
     return (
       <Provider>
-        <ModalDef  id="mytestmodal2" component={HocTestModal} />
+        <ModalDef id="mytestmodal2" component={HocTestModal} />
       </Provider>
     );
   };
   render(<App />);
-  await testUseModal(modal, { name: 'bood'});
+  await testUseModal(modal, { name: 'bood' });
 });
 
 test('useModal by component directly', async () => {
@@ -427,6 +428,17 @@ test('test mui dialog helper', async () => {
   await testHelper(MuiDialog, muiDialog, 'MuiDialogTest');
 });
 
+test('test mui v5 dialog helper', async () => {
+  const MuiDialog = ({ open, onClose, TransitionProps: { onExited }, children }) => {
+    return (
+      <TestModal visible={open} onClose={onClose} onExited={onExited}>
+        {children}
+      </TestModal>
+    );
+  };
+  await testHelper(MuiDialog, muiDialogV5, 'MuiDialogTest');
+});
+
 test('test bootstrap dialog helper', async () => {
   const BootstrapDialog = ({ show, onHide, onExited, children }) => {
     return (

src/index.tsx

@@ -209,11 +209,12 @@ const getModalId = (modal: string | React.FC<any>): string => {
 
 /** omit id and partial all required props */
 type NiceModalArgs<T> = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-  ? Partial<Omit<React.ComponentProps<T>, 'id'>>
+  ? Omit<React.ComponentProps<T>, 'id'>
   : Record<string, unknown>;
 export function show<T extends any>(modal: React.FC<any>, args?: NiceModalArgs<React.FC<any>>): Promise<T>;
 // export function show<T extends any, C extends React.FC>(modal: C, args?: Omit<React.ComponentProps<C>, 'id'>): Promise<T>;
 export function show<T extends any>(modal: string, args?: Record<string, unknown>): Promise<T>;
+export function show<T extends any, P extends any>(modal: string, args: P): Promise<T>;
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function show(modal: React.FC<any> | string, args?: NiceModalArgs<React.FC<any>> | Record<string, unknown>) {
   const modalId = getModalId(modal);
@@ -275,11 +276,24 @@ const setFlags = (modalId: string, flags: Record<string, unknown>): void => {
   dispatch(setModalFlags(modalId, flags));
 };
 export function useModal(): NiceModalHandler;
-export function useModal<T extends string>(modal: T, args?: Record<string, unknown>): NiceModalHandler;
-export function useModal<T extends React.FC<any>>(
+export function useModal(modal: string, args?: Record<string, unknown>): NiceModalHandler;
+export function useModal<
+  T extends React.FC<any>,
+  ComponentProps extends NiceModalArgs<T>,
+  PreparedProps extends Partial<ComponentProps> = {},
+  RemainingProps = Omit<ComponentProps, keyof PreparedProps> & Partial<ComponentProps>,
+>(
   modal: T,
-  args?: NiceModalArgs<T>,
-): NiceModalHandler<NiceModalArgs<T>>;
+  args?: PreparedProps,
+): Omit<NiceModalHandler, 'show'> & {
+  show: {
+    [K in keyof RemainingProps]: RemainingProps[K] extends Exclude<RemainingProps[keyof RemainingProps], undefined>
+      ? K
+      : never;
+  }[keyof RemainingProps] extends undefined
+    ? (args?: RemainingProps) => Promise<unknown>
+    : (args: RemainingProps) => Promise<unknown>;
+};
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useModal(modal?: any, args?: any): any {
   const modals = useContext(NiceModalContext);
@@ -389,7 +403,7 @@ export const create = <P extends {}>(Comp: React.ComponentType<P>): React.FC<P &
 };
 
 // All registered modals will be rendered in modal placeholder
-export const register = <T extends React.FC<any>>(id: string, comp: T, props?: NiceModalArgs<T>): void => {
+export const register = <T extends React.FC<any>>(id: string, comp: T, props?: Partial<NiceModalArgs<T>>): void => {
   if (!MODAL_REGISTRY[id]) {
     MODAL_REGISTRY[id] = { comp, props };
   } else {
@@ -505,7 +519,7 @@ export const antdModal = (
 export const antdModalV5 = (
   modal: NiceModalHandler,
 ): { open: boolean; onCancel: () => void; onOk: () => void; afterClose: () => void } => {
-  const {onOk, onCancel, afterClose} = antdModal(modal)
+  const { onOk, onCancel, afterClose } = antdModal(modal);
   return {
     open: modal.visible,
     onOk,
@@ -530,7 +544,7 @@ export const antdDrawer = (
 export const antdDrawerV5 = (
   modal: NiceModalHandler,
 ): { open: boolean; onClose: () => void; afterOpenChange: (visible: boolean) => void } => {
-  const {onClose, afterVisibleChange: afterOpenChange} = antdDrawer(modal)
+  const { onClose, afterVisibleChange: afterOpenChange } = antdDrawer(modal);
   return {
     open: modal.visible,
     onClose,
@@ -547,6 +561,21 @@ export const muiDialog = (modal: NiceModalHandler): { open: boolean; onClose: ()
     },
   };
 };
+
+export const muiDialogV5 = (
+  modal: NiceModalHandler,
+): { open: boolean; onClose: () => void; TransitionProps: { onExited: () => void } } => {
+  return {
+    open: modal.visible,
+    onClose: () => modal.hide(),
+    TransitionProps: {
+      onExited: () => {
+        modal.resolveHide();
+        !modal.keepMounted && modal.remove();
+      },
+    },
+  };
+};
 export const bootstrapDialog = (
   modal: NiceModalHandler,
 ): { show: boolean; onHide: () => void; onExited: () => void } => {