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

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 { useKeyboardState } from "../../hooks";
+
+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 = useKeyboardState((state) => state.appearance);
+
+  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;

package/src/components/KeyboardToolbar/Button.tsx

@@ -1,98 +1,98 @@
-import React, { useMemo } from "react";
-import {
-  Platform,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  View,
-} from "react-native";
-
-import useColorScheme from "../hooks/useColorScheme";
-
-import type { KeyboardToolbarTheme } from "./types";
-import type { PropsWithChildren } from "react";
-import type { ViewStyle } from "react-native";
-
-type ButtonProps = {
-  disabled?: boolean;
-  onPress: () => void;
-  accessibilityLabel: string;
-  accessibilityHint: string;
-  testID: string;
-  rippleRadius?: number;
-  style?: ViewStyle;
-  theme: KeyboardToolbarTheme;
-};
-
-const ButtonIOS = ({
-  children,
-  onPress,
-  disabled,
-  accessibilityLabel,
-  accessibilityHint,
-  testID,
-  style,
-}: PropsWithChildren<ButtonProps>) => {
-  // immediately switch to plain view to avoid animation flickering
-  // when fade out animation happens and view becomes disabled
-  const Container = disabled
-    ? (View as unknown as typeof TouchableOpacity)
-    : TouchableOpacity;
-  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
-
-  return (
-    <Container
-      accessibilityState={accessibilityState}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      onPress={onPress}
-      style={style}
-      testID={testID}
-    >
-      {children}
-    </Container>
-  );
-};
-const ButtonAndroid = ({
-  children,
-  onPress,
-  disabled,
-  accessibilityLabel,
-  accessibilityHint,
-  testID,
-  rippleRadius = 18,
-  style,
-  theme,
-}: PropsWithChildren<ButtonProps>) => {
-  const colorScheme = useColorScheme();
-  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
-  const ripple = useMemo(
-    () =>
-      TouchableNativeFeedback.Ripple(
-        theme[colorScheme].ripple,
-        true,
-        rippleRadius,
-      ),
-    [colorScheme, rippleRadius, theme],
-  );
-
-  return (
-    <TouchableNativeFeedback
-      accessibilityState={accessibilityState}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      onPress={onPress}
-      background={ripple}
-      testID={testID}
-      style={style}
-    >
-      <View style={style}>{children}</View>
-    </TouchableNativeFeedback>
-  );
-};
-
-export default Platform.select({
-  android: ButtonAndroid,
-  default: ButtonIOS,
-});
+import React, { useMemo } from "react";
+import {
+  Platform,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import { useKeyboardState } from "../../hooks";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { PropsWithChildren } from "react";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
+
+type ButtonProps = {
+  disabled?: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+  accessibilityLabel: string;
+  accessibilityHint: string;
+  testID: string;
+  rippleRadius?: number;
+  style?: ViewStyle;
+  theme: KeyboardToolbarTheme;
+};
+
+const ButtonIOS = ({
+  children,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  style,
+}: PropsWithChildren<ButtonProps>) => {
+  // immediately switch to plain view to avoid animation flickering
+  // when fade out animation happens and view becomes disabled
+  const Container = disabled
+    ? (View as unknown as typeof TouchableOpacity)
+    : TouchableOpacity;
+  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
+
+  return (
+    <Container
+      accessibilityState={accessibilityState}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </Container>
+  );
+};
+const ButtonAndroid = ({
+  children,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  rippleRadius = 18,
+  style,
+  theme,
+}: PropsWithChildren<ButtonProps>) => {
+  const colorScheme = useKeyboardState((state) => state.appearance);
+  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
+  const ripple = useMemo(
+    () =>
+      TouchableNativeFeedback.Ripple(
+        theme[colorScheme].ripple,
+        true,
+        rippleRadius,
+      ),
+    [colorScheme, rippleRadius, theme],
+  );
+
+  return (
+    <TouchableNativeFeedback
+      accessibilityState={accessibilityState}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      background={ripple}
+      testID={testID}
+      style={style}
+    >
+      <View style={style}>{children}</View>
+    </TouchableNativeFeedback>
+  );
+};
+
+export default Platform.select({
+  android: ButtonAndroid,
+  default: ButtonIOS,
+});

package/src/components/KeyboardToolbar/colors.native.ts

@@ -1,37 +1,37 @@
-import { Platform, PlatformColor } from "react-native";
-
-import type { KeyboardToolbarTheme } from "./types";
-import type { ColorValue } from "react-native";
-
-export const colors: KeyboardToolbarTheme = {
-  light: {
-    primary: Platform.select<ColorValue>({
-      ios: PlatformColor("link"),
-      default: "#2c2c2c",
-    }),
-    disabled: Platform.select<ColorValue>({
-      ios: PlatformColor("systemGray4"),
-      default: "#B0BEC5",
-    }),
-    background: Platform.select({
-      ios: "#F8F8F8",
-      default: "#f3f3f4",
-    }),
-    ripple: "#bcbcbcbc",
-  },
-  dark: {
-    primary: Platform.select<ColorValue>({
-      ios: PlatformColor("label"),
-      default: "#fafafa",
-    }),
-    disabled: Platform.select<ColorValue>({
-      ios: PlatformColor("systemGray"),
-      default: "#707070",
-    }),
-    background: Platform.select({
-      ios: "#555756",
-      default: "#2C2C2E",
-    }),
-    ripple: "#F8F8F888",
-  },
-};
+import { Platform, PlatformColor } from "react-native";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { ColorValue } from "react-native";
+
+export const colors: KeyboardToolbarTheme = {
+  light: {
+    primary: Platform.select<ColorValue>({
+      ios: PlatformColor("link"),
+      default: "#2c2c2c",
+    }),
+    disabled: Platform.select<ColorValue>({
+      ios: PlatformColor("systemGray4"),
+      default: "#B0BEC5",
+    }),
+    background: Platform.select({
+      ios: "#F8F8F8",
+      default: "#f3f3f4",
+    }),
+    ripple: "#bcbcbcbc",
+  },
+  dark: {
+    primary: Platform.select<ColorValue>({
+      ios: PlatformColor("label"),
+      default: "#fafafa",
+    }),
+    disabled: Platform.select<ColorValue>({
+      ios: PlatformColor("systemGray"),
+      default: "#707070",
+    }),
+    background: Platform.select({
+      ios: "#555756",
+      default: "#2C2C2E",
+    }),
+    ripple: "#F8F8F888",
+  },
+};

package/src/components/KeyboardToolbar/colors.ts

@@ -1,16 +1,16 @@
-import type { KeyboardToolbarTheme } from "./types";
-
-export const colors: KeyboardToolbarTheme = {
-  light: {
-    primary: "#2c2c2c",
-    disabled: "#B0BEC5",
-    background: "#f3f3f4",
-    ripple: "#bcbcbcbc",
-  },
-  dark: {
-    primary: "#fafafa",
-    disabled: "#707070",
-    background: "#2C2C2E",
-    ripple: "#F8F8F888",
-  },
-};
+import type { KeyboardToolbarTheme } from "./types";
+
+export const colors: KeyboardToolbarTheme = {
+  light: {
+    primary: "#2c2c2c",
+    disabled: "#B0BEC5",
+    background: "#f3f3f4",
+    ripple: "#bcbcbcbc",
+  },
+  dark: {
+    primary: "#fafafa",
+    disabled: "#707070",
+    background: "#2C2C2E",
+    ripple: "#F8F8F888",
+  },
+};

package/src/components/KeyboardToolbar/compound/components/Background.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import type { ReactNode } from "react";
+
+const Background: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <>{children}</>
+);
+
+export default Background;

package/src/components/KeyboardToolbar/compound/components/Content.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+import { TEST_ID_KEYBOARD_TOOLBAR_CONTENT } from "../../constants";
+
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+const Content: React.FC<ViewProps & { children?: ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});
+
+export default Content;