lilact 0.10.2 → 0.11.0

package/src/transition.jsx

@@ -37,9 +37,9 @@ const ENTERING =  "entering";
 const ENTERED =   "entered";
 const EXITING =   "exiting";
 
-import {setTimeout, clearTimeout} from "./timers.jsx"
-import {Children} from "./misc.jsx"
-import {useEffect} from "./hooks.jsx"
+import { setTimeout, clearTimeout} from "./timers.jsx"
+import { Children } from "./misc.jsx"
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "./hooks.jsx"
 
 /**
  * Transition component that manages enter/exit lifecycle and calls callbacks based on state changes.
@@ -200,7 +200,7 @@ export function Transition({
  */
 export function CSSTransition({
 	in: inProp,
-	timeout = defaultTransitionTimeout,
+	timeout = Lilact.defaultTransitionTimeout,
 	classNames = "fade",
 	mountOnEnter = false,
 	unmountOnExit = false,
@@ -244,6 +244,182 @@ export function CSSTransition({
 }
 
 
+
+/**
+ * Switches between keyed children with `CSSTransition`.
+ * Ensures each child key gets its own `CSSTransition` instance to avoid state loss.
+ *
+ * @param {object} props
+ * @param {Array} props.children
+ *   The set of children to switch between. Each child should have a stable `key`
+ *   (or your `key` will fall back to its index).
+ * @param {*} props.activeKey
+ *   The key of the currently active child.
+ * @param {"out-in" | "in-out"} [props.mode="out-in"]
+ *   Controls sequencing when `activeKey` changes:
+ *   - `"out-in"`: outgoing transitions out first, incoming transitions in after exit completes.
+ *   - `"in-out"`: incoming transitions in first, outgoing transitions out after the incoming finishes entering
+ *     (relies on `onEntered`).
+ * @param {number} [props.timeout=Lilact.defaultTransitionTimeout]
+ *   Transition timeout passed to each `CSSTransition`.
+ * @param {string} [props.classNames="switch"]
+ *   Base className(s) used by `CSSTransition` to apply enter/exit classes.
+ * @param {boolean} [props.mountOnEnter=false]
+ *   Whether to mount the transitioning child only when it begins entering.
+ * @param {boolean} [props.unmountOnExit=false]
+ *   Whether to unmount the child after it finishes exiting.
+ * @param {boolean} [props.appear=false]
+ *   Whether to run the initial transition on first mount.
+ *
+ * @param {(isAppearing: boolean) => void} [props.onExited]
+ *   Called when the outgoing child finishes exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEnter]
+ *   Called when a child begins entering.
+ * @param {(isAppearing: boolean) => void} [props.onExiting]
+ *   Called when a child begins exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEntered]
+ *   Called when a child finishes entering. Used to implement `"in-out"` sequencing.
+ *
+ * @param {object} [props.csstProps]
+ *   Any additional props are forwarded to each `CSSTransition` instance.
+ */
+
+
+export function SwitchTransition({
+  children,
+  activeKey,
+  mode = "out-in", // "out-in" | "in-out"
+
+  timeout = Lilact.defaultTransitionTimeout,
+  classNames = "switch",
+
+  mountOnEnter = false,
+  unmountOnExit = false,
+  appear = false,
+
+  // callbacks (optional)
+  onExited,
+  onEnter,
+  onExiting,
+  onEntered,
+
+  ...csstProps
+}) {
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+
+  // Outgoing key (the one that should exit) and phase flags
+  const [exitingKey, setExitingKey] = useState(null);
+  const [exitStarted, setExitStarted] = useState(false);
+
+  // Controls whether the incoming (activeKey) is currently "in"
+  const [enterAllowed, setEnterAllowed] = useState(true);
+
+  // Refs to avoid stale closures in callbacks
+  const prevKeyRef = useRef(activeKey);
+  const activeKeyRef = useRef(activeKey);
+  const exitingKeyRef = useRef(exitingKey);
+
+  useLayoutEffect(() => {
+    activeKeyRef.current = activeKey;
+  }, [activeKey]);
+
+  useLayoutEffect(() => {
+    exitingKeyRef.current = exitingKey;
+  }, [exitingKey]);
+
+  useLayoutEffect(() => {
+    const prevKey = prevKeyRef.current;
+    if (prevKey === activeKey) return;
+
+    prevKeyRef.current = activeKey;
+
+    // Start a new switch
+    setExitingKey(prevKey);
+
+    if (mode === "out-in") {
+      // Incoming blocked; outgoing should exit immediately.
+      setEnterAllowed(false);
+      setExitStarted(true); // outgoing in: true -> false => triggers exit
+    } else {
+      // Incoming allowed immediately; outgoing should exit only after incoming has entered.
+      setEnterAllowed(true);
+      setExitStarted(false); // outgoing stays in:true until we flip it later
+    }
+  }, [activeKey, mode]);
+
+  const handleExited = (key) => (node, isAppearing) => {
+    if (typeof onExited === "function") onExited(node, isAppearing);
+
+    if (key === exitingKeyRef.current) {
+      setExitingKey(null);
+
+      // out-in: once outgoing is fully exited, allow incoming to start
+      if (mode === "out-in") {
+        setExitStarted(false);
+        setEnterAllowed(true);
+      }
+      // in-out: incoming already entered; just clean up outgoing
+      if (mode === "in-out") {
+        setExitStarted(false);
+      }
+    }
+  };
+
+  const handleEntered = (key) => (node, isAppearing) => {
+    if (typeof onEntered === "function") onEntered(node, isAppearing);
+
+    if (mode === "in-out") {
+      // Only start outgoing exit when the CURRENT incoming (activeKey) finishes entering.
+      if (key === activeKeyRef.current && exitingKeyRef.current != null) {
+        setExitStarted(true); // outgoing in:true -> false => triggers exit
+      }
+    }
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      {childArray.map((child, index) => {
+        const key = child?.props?.key || index;
+
+        const isIncoming = key === activeKey;
+        const isOutgoing = key === exitingKey;
+
+        // Core rule:
+        // - Incoming: in = enterAllowed
+        // - Outgoing: in = !exitStarted
+        // - Others: in = false
+        const inProp = isIncoming
+          ? enterAllowed
+          : isOutgoing
+            ? !exitStarted
+            : false;
+
+        return (
+          <CSSTransition
+            key={key}
+            in={inProp}
+            timeout={timeout}
+            classNames={classNames}
+            mountOnEnter={mountOnEnter}
+            unmountOnExit={unmountOnExit}
+            appear={appear}
+            onEnter={onEnter}
+            onExiting={onExiting}
+            onEntered={handleEntered(key)}
+            onExited={handleExited(key)}
+            {...csstProps}
+          >
+            <div style={{ position: "absolute", inset: 0 }}>
+              {child}
+            </div>
+          </CSSTransition>
+        );
+      })}
+    </div>
+  );
+}
+
+
 /**
  * Lilact doesn't need TransitionGroup, so it is the same as a fragment.
  * In Lilact all the transitions and timeouts are automatically grouped.