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

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 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,
+});

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",
+  },
+};