@xwadex/fesd-next 0.3.4-7.8 → 0.3.4-8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/anchors/anchors.d.ts +0 -2
- package/dist/components/anchors/anchors.js +7 -10
- package/dist/components/embla-carousels/embla-carousels-hooks.d.ts +36 -0
- package/dist/components/embla-carousels/embla-carousels-hooks.js +83 -0
- package/dist/components/embla-carousels/embla-carousels.d.ts +23 -0
- package/dist/components/embla-carousels/embla-carousels.js +58 -0
- package/dist/components/embla-carousels/index.d.ts +2 -0
- package/dist/components/embla-carousels/index.js +2 -0
- package/dist/components/emblas/embla-container.d.ts +8 -0
- package/dist/components/emblas/embla-container.js +12 -0
- package/dist/components/emblas/embla-context.d.ts +21 -0
- package/dist/components/emblas/embla-context.js +12 -0
- package/dist/components/emblas/embla.d.ts +20 -0
- package/dist/components/emblas/embla.js +124 -0
- package/dist/components/emblas/emblas-pagination.d.ts +11 -0
- package/dist/components/emblas/emblas-pagination.js +89 -0
- package/dist/components/emblas/index.d.ts +4 -0
- package/dist/components/emblas/index.js +4 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +3 -0
- package/dist/components/scroll-containers/index.d.ts +3 -0
- package/dist/components/scroll-containers/index.js +3 -0
- package/dist/components/scroll-containers/lenis-scroll.d.ts +20 -0
- package/dist/components/scroll-containers/lenis-scroll.js +65 -0
- package/dist/components/scroll-containers/native-scroll.d.ts +6 -0
- package/dist/components/scroll-containers/native-scroll.js +23 -0
- package/dist/components/scroll-containers/scroll-containers.d.ts +25 -0
- package/dist/components/scroll-containers/scroll-containers.js +46 -0
- package/dist/components/tests/tests.js +0 -1
- package/dist/hooks/useAnchors.d.ts +28 -26
- package/dist/hooks/useAnchors.js +95 -65
- package/dist/hooks/useAsyncFetcher.js +0 -1
- package/dist/hooks/useCookies.js +24 -1
- package/dist/hooks/useDebounce.js +0 -1
- package/dist/hooks/useDebounceValue.js +0 -1
- package/dist/hooks/useDragResize.js +0 -1
- package/dist/hooks/useEffectLeave.js +0 -1
- package/dist/hooks/useEffectOne.js +0 -1
- package/dist/hooks/useHash.js +0 -1
- package/dist/hooks/useLocations.js +0 -1
- package/dist/hooks/useMounted.js +0 -1
- package/dist/shadcns/components/ui/alert.d.ts +1 -1
- package/dist/shadcns/components/ui/badge.d.ts +1 -1
- package/dist/shadcns/components/ui/button-group.d.ts +11 -0
- package/dist/shadcns/components/ui/button-group.js +26 -0
- package/dist/shadcns/components/ui/button.d.ts +1 -1
- package/dist/shadcns/components/ui/button.js +0 -1
- package/dist/shadcns/components/ui/field.d.ts +24 -0
- package/dist/shadcns/components/ui/field.js +75 -0
- package/dist/shadcns/components/ui/item.d.ts +23 -0
- package/dist/shadcns/components/ui/item.js +65 -0
- package/dist/shadcns/components/ui/native-select.d.ts +7 -0
- package/dist/shadcns/components/ui/native-select.js +13 -0
- package/dist/shadcns/components/ui/navigation-menu.d.ts +1 -1
- package/dist/shadcns/components/ui/navigation-menu.js +0 -1
- package/dist/shadcns/components/ui/sidebar.d.ts +1 -1
- package/dist/shadcns/components/ui/textarea.js +0 -1
- package/dist/shadcns/components/ui/toggle.d.ts +1 -1
- package/dist/shadcns/index.d.ts +1 -0
- package/dist/shadcns/index.js +1 -0
- package/package.json +6 -2
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// update: 2025.11.12
|
|
3
|
+
// version: 0.0.1.bate
|
|
4
|
+
// dev: wade
|
|
5
|
+
import { memo, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
|
|
6
|
+
import { ReactLenis, useLenis, } from "lenis/react";
|
|
7
|
+
import Lenis from 'lenis';
|
|
8
|
+
import { create } from "zustand";
|
|
9
|
+
import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
|
|
10
|
+
import { cn } from "../../shadcns/index.js";
|
|
11
|
+
export const LenisScroll = memo((props) => {
|
|
12
|
+
return (_jsxs(_Fragment, { children: [props?.root == true
|
|
13
|
+
? _jsx(LenisRootScroll, { ...props })
|
|
14
|
+
: _jsx(LenisContainerScroll, { ...props }), "\t"] }));
|
|
15
|
+
});
|
|
16
|
+
export const LenisRootScroll = memo(({ root, options }) => {
|
|
17
|
+
const lenis = useLenis();
|
|
18
|
+
const lenisRef = useRef(null);
|
|
19
|
+
const registerRootLenis = useEffectEvent(() => {
|
|
20
|
+
if (!root == true || !lenis)
|
|
21
|
+
return;
|
|
22
|
+
setRootLenis(lenis);
|
|
23
|
+
});
|
|
24
|
+
useEffect(() => { registerRootLenis(); }, [lenis]);
|
|
25
|
+
return (_jsx(ReactLenis, { ref: lenisRef, root: root, options: {
|
|
26
|
+
autoRaf: true,
|
|
27
|
+
lerp: 0.0005,
|
|
28
|
+
duration: 1.5,
|
|
29
|
+
smoothWheel: true,
|
|
30
|
+
...options
|
|
31
|
+
} }));
|
|
32
|
+
});
|
|
33
|
+
export const LenisContainerScroll = memo(({ name, className, children, options, ...restProps }) => {
|
|
34
|
+
const [containerRef, setContainerRef] = useState();
|
|
35
|
+
const wrapperRef = useRef(null);
|
|
36
|
+
const contentRef = useRef(null);
|
|
37
|
+
const initLenis = useEffectEvent(() => {
|
|
38
|
+
if (!wrapperRef.current || !contentRef.current || !name)
|
|
39
|
+
return;
|
|
40
|
+
const lenis = new Lenis({
|
|
41
|
+
wrapper: wrapperRef.current,
|
|
42
|
+
content: contentRef.current,
|
|
43
|
+
autoRaf: true,
|
|
44
|
+
...options
|
|
45
|
+
});
|
|
46
|
+
setContainerRef(contentRef);
|
|
47
|
+
setScrollContainerStore({ name, action: "add", node: lenis });
|
|
48
|
+
return () => {
|
|
49
|
+
setScrollContainerStore({ name, action: "remove" });
|
|
50
|
+
lenis?.destroy?.();
|
|
51
|
+
};
|
|
52
|
+
});
|
|
53
|
+
useLayoutEffect(() => {
|
|
54
|
+
const effect = initLenis();
|
|
55
|
+
return effect;
|
|
56
|
+
}, [name, options]);
|
|
57
|
+
return (_jsx("div", { ref: wrapperRef, "data-lenis-scroll": name, className: cn("group overflow-hidden", className), ...restProps, children: _jsx("div", { ref: contentRef, className: cn("h-full", "relative", "will-change-transform overscroll-contain"), children: _jsx(ScrollContainerContext, { value: { containerRef }, children: children }) }) }));
|
|
58
|
+
});
|
|
59
|
+
export const useLenisStores = create()(() => ({
|
|
60
|
+
root: null,
|
|
61
|
+
}));
|
|
62
|
+
export const setRootLenis = (lenis) => useLenisStores.setState(() => {
|
|
63
|
+
return { root: lenis };
|
|
64
|
+
});
|
|
65
|
+
export const getRootLenis = () => useLenisStores.getState();
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & {
|
|
2
|
+
name: string;
|
|
3
|
+
tag?: T;
|
|
4
|
+
};
|
|
5
|
+
export declare const NativeScroll: import("react").MemoExoticComponent<(<T extends React.ElementType = "div">({ tag: Component, name, className, ...restProps }: PropsType<T>) => import("react/jsx-runtime").JSX.Element)>;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// update: 2025.11.12
|
|
3
|
+
// version: 0.0.1.bate
|
|
4
|
+
// dev: wade
|
|
5
|
+
import { memo, useEffectEvent, useEffect, useRef, useState } from "react";
|
|
6
|
+
import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
|
|
7
|
+
import { cn } from "../../shadcns/index.js";
|
|
8
|
+
export const NativeScroll = memo(({ tag: Component = "div", name, className, ...restProps }) => {
|
|
9
|
+
const componentRef = useRef(null);
|
|
10
|
+
const [containerRef, setContainerRef] = useState();
|
|
11
|
+
const nativeEffect = useEffectEvent(() => {
|
|
12
|
+
if (!componentRef.current)
|
|
13
|
+
return;
|
|
14
|
+
setContainerRef(componentRef);
|
|
15
|
+
setScrollContainerStore({ name, action: "add", node: componentRef.current });
|
|
16
|
+
return () => { setScrollContainerStore({ name, action: "remove" }); };
|
|
17
|
+
});
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const effect = nativeEffect();
|
|
20
|
+
return effect;
|
|
21
|
+
}, [componentRef?.current]);
|
|
22
|
+
return (_jsx(ScrollContainerContext, { value: { containerRef }, children: _jsx(Component, { ref: componentRef, "data-native-scroll": name, className: cn("overflow-auto", "will-change-transform", className), ...restProps }) }));
|
|
23
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import Lenis from "lenis";
|
|
2
|
+
import { LenisScrollProps } from "./lenis-scroll";
|
|
3
|
+
type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & LenisScrollProps & {
|
|
4
|
+
name: string;
|
|
5
|
+
lenis?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const ScrollContainer: <T extends React.ElementType = "div">({ name, lenis, ...props }: PropsType<T>) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export interface ScrollContainerContext {
|
|
9
|
+
containerRef: React.RefObject<HTMLDivElement | null> | undefined;
|
|
10
|
+
}
|
|
11
|
+
export declare const ScrollContainerContext: import("react").Context<ScrollContainerContext | null>;
|
|
12
|
+
export declare const useScrollContainerContext: () => ScrollContainerContext;
|
|
13
|
+
export interface ScrollContainersStores {
|
|
14
|
+
containers: Map<string, Lenis | HTMLDivElement | null>;
|
|
15
|
+
}
|
|
16
|
+
export declare const useScrollContainersStores: import("zustand").UseBoundStore<import("zustand").StoreApi<ScrollContainersStores>>;
|
|
17
|
+
export declare const getScrollContainer: (name: string) => HTMLDivElement | Lenis | null | undefined;
|
|
18
|
+
export declare const getScrollContainerStores: () => ScrollContainersStores;
|
|
19
|
+
export interface SetStoreOptions {
|
|
20
|
+
name: string;
|
|
21
|
+
node?: Lenis | HTMLDivElement | null;
|
|
22
|
+
action: "add" | "remove";
|
|
23
|
+
}
|
|
24
|
+
export declare const setScrollContainerStore: (options: SetStoreOptions) => void;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
// update: 2025.11.12
|
|
3
|
+
// version: 0.0.1.bate
|
|
4
|
+
// dev: wade
|
|
5
|
+
import { createContext, use } from "react";
|
|
6
|
+
import Lenis from "lenis";
|
|
7
|
+
import { create } from "zustand";
|
|
8
|
+
import { NativeScroll } from "./native-scroll";
|
|
9
|
+
import { LenisScroll } from "./lenis-scroll";
|
|
10
|
+
export const ScrollContainer = ({ name, lenis = false, ...props }) => {
|
|
11
|
+
return (_jsx(_Fragment, { children: lenis
|
|
12
|
+
? _jsx(LenisScroll, { name: name, ...props })
|
|
13
|
+
: _jsx(NativeScroll, { name: name, ...props }) }));
|
|
14
|
+
};
|
|
15
|
+
export const ScrollContainerContext = createContext(null);
|
|
16
|
+
export const useScrollContainerContext = () => {
|
|
17
|
+
const context = use(ScrollContainerContext);
|
|
18
|
+
if (!context)
|
|
19
|
+
throw new Error("useScrollContainerContext must be used inside ScrollContainerProvider");
|
|
20
|
+
return context;
|
|
21
|
+
};
|
|
22
|
+
export const useScrollContainersStores = create()(() => ({
|
|
23
|
+
containers: new Map(),
|
|
24
|
+
}));
|
|
25
|
+
export const getScrollContainer = (name) => {
|
|
26
|
+
const stores = useScrollContainersStores.getState();
|
|
27
|
+
return stores.containers?.get(name);
|
|
28
|
+
};
|
|
29
|
+
export const getScrollContainerStores = () => useScrollContainersStores.getState();
|
|
30
|
+
export const setScrollContainerStore = (options) => {
|
|
31
|
+
const { action, name, node } = options;
|
|
32
|
+
useScrollContainersStores.setState(stores => {
|
|
33
|
+
const containerDom = stores.containers?.get(name);
|
|
34
|
+
const isContainerNode = node instanceof Lenis || node instanceof HTMLDivElement;
|
|
35
|
+
if (action == "add" && isContainerNode) {
|
|
36
|
+
if (containerDom == node)
|
|
37
|
+
return stores;
|
|
38
|
+
// console.log("node", node, name);
|
|
39
|
+
stores.containers?.set(name, node);
|
|
40
|
+
}
|
|
41
|
+
else if (action == "remove" && containerDom) {
|
|
42
|
+
stores.containers?.delete(name);
|
|
43
|
+
}
|
|
44
|
+
return { containers: stores.containers };
|
|
45
|
+
});
|
|
46
|
+
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
export interface PropsTypes {
|
|
4
|
-
}
|
|
1
|
+
import type { AnimationPlaybackControlsWithThen, Easing } from "motion/react";
|
|
2
|
+
import Lenis from "lenis";
|
|
5
3
|
export interface AnimateOptions {
|
|
6
4
|
duration?: number;
|
|
7
5
|
delay?: number;
|
|
8
6
|
ease?: Easing | Easing[] | undefined;
|
|
9
|
-
onScroll?: () => void;
|
|
7
|
+
onScroll?: (lenis?: Lenis) => void;
|
|
10
8
|
onScrolling?: (value: number) => void;
|
|
11
|
-
onScrolled?: () => void;
|
|
9
|
+
onScrolled?: (lenis?: Lenis) => void;
|
|
12
10
|
}
|
|
13
11
|
export interface AnchorOptions extends AnimateOptions {
|
|
14
12
|
anchor: string;
|
|
@@ -31,41 +29,45 @@ export interface ScrollOptions extends AnimateOptions {
|
|
|
31
29
|
};
|
|
32
30
|
direction?: AnchorOptions["direction"];
|
|
33
31
|
}
|
|
34
|
-
export type AnimateController =
|
|
35
|
-
export
|
|
36
|
-
registerAnchors:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
export type AnimateController = AnimationPlaybackControlsWithThen;
|
|
33
|
+
export interface AnchorsMethods {
|
|
34
|
+
registerAnchors: (name: string) => {
|
|
35
|
+
[key: string]: string | React.RefObject<null>;
|
|
36
|
+
ref: React.RefObject<null>;
|
|
37
|
+
};
|
|
38
|
+
registerOffseters: (name: string) => {
|
|
39
|
+
[key: string]: string | React.RefObject<null>;
|
|
40
|
+
ref: React.RefObject<null>;
|
|
41
|
+
};
|
|
42
|
+
setStores: (options: AnchorStoreOptions) => void;
|
|
40
43
|
getStores: () => AnchorsStores;
|
|
41
44
|
scrollToAnchor: (anchorOptions: AnchorOptions) => void;
|
|
42
|
-
}
|
|
45
|
+
}
|
|
46
|
+
export declare function useAnchors(): AnchorsMethods;
|
|
43
47
|
export interface RegistrationDatas {
|
|
44
48
|
key: keyof AnchorsStores;
|
|
45
49
|
name: string;
|
|
46
|
-
node: HTMLDivElement | null;
|
|
47
50
|
}
|
|
48
|
-
export declare function
|
|
49
|
-
|
|
50
|
-
ref: (
|
|
51
|
-
"data-anchor": string;
|
|
51
|
+
export declare function useRegistration({ key, name }: RegistrationDatas): {
|
|
52
|
+
[x: string]: string | import("react").RefObject<null>;
|
|
53
|
+
ref: import("react").RefObject<null>;
|
|
52
54
|
};
|
|
53
|
-
export declare function
|
|
54
|
-
|
|
55
|
-
"
|
|
55
|
+
export declare function registerAnchors(name: string): {
|
|
56
|
+
[x: string]: string | import("react").RefObject<null>;
|
|
57
|
+
ref: import("react").RefObject<null>;
|
|
56
58
|
};
|
|
57
59
|
export declare function registerOffseters(name: string): {
|
|
58
|
-
|
|
59
|
-
"
|
|
60
|
+
[x: string]: string | import("react").RefObject<null>;
|
|
61
|
+
ref: import("react").RefObject<null>;
|
|
60
62
|
};
|
|
61
63
|
export interface AnchorsStores {
|
|
62
64
|
anchors: Map<string, HTMLElement | null>;
|
|
63
|
-
containers: Map<string, HTMLElement | null>;
|
|
64
65
|
offseters: Map<string, HTMLElement | null>;
|
|
65
66
|
}
|
|
66
67
|
export declare const useAnchorsStores: import("zustand").UseBoundStore<import("zustand").StoreApi<AnchorsStores>>;
|
|
67
68
|
export declare const getAnchorsStores: () => AnchorsStores;
|
|
68
|
-
export interface
|
|
69
|
+
export interface AnchorStoreOptions extends RegistrationDatas {
|
|
70
|
+
node: HTMLDivElement | null;
|
|
69
71
|
action: "add" | "remove";
|
|
70
72
|
}
|
|
71
|
-
export declare const
|
|
73
|
+
export declare const setAnchorsStore: (options: AnchorStoreOptions) => void;
|
package/dist/hooks/useAnchors.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
//
|
|
3
|
-
// version: 0.0.1.bate
|
|
1
|
+
// update: 2025.11.12
|
|
2
|
+
// version: 0.0.3.bate
|
|
4
3
|
// dev: wade
|
|
5
|
-
import { useCallback, useMemo, useRef } from "react";
|
|
6
|
-
import {
|
|
4
|
+
import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
|
|
5
|
+
import { useAnimate, motionValue } from "motion/react";
|
|
7
6
|
import { create } from "zustand";
|
|
7
|
+
import { getScrollContainerStores, getRootLenis } from "../components/index.js";
|
|
8
|
+
import Lenis from "lenis";
|
|
9
|
+
const ANCHOR_ATTRIBUTE = "data-anchor";
|
|
10
|
+
const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
|
|
8
11
|
export function useAnchors() {
|
|
12
|
+
const [_, animate] = useAnimate();
|
|
9
13
|
const controllerRef = useRef(new Map());
|
|
10
|
-
const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration =
|
|
14
|
+
const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration = 1, delay = 0, ease = [0, 1, .5, .99], onScroll: onPlay, onScrolled, onScrolling, ...props }) => {
|
|
11
15
|
if (direction !== "y" && direction !== "x") {
|
|
12
16
|
console.error(`Scroll Direction isn't 'x' or 'y' `);
|
|
13
17
|
return;
|
|
@@ -33,12 +37,21 @@ export function useAnchors() {
|
|
|
33
37
|
controllerRef.current.delete(controllerKey);
|
|
34
38
|
onScrolled?.();
|
|
35
39
|
};
|
|
36
|
-
const options = {
|
|
40
|
+
const options = {
|
|
41
|
+
duration,
|
|
42
|
+
ease,
|
|
43
|
+
delay,
|
|
44
|
+
onPlay,
|
|
45
|
+
onUpdate,
|
|
46
|
+
onComplete,
|
|
47
|
+
...props
|
|
48
|
+
};
|
|
37
49
|
controllerRef.current.set(controllerKey, animate(motionStartValue, endValue, options));
|
|
38
50
|
}, []);
|
|
39
51
|
const scrollToAnchor = useCallback((anchorOptions) => {
|
|
40
|
-
const { anchor: anchorName, container: containerName, offseters, align, offset = 0, ...options } = anchorOptions;
|
|
41
|
-
const
|
|
52
|
+
const { anchor: anchorName, container: containerName, offseters, align, offset = 0, direction = "y", ...options } = anchorOptions;
|
|
53
|
+
const anchorsStores = getAnchorsStores();
|
|
54
|
+
const scrollContainersStores = getScrollContainerStores();
|
|
42
55
|
const isScrolltoAnchor = anchorName !== "#";
|
|
43
56
|
const isScrollContainer = containerName && containerName !== "window";
|
|
44
57
|
const controllerKey = containerName ?? "window";
|
|
@@ -47,15 +60,54 @@ export function useAnchors() {
|
|
|
47
60
|
controllerRef.current.delete(controllerKey);
|
|
48
61
|
}
|
|
49
62
|
const anchorDom = isScrolltoAnchor
|
|
50
|
-
?
|
|
63
|
+
? anchorsStores.anchors.get(anchorName)
|
|
51
64
|
: undefined;
|
|
52
65
|
if (isScrolltoAnchor && !(anchorDom instanceof HTMLElement))
|
|
53
66
|
return;
|
|
54
67
|
const containerDom = isScrollContainer
|
|
55
|
-
?
|
|
68
|
+
? scrollContainersStores.containers.get(containerName)
|
|
56
69
|
: window;
|
|
57
70
|
if (!containerDom)
|
|
58
71
|
return;
|
|
72
|
+
const getOffseterDomClient = (offseters) => {
|
|
73
|
+
const offseterDom = anchorsStores.offseters.get(offseters);
|
|
74
|
+
const { clientWidth, clientHeight } = offseterDom || {};
|
|
75
|
+
return { width: clientWidth ?? 0, height: clientHeight ?? 0 };
|
|
76
|
+
};
|
|
77
|
+
const offsets = Array.isArray(offseters)
|
|
78
|
+
? offseters.reduce((init, offseter) => {
|
|
79
|
+
const { width, height } = getOffseterDomClient(offseter);
|
|
80
|
+
return {
|
|
81
|
+
width: (init.width ?? 0) + width,
|
|
82
|
+
height: (init.height ?? 0) + height
|
|
83
|
+
};
|
|
84
|
+
}, {})
|
|
85
|
+
: typeof offseters == "string"
|
|
86
|
+
? getOffseterDomClient(offseters)
|
|
87
|
+
: { width: 0, height: 0 };
|
|
88
|
+
const offsetValue = {
|
|
89
|
+
width: direction === "x" ? offsets.width + offset : 0,
|
|
90
|
+
height: direction === "y" ? offsets.height + offset : 0,
|
|
91
|
+
};
|
|
92
|
+
const isLenisScroll = containerDom == window
|
|
93
|
+
&& window.document.documentElement.classList.contains("lenis")
|
|
94
|
+
|| containerDom instanceof Lenis;
|
|
95
|
+
if (isLenisScroll) {
|
|
96
|
+
const lenis = (isScrollContainer ? containerDom : getRootLenis()?.root);
|
|
97
|
+
// TODO 尚未找到可以判斷已經移動到錨點位置的方式
|
|
98
|
+
if (!lenis)
|
|
99
|
+
return;
|
|
100
|
+
const directionOffset = direction === "x"
|
|
101
|
+
? offsetValue.width + offset
|
|
102
|
+
: offsetValue.height + offset;
|
|
103
|
+
// TODO 尚未建立lenis options完整設定
|
|
104
|
+
lenis.scrollTo(anchorDom ?? 0, {
|
|
105
|
+
offset: (directionOffset * -1),
|
|
106
|
+
onStart: (lenis) => options?.onScroll?.(lenis),
|
|
107
|
+
onComplete: (lenis) => options?.onScrolled?.(lenis)
|
|
108
|
+
});
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
59
111
|
const containerScrollValue = {
|
|
60
112
|
top: Math.round(isScrollContainer
|
|
61
113
|
? containerDom.scrollTop
|
|
@@ -71,100 +123,78 @@ export function useAnchors() {
|
|
|
71
123
|
left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
|
|
72
124
|
top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
|
|
73
125
|
};
|
|
74
|
-
const offsetsValue = Array.isArray(offseters)
|
|
75
|
-
? offseters.reduce((init, offseter) => {
|
|
76
|
-
const offseterDom = stores.offseters.get(offseter);
|
|
77
|
-
const width = (init.width ?? 0) + (offseterDom ? offseterDom.clientWidth : 0);
|
|
78
|
-
const height = (init.height ?? 0) + (offseterDom ? offseterDom.clientHeight : 0);
|
|
79
|
-
return { width, height };
|
|
80
|
-
}, {})
|
|
81
|
-
: { width: 0, height: 0 };
|
|
82
|
-
const offsetsSumValue = {
|
|
83
|
-
width: options.direction === "x" ? offsetsValue.width + offset : 0,
|
|
84
|
-
height: options.direction === "y" ? offsetsValue.height + offset : 0,
|
|
85
|
-
};
|
|
86
126
|
const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : { left: 0, top: 0 };
|
|
87
127
|
const anchorScrollValue = {
|
|
88
128
|
left: isScrolltoAnchor
|
|
89
|
-
? Math.round(anchorRect.left + containerOffsetValue.left -
|
|
90
|
-
:
|
|
129
|
+
? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width)
|
|
130
|
+
: offsetValue.width,
|
|
91
131
|
top: isScrolltoAnchor
|
|
92
|
-
? Math.round(anchorRect.top + containerOffsetValue.top -
|
|
93
|
-
:
|
|
132
|
+
? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height)
|
|
133
|
+
: offsetValue.height
|
|
94
134
|
};
|
|
95
135
|
scrollAnimations({
|
|
96
136
|
controllerKey,
|
|
97
137
|
containerDom,
|
|
98
138
|
containerScrollValue,
|
|
99
139
|
anchorScrollValue,
|
|
140
|
+
direction,
|
|
100
141
|
...options
|
|
101
142
|
});
|
|
102
143
|
}, []);
|
|
103
144
|
const returnsMemo = useMemo(() => ({
|
|
104
145
|
registerAnchors,
|
|
105
|
-
registerContainers,
|
|
106
146
|
registerOffseters,
|
|
107
|
-
setStores:
|
|
147
|
+
setStores: setAnchorsStore,
|
|
108
148
|
getStores: getAnchorsStores,
|
|
109
149
|
scrollToAnchor
|
|
110
150
|
}), [scrollToAnchor]);
|
|
111
151
|
return returnsMemo;
|
|
112
152
|
}
|
|
113
|
-
export function
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
console.error(`Cannot register ${key} 'body' or 'html' `);
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
setAnchorStore({ key, name, node, action: node ? "add" : "remove" });
|
|
153
|
+
export function useRegistration({ key, name }) {
|
|
154
|
+
const ref = useRef(null);
|
|
155
|
+
const attribute = key == "anchors" ? ANCHOR_ATTRIBUTE : OFFSETER_ATTRIBUTE;
|
|
156
|
+
useLayoutEffect(() => {
|
|
157
|
+
setAnchorsStore({ key, action: "add", node: ref.current, name });
|
|
158
|
+
return () => { setAnchorsStore({ key, action: "remove", node: ref.current, name }); };
|
|
159
|
+
}, []);
|
|
160
|
+
return { ref, [attribute]: name };
|
|
125
161
|
}
|
|
126
|
-
const ANCHOR_ATTRIBUTE = "data-anchor";
|
|
127
|
-
const CONTAINER_ATTRIBUTE = "data-anchor-container";
|
|
128
|
-
const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
|
|
129
162
|
export function registerAnchors(name) {
|
|
130
|
-
|
|
131
|
-
return { ref: register, [ANCHOR_ATTRIBUTE]: name };
|
|
132
|
-
}
|
|
133
|
-
export function registerContainers(name) {
|
|
134
|
-
const register = useCallback((node) => registration({ key: "containers", name, node }), [name]);
|
|
135
|
-
return { ref: register, [CONTAINER_ATTRIBUTE]: name };
|
|
163
|
+
return useRegistration({ key: "anchors", name });
|
|
136
164
|
}
|
|
137
165
|
export function registerOffseters(name) {
|
|
138
|
-
|
|
139
|
-
return { ref: register, [OFFSETER_ATTRIBUTE]: name };
|
|
166
|
+
return useRegistration({ key: "offseters", name });
|
|
140
167
|
}
|
|
141
168
|
export const useAnchorsStores = create()(() => ({
|
|
142
169
|
anchors: new Map(),
|
|
143
|
-
containers: new Map(),
|
|
144
170
|
offseters: new Map(),
|
|
145
171
|
}));
|
|
146
172
|
export const getAnchorsStores = () => useAnchorsStores.getState();
|
|
147
|
-
export const
|
|
148
|
-
const { key, action, name, node } =
|
|
173
|
+
export const setAnchorsStore = (options) => {
|
|
174
|
+
const { key, action, name, node } = options;
|
|
149
175
|
useAnchorsStores.setState(stores => {
|
|
150
176
|
switch (key) {
|
|
151
177
|
case "anchors":
|
|
152
|
-
|
|
178
|
+
const anchorDom = stores.anchors?.get(name);
|
|
179
|
+
if (action == "add" && node instanceof HTMLElement) {
|
|
180
|
+
if (anchorDom == node)
|
|
181
|
+
return stores;
|
|
153
182
|
stores.anchors?.set(name, node);
|
|
154
|
-
|
|
183
|
+
}
|
|
184
|
+
else if (action == "remove" && anchorDom) {
|
|
155
185
|
stores.anchors?.delete(name);
|
|
186
|
+
}
|
|
156
187
|
return { anchors: stores.anchors };
|
|
157
|
-
case "containers":
|
|
158
|
-
if (action == "add" && node instanceof HTMLElement)
|
|
159
|
-
stores.containers?.set(name, node);
|
|
160
|
-
if (action == "remove")
|
|
161
|
-
stores.containers?.delete(name);
|
|
162
|
-
return { containers: stores.containers };
|
|
163
188
|
case "offseters":
|
|
164
|
-
|
|
189
|
+
const offseterDom = stores.offseters?.get(name);
|
|
190
|
+
if (action == "add" && node instanceof HTMLElement) {
|
|
191
|
+
if (offseterDom == node)
|
|
192
|
+
return stores;
|
|
165
193
|
stores.offseters?.set(name, node);
|
|
166
|
-
|
|
194
|
+
}
|
|
195
|
+
else if (action == "remove" && offseterDom) {
|
|
167
196
|
stores.offseters?.delete(name);
|
|
197
|
+
}
|
|
168
198
|
return { offseters: stores.offseters };
|
|
169
199
|
default:
|
|
170
200
|
return stores;
|
package/dist/hooks/useCookies.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import Cookies from 'js-cookie';
|
|
3
2
|
// wade 2024.12.06 (js-cookie 版本)
|
|
4
3
|
export function useCookies() {
|
|
@@ -17,3 +16,27 @@ export function useCookies() {
|
|
|
17
16
|
};
|
|
18
17
|
return { setCookies, getCookies, updateCookies, deleteCookies };
|
|
19
18
|
}
|
|
19
|
+
//
|
|
20
|
+
// //wade 2024.12.06
|
|
21
|
+
// export function useCookies() {
|
|
22
|
+
// const setCookies = (name: string, value: string, days = 7) => {
|
|
23
|
+
// const date = new Date();
|
|
24
|
+
// date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
|
|
25
|
+
// const expires = `expires=${date.toUTCString()}`;
|
|
26
|
+
// document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
|
|
27
|
+
// }
|
|
28
|
+
// const getCookies = (name: string) => {
|
|
29
|
+
// const cookies = document.cookie.split("; ");
|
|
30
|
+
// for (const cookie of cookies) {
|
|
31
|
+
// const [key, value] = cookie.split("=");
|
|
32
|
+
// if (key === name) return decodeURIComponent(value);
|
|
33
|
+
// }
|
|
34
|
+
// return null; // 如果找不到,返回 null
|
|
35
|
+
// }
|
|
36
|
+
// const updateCookies = (name: string, value: string, days = 7) =>
|
|
37
|
+
// getCookies(name) !== null && setCookies(name, value, days);
|
|
38
|
+
// const deleteCookies = (name: string) => {
|
|
39
|
+
// document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
|
|
40
|
+
// }
|
|
41
|
+
// return { setCookies, getCookies, updateCookies, deleteCookies }
|
|
42
|
+
// }
|
package/dist/hooks/useHash.js
CHANGED
package/dist/hooks/useMounted.js
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const alertVariants: (props?: ({
|
|
4
4
|
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
-
} & import("class-variance-authority/
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
4
|
variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
|
|
5
|
-
} & import("class-variance-authority/
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
7
7
|
asChild?: boolean;
|
|
8
8
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import { Separator } from "../../index.js";
|
|
3
|
+
declare const buttonGroupVariants: (props?: ({
|
|
4
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
|