@react-native-ohos/react-native-keyboard-controller 1.16.6-rc.1 → 1.17.0-beta.2

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -1,133 +1,133 @@
-import { Platform } from "react-native";
-import {
-  Easing,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-
-import { useKeyboardHandler } from "../../hooks";
-
-const IS_ANDROID_ELEVEN_OR_HIGHER =
-  Platform.OS === "android" && Platform.Version >= 30;
-// on these platforms keyboard transitions will be smooth
-const IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =
-  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === "ios" || Platform.OS as string === 'harmony';
-// on Android Telegram is not using androidx.core values and uses custom interpolation
-// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
-// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
-const TELEGRAM_ANDROID_TIMING_CONFIG = {
-  duration: 250,
-  easing: Easing.bezier(
-    0.19919472913616398,
-    0.010644531250000006,
-    0.27920937042459737,
-    0.91025390625,
-  ),
-};
-
-/**
- * Hook that uses default transitions for iOS and Android > 11, and uses
- * custom interpolation on Android < 11 to achieve more smooth animation
- */
-export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
-  handler,
-  deps,
-) => {
-  const target = useSharedValue(-1);
-  const height = useSharedValue(0);
-  const persistedHeight = useSharedValue(0);
-  const animatedKeyboardHeight = useSharedValue(0);
-
-  useAnimatedReaction(
-    () => {
-      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
-        return;
-      }
-      if (persistedHeight.value === 0) {
-        return;
-      }
-      const event = {
-        // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
-        duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
-        target: target.value,
-        height: animatedKeyboardHeight.value,
-        progress: animatedKeyboardHeight.value / persistedHeight.value,
-      };
-      return event;
-    },
-    (evt) => {
-      if (!evt) {
-        return;
-      }
-      handler.onMove?.(evt);
-
-      // dispatch `onEnd`
-      if (evt.height === height.value) {
-        handler.onEnd?.(evt);
-        // eslint-disable-next-line react-compiler/react-compiler
-        persistedHeight.value = height.value;
-      }
-    },
-    // REA uses own version of `DependencyList` and it's not compatible with the same type from React
-    deps as unknown[],
-  );
-
-  useKeyboardHandler(
-    {
-      onStart: (e) => {
-        "worklet";
-
-        // immediately dispatch onStart/onEnd events if onStart dispatched with the same height
-        // and don't wait for animation 250ms
-        if (
-          !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&
-          e.height === persistedHeight.value
-        ) {
-          handler.onStart?.(e);
-          handler.onEnd?.(e);
-
-          return;
-        }
-
-        target.value = e.target;
-        height.value = e.height;
-
-        if (e.height > 0) {
-          persistedHeight.value = e.height;
-        }
-        // if we are running on Android < 9, then we are using custom interpolation
-        // to achieve smoother animation and use `animatedKeyboardHeight` as animation
-        // driver
-        if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
-          animatedKeyboardHeight.value = withTiming(
-            e.height,
-            TELEGRAM_ANDROID_TIMING_CONFIG,
-          );
-        }
-
-        handler.onStart?.({
-          ...e,
-          duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS
-            ? e.duration
-            : TELEGRAM_ANDROID_TIMING_CONFIG.duration,
-        });
-      },
-      onMove: (e) => {
-        "worklet";
-
-        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
-          handler.onMove?.(e);
-        }
-      },
-      onEnd: (e) => {
-        "worklet";
-
-        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
-          handler.onEnd?.(e);
-        }
-      },
-    },
-    deps,
-  );
-};
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useKeyboardHandler } from "../../hooks";
+
+const IS_ANDROID_ELEVEN_OR_HIGHER =
+  Platform.OS === "android" && Platform.Version >= 30;
+// on these platforms keyboard transitions will be smooth
+const IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =
+  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === "ios" || Platform.OS as string === 'harmony';
+// on Android Telegram is not using androidx.core values and uses custom interpolation
+// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
+// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+const TELEGRAM_ANDROID_TIMING_CONFIG = {
+  duration: 250,
+  easing: Easing.bezier(
+    0.19919472913616398,
+    0.010644531250000006,
+    0.27920937042459737,
+    0.91025390625,
+  ),
+};
+
+/**
+ * Hook that uses default transitions for iOS and Android > 11, and uses
+ * custom interpolation on Android < 11 to achieve more smooth animation
+ */
+export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
+  handler,
+  deps,
+) => {
+  const target = useSharedValue(-1);
+  const height = useSharedValue(0);
+  const persistedHeight = useSharedValue(0);
+  const animatedKeyboardHeight = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
+      if (persistedHeight.value === 0) {
+        return;
+      }
+      const event = {
+        // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
+        duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        target: target.value,
+        height: animatedKeyboardHeight.value,
+        progress: animatedKeyboardHeight.value / persistedHeight.value,
+      };
+      return event;
+    },
+    (evt) => {
+      if (!evt) {
+        return;
+      }
+      handler.onMove?.(evt);
+
+      // dispatch `onEnd`
+      if (evt.height === height.value) {
+        handler.onEnd?.(evt);
+        // eslint-disable-next-line react-compiler/react-compiler
+        persistedHeight.value = height.value;
+      }
+    },
+    // REA uses own version of `DependencyList` and it's not compatible with the same type from React
+    deps as unknown[],
+  );
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        // immediately dispatch onStart/onEnd events if onStart dispatched with the same height
+        // and don't wait for animation 250ms
+        if (
+          !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&
+          e.height === persistedHeight.value
+        ) {
+          handler.onStart?.(e);
+          handler.onEnd?.(e);
+
+          return;
+        }
+
+        target.value = e.target;
+        height.value = e.height;
+
+        if (e.height > 0) {
+          persistedHeight.value = e.height;
+        }
+        // if we are running on Android < 9, then we are using custom interpolation
+        // to achieve smoother animation and use `animatedKeyboardHeight` as animation
+        // driver
+        if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          animatedKeyboardHeight.value = withTiming(
+            e.height,
+            TELEGRAM_ANDROID_TIMING_CONFIG,
+          );
+        }
+
+        handler.onStart?.({
+          ...e,
+          duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS
+            ? e.duration
+            : TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        });
+      },
+      onMove: (e) => {
+        "worklet";
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onMove?.(e);
+        }
+      },
+      onEnd: (e) => {
+        "worklet";
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onEnd?.(e);
+        }
+      },
+    },
+    deps,
+  );
+};

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -1,41 +1,41 @@
-export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
-  worklet: F,
-  wait = 0,
-) => {
-  "worklet";
-
-  const value = {
-    time: 0,
-  };
-
-  return (...args: Parameters<F>): ReturnType<F> | void => {
-    "worklet";
-
-    const t = Date.now();
-    const now = t - value.time;
-
-    if (now < wait) {
-      value.time = t;
-      return;
-    }
-
-    value.time = t;
-
-    return worklet(...args);
-  };
-};
-
-export const scrollDistanceWithRespectToSnapPoints = (
-  defaultScrollValue: number,
-  snapPoints?: number[],
-) => {
-  "worklet";
-
-  let snapPoint: number | undefined;
-
-  if (snapPoints) {
-    snapPoint = snapPoints.find((offset) => offset >= defaultScrollValue);
-  }
-
-  return snapPoint ?? defaultScrollValue;
-};
+export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
+  worklet: F,
+  wait = 0,
+) => {
+  "worklet";
+
+  const value = {
+    time: 0,
+  };
+
+  return (...args: Parameters<F>): ReturnType<F> | void => {
+    "worklet";
+
+    const t = Date.now();
+    const now = t - value.time;
+
+    if (now < wait) {
+      value.time = t;
+      return;
+    }
+
+    value.time = t;
+
+    return worklet(...args);
+  };
+};
+
+export const scrollDistanceWithRespectToSnapPoints = (
+  defaultScrollValue: number,
+  snapPoints?: number[],
+) => {
+  "worklet";
+
+  let snapPoint: number | undefined;
+
+  if (snapPoints) {
+    snapPoint = snapPoints.find((offset) => offset >= defaultScrollValue);
+  }
+
+  return snapPoint ?? defaultScrollValue;
+};

package/src/components/KeyboardStickyView/index.tsx

@@ -1,66 +1,66 @@
-import React, { forwardRef, useMemo } from "react";
-import Reanimated, {
-  interpolate,
-  useAnimatedStyle,
-} from "react-native-reanimated";
-
-import { useReanimatedKeyboardAnimation } from "../../hooks";
-
-import type { View, ViewProps } from "react-native";
-
-export type KeyboardStickyViewProps = {
-  /**
-   * Specify additional offset to the view for given keyboard state.
-   */
-  offset?: {
-    /**
-     * Adds additional `translateY` when keyboard is close. By default `0`.
-     */
-    closed?: number;
-    /**
-     * Adds additional `translateY` when keyboard is open. By default `0`.
-     */
-    opened?: number;
-  };
-
-  /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
-  enabled?: boolean;
-} & ViewProps;
-
-const KeyboardStickyView = forwardRef<
-  View,
-  React.PropsWithChildren<KeyboardStickyViewProps>
->(
-  (
-    {
-      children,
-      offset: { closed = 0, opened = 0 } = {},
-      style,
-      enabled = true,
-      ...props
-    },
-    ref,
-  ) => {
-    const { height, progress } = useReanimatedKeyboardAnimation();
-    const stickyViewStyle = useAnimatedStyle(() => {
-      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
-
-      return {
-        transform: [{ translateY: enabled ? height.value + offset : closed }],
-      };
-    }, [closed, opened, enabled]);
-
-    const styles = useMemo(
-      () => [style, stickyViewStyle],
-      [style, stickyViewStyle],
-    );
-
-    return (
-      <Reanimated.View ref={ref} style={styles} {...props}>
-        {children}
-      </Reanimated.View>
-    );
-  },
-);
-
-export default KeyboardStickyView;
+import React, { forwardRef, useMemo } from "react";
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+import { useReanimatedKeyboardAnimation } from "../../hooks";
+
+import type { View, ViewProps } from "react-native";
+
+export type KeyboardStickyViewProps = {
+  /**
+   * Specify additional offset to the view for given keyboard state.
+   */
+  offset?: {
+    /**
+     * Adds additional `translateY` when keyboard is close. By default `0`.
+     */
+    closed?: number;
+    /**
+     * Adds additional `translateY` when keyboard is open. By default `0`.
+     */
+    opened?: number;
+  };
+
+  /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
+  enabled?: boolean;
+} & ViewProps;
+
+const KeyboardStickyView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardStickyViewProps>
+>(
+  (
+    {
+      children,
+      offset: { closed = 0, opened = 0 } = {},
+      style,
+      enabled = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const { height, progress } = useReanimatedKeyboardAnimation();
+    const stickyViewStyle = useAnimatedStyle(() => {
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+
+      return {
+        transform: [{ translateY: enabled ? height.value + offset : closed }],
+      };
+    }, [closed, opened, enabled]);
+
+    const styles = useMemo(
+      () => [style, stickyViewStyle],
+      [style, stickyViewStyle],
+    );
+
+    return (
+      <Reanimated.View ref={ref} style={styles} {...props}>
+        {children}
+      </Reanimated.View>
+    );
+  },
+);
+
+export default KeyboardStickyView;

package/src/components/KeyboardToolbar/Arrow.tsx

@@ -1,80 +1,80 @@
-import React, { useMemo } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-
-import useColorScheme from "../hooks/useColorScheme";
-
-import type { KeyboardToolbarTheme } from "./types";
-import type { ViewStyle } from "react-native";
-
-type ArrowProps = {
-  type: "prev" | "next";
-  disabled?: boolean;
-  theme: KeyboardToolbarTheme;
-};
-
-const ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {
-  const colorScheme = useColorScheme();
-
-  const color = useMemo(
-    () => ({
-      backgroundColor: disabled
-        ? theme[colorScheme].disabled
-        : theme[colorScheme].primary,
-    }),
-    [disabled, theme, colorScheme],
-  );
-  const left = useMemo(() => [styles.arrowLeftLine, color], [color]);
-  const right = useMemo(() => [styles.arrowRightLine, color], [color]);
-
-  return (
-    <View
-      style={
-        type === "next" ? styles.arrowDownContainer : styles.arrowUpContainer
-      }
-    >
-      <View style={styles.arrow}>
-        <Animated.View style={left} />
-        <Animated.View style={right} />
-      </View>
-    </View>
-  );
-};
-
-const arrowLine: ViewStyle = {
-  width: 13,
-  height: 2,
-  borderRadius: 1,
-};
-const arrowUpContainer: ViewStyle = {
-  marginHorizontal: 5,
-  width: 30,
-  height: 30,
-  justifyContent: "center",
-  alignItems: "center",
-};
-const styles = StyleSheet.create({
-  arrowUpContainer: arrowUpContainer,
-  arrowDownContainer: {
-    ...arrowUpContainer,
-    transform: [{ rotate: "180deg" }],
-  },
-  arrow: {
-    width: 20,
-    height: 20,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  arrowLeftLine: {
-    ...arrowLine,
-    transform: [{ rotate: "-45deg" }],
-    left: -0.5,
-  },
-  arrowRightLine: {
-    ...arrowLine,
-    transform: [{ rotate: "45deg" }],
-    left: -5.5,
-  },
-});
-
-export default ArrowComponent;
+import React, { useMemo } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+import useColorScheme from "../hooks/useColorScheme";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { ViewStyle } from "react-native";
+
+type ArrowProps = {
+  type: "prev" | "next";
+  disabled?: boolean;
+  theme: KeyboardToolbarTheme;
+};
+
+const ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {
+  const colorScheme = useColorScheme();
+
+  const color = useMemo(
+    () => ({
+      backgroundColor: disabled
+        ? theme[colorScheme].disabled
+        : theme[colorScheme].primary,
+    }),
+    [disabled, theme, colorScheme],
+  );
+  const left = useMemo(() => [styles.arrowLeftLine, color], [color]);
+  const right = useMemo(() => [styles.arrowRightLine, color], [color]);
+
+  return (
+    <View
+      style={
+        type === "next" ? styles.arrowDownContainer : styles.arrowUpContainer
+      }
+    >
+      <View style={styles.arrow}>
+        <Animated.View style={left} />
+        <Animated.View style={right} />
+      </View>
+    </View>
+  );
+};
+
+const arrowLine: ViewStyle = {
+  width: 13,
+  height: 2,
+  borderRadius: 1,
+};
+const arrowUpContainer: ViewStyle = {
+  marginHorizontal: 5,
+  width: 30,
+  height: 30,
+  justifyContent: "center",
+  alignItems: "center",
+};
+const styles = StyleSheet.create({
+  arrowUpContainer: arrowUpContainer,
+  arrowDownContainer: {
+    ...arrowUpContainer,
+    transform: [{ rotate: "180deg" }],
+  },
+  arrow: {
+    width: 20,
+    height: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  arrowLeftLine: {
+    ...arrowLine,
+    transform: [{ rotate: "-45deg" }],
+    left: -0.5,
+  },
+  arrowRightLine: {
+    ...arrowLine,
+    transform: [{ rotate: "45deg" }],
+    left: -5.5,
+  },
+});
+
+export default ArrowComponent;