from-animate.tsx

import {
  onMount,
  onUpdate,
  useStore,
  useRef,
  useMetadata,
} from "@builder.io/mitosis";
import { animateLayout } from "./animate-layout.helper";
import type { AnimateLayoutProps } from "./animate-layout.types";

useMetadata({
  rsc: {
    componentType: "client",
  },
});

export default function AnimateLayout(props: AnimateLayoutProps) {
  let parentRef = useRef<HTMLDivElement>(null);

  const state = useStore({
    isShown: false,
    hide(el) {
      // state.isShown = 1;
      // this ^ won't work, `state` is a reserved keyword and a component can only have 1 state variable bound to the useStore hook
      el.style.display = "none";
    },
  });

  onMount(() => {
    if (parentRef) {
      animateLayout(parentRef);
    }
  });

  onUnmount(() => {
    if (parentRef) {
      state.isShown = false;
      state.hide(parentRef);
    }
  });

  onUpdate(() => {
    if (parentRef) {
      state.isShown = true;
      animateLayout(parentRef);
    }
  }, [parentRef, props.children]);

  return (
    <div
      ref={parentRef}
      className={props.className}
      style={{
        display: state.isShown ? "block" : "none",
        backfaceVisibility: "hidden",
      }}
    >
      {props.children}
    </div>
  );
}