@pinnacle0/react-stack-router - npm Package Compare versions

Comparing version 0.1.3-beta.26 to 0.1.3-beta.27

dist/component/Animated/createAnimatedComponent.js

 import React from "react";
+import classNames from "classnames";
 export function createAnimatedComponent(element) {
-    function Animated(props) {
-        const { children, ref, enter, exit, onEntered, onEntering, onExited, onExiting, __removed, __onExited, ...restProps } = props;
+    const Animated = React.forwardRef(function (props, ref) {
+        const { children, enter, exit, onEntered, onEntering, onExited, onExiting, className, __removed, __onExited, ...restProps } = props;
         const exited = () => {
@@ -26,7 +27,7 @@ __onExited?.();
             const animation = element.animate(keyframe.frames, keyframe.options);
-            if (onEntered)
-                animation.onfinish = onEntered;
+            animation.onfinish = () => {
+                onEntered?.();
+            };
             return () => {
                 animation.onfinish = null;
-                animation.cancel();
             };
@@ -46,4 +47,3 @@ }, []);
             const animation = element.animate(keyframe.frames, keyframe.options);
-            if (exited)
-                animation.onfinish = exited;
+            animation.onfinish = exited;
             return () => {
@@ -54,5 +54,6 @@ animation.cancel();
         }, [__removed]);
-        return React.createElement(element, { ...restProps, ref: compositeRef }, children);
-    }
-    Animated.$isAnimatedComponent = true;
+        return React.createElement(element, { ...restProps, ref: compositeRef, className: classNames(className, { removing: __removed }) }, children);
+    });
+    Object.defineProperty(Animated, "$isAnimatedComponent", { value: true, enumerable: false, writable: false });
+    Object.defineProperty(Animated, "displayName", { value: `Animated.${element}`, enumerable: false, writable: false });
     return Animated;
@@ -59,0 +60,0 @@ }

dist/component/Stack/index.js

@@ -9,2 +9,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const [screens, setScreens] = useState([]);
+    const [exiting, setExiting] = useState(0);
     useEffect(() => router.subscribe(_ => setScreens([..._])), [router]);
@@ -20,7 +21,13 @@ useLayoutEffect(() => {
     }, [screens]);
-    return (_jsx("div", { className: classNames("g-stack-router", className), style: style, children: _jsx(AnimatePresence, { children: screens.map((screen, index) => {
+    return (_jsx("div", { className: classNames("g-stack-router", { exiting: exiting !== 0 }, className), style: style, children: _jsx(AnimatePresence, { children: screens.map((screen, index) => {
                 const context = { location: screen.history.location, lifecycle: screen.lifecycle, params: screen.history.params };
-                return (_jsx(Animated.div, { className: classNames("g-stack-router-screen", { overlay: index > 0 }), enter: () => screen.transition.enteringKeyframes, exit: () => screen.transition.exitingKeyframes, onEntering: () => screen.lifecycle.trigger("willEnter"), onEntered: () => screen.lifecycle.trigger("didEnter"), onExiting: () => screen.lifecycle.trigger("willExit"), onExited: () => screen.lifecycle.trigger("didExit"), children: _jsx(RouteContext.Provider, { value: context, children: _jsx(screen.content, {}) }) }, screen.history.location.state.$key));
+                return (_jsx(Animated.div, { className: classNames("g-stack-router-screen", { overlay: index > 0 }), enter: () => screen.transition.enteringKeyframes, exit: () => screen.transition.exitingKeyframes, onEntering: () => screen.lifecycle.trigger("willEnter"), onEntered: () => screen.lifecycle.trigger("didEnter"), onExiting: () => {
+                        setExiting(_ => _ + 1);
+                        screen.lifecycle.trigger("willExit");
+                    }, onExited: () => {
+                        setExiting(_ => _ - 1);
+                        screen.lifecycle.trigger("didExit");
+                    }, children: _jsx(RouteContext.Provider, { value: context, children: _jsx(screen.content, {}) }) }, screen.history.location.state.$key));
             }) }) }));
 }
 //# sourceMappingURL=index.js.map

dist/hook.d.ts

@@ -14,3 +14,3 @@ import { RouterContext } from "./context";
 export declare const useHash: () => readonly [string, (hash: string) => void];
-export declare const useSearchParams: <T extends Record<string, string>>() => readonly [T, (params: T) => void];
+export declare const useSearchParams: <T extends Record<string, string>>() => readonly [T, (params: T | ((current: T) => T)) => void];
 export type LocationMatchCallback = (location: Location) => void;
@@ -17,0 +17,0 @@ export declare const useLocationMatch: (callback: LocationMatchCallback) => void;

dist/hook.js

@@ -33,3 +33,3 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
     const searchParams = useMemo(() => Object.fromEntries(new URLSearchParams(search)), [search]);
-    const setSearchParams = useCallback((params) => replaceSearchParams(params), [replaceSearchParams]);
+    const setSearchParams = useCallback((params) => replaceSearchParams(typeof params === "function" ? params(searchParams) : params), [searchParams, replaceSearchParams]);
     return [searchParams, setSearchParams];
@@ -36,0 +36,0 @@ };

dist/screen/transition.js

@@ -16,4 +16,4 @@ export class Transition {
                 return {
-                    frames: [{ transform: `translate3d(100%,0px,0px)` }, { transform: `translate3d(0px,0px,0px)` }],
-                    options: { duration: this.duration, easing: "cubic-bezier(.05,.74,.3,1.01)", fill: "forwards" },
+                    frames: [{ transform: `translate3d(100%,0px,0px)` }, { transform: "none" }],
+                    options: { duration: this.duration, easing: "cubic-bezier(.05,.74,.3,1.01)" },
                 };
@@ -20,0 +20,0 @@ case "exiting":

package.json

 {
   "name": "@pinnacle0/react-stack-router",
-  "version": "0.1.3-beta.26",
+  "version": "0.1.3-beta.27",
   "author": "Pinnacle",
@@ -5,0 +5,0 @@ "license": "MIT",

src/hook.ts

@@ -47,4 +47,3 @@ import {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef} from "react";
     const searchParams = useMemo(() => Object.fromEntries(new URLSearchParams(search)), [search]) as T;
-    const setSearchParams = useCallback((params: T) => replaceSearchParams(params), [replaceSearchParams]);
-
+    const setSearchParams = useCallback((params: T | ((current: T) => T)) => replaceSearchParams(typeof params === "function" ? params(searchParams) : params), [searchParams, replaceSearchParams]);
     return [searchParams, setSearchParams] as const;
@@ -51,0 +50,0 @@ };

src/screen/transition.ts

@@ -20,4 +20,4 @@ import type {AnimationKeyframe} from "../component/Animated";
                 return {
-                    frames: [{transform: `translate3d(100%,0px,0px)`}, {transform: `translate3d(0px,0px,0px)`}],
-                    options: {duration: this.duration, easing: "cubic-bezier(.05,.74,.3,1.01)", fill: "forwards"},
+                    frames: [{transform: `translate3d(100%,0px,0px)`}, {transform: "none"}],
+                    options: {duration: this.duration, easing: "cubic-bezier(.05,.74,.3,1.01)"},
                 };
@@ -24,0 +24,0 @@ case "exiting":

No alert changes

Improved metrics

Total package byte prevSize

152015

increased by1.74%

Lines of code

2406

increased by0.75%

No dependency changes