fix(modal): Fixed modal animations not always playing when closing modal

Author: spuxx-dev

packages/solid/src/modal/modal-portal.component.tsx

@@ -1,5 +1,6 @@
-import { Component, createEffect } from 'solid-js';
+import { Component, Show } from 'solid-js';
 import { Modal } from './modal.service';
+import { Dynamic } from 'solid-js/web';
 
 /**
  * Place this component anywhere in your application to make it the portal node for modals.
@@ -11,13 +12,9 @@ import { Modal } from './modal.service';
  * ```
  */
 export const ModalPortal: Component = () => {
-  let portal: HTMLDivElement | undefined;
-
-  createEffect(() => {
-    if (portal) {
-      Modal.setPortal(portal);
-    }
-  });
-
-  return <div ref={portal} class="spx-modal-portal" />;
+  return (
+    <Show when={Modal.state.component}>
+      <Dynamic component={Modal.state.component as Component} {...Modal.state.options} />
+    </Show>
+  );
 };

packages/solid/src/modal/modal.service.tsx

@@ -1,7 +1,12 @@
 import { ServiceMixin } from '@spuxx/js-utils';
-import { Component, ComponentProps } from 'solid-js';
 import { ModalComponent, ModalOptions } from './modal.types';
-import { render } from 'solid-js/web';
+import { createSignal } from 'solid-js';
+
+interface ModalState {
+  open: boolean;
+  component: ModalComponent<never> | null;
+  options?: ModalOptions;
+}
 
 /**
  * The `Modal` service provides global access to modal dialogs.
@@ -16,43 +21,38 @@ import { render } from 'solid-js/web';
  * ```
  */
 export class Modal extends ServiceMixin<Modal>() {
-  protected portal: Node | undefined;
-  protected dispose = () => {};
+  state = createSignal<ModalState>({ open: false, component: null });
 
   /**
    * Shows the modal dialog of the given type and with the given options.
    * @param key The key of the modal to open.
    * @param options The options to pass to the modal.
    */
   static show<TOptions extends ModalOptions>(modal: ModalComponent<TOptions>, options: TOptions) {
-    if (!this.portal) {
-      throw new Error(
-        'No modal portal node has been registered. Please register a portal node first.',
-      );
-    }
-    this.instance.dispose = render(() => modal(options), this.portal);
+    this.setState({ open: true, component: modal, options });
   }
 
   /**
    * Closes the modal dialog that is currently open, if there is one.
    */
-  static close() {
-    this.instance.dispose();
+  static async close() {
+    this.setState({ ...this.state, open: false });
   }
 
   /**
-   * Returns the portal node that is used to render the modal.
+   * Returns the current state of the modal. The state is read-only.
    */
-  static get portal(): Node | undefined {
-    return this.instance.portal;
+  static get state(): ModalState {
+    const [state] = this.instance.state;
+    return state();
   }
 
   /**
-   * Registers the given node as the portal node that is used to render the modal.
-   * Only one portal node can be registered at a time.
-   * @param node The node to register as the portal node.
+   * Sets the current state of the modal. You should avoid manipulating the modal state directly
+   * and instead use `Modal.show()` and `Modal.close()`.
    */
-  static setPortal(node: Node) {
-    this.instance.portal = node;
+  static setState(newState: ModalState): void {
+    const [_state, setModalState] = this.instance.state;
+    setModalState(newState);
   }
 }

packages/solid/src/modal/template/modal-template.component.tsx

@@ -27,22 +27,32 @@ interface Props extends ModalOptions, ParentProps {}
 export const ModalTemplate: Component<Props> = (options) => {
   const { size = 'auto', preventClose = false, onClose } = options;
 
-  const handleContentPresentChange = (value: boolean) => {
-    if (!value) Modal.close();
+  const handleOpenChange = (value: boolean) => {
+    if (value) return;
+    Modal.close();
     if (typeof onClose === 'function') onClose();
   };
 
+  const handleContentPresentChange = (value: boolean) => {
+    if (value) return;
+    Modal.setState({
+      open: false,
+      component: null,
+    });
+  };
+
   return (
     <Root
-      initialOpen={true}
+      open={Modal.state.open}
       modal={true}
       trapFocus={true}
       preventScroll={true}
       closeOnEscapeKeyDown={!preventClose}
       closeOnOutsidePointer={!preventClose}
+      onOpenChange={handleOpenChange}
       onContentPresentChange={handleContentPresentChange}
     >
-      <Portal mount={Modal.portal} forceMount={true}>
+      <Portal forceMount={true}>
         <Overlay class="spx-modal-overlay" />
         <Content class="spx-modal" data-size={size}>
           {options.children}