@react-native-ohos/react-native-keyboard-controller 1.16.7 → 1.16.9-rc.1

package/src/components/KeyboardToolbar/index.tsx

@@ -1,223 +1,223 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-
-import {
-  FocusedInputEvents,
-} from "../../bindings";
-import KeyboardStickyView from "../KeyboardStickyView"
-import { KeyboardControllerNative } from "../../bindings";
-import useColorScheme from "../hooks/useColorScheme";
-
-import Arrow from "./Arrow";
-import Button from "./Button";
-import { colors } from "./colors";
-
-import type { HEX, KeyboardToolbarTheme } from "./types";
-import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
-import type { ReactNode } from "react";
-import type { ViewProps } from "react-native";
-
-export type KeyboardToolbarProps = Omit<
-  ViewProps,
-  "style" | "testID" | "children"
-> & {
-  /** An element that is shown in the middle of the toolbar. */
-  content?: JSX.Element | null;
-  /** A set of dark/light colors consumed by toolbar component. */
-  theme?: KeyboardToolbarTheme;
-  /** Custom text for done button. */
-  doneText?: ReactNode;
-  /** Custom touchable component for toolbar (used for prev/next/done buttons). */
-  button?: typeof Button;
-  /** Custom icon component used to display next/prev buttons. */
-  icon?: typeof Arrow;
-  /**
-   * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
-   * and want to show only `Done` button. Default to `true`.
-   */
-  showArrows?: boolean;
-  /**
-   * A callback that is called when the user presses the next button along with the default action.
-   */
-  onNextCallback?: () => void;
-  /**
-   * A callback that is called when the user presses the previous button along with the default action.
-   */
-  onPrevCallback?: () => void;
-  /**
-   * A callback that is called when the user presses the done button along with the default action.
-   */
-  onDoneCallback?: () => void;
-  /**
-   * A component that applies blur effect to the toolbar.
-   */
-  blur?: JSX.Element | null;
-  /**
-   * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
-   */
-  opacity?: HEX;
-} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
-
-const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
-const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
-const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
-const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
-const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
-
-const KEYBOARD_TOOLBAR_HEIGHT = 42;
-const DEFAULT_OPACITY: HEX = "FF";
-
-const dismissKeyboard = () => KeyboardControllerNative.dismiss(false);
-const goToNextField = () => KeyboardControllerNative.setFocusTo("next");
-const goToPrevField = () => KeyboardControllerNative.setFocusTo("prev");
-
-/**
- * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
- * `Done` buttons.
- */
-const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
-  content,
-  theme = colors,
-  doneText,
-  button,
-  icon,
-  showArrows = true,
-  onNextCallback,
-  onPrevCallback,
-  onDoneCallback,
-  blur = null,
-  opacity = DEFAULT_OPACITY,
-  offset: { closed = 0, opened = 0 } = {},
-  enabled = true,
-  ...rest
-}) => {
-  const colorScheme = useColorScheme();
-  const [inputs, setInputs] = useState({
-    current: 0,
-    count: 0,
-  });
-  const isPrevDisabled = inputs.current === 0;
-  const isNextDisabled = inputs.current === inputs.count - 1;
-
-  useEffect(() => {
-    const subscription = FocusedInputEvents.addListener("focusDidSet", (e) => {
-      setInputs(e);
-    });
-
-    return subscription.remove;
-  }, []);
-  const doneStyle = useMemo(
-    () => [styles.doneButton, { color: theme[colorScheme].primary }],
-    [colorScheme, theme],
-  );
-  const toolbarStyle = useMemo(
-    () => [
-      styles.toolbar,
-      {
-        backgroundColor: `${theme[colorScheme].background}${opacity}`,
-      },
-    ],
-    [colorScheme, opacity, theme],
-  );
-  const offset = useMemo(
-    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
-    [closed, opened],
-  );
-  const ButtonContainer = button || Button;
-  const IconContainer = icon || Arrow;
-
-  const onPressNext = useCallback(() => {
-    goToNextField();
-    onNextCallback?.();
-  }, [onNextCallback]);
-  const onPressPrev = useCallback(() => {
-    goToPrevField();
-    onPrevCallback?.();
-  }, [onPrevCallback]);
-  const onPressDone = useCallback(() => {
-    dismissKeyboard();
-    onDoneCallback?.();
-  }, [onDoneCallback]);
-
-  return (
-    <KeyboardStickyView enabled={enabled} offset={offset}>
-      <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
-        {blur}
-        {showArrows && (
-          <>
-            <ButtonContainer
-              accessibilityLabel="Previous"
-              accessibilityHint="Will move focus to previous field"
-              disabled={isPrevDisabled}
-              onPress={onPressPrev}
-              testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
-              theme={theme}
-            >
-              <IconContainer
-                disabled={isPrevDisabled}
-                type="prev"
-                theme={theme}
-              />
-            </ButtonContainer>
-            <ButtonContainer
-              accessibilityLabel="Next"
-              accessibilityHint="Will move focus to next field"
-              disabled={isNextDisabled}
-              onPress={onPressNext}
-              testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
-              theme={theme}
-            >
-              <IconContainer
-                disabled={isNextDisabled}
-                type="next"
-                theme={theme}
-              />
-            </ButtonContainer>
-          </>
-        )}
-
-        <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
-          {content}
-        </View>
-        <ButtonContainer
-          accessibilityLabel="Done"
-          accessibilityHint="Will close the keyboard"
-          onPress={onPressDone}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
-          rippleRadius={28}
-          style={styles.doneButtonContainer}
-          theme={theme}
-        >
-          <Text style={doneStyle} maxFontSizeMultiplier={1.3}>
-            {doneText || "Done"}
-          </Text>
-        </ButtonContainer>
-      </View>
-    </KeyboardStickyView>
-  );
-};
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  toolbar: {
-    position: "absolute",
-    bottom: 0,
-    alignItems: "center",
-    width: "100%",
-    flexDirection: "row",
-    height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
-  },
-  doneButton: {
-    fontWeight: "600",
-    fontSize: 15,
-  },
-  doneButtonContainer: {
-    marginRight: 8,
-  },
-});
-
-export { colors as DefaultKeyboardToolbarTheme };
-export default KeyboardToolbar;
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import {
+  FocusedInputEvents,
+} from "../../bindings";
+import KeyboardStickyView from "../KeyboardStickyView"
+import { KeyboardControllerNative } from "../../bindings";
+import useColorScheme from "../hooks/useColorScheme";
+
+import Arrow from "./Arrow";
+import Button from "./Button";
+import { colors } from "./colors";
+
+import type { HEX, KeyboardToolbarTheme } from "./types";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+export type KeyboardToolbarProps = Omit<
+  ViewProps,
+  "style" | "testID" | "children"
+> & {
+  /** An element that is shown in the middle of the toolbar. */
+  content?: JSX.Element | null;
+  /** A set of dark/light colors consumed by toolbar component. */
+  theme?: KeyboardToolbarTheme;
+  /** Custom text for done button. */
+  doneText?: ReactNode;
+  /** Custom touchable component for toolbar (used for prev/next/done buttons). */
+  button?: typeof Button;
+  /** Custom icon component used to display next/prev buttons. */
+  icon?: typeof Arrow;
+  /**
+   * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+   * and want to show only `Done` button. Default to `true`.
+   */
+  showArrows?: boolean;
+  /**
+   * A callback that is called when the user presses the next button along with the default action.
+   */
+  onNextCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the previous button along with the default action.
+   */
+  onPrevCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the done button along with the default action.
+   */
+  onDoneCallback?: () => void;
+  /**
+   * A component that applies blur effect to the toolbar.
+   */
+  blur?: JSX.Element | null;
+  /**
+   * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+   */
+  opacity?: HEX;
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
+
+const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
+const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
+const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
+const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
+
+const KEYBOARD_TOOLBAR_HEIGHT = 42;
+const DEFAULT_OPACITY: HEX = "FF";
+
+const dismissKeyboard = () => KeyboardControllerNative.dismiss(false);
+const goToNextField = () => KeyboardControllerNative.setFocusTo("next");
+const goToPrevField = () => KeyboardControllerNative.setFocusTo("prev");
+
+/**
+ * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
+ * `Done` buttons.
+ */
+const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
+  content,
+  theme = colors,
+  doneText,
+  button,
+  icon,
+  showArrows = true,
+  onNextCallback,
+  onPrevCallback,
+  onDoneCallback,
+  blur = null,
+  opacity = DEFAULT_OPACITY,
+  offset: { closed = 0, opened = 0 } = {},
+  enabled = true,
+  ...rest
+}) => {
+  const colorScheme = useColorScheme();
+  const [inputs, setInputs] = useState({
+    current: 0,
+    count: 0,
+  });
+  const isPrevDisabled = inputs.current === 0;
+  const isNextDisabled = inputs.current === inputs.count - 1;
+
+  useEffect(() => {
+    const subscription = FocusedInputEvents.addListener("focusDidSet", (e) => {
+      setInputs(e);
+    });
+
+    return subscription.remove;
+  }, []);
+  const doneStyle = useMemo(
+    () => [styles.doneButton, { color: theme[colorScheme].primary }],
+    [colorScheme, theme],
+  );
+  const toolbarStyle = useMemo(
+    () => [
+      styles.toolbar,
+      {
+        backgroundColor: `${theme[colorScheme].background}${opacity}`,
+      },
+    ],
+    [colorScheme, opacity, theme],
+  );
+  const offset = useMemo(
+    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    [closed, opened],
+  );
+  const ButtonContainer = button || Button;
+  const IconContainer = icon || Arrow;
+
+  const onPressNext = useCallback(() => {
+    goToNextField();
+    onNextCallback?.();
+  }, [onNextCallback]);
+  const onPressPrev = useCallback(() => {
+    goToPrevField();
+    onPrevCallback?.();
+  }, [onPrevCallback]);
+  const onPressDone = useCallback(() => {
+    dismissKeyboard();
+    onDoneCallback?.();
+  }, [onDoneCallback]);
+
+  return (
+    <KeyboardStickyView enabled={enabled} offset={offset}>
+      <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+        {blur}
+        {showArrows && (
+          <>
+            <ButtonContainer
+              accessibilityLabel="Previous"
+              accessibilityHint="Will move focus to previous field"
+              disabled={isPrevDisabled}
+              onPress={onPressPrev}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isPrevDisabled}
+                type="prev"
+                theme={theme}
+              />
+            </ButtonContainer>
+            <ButtonContainer
+              accessibilityLabel="Next"
+              accessibilityHint="Will move focus to next field"
+              disabled={isNextDisabled}
+              onPress={onPressNext}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isNextDisabled}
+                type="next"
+                theme={theme}
+              />
+            </ButtonContainer>
+          </>
+        )}
+
+        <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
+          {content}
+        </View>
+        <ButtonContainer
+          accessibilityLabel="Done"
+          accessibilityHint="Will close the keyboard"
+          onPress={onPressDone}
+          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
+          rippleRadius={28}
+          style={styles.doneButtonContainer}
+          theme={theme}
+        >
+          <Text style={doneStyle} maxFontSizeMultiplier={1.3}>
+            {doneText || "Done"}
+          </Text>
+        </ButtonContainer>
+      </View>
+    </KeyboardStickyView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  toolbar: {
+    position: "absolute",
+    bottom: 0,
+    alignItems: "center",
+    width: "100%",
+    flexDirection: "row",
+    height: KEYBOARD_TOOLBAR_HEIGHT,
+    paddingHorizontal: 8,
+  },
+  doneButton: {
+    fontWeight: "600",
+    fontSize: 15,
+  },
+  doneButtonContainer: {
+    marginRight: 8,
+  },
+});
+
+export { colors as DefaultKeyboardToolbarTheme };
+export default KeyboardToolbar;

package/src/components/KeyboardToolbar/types.ts

@@ -1,40 +1,40 @@
-import type { ColorValue } from "react-native";
-
-type Theme = {
-  /** Color for arrow when it's enabled */
-  primary: ColorValue;
-  /** Color for arrow when it's disabled */
-  disabled: ColorValue;
-  /** Keyboard toolbar background color */
-  background: string;
-  /** Color for ripple effect (on button touch) on Android */
-  ripple: ColorValue;
-};
-export type KeyboardToolbarTheme = {
-  light: Theme;
-  dark: Theme;
-};
-type HexSymbol =
-  | "0"
-  | "1"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "A"
-  | "B"
-  | "C"
-  | "D"
-  | "E"
-  | "F"
-  | "a"
-  | "b"
-  | "c"
-  | "d"
-  | "e"
-  | "f";
-export type HEX = `${HexSymbol}${HexSymbol}`;
+import type { ColorValue } from "react-native";
+
+type Theme = {
+  /** Color for arrow when it's enabled */
+  primary: ColorValue;
+  /** Color for arrow when it's disabled */
+  disabled: ColorValue;
+  /** Keyboard toolbar background color */
+  background: string;
+  /** Color for ripple effect (on button touch) on Android */
+  ripple: ColorValue;
+};
+export type KeyboardToolbarTheme = {
+  light: Theme;
+  dark: Theme;
+};
+type HexSymbol =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;

package/src/components/hooks/useColorScheme.ts

@@ -1,5 +1,5 @@
-import { useColorScheme as useColorSchemeRN } from "react-native";
-
-const useColorScheme = () => useColorSchemeRN() || "light";
-
-export default useColorScheme;
+import { useColorScheme as useColorSchemeRN } from "react-native";
+
+const useColorScheme = () => useColorSchemeRN() || "light";
+
+export default useColorScheme;

package/src/components/index.ts

@@ -1,11 +1,11 @@
-export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
-export { default as KeyboardStickyView } from "./KeyboardStickyView";
-export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
-export {
-  default as KeyboardToolbar,
-  DefaultKeyboardToolbarTheme,
-} from "./KeyboardToolbar";
-export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
-export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
-export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
-export type { KeyboardToolbarProps } from "./KeyboardToolbar";
+export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { default as KeyboardStickyView } from "./KeyboardStickyView";
+export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
+export {
+  default as KeyboardToolbar,
+  DefaultKeyboardToolbarTheme,
+} from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
+export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/constants.ts

@@ -1,19 +1,19 @@
-// copied from `android.view.WindowManager.LayoutParams`
-export enum AndroidSoftInputModes {
-  SOFT_INPUT_ADJUST_NOTHING = 48,
-  SOFT_INPUT_ADJUST_PAN = 32,
-  SOFT_INPUT_ADJUST_RESIZE = 16,
-  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
-  SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
-  SOFT_INPUT_MASK_ADJUST = 240,
-  SOFT_INPUT_MASK_STATE = 15,
-  SOFT_INPUT_MODE_CHANGED = 512,
-  SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
-  SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
-  SOFT_INPUT_STATE_HIDDEN = 2,
-  SOFT_INPUT_STATE_UNCHANGED = 1,
-  // temporarily disable this rule to avoid breaking changes.
-  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-  SOFT_INPUT_STATE_UNSPECIFIED = 0,
-  SOFT_INPUT_STATE_VISIBLE = 4,
-}
+// copied from `android.view.WindowManager.LayoutParams`
+export enum AndroidSoftInputModes {
+  SOFT_INPUT_ADJUST_NOTHING = 48,
+  SOFT_INPUT_ADJUST_PAN = 32,
+  SOFT_INPUT_ADJUST_RESIZE = 16,
+  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
+  SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
+  SOFT_INPUT_MASK_ADJUST = 240,
+  SOFT_INPUT_MASK_STATE = 15,
+  SOFT_INPUT_MODE_CHANGED = 512,
+  SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
+  SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
+  SOFT_INPUT_STATE_HIDDEN = 2,
+  SOFT_INPUT_STATE_UNCHANGED = 1,
+  // temporarily disable this rule to avoid breaking changes.
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  SOFT_INPUT_STATE_UNSPECIFIED = 0,
+  SOFT_INPUT_STATE_VISIBLE = 4,
+}