north korean supermarket Posts

north korean supermarket

•Created by north korean supermarket on 9/4/2023 in #support

How to write an effect that depends on a store property?

I would like to scroll to the bottom of the list every time a list changes. My list is a property of a store. I would like to write something like

  createEffect(
    on([props.list], () => {
      scrollIntoView();
    })
  );

  createEffect(
    on([props.list], () => {
      scrollIntoView();
    })
  );

but on only accepts type Accessor. Is there another way to do this?

12 replies

SSolidJS

•Created by north korean supermarket on 6/14/2023 in #support

onClick event not appearing in DOM

Hi I have my Popup component as child to my Modal component. I would like to set an onClick event on my Popup component to stop propagation of the click event up to the Modal component. However, the click event does not appear in the DOM at all. I have no clue how to debug this. Does anybody know what is going on? My Popup component:

export function Popup({
  className,
  title,
  subheader,
  fields,
  footerContent,
  close,
  isMobile,
  ...props
}: PopupProps) {
  const baseClass = [styles.main, "hi"];
  if (className) baseClass.push(className);

  const c = children(() => props.children);

  return (
    <div class={baseClass.join(" ")} onClick={(e) => e.stopPropagation()}> // this click event does not show up in the dom
      <header>
        <h3>{title}</h3>
        <Show when={subheader}>
          <div class="subheader">
            <span>{subheader}</span>
          </div>
        </Show>
        <IconBtn icon={<CloseSvg />} onClick={close} className="close-btn" />
      </header>
      <Show when={fields}>
        <Form fields={fields} close={close} {...props} />
      </Show>
      <Show when={props.children}>
        <>
          <div class="content">{c()}</div>
          {footerContent && <footer>{footerContent}</footer>}
        </>
      </Show>
    </div>
  );
}

export function Popup({
  className,
  title,
  subheader,
  fields,
  footerContent,
  close,
  isMobile,
  ...props
}: PopupProps) {
  const baseClass = [styles.main, "hi"];
  if (className) baseClass.push(className);

  const c = children(() => props.children);

  return (
    <div class={baseClass.join(" ")} onClick={(e) => e.stopPropagation()}> // this click event does not show up in the dom
      <header>
        <h3>{title}</h3>
        <Show when={subheader}>
          <div class="subheader">
            <span>{subheader}</span>
          </div>
        </Show>
        <IconBtn icon={<CloseSvg />} onClick={close} className="close-btn" />
      </header>
      <Show when={fields}>
        <Form fields={fields} close={close} {...props} />
      </Show>
      <Show when={props.children}>
        <>
          <div class="content">{c()}</div>
          {footerContent && <footer>{footerContent}</footer>}
        </>
      </Show>
    </div>
  );
}

My Modal component:

export function Modal(props: ModalProps) {
  createEffect(function addCloseEventToModal() {
    const modal = document.getElementById("modal") as HTMLDialogElement;
    modal.onclick = () => {
      props.close();
      modal.close();
    };
  });
  const c = children(() => props.children);
  return (
    <Portal mount={document.querySelector("#modal") as Element}>{c()}</Portal>
  );
}

export function Modal(props: ModalProps) {
  createEffect(function addCloseEventToModal() {
    const modal = document.getElementById("modal") as HTMLDialogElement;
    modal.onclick = () => {
      props.close();
      modal.close();
    };
  });
  const c = children(() => props.children);
  return (
    <Portal mount={document.querySelector("#modal") as Element}>{c()}</Portal>
  );
}

6 replies

Gaming

Programming