@xwadex/fesd-next 0.3.4-7.3 → 0.3.4-7.5

package/dist/components/TestComponent.js

@@ -1,10 +1,10 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useCookies } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnchors } from "../hooks/index.js";
+import { cn } from "../utils";
 const TestComponent = () => {
-    const cookie = useCookies();
-    console.log(cookie);
-    return (_jsx(_Fragment, { children: "TestComponent content" }));
+    const { registerAnchors, registerContainers, scrollToAnchor } = useAnchors();
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col gap-3 fixed top-0 right-0", children: [_jsx("button", { onClick: () => scrollToAnchor({ anchor: "#", }), children: "Scoll to Top" }), _jsx("button", { onClick: () => scrollToAnchor({ anchor: "50", }), children: "Scoll to 50" }), _jsx("button", { onClick: () => scrollToAnchor({ anchor: "100", }), children: "Scoll to 100" })] }), _jsx("h2", { className: "text-xl", children: "TestComponent content" }), _jsx("div", { className: cn("flex flex-col gap-5"), children: Array.from({ length: 200 }).map((_, index) => _jsx("div", { className: cn("p-3", "bg-indigo-600"), ...registerAnchors(String(index)), children: index }, index)) })] }));
 };
 TestComponent.displayName = "TestComponent";
 export default TestComponent;

package/dist/hooks/index.d.ts

@@ -7,3 +7,5 @@ export * from "./useMounted";
 export * from "./useEffectOne";
 export * from "./useEffectLeave";
 export * from "./useAnchors";
+export * from "./useIsMobile";
+export * from "./useHash";

package/dist/hooks/index.js

@@ -7,3 +7,5 @@ export * from "./useMounted";
 export * from "./useEffectOne";
 export * from "./useEffectLeave";
 export * from "./useAnchors";
+export * from "./useIsMobile";
+export * from "./useHash";

package/dist/hooks/useAnchors.d.ts

@@ -1,41 +1,60 @@
 import { Easing } from "motion/react";
 export interface PropsTypes {
 }
-export interface AnchorActionsOptions {
-    anchor?: string;
-    container: string;
-    offseters?: string | string[];
-    direction?: "horizontal" | "vertical";
+export interface AnimationOptions {
     duration?: number;
-    offset?: number;
     delay?: number;
     ease?: Easing | Easing[] | undefined;
     onScroll?: () => void;
     onScrolling?: (value: number) => void;
     onScrolled?: () => void;
 }
+export interface AnchorActionsOptions extends AnimationOptions {
+    anchor: string;
+    container?: string;
+    offseters?: string | string[];
+    direction?: "x" | "y" | "xy";
+    align?: "start" | "center" | "end";
+    offset?: number;
+}
+export interface ScrollAnimationsOptions extends AnimationOptions {
+    containerDom: HTMLElement | Window;
+    scrollValue: {
+        x: number;
+        y: number;
+    };
+    containerScrollValue: {
+        left: number;
+        top: number;
+    };
+    direction?: AnchorActionsOptions["direction"];
+}
 export declare function useAnchors(): {
     registerAnchors: typeof registerAnchors;
     registerContainers: typeof registerContainers;
     registerOffseters: typeof registerOffseters;
+    setStores: (options: SetAnchorStoreOptions) => void;
     getStores: () => AnchorsStores;
-    removeAnchor: (name: string) => void;
-    removeOffseter: (name: string) => void;
-    removeContainer: (name: string) => void;
-    scrollToAnchor: ({ anchor: anchorName, container: containerName, ...anchorOptions }: AnchorActionsOptions) => void;
+    scrollToAnchor: (anchorOptions: AnchorActionsOptions) => void;
 };
+export interface RegistrationProps {
+    name: string;
+    key: keyof AnchorsStores;
+    node: HTMLDivElement | null;
+}
+export declare function registration({ name, key, node }: RegistrationProps): void;
 export declare function registerAnchors(name: string): {
     ref: (node: HTMLDivElement | null) => void;
     "data-anchor": string;
 };
-export declare function registerOffseters(name: string): {
-    ref: (node: HTMLDivElement | null) => void;
-    "data-anchor-offseter": string;
-};
 export declare function registerContainers(name: string): {
     ref: (node: HTMLDivElement | null) => void;
     "data-anchor-container": string;
 };
+export declare function registerOffseters(name: string): {
+    ref: (node: HTMLDivElement | null) => void;
+    "data-anchor-offseter": string;
+};
 export type AnchorsStores = {
     anchors: Map<string, HTMLElement | null>;
     containers: Map<string, HTMLElement | null>;
@@ -43,9 +62,10 @@ export type AnchorsStores = {
 };
 export declare const useAnchorsStores: import("zustand").UseBoundStore<import("zustand").StoreApi<AnchorsStores>>;
 export declare const getAnchorsStores: () => AnchorsStores;
-export declare const addAnchor: (name: string, anchorNode: HTMLElement | null) => void;
-export declare const removeAnchor: (name: string) => void;
-export declare const addContainer: (name: string, containerNode: HTMLElement | null) => void;
-export declare const removeContainer: (name: string) => void;
-export declare const addOffseter: (name: string, containerNode: HTMLElement | null) => void;
-export declare const removeOffseter: (name: string) => void;
+export interface SetAnchorStoreOptions {
+    key: keyof AnchorsStores;
+    action: "add" | "remove";
+    name: string;
+    node?: HTMLElement | null;
+}
+export declare const setAnchorStore: (options: SetAnchorStoreOptions) => void;

package/dist/hooks/useAnchors.js

@@ -1,122 +1,165 @@
 "use client";
-// update: 2025.10.29
-// version: 0.0.1
+// update: 2025.10.30
+// version: 0.0.1.bate
 // dev: wade
 import { useCallback, useMemo, useRef } from "react";
 import { animate, useMotionValue } from "motion/react";
 import { create } from "zustand";
 export function useAnchors() {
     const motionValue = useMotionValue(0);
-    const controlsRef = useRef(null);
-    const scrollToAnchor = useCallback(({ anchor: anchorName, container: containerName, ...anchorOptions }) => {
-        const { offseters, direction = "vertical", onScroll, onScrolling, onScrolled, ...options } = anchorOptions;
-        if (!anchorName || !containerName)
-            return;
-        const stores = getAnchorsStores();
-        if (!stores?.anchors || !stores?.containers)
-            return;
-        const anchorDom = stores.anchors.get(anchorName);
-        const containerDom = stores.containers.get(containerName);
-        if (!anchorDom || !containerDom)
-            return;
-        const { top: targetTop } = anchorDom.getBoundingClientRect();
-        const { top: containerTop } = containerDom.getBoundingClientRect();
-        const containerScrollTop = Math.round(containerDom.scrollTop);
-        const scrollOffset = Math.round(targetTop - containerTop + containerScrollTop);
-        if (scrollOffset == containerScrollTop)
-            return;
-        if (controlsRef.current)
-            controlsRef.current?.stop();
-        // console.log("scrollOffset", scrollOffset);
-        // console.log("containerScrollTop", containerScrollTop);
-        // console.log(scrollOffset == containerScrollTop);
-        motionValue.set(containerScrollTop);
-        controlsRef.current = animate(motionValue, scrollOffset, {
+    const animateRef = useRef(null);
+    const scrollAnimations = useCallback(({ containerDom, scrollValue, containerScrollValue, direction = "y", duration = 0.5, delay = 0, ease = [0.215, 0.61, 0.355, 1.0], onScroll, onScrolled, onScrolling }) => {
+        const { left: scrollLeft, top: scrollTop } = containerScrollValue;
+        const { x: scrollX, y: scrollY } = scrollValue;
+        const isScrollX = direction === "x";
+        const isScrollY = direction === "y";
+        const isBoth = direction === "xy";
+        const animationsOptions = {
+            duration,
+            ease,
+            delay,
             onPlay: onScroll,
+            onUpdate: onUpdate,
             onComplete: onScrolled,
-            onUpdate: (value) => {
-                containerDom.scrollTop = value;
-                onScrolling?.(value);
-            },
-            ...options,
-        });
-    }, [motionValue]);
+        };
+        if ((isBoth || isScrollX) && (scrollX !== scrollLeft)) {
+            motionValue.set(scrollLeft);
+            animateRef.current = animate(motionValue, scrollX, animationsOptions);
+            return;
+        }
+        if ((isBoth || isScrollY) && (scrollY !== scrollTop)) {
+            motionValue.set(scrollTop);
+            animateRef.current = animate(motionValue, scrollY, animationsOptions);
+            return;
+        }
+        function onUpdate(value) {
+            if (isScrollX)
+                containerDom.scrollTo({ left: value });
+            if (isScrollY)
+                containerDom.scrollTo({ top: value });
+            if (isBoth)
+                containerDom.scrollTo({ top: value, left: value });
+            onScrolling?.(value);
+        }
+    }, []);
+    const scrollToAnchor = useCallback((anchorOptions) => {
+        if (animateRef.current)
+            animateRef.current?.stop();
+        const { anchor: anchorName, container: containerName, offseters, align, offset = 0, ...options } = anchorOptions;
+        const isContainer = containerName && containerName !== "window";
+        const stores = getAnchorsStores();
+        const containerDom = isContainer
+            ? stores.containers.get(containerName)
+            : window;
+        const containerScrollValue = {
+            top: Math.round(isContainer
+                ? containerDom.scrollTop
+                : containerDom.pageYOffset),
+            left: Math.round(isContainer
+                ? containerDom.scrollLeft
+                : pageXOffset),
+        };
+        const offsetValue = Array.isArray(offseters)
+            ? offseters.reduce((init, offseter) => {
+                const dom = stores.offseters.get(offseter);
+                const width = (init.width ?? 0) + (dom ? dom.clientWidth : 0);
+                const height = (init.height ?? 0) + (dom ? dom.clientHeight : 0);
+                return { width, height };
+            }, {})
+            : { width: 0, height: 0 };
+        const scrollValue = {
+            x: 0 - offsetValue.width,
+            y: 0 - offsetValue.height
+        };
+        const AnimationsOptions = {
+            containerDom, containerScrollValue, scrollValue, ...options
+        };
+        if (anchorName !== "#") {
+            const anchorDom = stores.anchors.get(anchorName);
+            if (!anchorDom)
+                return;
+            const anchorRect = anchorDom.getBoundingClientRect();
+            const containerRect = {
+                left: (isContainer ? containerDom.getBoundingClientRect().left : 0),
+                top: (isContainer ? containerDom.getBoundingClientRect().top : 0)
+            };
+            const offsets = {
+                x: offsetValue.width - offset,
+                y: offsetValue.height - offset
+            };
+            AnimationsOptions.scrollValue = {
+                x: Math.round(anchorRect.left + containerScrollValue.left - offsets.x - containerRect.left),
+                y: Math.round(anchorRect.top + containerScrollValue.top - offsets.y - containerRect.top),
+            };
+        }
+        scrollAnimations(AnimationsOptions);
+    }, []);
     const returnsMemo = useMemo(() => ({
         registerAnchors,
         registerContainers,
         registerOffseters,
+        setStores: setAnchorStore,
         getStores: getAnchorsStores,
-        removeAnchor: removeAnchor,
-        removeOffseter: removeOffseter,
-        removeContainer: removeContainer,
         scrollToAnchor
     }), [scrollToAnchor]);
     return returnsMemo;
 }
-export function registerAnchors(name) {
-    const register = (node) => {
-        if (node)
-            addAnchor(name, node);
-        else
-            removeAnchor(name);
-    };
-    return {
-        ref: register,
-        "data-anchor": name
-    };
+export function registration({ name, key, node }) {
+    if (!node)
+        return;
+    if (name == "#") {
+        console.error(`Cannot register ${key} name '#'`);
+        return;
+    }
+    if (node instanceof Window || node.tagName === "BODY" || node.tagName === "HTML") {
+        console.error(`Cannot register ${key} 'body' or 'html' `);
+        return;
+    }
+    setAnchorStore({ key, name, node, action: node ? "add" : "remove" });
 }
-export function registerOffseters(name) {
-    const register = (node) => {
-        if (node)
-            addOffseter(name, node);
-        else
-            removeOffseter(name);
-    };
-    return {
-        ref: register,
-        "data-anchor-offseter": name
-    };
+const ANCHOR_ATTRIBUTE = "data-anchor";
+const CONTAINER_ATTRIBUTE = "data-anchor-container";
+const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
+export function registerAnchors(name) {
+    const register = (node) => registration({ key: "anchors", name, node });
+    return { ref: register, [ANCHOR_ATTRIBUTE]: name };
 }
 export function registerContainers(name) {
-    const register = (node) => {
-        if (node)
-            addContainer(name, node);
-        else
-            removeContainer(name);
-    };
-    return {
-        ref: register,
-        "data-anchor-container": name
-    };
+    const register = (node) => registration({ key: "containers", name, node });
+    return { ref: register, [CONTAINER_ATTRIBUTE]: name };
 }
-const anchorsStores = {
+export function registerOffseters(name) {
+    const register = (node) => registration({ key: "offseters", name, node });
+    return { ref: register, [OFFSETER_ATTRIBUTE]: name };
+}
+export const useAnchorsStores = create()(() => ({
     anchors: new Map(),
     containers: new Map(),
     offseters: new Map(),
-};
-export const useAnchorsStores = create()(() => anchorsStores);
+}));
 export const getAnchorsStores = () => useAnchorsStores.getState();
-export const addAnchor = (name, anchorNode) => useAnchorsStores.setState(stores => {
-    stores.anchors?.set(name, anchorNode);
-    return { anchors: stores.anchors };
-});
-export const removeAnchor = (name) => useAnchorsStores.setState(stores => {
-    stores.anchors?.delete(name);
-    return { anchors: stores.anchors };
-});
-export const addContainer = (name, containerNode) => useAnchorsStores.setState(stores => {
-    stores.containers?.set(name, containerNode);
-    return { containers: stores.containers };
-});
-export const removeContainer = (name) => useAnchorsStores.setState(stores => {
-    stores.containers?.delete(name);
-    return { containers: stores.containers };
-});
-export const addOffseter = (name, containerNode) => useAnchorsStores.setState(stores => {
-    stores.offseters?.set(name, containerNode);
-    return { offseters: stores.offseters };
-});
-export const removeOffseter = (name) => useAnchorsStores.setState(stores => {
-    stores.offseters?.delete(name);
-    return { offseters: stores.offseters };
+export const setAnchorStore = (options) => useAnchorsStores.setState(stores => {
+    const { key, action, name, node } = options;
+    switch (key) {
+        case "anchors":
+            if (action == "add" && node instanceof HTMLElement)
+                stores.anchors?.set(name, node);
+            if (action == "remove")
+                stores.anchors?.delete(name);
+            return { anchors: stores.anchors };
+        case "containers":
+            if (action == "add" && node instanceof HTMLElement)
+                stores.containers?.set(name, node);
+            if (action == "remove")
+                stores.containers?.delete(name);
+            return { containers: stores.containers };
+        case "offseters":
+            if (action == "add" && node instanceof HTMLElement)
+                stores.offseters?.set(name, node);
+            if (action == "remove")
+                stores.offseters?.delete(name);
+            return { offseters: stores.offseters };
+        default:
+            return stores;
+    }
 });

package/dist/hooks/useHash.d.ts

@@ -0,0 +1 @@
+export declare function useHash(): string;

package/dist/hooks/useHash.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useState } from "react";
+export function useHash() {
+    const [hash, setHash] = useState("");
+    const updateHash = () => setHash(window.location.hash);
+    const hashchangeEvent = (e) => {
+        e.preventDefault?.();
+        updateHash();
+    };
+    // 初始化
+    useEffect(() => {
+        updateHash();
+        window.addEventListener("hashchange", hashchangeEvent);
+        return () => {
+            window.removeEventListener("hashchange", hashchangeEvent);
+        };
+    }, []);
+    return hash;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.4-7.3",
+	"version": "0.3.4-7.5",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",