react-native-keyboard-controller 1.20.0 → 1.20.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/android/src/main/java/com/reactnativekeyboardcontroller/constants/UIThread.kt +9 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt +3 -2
- package/ios/views/KeyboardExtenderContainerView.swift +4 -2
- package/lib/commonjs/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.js +2 -2
- package/lib/commonjs/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.js.map +1 -1
- package/lib/module/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.js +2 -2
- package/lib/module/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.js.map +1 -1
- package/package.json +1 -1
- package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts +2 -2
|
@@ -14,6 +14,7 @@ import com.facebook.react.uimanager.ThemedReactContext
|
|
|
14
14
|
import com.facebook.react.uimanager.UIManagerHelper
|
|
15
15
|
import com.facebook.react.views.view.ReactViewGroup
|
|
16
16
|
import com.reactnativekeyboardcontroller.constants.Keyboard
|
|
17
|
+
import com.reactnativekeyboardcontroller.constants.UIThread
|
|
17
18
|
import com.reactnativekeyboardcontroller.events.KeyboardTransitionEvent
|
|
18
19
|
import com.reactnativekeyboardcontroller.extensions.appearance
|
|
19
20
|
import com.reactnativekeyboardcontroller.extensions.dispatchEvent
|
|
@@ -334,8 +335,8 @@ class KeyboardAnimationCallback(
|
|
|
334
335
|
|
|
335
336
|
if (isKeyboardInteractive) {
|
|
336
337
|
// in case of interactive keyboard we can not read keyboard frame straight away
|
|
337
|
-
// (because we'll always read `0`), so we are posting runnable to the main thread
|
|
338
|
-
view.
|
|
338
|
+
// (because we'll always read `0`), so we are posting runnable to the next frame on the main thread
|
|
339
|
+
view.postDelayed(runnable, UIThread.NEXT_FRAME)
|
|
339
340
|
} else {
|
|
340
341
|
runnable.run()
|
|
341
342
|
}
|
|
@@ -41,7 +41,7 @@ private class BaseContainerView: UIInputView {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
func setupContainerSpecifics() {
|
|
44
|
-
|
|
44
|
+
updateContentFrame(desiredHeight: calculateDesiredHeight())
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
func calculateDesiredHeight() -> CGFloat {
|
|
@@ -54,7 +54,7 @@ private class BaseContainerView: UIInputView {
|
|
|
54
54
|
|
|
55
55
|
let desiredHeight = calculateDesiredHeight()
|
|
56
56
|
|
|
57
|
-
if frame.height
|
|
57
|
+
if abs(frame.height - desiredHeight) > 0.001 {
|
|
58
58
|
frame.size.height = desiredHeight
|
|
59
59
|
|
|
60
60
|
updateContentFrame(desiredHeight: desiredHeight)
|
|
@@ -85,6 +85,7 @@ private class ModernContainerView: BaseContainerView {
|
|
|
85
85
|
|
|
86
86
|
override func setupContainerSpecifics() {
|
|
87
87
|
setupVisualEffect()
|
|
88
|
+
super.setupContainerSpecifics()
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
private func setupVisualEffect() {
|
|
@@ -128,6 +129,7 @@ private class ModernContainerView: BaseContainerView {
|
|
|
128
129
|
private class LegacyContainerView: BaseContainerView {
|
|
129
130
|
override func setupContainerSpecifics() {
|
|
130
131
|
addSubview(contentView)
|
|
132
|
+
super.setupContainerSpecifics()
|
|
131
133
|
}
|
|
132
134
|
|
|
133
135
|
override func updateContentFrame(desiredHeight _: CGFloat) {
|
|
@@ -73,8 +73,8 @@ const useSmoothKeyboardHandler = (handler, deps) => {
|
|
|
73
73
|
persistedHeight.value = height.value;
|
|
74
74
|
}
|
|
75
75
|
},
|
|
76
|
-
//
|
|
77
|
-
deps);
|
|
76
|
+
// create shallow copy (if deps specified) since `useAnimatedReaction` modifies them
|
|
77
|
+
deps ? [...deps] : deps);
|
|
78
78
|
(0, _hooks.useKeyboardHandler)({
|
|
79
79
|
onStart: e => {
|
|
80
80
|
"worklet";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_hooks","IS_ANDROID_ELEVEN_OR_HIGHER","Platform","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","Easing","bezier","useSmoothKeyboardHandler","handler","deps","target","useSharedValue","height","persistedHeight","animatedKeyboardHeight","useAnimatedReaction","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","useKeyboardHandler","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","withTiming","_handler$onMove2","_handler$onEnd3","exports"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation.\n *\n * @param handler - Object containing keyboard event handlers.\n * @param [deps] - Dependencies array for the effect.\n * @example\n * ```ts\n * useSmoothKeyboardHandler(\n * {\n * onStart: (e) => {\n * \"worklet\";\n *\n * // your handler for keyboard start\n * },\n * },\n * [],\n * );\n * ```\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n // eslint-disable-next-line react-compiler/react-compiler\n persistedHeight.value = height.value;\n }\n },\n //
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_hooks","IS_ANDROID_ELEVEN_OR_HIGHER","Platform","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","Easing","bezier","useSmoothKeyboardHandler","handler","deps","target","useSharedValue","height","persistedHeight","animatedKeyboardHeight","useAnimatedReaction","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","useKeyboardHandler","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","withTiming","_handler$onMove2","_handler$onEnd3","exports"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation.\n *\n * @param handler - Object containing keyboard event handlers.\n * @param [deps] - Dependencies array for the effect.\n * @example\n * ```ts\n * useSmoothKeyboardHandler(\n * {\n * onStart: (e) => {\n * \"worklet\";\n *\n * // your handler for keyboard start\n * },\n * },\n * [],\n * );\n * ```\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n // eslint-disable-next-line react-compiler/react-compiler\n persistedHeight.value = height.value;\n }\n },\n // create shallow copy (if deps specified) since `useAnimatedReaction` modifies them\n deps ? [...deps] : deps,\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n height.value = e.height;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.({\n ...e,\n duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS\n ? e.duration\n : TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n });\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n },\n },\n deps,\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -67,8 +67,8 @@ export const useSmoothKeyboardHandler = (handler, deps) => {
|
|
|
67
67
|
persistedHeight.value = height.value;
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
|
-
//
|
|
71
|
-
deps);
|
|
70
|
+
// create shallow copy (if deps specified) since `useAnimatedReaction` modifies them
|
|
71
|
+
deps ? [...deps] : deps);
|
|
72
72
|
useKeyboardHandler({
|
|
73
73
|
onStart: e => {
|
|
74
74
|
"worklet";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Platform","Easing","useAnimatedReaction","useSharedValue","withTiming","useKeyboardHandler","IS_ANDROID_ELEVEN_OR_HIGHER","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","bezier","useSmoothKeyboardHandler","handler","deps","target","height","persistedHeight","animatedKeyboardHeight","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","_handler$onMove2","_handler$onEnd3"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation.\n *\n * @param handler - Object containing keyboard event handlers.\n * @param [deps] - Dependencies array for the effect.\n * @example\n * ```ts\n * useSmoothKeyboardHandler(\n * {\n * onStart: (e) => {\n * \"worklet\";\n *\n * // your handler for keyboard start\n * },\n * },\n * [],\n * );\n * ```\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n // eslint-disable-next-line react-compiler/react-compiler\n persistedHeight.value = height.value;\n }\n },\n //
|
|
1
|
+
{"version":3,"names":["Platform","Easing","useAnimatedReaction","useSharedValue","withTiming","useKeyboardHandler","IS_ANDROID_ELEVEN_OR_HIGHER","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","bezier","useSmoothKeyboardHandler","handler","deps","target","height","persistedHeight","animatedKeyboardHeight","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","_handler$onMove2","_handler$onEnd3"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation.\n *\n * @param handler - Object containing keyboard event handlers.\n * @param [deps] - Dependencies array for the effect.\n * @example\n * ```ts\n * useSmoothKeyboardHandler(\n * {\n * onStart: (e) => {\n * \"worklet\";\n *\n * // your handler for keyboard start\n * },\n * },\n * [],\n * );\n * ```\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n // eslint-disable-next-line react-compiler/react-compiler\n persistedHeight.value = height.value;\n }\n },\n // create shallow copy (if deps specified) since `useAnimatedReaction` modifies them\n deps ? [...deps] : deps,\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n height.value = e.height;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.({\n ...e,\n duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS\n ? e.duration\n : TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n });\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n },\n },\n deps,\n );\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SACEC,MAAM,EACNC,mBAAmB,EACnBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,MAAMC,2BAA2B,GAC/BN,QAAQ,CAACO,EAAE,KAAK,SAAS,IAAIP,QAAQ,CAACQ,OAAO,IAAI,EAAE;AACrD;AACA,MAAMC,kCAAkC,GACtCH,2BAA2B,IAAIN,QAAQ,CAACO,EAAE,KAAK,KAAK;AACtD;AACA;AACA;AACA,MAAMG,8BAA8B,GAAG;EACrCC,QAAQ,EAAE,GAAG;EACbC,MAAM,EAAEX,MAAM,CAACY,MAAM,CACnB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,aACF;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAmD,GAAGA,CACjEC,OAAO,EACPC,IAAI,KACD;EACH,MAAMC,MAAM,GAAGd,cAAc,CAAC,CAAC,CAAC,CAAC;EACjC,MAAMe,MAAM,GAAGf,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMgB,eAAe,GAAGhB,cAAc,CAAC,CAAC,CAAC;EACzC,MAAMiB,sBAAsB,GAAGjB,cAAc,CAAC,CAAC,CAAC;EAEhDD,mBAAmB,CACjB,MAAM;IACJ,IAAIO,kCAAkC,EAAE;MACtC;IACF;IACA,IAAIU,eAAe,CAACE,KAAK,KAAK,CAAC,EAAE;MAC/B;IACF;IACA,MAAMC,KAAK,GAAG;MACZ;MACAX,QAAQ,EAAED,8BAA8B,CAACC,QAAQ;MACjDM,MAAM,EAAEA,MAAM,CAACI,KAAK;MACpBH,MAAM,EAAEE,sBAAsB,CAACC,KAAK;MACpCE,QAAQ,EAAEH,sBAAsB,CAACC,KAAK,GAAGF,eAAe,CAACE;IAC3D,CAAC;IAED,OAAOC,KAAK;EACd,CAAC,EACAE,GAAG,IAAK;IAAA,IAAAC,eAAA;IACP,IAAI,CAACD,GAAG,EAAE;MACR;IACF;IACA,CAAAC,eAAA,GAAAV,OAAO,CAACW,MAAM,cAAAD,eAAA,eAAdA,eAAA,CAAAE,IAAA,CAAAZ,OAAO,EAAUS,GAAG,CAAC;;IAErB;IACA,IAAIA,GAAG,CAACN,MAAM,KAAKA,MAAM,CAACG,KAAK,EAAE;MAAA,IAAAO,cAAA;MAC/B,CAAAA,cAAA,GAAAb,OAAO,CAACc,KAAK,cAAAD,cAAA,eAAbA,cAAA,CAAAD,IAAA,CAAAZ,OAAO,EAASS,GAAG,CAAC;MACpB;MACAL,eAAe,CAACE,KAAK,GAAGH,MAAM,CAACG,KAAK;IACtC;EACF,CAAC;EACD;EACAL,IAAI,GAAG,CAAC,GAAGA,IAAI,CAAC,GAAGA,IACrB,CAAC;EAEDX,kBAAkB,CAChB;IACEyB,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET;MACA;MAAA,IAAAC,iBAAA;MACA,IACE,CAACvB,kCAAkC,IACnCsB,CAAC,CAACb,MAAM,KAAKC,eAAe,CAACE,KAAK,EAClC;QAAA,IAAAY,gBAAA,EAAAC,eAAA;QACA,CAAAD,gBAAA,GAAAlB,OAAO,CAACe,OAAO,cAAAG,gBAAA,eAAfA,gBAAA,CAAAN,IAAA,CAAAZ,OAAO,EAAWgB,CAAC,CAAC;QACpB,CAAAG,eAAA,GAAAnB,OAAO,CAACc,KAAK,cAAAK,eAAA,eAAbA,eAAA,CAAAP,IAAA,CAAAZ,OAAO,EAASgB,CAAC,CAAC;QAElB;MACF;MAEAd,MAAM,CAACI,KAAK,GAAGU,CAAC,CAACd,MAAM;MACvBC,MAAM,CAACG,KAAK,GAAGU,CAAC,CAACb,MAAM;MAEvB,IAAIa,CAAC,CAACb,MAAM,GAAG,CAAC,EAAE;QAChBC,eAAe,CAACE,KAAK,GAAGU,CAAC,CAACb,MAAM;MAClC;MACA;MACA;MACA;MACA,IAAI,CAACT,kCAAkC,EAAE;QACvCW,sBAAsB,CAACC,KAAK,GAAGjB,UAAU,CACvC2B,CAAC,CAACb,MAAM,EACRR,8BACF,CAAC;MACH;MAEA,CAAAsB,iBAAA,GAAAjB,OAAO,CAACe,OAAO,cAAAE,iBAAA,eAAfA,iBAAA,CAAAL,IAAA,CAAAZ,OAAO,EAAW;QAChB,GAAGgB,CAAC;QACJpB,QAAQ,EAAEF,kCAAkC,GACxCsB,CAAC,CAACpB,QAAQ,GACVD,8BAA8B,CAACC;MACrC,CAAC,CAAC;IACJ,CAAC;IACDe,MAAM,EAAGK,CAAC,IAAK;MACb,SAAS;;MAET,IAAItB,kCAAkC,EAAE;QAAA,IAAA0B,gBAAA;QACtC,CAAAA,gBAAA,GAAApB,OAAO,CAACW,MAAM,cAAAS,gBAAA,eAAdA,gBAAA,CAAAR,IAAA,CAAAZ,OAAO,EAAUgB,CAAC,CAAC;MACrB;IACF,CAAC;IACDF,KAAK,EAAGE,CAAC,IAAK;MACZ,SAAS;;MAET,IAAItB,kCAAkC,EAAE;QAAA,IAAA2B,eAAA;QACtC,CAAAA,eAAA,GAAArB,OAAO,CAACc,KAAK,cAAAO,eAAA,eAAbA,eAAA,CAAAT,IAAA,CAAAZ,OAAO,EAASgB,CAAC,CAAC;MACpB;IACF;EACF,CAAC,EACDf,IACF,CAAC;AACH,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -86,8 +86,8 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
|
|
|
86
86
|
persistedHeight.value = height.value;
|
|
87
87
|
}
|
|
88
88
|
},
|
|
89
|
-
//
|
|
90
|
-
deps
|
|
89
|
+
// create shallow copy (if deps specified) since `useAnimatedReaction` modifies them
|
|
90
|
+
deps ? [...deps] : deps,
|
|
91
91
|
);
|
|
92
92
|
|
|
93
93
|
useKeyboardHandler(
|