react-simplikit 0.0.52 → 0.1.0
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/CHANGELOG.md +106 -0
- package/README.md +36 -26
- package/dist/hooks/useAsyncEffect/useAsyncEffect.cjs +1 -0
- package/dist/hooks/useAsyncEffect/useAsyncEffect.mjs +1 -0
- package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.cjs +1 -0
- package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.mjs +1 -0
- package/dist/hooks/useConditionalEffect/useConditionalEffect.cjs +1 -0
- package/dist/hooks/useConditionalEffect/useConditionalEffect.mjs +1 -0
- package/dist/hooks/useInputState/useInputState.cjs +9 -3
- package/dist/hooks/useInputState/useInputState.d.cts +11 -4
- package/dist/hooks/useInputState/useInputState.d.mts +11 -4
- package/dist/hooks/useInputState/useInputState.mjs +9 -3
- package/dist/hooks/useLoading/useLoading.cjs +3 -5
- package/dist/hooks/useLoading/useLoading.d.cts +2 -5
- package/dist/hooks/useLoading/useLoading.d.mts +2 -5
- package/dist/hooks/useLoading/useLoading.mjs +3 -5
- package/dist/hooks/usePreservedReference/usePreservedReference.cjs +1 -0
- package/dist/hooks/usePreservedReference/usePreservedReference.mjs +1 -0
- package/dist/hooks/usePrevious/usePrevious.cjs +1 -0
- package/dist/hooks/usePrevious/usePrevious.mjs +1 -0
- package/dist/hooks/useRefEffect/useRefEffect.cjs +1 -0
- package/dist/hooks/useRefEffect/useRefEffect.mjs +1 -0
- package/dist/hooks/useStorageState/useStorageState.cjs +1 -0
- package/dist/hooks/useStorageState/useStorageState.mjs +1 -0
- package/dist/hooks/useThrottledCallback/useThrottledCallback.cjs +9 -1
- package/dist/hooks/useThrottledCallback/useThrottledCallback.mjs +9 -1
- package/dist/index.cjs +34 -0
- package/dist/index.d.cts +19 -1
- package/dist/index.d.mts +19 -1
- package/dist/index.mjs +18 -1
- package/dist/mobile/hooks/useAvoidKeyboard/index.d.cts +3 -0
- package/dist/mobile/hooks/useAvoidKeyboard/index.d.mts +3 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs +75 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.cts +89 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.mts +89 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs +75 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs +47 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.cts +37 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.mts +37 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs +47 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.cts +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.mts +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs +41 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.cjs +88 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.cts +77 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.mts +77 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.mjs +88 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.cjs +73 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.cts +62 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.mts +62 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.mjs +73 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs +74 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.cts +55 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.mts +55 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs +74 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.cjs +79 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.cts +40 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.mts +40 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.mjs +79 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.cjs +77 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.d.cts +89 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.d.mts +89 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.mjs +77 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs +55 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.d.cts +22 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.d.mts +22 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs +55 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs +49 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.d.cts +23 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.d.mts +23 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs +49 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs +35 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.d.cts +28 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.d.mts +28 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs +35 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs +58 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.d.cts +44 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.d.mts +44 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs +58 -0
- package/dist/mobile/utils/isAndroid/isAndroid.cjs +32 -0
- package/dist/mobile/utils/isAndroid/isAndroid.d.cts +27 -0
- package/dist/mobile/utils/isAndroid/isAndroid.d.mts +27 -0
- package/dist/mobile/utils/isAndroid/isAndroid.mjs +32 -0
- package/dist/mobile/utils/isIOS/isIOS.cjs +37 -0
- package/dist/mobile/utils/isIOS/isIOS.d.cts +30 -0
- package/dist/mobile/utils/isIOS/isIOS.d.mts +30 -0
- package/dist/mobile/utils/isIOS/isIOS.mjs +37 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs +28 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.d.cts +25 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.d.mts +25 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs +28 -0
- package/dist/mobile/utils/isServer/isServer.cjs +24 -0
- package/dist/mobile/utils/isServer/isServer.d.cts +22 -0
- package/dist/mobile/utils/isServer/isServer.d.mts +22 -0
- package/dist/mobile/utils/isServer/isServer.mjs +24 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs +71 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.cts +64 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.mts +64 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs +71 -0
- package/dist/utils/buildContext/buildContext.cjs +1 -0
- package/dist/utils/buildContext/buildContext.mjs +1 -0
- package/package.json +22 -8
package/dist/index.cjs
CHANGED
|
@@ -36,15 +36,43 @@ const require_useThrottle = require("./hooks/useThrottle/useThrottle.cjs");
|
|
|
36
36
|
const require_useThrottledCallback = require("./hooks/useThrottledCallback/useThrottledCallback.cjs");
|
|
37
37
|
const require_useTimeout = require("./hooks/useTimeout/useTimeout.cjs");
|
|
38
38
|
const require_useToggle = require("./hooks/useToggle/useToggle.cjs");
|
|
39
|
+
const require_isServer = require("./mobile/utils/isServer/isServer.cjs");
|
|
40
|
+
const require_getKeyboardHeight = require("./mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs");
|
|
41
|
+
const require_subscribeKeyboardHeight = require("./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs");
|
|
42
|
+
const require_useKeyboardHeight = require("./mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs");
|
|
43
|
+
const require_useAvoidKeyboard = require("./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs");
|
|
44
|
+
const require_disableBodyScrollLock = require("./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs");
|
|
45
|
+
const require_enableBodyScrollLock = require("./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs");
|
|
46
|
+
const require_useBodyScrollLock = require("./mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs");
|
|
47
|
+
const require_useNetworkStatus = require("./mobile/hooks/useNetworkStatus/useNetworkStatus.cjs");
|
|
48
|
+
const require_usePageVisibility = require("./mobile/hooks/usePageVisibility/usePageVisibility.cjs");
|
|
49
|
+
const require_getSafeAreaInset = require("./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs");
|
|
50
|
+
const require_useSafeAreaInset = require("./mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs");
|
|
51
|
+
const require_useScrollDirection = require("./mobile/hooks/useScrollDirection/useScrollDirection.cjs");
|
|
52
|
+
const require_useVisualViewport = require("./mobile/hooks/useVisualViewport/useVisualViewport.cjs");
|
|
53
|
+
const require_isAndroid = require("./mobile/utils/isAndroid/isAndroid.cjs");
|
|
54
|
+
const require_isIOS = require("./mobile/utils/isIOS/isIOS.cjs");
|
|
55
|
+
const require_isKeyboardVisible = require("./mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs");
|
|
39
56
|
const require_buildContext = require("./utils/buildContext/buildContext.cjs");
|
|
40
57
|
const require_mergeProps = require("./utils/mergeProps/mergeProps.cjs");
|
|
41
58
|
exports.ImpressionArea = require_ImpressionArea.ImpressionArea;
|
|
42
59
|
exports.Separated = require_Separated.Separated;
|
|
43
60
|
exports.SwitchCase = require_SwitchCase.SwitchCase;
|
|
44
61
|
exports.buildContext = require_buildContext.buildContext;
|
|
62
|
+
exports.disableBodyScrollLock = require_disableBodyScrollLock.disableBodyScrollLock;
|
|
63
|
+
exports.enableBodyScrollLock = require_enableBodyScrollLock.enableBodyScrollLock;
|
|
64
|
+
exports.getKeyboardHeight = require_getKeyboardHeight.getKeyboardHeight;
|
|
65
|
+
exports.getSafeAreaInset = require_getSafeAreaInset.getSafeAreaInset;
|
|
66
|
+
exports.isAndroid = require_isAndroid.isAndroid;
|
|
67
|
+
exports.isIOS = require_isIOS.isIOS;
|
|
68
|
+
exports.isKeyboardVisible = require_isKeyboardVisible.isKeyboardVisible;
|
|
69
|
+
exports.isServer = require_isServer.isServer;
|
|
45
70
|
exports.mergeProps = require_mergeProps.mergeProps;
|
|
46
71
|
exports.mergeRefs = require_mergeRefs.mergeRefs;
|
|
72
|
+
exports.subscribeKeyboardHeight = require_subscribeKeyboardHeight.subscribeKeyboardHeight;
|
|
47
73
|
exports.useAsyncEffect = require_useAsyncEffect.useAsyncEffect;
|
|
74
|
+
exports.useAvoidKeyboard = require_useAvoidKeyboard.useAvoidKeyboard;
|
|
75
|
+
exports.useBodyScrollLock = require_useBodyScrollLock.useBodyScrollLock;
|
|
48
76
|
exports.useBooleanState = require_useBooleanState.useBooleanState;
|
|
49
77
|
exports.useCallbackOncePerRender = require_useCallbackOncePerRender.useCallbackOncePerRender;
|
|
50
78
|
exports.useConditionalEffect = require_useConditionalEffect.useConditionalEffect;
|
|
@@ -60,15 +88,20 @@ exports.useIntersectionObserver = require_useIntersectionObserver.useIntersectio
|
|
|
60
88
|
exports.useInterval = require_useInterval.useInterval;
|
|
61
89
|
exports.useIsClient = require_useIsClient.useIsClient;
|
|
62
90
|
exports.useIsomorphicLayoutEffect = require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
|
|
91
|
+
exports.useKeyboardHeight = require_useKeyboardHeight.useKeyboardHeight;
|
|
63
92
|
exports.useList = require_useList.useList;
|
|
64
93
|
exports.useLoading = require_useLoading.useLoading;
|
|
65
94
|
exports.useLongPress = require_useLongPress.useLongPress;
|
|
66
95
|
exports.useMap = require_useMap.useMap;
|
|
96
|
+
exports.useNetworkStatus = require_useNetworkStatus.useNetworkStatus;
|
|
67
97
|
exports.useOutsideClickEffect = require_useOutsideClickEffect.useOutsideClickEffect;
|
|
98
|
+
exports.usePageVisibility = require_usePageVisibility.usePageVisibility;
|
|
68
99
|
exports.usePreservedCallback = require_usePreservedCallback.usePreservedCallback;
|
|
69
100
|
exports.usePreservedReference = require_usePreservedReference.usePreservedReference;
|
|
70
101
|
exports.usePrevious = require_usePrevious.usePrevious;
|
|
71
102
|
exports.useRefEffect = require_useRefEffect.useRefEffect;
|
|
103
|
+
exports.useSafeAreaInset = require_useSafeAreaInset.useSafeAreaInset;
|
|
104
|
+
exports.useScrollDirection = require_useScrollDirection.useScrollDirection;
|
|
72
105
|
exports.useSet = require_useSet.useSet;
|
|
73
106
|
exports.useStorageState = require_useStorageState.useStorageState;
|
|
74
107
|
exports.useThrottle = require_useThrottle.useThrottle;
|
|
@@ -76,3 +109,4 @@ exports.useThrottledCallback = require_useThrottledCallback.useThrottledCallback
|
|
|
76
109
|
exports.useTimeout = require_useTimeout.useTimeout;
|
|
77
110
|
exports.useToggle = require_useToggle.useToggle;
|
|
78
111
|
exports.useVisibilityEvent = require_useVisibilityEvent.useVisibilityEvent;
|
|
112
|
+
exports.useVisualViewport = require_useVisualViewport.useVisualViewport;
|
package/dist/index.d.cts
CHANGED
|
@@ -47,10 +47,28 @@ import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledC
|
|
|
47
47
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.cjs";
|
|
48
48
|
import { useToggle } from "./hooks/useToggle/useToggle.cjs";
|
|
49
49
|
import { useVisibilityEvent } from "./hooks/useVisibilityEvent/useVisibilityEvent.cjs";
|
|
50
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs";
|
|
51
|
+
import "./mobile/hooks/useAvoidKeyboard/index.cjs";
|
|
52
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs";
|
|
53
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs";
|
|
54
|
+
import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.cjs";
|
|
55
|
+
import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.cjs";
|
|
56
|
+
import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs";
|
|
57
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs";
|
|
58
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.cjs";
|
|
59
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.cjs";
|
|
60
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs";
|
|
61
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs";
|
|
62
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs";
|
|
63
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.cjs";
|
|
64
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.cjs";
|
|
65
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs";
|
|
66
|
+
import { isServer } from "./mobile/utils/isServer/isServer.cjs";
|
|
67
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs";
|
|
50
68
|
import { buildContext } from "./utils/buildContext/buildContext.cjs";
|
|
51
69
|
import "./utils/buildContext/index.cjs";
|
|
52
70
|
import { mergeProps } from "./utils/mergeProps/mergeProps.cjs";
|
|
53
71
|
import "./utils/mergeProps/index.cjs";
|
|
54
72
|
import { mergeRefs } from "./utils/mergeRefs/mergeRefs.cjs";
|
|
55
73
|
import "./utils/mergeRefs/index.cjs";
|
|
56
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
74
|
+
export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
package/dist/index.d.mts
CHANGED
|
@@ -47,10 +47,28 @@ import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledC
|
|
|
47
47
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.mjs";
|
|
48
48
|
import { useToggle } from "./hooks/useToggle/useToggle.mjs";
|
|
49
49
|
import { useVisibilityEvent } from "./hooks/useVisibilityEvent/useVisibilityEvent.mjs";
|
|
50
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs";
|
|
51
|
+
import "./mobile/hooks/useAvoidKeyboard/index.mjs";
|
|
52
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs";
|
|
53
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
|
|
54
|
+
import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
|
|
55
|
+
import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
|
|
56
|
+
import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
|
|
57
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
|
|
58
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
|
|
59
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
|
|
60
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
|
|
61
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
|
|
62
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs";
|
|
63
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.mjs";
|
|
64
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.mjs";
|
|
65
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs";
|
|
66
|
+
import { isServer } from "./mobile/utils/isServer/isServer.mjs";
|
|
67
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
|
|
50
68
|
import { buildContext } from "./utils/buildContext/buildContext.mjs";
|
|
51
69
|
import "./utils/buildContext/index.mjs";
|
|
52
70
|
import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
|
|
53
71
|
import "./utils/mergeProps/index.mjs";
|
|
54
72
|
import { mergeRefs } from "./utils/mergeRefs/mergeRefs.mjs";
|
|
55
73
|
import "./utils/mergeRefs/index.mjs";
|
|
56
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
74
|
+
export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
package/dist/index.mjs
CHANGED
|
@@ -35,6 +35,23 @@ import { useThrottle } from "./hooks/useThrottle/useThrottle.mjs";
|
|
|
35
35
|
import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledCallback.mjs";
|
|
36
36
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.mjs";
|
|
37
37
|
import { useToggle } from "./hooks/useToggle/useToggle.mjs";
|
|
38
|
+
import { isServer } from "./mobile/utils/isServer/isServer.mjs";
|
|
39
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs";
|
|
40
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
|
|
41
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
|
|
42
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs";
|
|
43
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
|
|
44
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
|
|
45
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs";
|
|
46
|
+
import { useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
|
|
47
|
+
import { usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
|
|
48
|
+
import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
|
|
49
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
|
|
50
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
|
|
51
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
|
|
52
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.mjs";
|
|
53
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.mjs";
|
|
54
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs";
|
|
38
55
|
import { buildContext } from "./utils/buildContext/buildContext.mjs";
|
|
39
56
|
import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
|
|
40
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
57
|
+
export { ImpressionArea, Separated, SwitchCase, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_useKeyboardHeight = require("../useKeyboardHeight/useKeyboardHeight.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
|
|
5
|
+
/**
|
|
6
|
+
* @description
|
|
7
|
+
* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
|
|
8
|
+
* It returns a CSS style that can be applied to `position: fixed` elements
|
|
9
|
+
* to smoothly move them above the keyboard when it appears.
|
|
10
|
+
*
|
|
11
|
+
* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
|
|
12
|
+
* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
|
|
13
|
+
* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
|
|
14
|
+
* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
|
|
15
|
+
* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
|
|
16
|
+
*
|
|
17
|
+
* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
|
|
18
|
+
* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* function FixedBottomCTA() {
|
|
22
|
+
* const { style } = useAvoidKeyboard();
|
|
23
|
+
*
|
|
24
|
+
* return (
|
|
25
|
+
* <div
|
|
26
|
+
* style={{
|
|
27
|
+
* position: 'fixed',
|
|
28
|
+
* bottom: 0,
|
|
29
|
+
* left: 0,
|
|
30
|
+
* right: 0,
|
|
31
|
+
* ...style,
|
|
32
|
+
* }}
|
|
33
|
+
* >
|
|
34
|
+
* <button>Submit</button>
|
|
35
|
+
* </div>
|
|
36
|
+
* );
|
|
37
|
+
* }
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* // With safe area bottom offset (e.g., for iPhone home indicator)
|
|
41
|
+
* function FixedBottomCTA() {
|
|
42
|
+
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
|
|
43
|
+
*
|
|
44
|
+
* return (
|
|
45
|
+
* <div
|
|
46
|
+
* style={{
|
|
47
|
+
* position: 'fixed',
|
|
48
|
+
* bottom: 0,
|
|
49
|
+
* left: 0,
|
|
50
|
+
* right: 0,
|
|
51
|
+
* ...style,
|
|
52
|
+
* }}
|
|
53
|
+
* >
|
|
54
|
+
* <button>Submit</button>
|
|
55
|
+
* </div>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
*/
|
|
59
|
+
function useAvoidKeyboard(options = {}) {
|
|
60
|
+
const { safeAreaBottom = 0, transitionDuration = 200, transitionTimingFunction = "ease-out", immediate = true } = options;
|
|
61
|
+
const { keyboardHeight } = require_useKeyboardHeight.useKeyboardHeight({ immediate });
|
|
62
|
+
return { style: (0, react.useMemo)(() => {
|
|
63
|
+
return {
|
|
64
|
+
transform: `translateY(${keyboardHeight > 0 ? -(keyboardHeight + safeAreaBottom) : 0}px)`,
|
|
65
|
+
transition: `transform ${transitionDuration}ms ${transitionTimingFunction}`
|
|
66
|
+
};
|
|
67
|
+
}, [
|
|
68
|
+
keyboardHeight,
|
|
69
|
+
safeAreaBottom,
|
|
70
|
+
transitionDuration,
|
|
71
|
+
transitionTimingFunction
|
|
72
|
+
]) };
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
exports.useAvoidKeyboard = useAvoidKeyboard;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
|
|
2
|
+
import { CSSProperties } from "react";
|
|
3
|
+
//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
|
|
4
|
+
type UseAvoidKeyboardOptions = {
|
|
5
|
+
/**
|
|
6
|
+
* Base bottom offset in pixels when keyboard is hidden.
|
|
7
|
+
* @default 0
|
|
8
|
+
*/
|
|
9
|
+
safeAreaBottom?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Transition duration in milliseconds for smooth animation.
|
|
12
|
+
* @default 200
|
|
13
|
+
*/
|
|
14
|
+
transitionDuration?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Transition timing function for the animation.
|
|
17
|
+
* @default 'ease-out'
|
|
18
|
+
*/
|
|
19
|
+
transitionTimingFunction?: CSSProperties['transitionTimingFunction'];
|
|
20
|
+
/**
|
|
21
|
+
* If true, the hook will get the initial keyboard height on mount.
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
immediate?: boolean;
|
|
25
|
+
};
|
|
26
|
+
type UseAvoidKeyboardResult = {
|
|
27
|
+
/**
|
|
28
|
+
* CSS style object to apply to the fixed bottom element.
|
|
29
|
+
* Contains transform and transition properties.
|
|
30
|
+
*/
|
|
31
|
+
style: CSSProperties;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* @description
|
|
35
|
+
* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
|
|
36
|
+
* It returns a CSS style that can be applied to `position: fixed` elements
|
|
37
|
+
* to smoothly move them above the keyboard when it appears.
|
|
38
|
+
*
|
|
39
|
+
* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
|
|
40
|
+
* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
|
|
41
|
+
* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
|
|
42
|
+
* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
|
|
43
|
+
* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
|
|
44
|
+
*
|
|
45
|
+
* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
|
|
46
|
+
* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* function FixedBottomCTA() {
|
|
50
|
+
* const { style } = useAvoidKeyboard();
|
|
51
|
+
*
|
|
52
|
+
* return (
|
|
53
|
+
* <div
|
|
54
|
+
* style={{
|
|
55
|
+
* position: 'fixed',
|
|
56
|
+
* bottom: 0,
|
|
57
|
+
* left: 0,
|
|
58
|
+
* right: 0,
|
|
59
|
+
* ...style,
|
|
60
|
+
* }}
|
|
61
|
+
* >
|
|
62
|
+
* <button>Submit</button>
|
|
63
|
+
* </div>
|
|
64
|
+
* );
|
|
65
|
+
* }
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // With safe area bottom offset (e.g., for iPhone home indicator)
|
|
69
|
+
* function FixedBottomCTA() {
|
|
70
|
+
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
|
|
71
|
+
*
|
|
72
|
+
* return (
|
|
73
|
+
* <div
|
|
74
|
+
* style={{
|
|
75
|
+
* position: 'fixed',
|
|
76
|
+
* bottom: 0,
|
|
77
|
+
* left: 0,
|
|
78
|
+
* right: 0,
|
|
79
|
+
* ...style,
|
|
80
|
+
* }}
|
|
81
|
+
* >
|
|
82
|
+
* <button>Submit</button>
|
|
83
|
+
* </div>
|
|
84
|
+
* );
|
|
85
|
+
* }
|
|
86
|
+
*/
|
|
87
|
+
declare function useAvoidKeyboard(options?: UseAvoidKeyboardOptions): UseAvoidKeyboardResult;
|
|
88
|
+
//#endregion
|
|
89
|
+
export { useAvoidKeyboard };
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
|
|
2
|
+
import { CSSProperties } from "react";
|
|
3
|
+
//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
|
|
4
|
+
type UseAvoidKeyboardOptions = {
|
|
5
|
+
/**
|
|
6
|
+
* Base bottom offset in pixels when keyboard is hidden.
|
|
7
|
+
* @default 0
|
|
8
|
+
*/
|
|
9
|
+
safeAreaBottom?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Transition duration in milliseconds for smooth animation.
|
|
12
|
+
* @default 200
|
|
13
|
+
*/
|
|
14
|
+
transitionDuration?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Transition timing function for the animation.
|
|
17
|
+
* @default 'ease-out'
|
|
18
|
+
*/
|
|
19
|
+
transitionTimingFunction?: CSSProperties['transitionTimingFunction'];
|
|
20
|
+
/**
|
|
21
|
+
* If true, the hook will get the initial keyboard height on mount.
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
immediate?: boolean;
|
|
25
|
+
};
|
|
26
|
+
type UseAvoidKeyboardResult = {
|
|
27
|
+
/**
|
|
28
|
+
* CSS style object to apply to the fixed bottom element.
|
|
29
|
+
* Contains transform and transition properties.
|
|
30
|
+
*/
|
|
31
|
+
style: CSSProperties;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* @description
|
|
35
|
+
* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
|
|
36
|
+
* It returns a CSS style that can be applied to `position: fixed` elements
|
|
37
|
+
* to smoothly move them above the keyboard when it appears.
|
|
38
|
+
*
|
|
39
|
+
* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
|
|
40
|
+
* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
|
|
41
|
+
* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
|
|
42
|
+
* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
|
|
43
|
+
* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
|
|
44
|
+
*
|
|
45
|
+
* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
|
|
46
|
+
* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* function FixedBottomCTA() {
|
|
50
|
+
* const { style } = useAvoidKeyboard();
|
|
51
|
+
*
|
|
52
|
+
* return (
|
|
53
|
+
* <div
|
|
54
|
+
* style={{
|
|
55
|
+
* position: 'fixed',
|
|
56
|
+
* bottom: 0,
|
|
57
|
+
* left: 0,
|
|
58
|
+
* right: 0,
|
|
59
|
+
* ...style,
|
|
60
|
+
* }}
|
|
61
|
+
* >
|
|
62
|
+
* <button>Submit</button>
|
|
63
|
+
* </div>
|
|
64
|
+
* );
|
|
65
|
+
* }
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // With safe area bottom offset (e.g., for iPhone home indicator)
|
|
69
|
+
* function FixedBottomCTA() {
|
|
70
|
+
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
|
|
71
|
+
*
|
|
72
|
+
* return (
|
|
73
|
+
* <div
|
|
74
|
+
* style={{
|
|
75
|
+
* position: 'fixed',
|
|
76
|
+
* bottom: 0,
|
|
77
|
+
* left: 0,
|
|
78
|
+
* right: 0,
|
|
79
|
+
* ...style,
|
|
80
|
+
* }}
|
|
81
|
+
* >
|
|
82
|
+
* <button>Submit</button>
|
|
83
|
+
* </div>
|
|
84
|
+
* );
|
|
85
|
+
* }
|
|
86
|
+
*/
|
|
87
|
+
declare function useAvoidKeyboard(options?: UseAvoidKeyboardOptions): UseAvoidKeyboardResult;
|
|
88
|
+
//#endregion
|
|
89
|
+
export { useAvoidKeyboard };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useKeyboardHeight } from "../useKeyboardHeight/useKeyboardHeight.mjs";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
|
|
5
|
+
/**
|
|
6
|
+
* @description
|
|
7
|
+
* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
|
|
8
|
+
* It returns a CSS style that can be applied to `position: fixed` elements
|
|
9
|
+
* to smoothly move them above the keyboard when it appears.
|
|
10
|
+
*
|
|
11
|
+
* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
|
|
12
|
+
* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
|
|
13
|
+
* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
|
|
14
|
+
* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
|
|
15
|
+
* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
|
|
16
|
+
*
|
|
17
|
+
* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
|
|
18
|
+
* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* function FixedBottomCTA() {
|
|
22
|
+
* const { style } = useAvoidKeyboard();
|
|
23
|
+
*
|
|
24
|
+
* return (
|
|
25
|
+
* <div
|
|
26
|
+
* style={{
|
|
27
|
+
* position: 'fixed',
|
|
28
|
+
* bottom: 0,
|
|
29
|
+
* left: 0,
|
|
30
|
+
* right: 0,
|
|
31
|
+
* ...style,
|
|
32
|
+
* }}
|
|
33
|
+
* >
|
|
34
|
+
* <button>Submit</button>
|
|
35
|
+
* </div>
|
|
36
|
+
* );
|
|
37
|
+
* }
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* // With safe area bottom offset (e.g., for iPhone home indicator)
|
|
41
|
+
* function FixedBottomCTA() {
|
|
42
|
+
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
|
|
43
|
+
*
|
|
44
|
+
* return (
|
|
45
|
+
* <div
|
|
46
|
+
* style={{
|
|
47
|
+
* position: 'fixed',
|
|
48
|
+
* bottom: 0,
|
|
49
|
+
* left: 0,
|
|
50
|
+
* right: 0,
|
|
51
|
+
* ...style,
|
|
52
|
+
* }}
|
|
53
|
+
* >
|
|
54
|
+
* <button>Submit</button>
|
|
55
|
+
* </div>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
*/
|
|
59
|
+
function useAvoidKeyboard(options = {}) {
|
|
60
|
+
const { safeAreaBottom = 0, transitionDuration = 200, transitionTimingFunction = "ease-out", immediate = true } = options;
|
|
61
|
+
const { keyboardHeight } = useKeyboardHeight({ immediate });
|
|
62
|
+
return { style: useMemo(() => {
|
|
63
|
+
return {
|
|
64
|
+
transform: `translateY(${keyboardHeight > 0 ? -(keyboardHeight + safeAreaBottom) : 0}px)`,
|
|
65
|
+
transition: `transform ${transitionDuration}ms ${transitionTimingFunction}`
|
|
66
|
+
};
|
|
67
|
+
}, [
|
|
68
|
+
keyboardHeight,
|
|
69
|
+
safeAreaBottom,
|
|
70
|
+
transitionDuration,
|
|
71
|
+
transitionTimingFunction
|
|
72
|
+
]) };
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
export { useAvoidKeyboard };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_disableBodyScrollLock = require("../../utils/disableBodyScrollLock/disableBodyScrollLock.cjs");
|
|
3
|
+
const require_enableBodyScrollLock = require("../../utils/enableBodyScrollLock/enableBodyScrollLock.cjs");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
|
|
6
|
+
/**
|
|
7
|
+
* @description
|
|
8
|
+
* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
|
|
9
|
+
* It automatically locks on mount and unlocks on unmount.
|
|
10
|
+
*
|
|
11
|
+
* **Note:** For multiple overlapping modals, use a single lock at the parent level.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* function Modal() {
|
|
15
|
+
* useBodyScrollLock();
|
|
16
|
+
* return <div className="modal">Modal content</div>;
|
|
17
|
+
* }
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Multiple modals - single lock pattern
|
|
21
|
+
* function BodyScrollLock() {
|
|
22
|
+
* useBodyScrollLock();
|
|
23
|
+
* return null;
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* function App() {
|
|
27
|
+
* const hasModal = showModal1 || showModal2;
|
|
28
|
+
*
|
|
29
|
+
* return (
|
|
30
|
+
* <>
|
|
31
|
+
* {hasModal && <BodyScrollLock />}
|
|
32
|
+
* {showModal1 && <Modal1 />}
|
|
33
|
+
* {showModal2 && <Modal2 />}
|
|
34
|
+
* </>
|
|
35
|
+
* );
|
|
36
|
+
* }
|
|
37
|
+
*/
|
|
38
|
+
function useBodyScrollLock() {
|
|
39
|
+
(0, react.useEffect)(() => {
|
|
40
|
+
require_enableBodyScrollLock.enableBodyScrollLock();
|
|
41
|
+
return () => {
|
|
42
|
+
require_disableBodyScrollLock.disableBodyScrollLock();
|
|
43
|
+
};
|
|
44
|
+
}, []);
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
exports.useBodyScrollLock = useBodyScrollLock;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* @description
|
|
5
|
+
* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
|
|
6
|
+
* It automatically locks on mount and unlocks on unmount.
|
|
7
|
+
*
|
|
8
|
+
* **Note:** For multiple overlapping modals, use a single lock at the parent level.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* function Modal() {
|
|
12
|
+
* useBodyScrollLock();
|
|
13
|
+
* return <div className="modal">Modal content</div>;
|
|
14
|
+
* }
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // Multiple modals - single lock pattern
|
|
18
|
+
* function BodyScrollLock() {
|
|
19
|
+
* useBodyScrollLock();
|
|
20
|
+
* return null;
|
|
21
|
+
* }
|
|
22
|
+
*
|
|
23
|
+
* function App() {
|
|
24
|
+
* const hasModal = showModal1 || showModal2;
|
|
25
|
+
*
|
|
26
|
+
* return (
|
|
27
|
+
* <>
|
|
28
|
+
* {hasModal && <BodyScrollLock />}
|
|
29
|
+
* {showModal1 && <Modal1 />}
|
|
30
|
+
* {showModal2 && <Modal2 />}
|
|
31
|
+
* </>
|
|
32
|
+
* );
|
|
33
|
+
* }
|
|
34
|
+
*/
|
|
35
|
+
declare function useBodyScrollLock(): void;
|
|
36
|
+
//#endregion
|
|
37
|
+
export { useBodyScrollLock };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* @description
|
|
5
|
+
* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
|
|
6
|
+
* It automatically locks on mount and unlocks on unmount.
|
|
7
|
+
*
|
|
8
|
+
* **Note:** For multiple overlapping modals, use a single lock at the parent level.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* function Modal() {
|
|
12
|
+
* useBodyScrollLock();
|
|
13
|
+
* return <div className="modal">Modal content</div>;
|
|
14
|
+
* }
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // Multiple modals - single lock pattern
|
|
18
|
+
* function BodyScrollLock() {
|
|
19
|
+
* useBodyScrollLock();
|
|
20
|
+
* return null;
|
|
21
|
+
* }
|
|
22
|
+
*
|
|
23
|
+
* function App() {
|
|
24
|
+
* const hasModal = showModal1 || showModal2;
|
|
25
|
+
*
|
|
26
|
+
* return (
|
|
27
|
+
* <>
|
|
28
|
+
* {hasModal && <BodyScrollLock />}
|
|
29
|
+
* {showModal1 && <Modal1 />}
|
|
30
|
+
* {showModal2 && <Modal2 />}
|
|
31
|
+
* </>
|
|
32
|
+
* );
|
|
33
|
+
* }
|
|
34
|
+
*/
|
|
35
|
+
declare function useBodyScrollLock(): void;
|
|
36
|
+
//#endregion
|
|
37
|
+
export { useBodyScrollLock };
|