@musecat/functionkit 1.0.1 → 1.0.2
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/.agents/references/components/ScrolltoTop.md +36 -0
- package/.agents/references/components/SwitchCase.md +47 -0
- package/.agents/references/components/ViewportPortal.md +34 -0
- package/.agents/references/cookie/cookie.md +47 -0
- package/.agents/references/datetime/dateTime.client.md +42 -0
- package/.agents/references/datetime/dateTime.server.md +42 -0
- package/.agents/references/datetime/dateTime.shared.md +86 -0
- package/.agents/references/hooks/useAvoidKeyboard.md +29 -0
- package/.agents/references/hooks/useCheckInvisible.md +36 -0
- package/.agents/references/hooks/useCheckScroll.md +36 -0
- package/.agents/references/hooks/useClientDateTime.md +39 -0
- package/.agents/references/hooks/useDebounce.md +46 -0
- package/.agents/references/hooks/useDebouncedCallback.md +34 -0
- package/.agents/references/hooks/useDoubleClick.md +40 -0
- package/.agents/references/hooks/useGeolocation.md +37 -0
- package/.agents/references/hooks/useHasMounted.md +27 -0
- package/.agents/references/hooks/useIntersectionObserver.md +37 -0
- package/.agents/references/hooks/useInterval.md +40 -0
- package/.agents/references/hooks/useKeyboardHeight.md +33 -0
- package/.agents/references/hooks/useKeyboardListNavigation.md +58 -0
- package/.agents/references/hooks/useLongPress.md +48 -0
- package/.agents/references/hooks/usePreservedCallback.md +33 -0
- package/.agents/references/hooks/usePreservedReference.md +34 -0
- package/.agents/references/hooks/useRefEffect.md +35 -0
- package/.agents/references/hooks/useRelativeDateTime.md +35 -0
- package/.agents/references/hooks/useTimeout.md +42 -0
- package/.agents/references/hooks/useToggleState.md +39 -0
- package/.agents/references/hooks/useViewportHeight.md +26 -0
- package/.agents/references/hooks/useViewportMatch.md +32 -0
- package/.agents/references/utils/browserStorage.md +41 -0
- package/.agents/references/utils/buildContext.md +47 -0
- package/.agents/references/utils/clipboardShare.md +59 -0
- package/.agents/references/utils/floatingMotion.md +67 -0
- package/.agents/references/utils/getDeviceInfo.md +43 -0
- package/.agents/references/utils/isEditableKeyboardTarget.md +35 -0
- package/.agents/references/utils/mergeRefs.md +29 -0
- package/.agents/references/utils/seen.md +37 -0
- package/.agents/references/utils/subscribeKeyboardHeight.md +35 -0
- package/AGENTS.md +103 -396
- package/README.md +18 -5
- package/index.ts +63 -68
- package/package.json +27 -13
- package/packages/components/ScrolltoTop.tsx +3 -3
- package/packages/components/SwitchCase.tsx +7 -7
- package/packages/components/ViewportPortal.tsx +23 -23
- package/packages/cookie/cookie.shared.ts +97 -101
- package/packages/datetime/dateTime.client.ts +86 -86
- package/packages/datetime/dateTime.server.ts +86 -86
- package/packages/datetime/dateTime.shared.ts +281 -281
- package/packages/hooks/useAvoidKeyboard.ts +15 -15
- package/packages/hooks/useCheckInvisible.ts +16 -16
- package/packages/hooks/useCheckScroll.ts +10 -10
- package/packages/hooks/useClientDateTime.ts +33 -33
- package/packages/hooks/useDebounce.ts +95 -95
- package/packages/hooks/useDebouncedCallback.ts +45 -45
- package/packages/hooks/useDoubleClick.ts +43 -43
- package/packages/hooks/useGeolocation.ts +130 -130
- package/packages/hooks/useHasMounted.ts +5 -5
- package/packages/hooks/useIntersectionObserver.ts +20 -20
- package/packages/hooks/useInterval.ts +46 -45
- package/packages/hooks/useKeyboardHeight.ts +9 -9
- package/packages/hooks/useKeyboardListNavigation.ts +156 -156
- package/packages/hooks/useLongPress.ts +98 -98
- package/packages/hooks/usePreservedCallback.ts +12 -12
- package/packages/hooks/usePreservedReference.ts +10 -10
- package/packages/hooks/useRefEffect.ts +19 -19
- package/packages/hooks/useRelativeDateTime.ts +37 -37
- package/packages/hooks/useTimeout.ts +41 -41
- package/packages/hooks/useToggleState.ts +5 -5
- package/packages/hooks/useViewportHeight.ts +13 -13
- package/packages/hooks/useViewportMatch.ts +16 -22
- package/packages/utils/browserStorage.ts +26 -26
- package/packages/utils/buildContext.tsx +10 -10
- package/packages/utils/checkDevice.ts +64 -64
- package/packages/utils/clipboardShare.tsx +31 -31
- package/packages/utils/clipboardShare.types.ts +7 -7
- package/packages/utils/floatingMotion.ts +71 -71
- package/packages/utils/keyboardTarget.ts +9 -9
- package/packages/utils/mergeRefs.ts +9 -9
- package/packages/utils/seen.ts +15 -15
- package/packages/utils/subscribeKeyboardHeight.ts +46 -46
- package/tests/components/ScrolltoTop.test.tsx +15 -0
- package/tests/components/SwitchCase.test.tsx +34 -0
- package/tests/components/ViewportPortal.test.tsx +42 -0
- package/tests/cookie/cookie.test.ts +156 -0
- package/tests/datetime/datetime.test.ts +250 -0
- package/tests/hooks/useAvoidKeyboard.test.ts +12 -0
- package/tests/hooks/useCheckInvisible.test.ts +28 -0
- package/tests/hooks/useCheckScroll.test.ts +23 -0
- package/tests/hooks/useClientDateTime.test.ts +14 -0
- package/tests/hooks/useDebounce.test.ts +71 -0
- package/tests/hooks/useDebouncedCallback.test.ts +34 -0
- package/tests/hooks/useDoubleClick.test.ts +31 -0
- package/tests/hooks/useGeolocation.test.ts +50 -0
- package/tests/hooks/useHasMounted.test.ts +10 -0
- package/tests/hooks/useIntersectionObserver.test.ts +13 -0
- package/tests/hooks/useInterval.test.ts +31 -0
- package/tests/hooks/useKeyboardHeight.test.ts +10 -0
- package/tests/hooks/useKeyboardListNavigation.test.ts +82 -0
- package/tests/hooks/useLongPress.test.ts +52 -0
- package/tests/hooks/usePreservedCallback.test.ts +35 -0
- package/tests/hooks/usePreservedReference.test.ts +35 -0
- package/tests/hooks/useRefEffect.test.ts +30 -0
- package/tests/hooks/useRelativeDateTime.test.ts +19 -0
- package/tests/hooks/useTimeout.test.ts +34 -0
- package/tests/hooks/useToggleState.test.ts +35 -0
- package/tests/hooks/useViewportHeight.test.ts +10 -0
- package/tests/hooks/useViewportMatch.test.ts +35 -0
- package/tests/setup.ts +9 -0
- package/tests/utils/browserStorage.test.ts +54 -0
- package/tests/utils/buildContext.test.tsx +27 -0
- package/tests/utils/checkDevice.test.ts +84 -0
- package/tests/utils/clipboardShare.test.ts +78 -0
- package/tests/utils/floatingMotion.test.ts +84 -0
- package/tests/utils/keyboardTarget.test.ts +44 -0
- package/tests/utils/mergeRefs.test.ts +18 -0
- package/tests/utils/seen.test.ts +31 -0
- package/tests/utils/subscribeKeyboardHeight.test.ts +50 -0
- package/tsconfig.json +16 -16
- package/vitest.config.ts +16 -0
|
@@ -6,49 +6,49 @@ import type { DateInput, DatePreset } from "../datetime/dateTime.shared";
|
|
|
6
6
|
import { toDate } from "../datetime/dateTime.shared";
|
|
7
7
|
|
|
8
8
|
type UseRelativeDateTimeOptions = {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
locale?: string;
|
|
10
|
+
maxRelativeDays?: number;
|
|
11
|
+
fallbackDatePreset?: DatePreset;
|
|
12
|
+
updateIntervalMs?: number;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export function useRelativeDateTime(
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
value: DateInput,
|
|
17
|
+
options?: UseRelativeDateTimeOptions,
|
|
18
18
|
) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
const [ready, setReady] = useState(false);
|
|
20
|
+
const [text, setText] = useState("");
|
|
21
|
+
const [isRelative, setIsRelative] = useState(false);
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const update = () => {
|
|
25
|
+
const next = formatClientRelative(value, {
|
|
26
|
+
locale: options?.locale,
|
|
27
|
+
maxRelativeDays: options?.maxRelativeDays,
|
|
28
|
+
fallbackDatePreset: options?.fallbackDatePreset,
|
|
29
|
+
now: Date.now(),
|
|
30
|
+
});
|
|
31
|
+
setText(next.text);
|
|
32
|
+
setIsRelative(next.isRelative);
|
|
33
|
+
setReady(true);
|
|
34
|
+
};
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
update();
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
const timer = window.setInterval(update, options?.updateIntervalMs ?? 1000);
|
|
39
|
+
return () => window.clearInterval(timer);
|
|
40
|
+
}, [
|
|
41
|
+
options?.fallbackDatePreset,
|
|
42
|
+
options?.locale,
|
|
43
|
+
options?.maxRelativeDays,
|
|
44
|
+
options?.updateIntervalMs,
|
|
45
|
+
value,
|
|
46
|
+
]);
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
return {
|
|
49
|
+
ready,
|
|
50
|
+
text,
|
|
51
|
+
isRelative,
|
|
52
|
+
date: toDate(value),
|
|
53
|
+
};
|
|
54
54
|
}
|
|
@@ -5,52 +5,52 @@ import { useCallback, useEffect, useRef } from "react";
|
|
|
5
5
|
import { usePreservedCallback } from "./usePreservedCallback";
|
|
6
6
|
|
|
7
7
|
type UseTimeoutOptions = {
|
|
8
|
-
|
|
8
|
+
enabled?: boolean;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export type UseTimeoutControls = {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
start: (overrideDelay?: number) => void;
|
|
13
|
+
reset: (overrideDelay?: number) => void;
|
|
14
|
+
clear: () => void;
|
|
15
|
+
isPending: () => boolean;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
export function useTimeout(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
callback: () => void,
|
|
20
|
+
delay = 0,
|
|
21
|
+
options?: UseTimeoutOptions,
|
|
22
22
|
): UseTimeoutControls {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
23
|
+
const { enabled = true } = options ?? {};
|
|
24
|
+
const preservedCallback = usePreservedCallback(callback);
|
|
25
|
+
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
26
|
+
|
|
27
|
+
const clear = useCallback(() => {
|
|
28
|
+
if (timeoutRef.current !== null) {
|
|
29
|
+
clearTimeout(timeoutRef.current);
|
|
30
|
+
timeoutRef.current = null;
|
|
31
|
+
}
|
|
32
|
+
}, []);
|
|
33
|
+
|
|
34
|
+
const start = useCallback(
|
|
35
|
+
(overrideDelay?: number) => {
|
|
36
|
+
clear();
|
|
37
|
+
timeoutRef.current = setTimeout(() => {
|
|
38
|
+
timeoutRef.current = null;
|
|
39
|
+
preservedCallback();
|
|
40
|
+
}, overrideDelay ?? delay);
|
|
41
|
+
},
|
|
42
|
+
[clear, delay, preservedCallback],
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
const isPending = useCallback(() => timeoutRef.current !== null, []);
|
|
46
|
+
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (!enabled) return;
|
|
49
|
+
start();
|
|
50
|
+
return clear;
|
|
51
|
+
}, [enabled, start, clear]);
|
|
52
|
+
|
|
53
|
+
useEffect(() => clear, [clear]);
|
|
54
|
+
|
|
55
|
+
return { start, reset: start, clear, isPending };
|
|
56
56
|
}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
import { useCallback, useState } from "react";
|
|
4
4
|
|
|
5
5
|
export function useToggleState(initialValue = false) {
|
|
6
|
-
|
|
6
|
+
const [value, setValue] = useState(initialValue);
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const setTrue = useCallback(() => setValue(true), []);
|
|
9
|
+
const setFalse = useCallback(() => setValue(false), []);
|
|
10
|
+
const toggle = useCallback(() => setValue((v) => !v), []);
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
return { value, setValue, setTrue, setFalse, toggle };
|
|
13
13
|
}
|
|
@@ -3,21 +3,21 @@
|
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
4
|
|
|
5
5
|
export function useViewportHeight() {
|
|
6
|
-
|
|
6
|
+
const [height, setHeight] = useState(0);
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const update = () =>
|
|
10
|
+
setHeight(window.visualViewport?.height ?? window.innerHeight);
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
update();
|
|
13
|
+
window.visualViewport?.addEventListener("resize", update);
|
|
14
|
+
window.addEventListener("resize", update);
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
return () => {
|
|
17
|
+
window.visualViewport?.removeEventListener("resize", update);
|
|
18
|
+
window.removeEventListener("resize", update);
|
|
19
|
+
};
|
|
20
|
+
}, []);
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
return { height };
|
|
23
23
|
}
|
|
@@ -2,32 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Tracks whether the current viewport matches a media query.
|
|
7
|
-
*
|
|
8
|
-
* @param mediaQuery CSS media query string.
|
|
9
|
-
* @returns True when current viewport matches the given query.
|
|
10
|
-
*/
|
|
11
5
|
export function useViewportMatch(mediaQuery: string): boolean {
|
|
12
|
-
|
|
6
|
+
const [isMatched, setIsMatched] = useState(false);
|
|
13
7
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (typeof window === "undefined") {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
18
12
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
const mediaQueryList = window.matchMedia(mediaQuery);
|
|
14
|
+
const syncMatchState = () => {
|
|
15
|
+
setIsMatched(mediaQueryList.matches);
|
|
16
|
+
};
|
|
23
17
|
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
syncMatchState();
|
|
19
|
+
mediaQueryList.addEventListener("change", syncMatchState);
|
|
26
20
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
return () => {
|
|
22
|
+
mediaQueryList.removeEventListener("change", syncMatchState);
|
|
23
|
+
};
|
|
24
|
+
}, [mediaQuery]);
|
|
31
25
|
|
|
32
|
-
|
|
26
|
+
return isMatched;
|
|
33
27
|
}
|
|
@@ -3,57 +3,57 @@
|
|
|
3
3
|
type StorageKind = "localStorage" | "sessionStorage";
|
|
4
4
|
|
|
5
5
|
function getStorage(kind: StorageKind): Storage | null {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
if (typeof window === "undefined") return null;
|
|
7
|
+
return window[kind];
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
function saveStorage(kind: StorageKind, key: string, value: unknown) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
const storage = getStorage(kind);
|
|
12
|
+
if (!storage) return;
|
|
13
|
+
try {
|
|
14
|
+
storage.setItem(key, JSON.stringify(value));
|
|
15
|
+
} catch {}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
function loadStorage(kind: StorageKind, key: string): unknown {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
const storage = getStorage(kind);
|
|
20
|
+
if (!storage) return null;
|
|
21
|
+
try {
|
|
22
|
+
const raw = storage.getItem(key);
|
|
23
|
+
return raw === null ? null : (JSON.parse(raw) as unknown);
|
|
24
|
+
} catch {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
function removeStorage(kind: StorageKind, key: string) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
const storage = getStorage(kind);
|
|
31
|
+
if (!storage) return;
|
|
32
|
+
try {
|
|
33
|
+
storage.removeItem(key);
|
|
34
|
+
} catch {}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
export function getLocalStorage(key: string): unknown {
|
|
38
|
-
|
|
38
|
+
return loadStorage("localStorage", key);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
export function updateLocalStorage(key: string, value: unknown) {
|
|
42
|
-
|
|
42
|
+
saveStorage("localStorage", key, value);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
export function removeLocalStorage(key: string) {
|
|
46
|
-
|
|
46
|
+
removeStorage("localStorage", key);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
export function getSessionStorage(key: string): unknown {
|
|
50
|
-
|
|
50
|
+
return loadStorage("sessionStorage", key);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
export function updateSessionStorage(key: string, value: unknown) {
|
|
54
|
-
|
|
54
|
+
saveStorage("sessionStorage", key, value);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
export function removeSessionStorage(key: string) {
|
|
58
|
-
|
|
58
|
+
removeStorage("sessionStorage", key);
|
|
59
59
|
}
|
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
import { createContext, type ReactNode, useContext, useMemo } from "react";
|
|
4
4
|
|
|
5
5
|
export function buildContext<T>(defaultValue: T) {
|
|
6
|
-
|
|
6
|
+
const Ctx = createContext<T>(defaultValue);
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
function Provider({ value, children }: { value: T; children: ReactNode }) {
|
|
9
|
+
const stable = useMemo(() => value, [value]);
|
|
10
|
+
return <Ctx.Provider value={stable}>{children}</Ctx.Provider>;
|
|
11
|
+
}
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
function useValue() {
|
|
14
|
+
const ctx = useContext(Ctx);
|
|
15
|
+
return ctx;
|
|
16
|
+
}
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
return [Provider, useValue] as const;
|
|
19
19
|
}
|
|
@@ -1,74 +1,74 @@
|
|
|
1
1
|
export type DeviceInfo = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
isMobile: boolean;
|
|
3
|
+
isIOS: boolean;
|
|
4
|
+
isAndroid: boolean;
|
|
5
|
+
isSafari: boolean;
|
|
6
|
+
isIOSSafari: boolean;
|
|
7
|
+
isMacSafari: boolean;
|
|
8
|
+
isSamsungBrowser: boolean;
|
|
9
|
+
isTouchDevice: boolean;
|
|
10
|
+
browser: string;
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
export function getDeviceInfo(): DeviceInfo {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
let isMobile = false;
|
|
15
|
+
let isIOS = false;
|
|
16
|
+
let isAndroid = false;
|
|
17
|
+
let isSafari = false;
|
|
18
|
+
let isIOSSafari = false;
|
|
19
|
+
let isMacSafari = false;
|
|
20
|
+
let isSamsungBrowser = false;
|
|
21
|
+
let isTouchDevice = false;
|
|
22
|
+
let browser = "unknown";
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
if (typeof window === "undefined") {
|
|
25
|
+
return {
|
|
26
|
+
isMobile,
|
|
27
|
+
isIOS,
|
|
28
|
+
isAndroid,
|
|
29
|
+
isSafari,
|
|
30
|
+
isIOSSafari,
|
|
31
|
+
isMacSafari,
|
|
32
|
+
isSamsungBrowser,
|
|
33
|
+
isTouchDevice,
|
|
34
|
+
browser,
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
const ua = navigator.userAgent;
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua);
|
|
41
|
+
isIOS = /iPhone|iPad|iPod/i.test(ua);
|
|
42
|
+
isAndroid = /Android/i.test(ua);
|
|
43
|
+
isSafari = /Safari/i.test(ua) && !/Chrome/i.test(ua);
|
|
44
|
+
isIOSSafari = isIOS && isSafari;
|
|
45
|
+
isMacSafari = /Macintosh/i.test(ua) && isSafari && !isIOS;
|
|
46
|
+
isSamsungBrowser = /SamsungBrowser/i.test(ua);
|
|
47
|
+
isTouchDevice = "ontouchstart" in window;
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
49
|
+
if (isSamsungBrowser) {
|
|
50
|
+
browser = "samsung";
|
|
51
|
+
} else if (isSafari) {
|
|
52
|
+
browser = "safari";
|
|
53
|
+
} else if (/Chrome/i.test(ua)) {
|
|
54
|
+
browser = "chrome";
|
|
55
|
+
} else if (/Firefox/i.test(ua)) {
|
|
56
|
+
browser = "firefox";
|
|
57
|
+
} else if (/Edge/i.test(ua)) {
|
|
58
|
+
browser = "edge";
|
|
59
|
+
} else {
|
|
60
|
+
browser = "unknown";
|
|
61
|
+
}
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
return {
|
|
64
|
+
isMobile,
|
|
65
|
+
isIOS,
|
|
66
|
+
isAndroid,
|
|
67
|
+
isSafari,
|
|
68
|
+
isIOSSafari,
|
|
69
|
+
isMacSafari,
|
|
70
|
+
isSamsungBrowser,
|
|
71
|
+
isTouchDevice,
|
|
72
|
+
browser,
|
|
73
|
+
};
|
|
74
74
|
}
|
|
@@ -1,47 +1,47 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import type {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
NavigatorClipboardProps,
|
|
5
|
+
NavigatorClipboardResult,
|
|
6
|
+
NavigatorShareProps,
|
|
7
|
+
NavigatorShareResult,
|
|
8
8
|
} from "./clipboardShare.types";
|
|
9
9
|
|
|
10
10
|
export function NavigatorClipboard({
|
|
11
|
-
|
|
11
|
+
text,
|
|
12
12
|
}: NavigatorClipboardProps): Promise<NavigatorClipboardResult> {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
return navigator.clipboard.writeText(text).then(
|
|
14
|
+
() => ({ success: true }),
|
|
15
|
+
() => ({ success: false }),
|
|
16
|
+
);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export function NavigatorShare({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
title,
|
|
21
|
+
text,
|
|
22
|
+
link,
|
|
23
23
|
}: NavigatorShareProps): Promise<NavigatorShareResult> {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
if (navigator.share) {
|
|
25
|
+
return navigator.share({ title, text, url: link }).then(
|
|
26
|
+
() => ({ success: true, method: "share" }),
|
|
27
|
+
(error) => {
|
|
28
|
+
if (error instanceof DOMException && error.name === "AbortError") {
|
|
29
|
+
return { success: false, method: "share" };
|
|
30
|
+
}
|
|
31
|
+
return clipboardFallback(link);
|
|
32
|
+
},
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
return clipboardFallback(link);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
function clipboardFallback(link: string): Promise<NavigatorShareResult> {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
if (navigator.clipboard) {
|
|
41
|
+
return navigator.clipboard.writeText(link).then(
|
|
42
|
+
() => ({ success: true, method: "clipboard" }),
|
|
43
|
+
() => ({ success: false, method: "unsupported" }),
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
return Promise.resolve({ success: false, method: "unsupported" });
|
|
47
47
|
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
export type NavigatorClipboardProps = {
|
|
2
|
-
|
|
2
|
+
text: string;
|
|
3
3
|
};
|
|
4
4
|
|
|
5
5
|
export type NavigatorShareProps = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
title: string;
|
|
7
|
+
text: string;
|
|
8
|
+
link: string;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export type NavigatorClipboardResult = {
|
|
12
|
-
|
|
12
|
+
success: boolean;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export type NavigatorShareResult = {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
success: boolean;
|
|
17
|
+
method: "share" | "clipboard" | "unsupported";
|
|
18
18
|
};
|