feat(modal): use signals instead of exposing functions

Author: Gregor Woiwode

apps/website/src/routes/docs/headless/(components)/modal/examples.tsx

@@ -1,16 +1,16 @@
 import { component$, Signal, Slot, useSignal } from '@builder.io/qwik';
 import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
-import { Modal, ModalApi, ModalContent, ModalHeader } from '@qwik-ui/headless';
+import { Modal, ModalContent, ModalHeader } from '@qwik-ui/headless';
 
 export const Example01 = component$(() => {
- const modalApi: Signal<ModalApi | undefined> = useSignal();
+ const openSig: Signal = useSignal(false);
 
  return (
  <PreviewCodeExample>
  <div q:slot="actualComponent">
- <button onClick$={() => modalApi.value?.open$()}>Open Modal</button>
+ <button onClick$={() => (openSig.value = true)}>Open Modal</button>
 
- <Modal api={modalApi}>
+ <Modal open={openSig}>
  <ModalHeader>
  <h2>Hi 👋🏻</h2>
  </ModalHeader>

packages/kit-headless/src/components/modal/modal.spec.tsx

@@ -1,7 +1,6 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import { mount } from 'cypress-ct-qwik';
 import { Modal } from './modal';
-import { ModalApi } from './types';
 import { ModalHeader } from './modal-header';
 import { ModalContent } from './modal-content';
 import { ModalFooter } from './modal-footer';
@@ -11,20 +10,20 @@ import { ModalFooter } from './modal-footer';
  * Reference: https://en.wikipedia.org/wiki/System_under_test
  */
 const Sut = component$(() => {
- const modalApi = useSignal<ModalApi>();
+ const openSig = useSignal(false);
  return (
  <>
- <button onClick$={() => modalApi.value?.open$()}>Open Dialog</button>
+ <button onClick$={() => (openSig.value = true)}>Open Dialog</button>
 
- <Modal api={modalApi}>
+ <Modal open={openSig}>
  <ModalHeader>
  <h2>Hello 👋</h2>
  </ModalHeader>
  <ModalContent>I am a simple Modal</ModalContent>
  <ModalFooter>
  <button
  data-test="dialog-close-button"
- onClick$={() => modalApi.value?.close$()}
+ onClick$={() => (openSig.value = false)}
  >
  Close Dialog
  </button>

packages/kit-headless/src/components/modal/modal.tsx

@@ -1,6 +1,7 @@
 import {
  $,
  component$,
+ QRL,
  QwikIntrinsicElements,
  QwikMouseEvent,
  Signal,
@@ -10,7 +11,6 @@ import {
  useTask$
 } from '@builder.io/qwik';
 import styles from './modal-root.css?inline';
-import { ModalApi } from './types';
 import { isServer } from '@builder.io/qwik/build';
 
 /**
@@ -23,89 +23,64 @@ import { isServer } from '@builder.io/qwik/build';
  * [ ] Think about more tests
  */
 
-export type ModalProps = QwikIntrinsicElements['dialog'] & {
- fullScreen?: boolean;
- api?: Signal<ModalApi | undefined>;
+export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
+ open: Signal<boolean>;
+
+ fullScreen?: Signal<boolean>;
+
+ onOpen$?: QRL<() => void>;
+ onClose$?: QRL<() => void>;
 };
 
 export const Modal = component$((props: ModalProps) => {
  useStylesScoped$(styles);
 
  /** Contains reference to the rendered HTMLDialogElement. */
- const dialogElementSig = useSignal<HTMLDialogElement>();
+ const refSig = useSignal<HTMLDialogElement>();
 
  /** Indicates whether the modal is open. */
- const isOpenSig = useSignal(false);
-
- const open$ = $(() => {
- const dialog = dialogElementSig.value;
+ const openSig = props.open;
 
- if (!dialog) return;
+ const closeOnBackdropClick$ = $(
+ (event: QwikMouseEvent<HTMLDialogElement, MouseEvent>) => {
+ if (hasDialogBackdropBeenClicked(event)) {
+ openSig.value = false;
+ }
+ }
+ );
 
-  dialog.showModal();
-  isOpenSig.value = true;
- });
+ /** Open or close Modal depending on its state. */
+ useTask$(async ({ track }) => {
+  const isOpen = track(() => openSig.value);
 
- const close$ = $(() => {
- const dialog = dialogElementSig.value;
+ const dialog = refSig.value;
 
  if (!dialog) return;
 
- dialog.close();
- isOpenSig.value = false;
- });
-
- const closeOnBackdropClick$ = $(
- (event: QwikMouseEvent<HTMLDialogElement, MouseEvent>) =>
- hasDialogBackdropBeenClicked(event) ? close$() : Promise.resolve()
- );
-
- /**
- *
- * Share the public API of the Modal if the modal-caller is interested.
- *
- */
- useTask$(() => {
- if (!props.api) return;
-
- props.api.value = { isOpen: isOpenSig, open$, close$ };
+ if (isOpen) {
+ dialog.showModal();
+ await props.onOpen$?.();
+ } else {
+ await props.onClose$?.();
+ dialog.close();
+ }
  });
 
- /**
- *
- * Lock Scrolling on page when Modal is opened.
- *
- */
+ /** Lock Scrolling on page when Modal is opened. */
  useTask$(({ track }) => {
  if (isServer) return;
 
- const isOpened = track(() => isOpenSig.value);
+ const isOpened = track(() => openSig.value);
 
  window.document.body.style.overflow = isOpened ? 'hidden' : '';
  });
 
- /**
- *
- * When modal is closed by pressing the Escape-Key,
- * we set the opened state to false.
- *
- */
- useTask$(() => {
- if (isServer) return;
-
- const dialog = dialogElementSig.value;
-
- if (!dialog) return;
-
- dialog.addEventListener('close', () => (isOpenSig.value = false));
- });
-
  return (
  <dialog
- {...props}
  class={`${props.class} ${props.fullScreen ? 'full-screen' : ''}`}
- ref={dialogElementSig}
+ ref={refSig}
  onClick$={closeOnBackdropClick$}
+ onClose$={() => (openSig.value = false)}
  >
  <Slot />
  </dialog>