@react-native-ohos/react-native-keyboard-controller 1.16.8 → 1.17.0

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;

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

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo } from "react";
+import { StyleSheet, Text } from "react-native";
+
+import { useKeyboardState } from "../../../../hooks";
+import { KeyboardController } from "../../../../module";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_DONE } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
+
+const Done: React.FC<Omit<ButtonSubProps, "icon"> & { text?: ReactNode }> = ({
+  children,
+  onPress,
+  rippleRadius = 28,
+  text,
+  button: ButtonContainer = Button,
+}) => {
+  const colorScheme = useKeyboardState((state) => state.appearance);
+  const { theme } = useToolbarContext();
+  const doneStyle = useMemo(
+    () => [styles.doneButton, { color: theme[colorScheme].primary }],
+    [colorScheme, theme],
+  );
+  const onPressDone = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.(event);
+      if (!event.isDefaultPrevented()) KeyboardController.dismiss();
+    },
+    [onPress],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Closes the keyboard"
+      accessibilityLabel="Done"
+      rippleRadius={rippleRadius}
+      style={styles.doneButtonContainer}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
+      theme={theme}
+      onPress={onPressDone}
+    >
+      <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
+        {children ?? text ?? "Done"}
+      </Text>
+    </ButtonContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  doneButton: { fontWeight: "600", fontSize: 15 },
+  doneButtonContainer: { marginRight: 16, marginLeft: 8 },
+});
+
+export default Done;

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

@@ -0,0 +1,49 @@
+import React, { useCallback } from "react";
+
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_NEXT } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { GestureResponderEvent } from "react-native";
+
+const Next: React.FC<ButtonSubProps> = ({
+  children,
+  onPress,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
+}) => {
+  const { theme, isNextDisabled } = useToolbarContext();
+  const isDisabled = disabled ?? isNextDisabled;
+  const onPressNext = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.(event);
+      if (!event.isDefaultPrevented()) KeyboardController.setFocusTo("next");
+    },
+    [onPress],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Moves focus to the next field"
+      accessibilityLabel="Next"
+      disabled={isDisabled}
+      rippleRadius={rippleRadius}
+      style={style}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+      theme={theme}
+      onPress={onPressNext}
+    >
+      {children ?? (
+        <IconContainer disabled={isDisabled} theme={theme} type="next" />
+      )}
+    </ButtonContainer>
+  );
+};
+
+export default Next;

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

@@ -0,0 +1,49 @@
+import React, { useCallback } from "react";
+
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS } from "../../constants";
+import { useToolbarContext } from "../context";
+
+import type { ButtonSubProps } from "./types";
+import type { GestureResponderEvent } from "react-native";
+
+const Prev: React.FC<ButtonSubProps> = ({
+  children,
+  onPress,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
+}) => {
+  const { theme, isPrevDisabled } = useToolbarContext();
+  const isDisabled = disabled ?? isPrevDisabled;
+  const onPressPrev = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.(event);
+      if (!event.isDefaultPrevented()) KeyboardController.setFocusTo("prev");
+    },
+    [onPress],
+  );
+
+  return (
+    <ButtonContainer
+      accessibilityHint="Moves focus to the previous field"
+      accessibilityLabel="Previous"
+      disabled={isDisabled}
+      rippleRadius={rippleRadius}
+      style={style}
+      testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+      theme={theme}
+      onPress={onPressPrev}
+    >
+      {children ?? (
+        <IconContainer disabled={isDisabled} theme={theme} type="prev" />
+      )}
+    </ButtonContainer>
+  );
+};
+
+export default Prev;

package/src/components/KeyboardToolbar/compound/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Background } from "./Background";
+export { default as Content } from "./Content";
+export { default as Done } from "./Done";
+export { default as Next } from "./Next";
+export { default as Prev } from "./Prev";

package/src/components/KeyboardToolbar/compound/components/types.ts

@@ -0,0 +1,15 @@
+import type Arrow from "../../Arrow";
+import type Button from "../../Button";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
+
+export type ButtonSubProps = {
+  children?: ReactNode;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  testID?: string;
+  rippleRadius?: number;
+  style?: ViewStyle;
+  button?: typeof Button;
+  icon?: typeof Arrow;
+};

package/src/components/KeyboardToolbar/compound/context.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+
+import type { KeyboardToolbarTheme } from "../types";
+
+type ToolbarContextType = {
+  theme: KeyboardToolbarTheme;
+  isPrevDisabled: boolean;
+  isNextDisabled: boolean;
+};
+
+export const ToolbarContext = createContext<ToolbarContextType | undefined>(
+  undefined,
+);
+
+export const useToolbarContext = () => {
+  const context = useContext(ToolbarContext);
+
+  if (!context) {
+    throw new Error(
+      "KeyboardToolbar.* component must be used inside <KeyboardToolbar>",
+    );
+  }
+
+  return context;
+};

package/src/components/KeyboardToolbar/constants.ts

@@ -0,0 +1,14 @@
+import { KEYBOARD_BORDER_RADIUS } from "../../constants";
+
+import type { HEX } from "./types";
+
+export const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+export const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
+export const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
+export const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
+export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
+
+export const KEYBOARD_TOOLBAR_HEIGHT = 42;
+export const DEFAULT_OPACITY: HEX = "FF";
+export const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;
+export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;

package/src/components/KeyboardToolbar/index.tsx

@@ -1,84 +1,45 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
 
 import {
   FocusedInputEvents,
+  RCTKeyboardToolbarGroupView,
 } from "../../bindings";
-import KeyboardStickyView from "../KeyboardStickyView"
-import { KeyboardControllerNative } from "../../bindings";
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
+import KeyboardStickyView from "../KeyboardStickyView";
 
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
+import { Background, Content, Done, Next, Prev } from "./compound/components";
+import { ToolbarContext } from "./compound/context";
+import {
+  DEFAULT_OPACITY,
+  KEYBOARD_HAS_ROUNDED_CORNERS,
+  KEYBOARD_TOOLBAR_HEIGHT,
+  OPENED_OFFSET,
+  TEST_ID_KEYBOARD_TOOLBAR,
+} from "./constants";
 
-import type { HEX, KeyboardToolbarTheme } from "./types";
-import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { KeyboardToolbarProps } from "./types";
 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> = ({
+const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
+  Background: typeof Background;
+  Content: typeof Content;
+  Prev: typeof Prev;
+  Next: typeof Next;
+  Done: typeof Done;
+  Group: typeof RCTKeyboardToolbarGroupView;
+} = ({
+  children,
   content,
   theme = colors,
-  doneText,
+  doneText = "Done",
   button,
   icon,
   showArrows = true,
@@ -89,15 +50,18 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   opacity = DEFAULT_OPACITY,
   offset: { closed = 0, opened = 0 } = {},
   enabled = true,
+  insets,
   ...rest
 }) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const [inputs, setInputs] = useState({
     current: 0,
     count: 0,
   });
   const isPrevDisabled = inputs.current === 0;
   const isNextDisabled = inputs.current === inputs.count - 1;
+  const buttonContainer = button ?? Button;
+  const iconContainer = icon ?? Arrow;
 
   useEffect(() => {
     const subscription = FocusedInputEvents.addListener("focusDidSet", (e) => {
@@ -106,100 +70,125 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
 
     return subscription.remove;
   }, []);
-  const doneStyle = useMemo(
-    () => [styles.doneButton, { color: theme[colorScheme].primary }],
-    [colorScheme, theme],
-  );
   const toolbarStyle = useMemo(
     () => [
       styles.toolbar,
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
+      !KEYBOARD_HAS_ROUNDED_CORNERS
+        ? {
+            paddingLeft: insets?.left,
+            paddingRight: insets?.right,
+          }
+        : null,
+      KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null,
     ],
-    [colorScheme, opacity, theme],
+    [colorScheme, opacity, theme, insets],
+  );
+  const containerStyle = useMemo(
+    () => [
+      // CRUCIAL: gives the native view real bounds
+      styles.sticky,
+      KEYBOARD_HAS_ROUNDED_CORNERS
+        ? ({
+            left: (insets?.left ?? 0) + 16,
+            right: (insets?.right ?? 0) + 16,
+          } as const)
+        : null,
+    ],
+    [insets],
   );
   const offset = useMemo(
-    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    () => ({
+      closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
+      opened: opened + OPENED_OFFSET,
+    }),
     [closed, opened],
   );
-  const ButtonContainer = button || Button;
-  const IconContainer = icon || Arrow;
+  let backgroundElement: ReactNode = null;
+  let arrowsElement: ReactNode = null;
+  let contentContainer: ReactNode = null;
+  let doneElement: ReactNode = null;
 
-  const onPressNext = useCallback(() => {
-    goToNextField();
-    onNextCallback?.();
-  }, [onNextCallback]);
-  const onPressPrev = useCallback(() => {
-    goToPrevField();
-    onPrevCallback?.();
-  }, [onPrevCallback]);
-  const onPressDone = useCallback(() => {
-    dismissKeyboard();
-    onDoneCallback?.();
-  }, [onDoneCallback]);
+  if (children) {
+    let prevChild: ReactNode = null;
+    let nextChild: ReactNode = null;
+    let contentChild: ReactNode = null;
+    let doneChild: ReactNode = null;
+    let backgroundChild: ReactNode = null;
 
-  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>
-          </>
-        )}
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child)) return;
+      if (child.type === Background) backgroundChild = child;
+      else if (child.type === Content) contentChild = child;
+      else if (child.type === Prev) prevChild = child;
+      else if (child.type === Next) nextChild = child;
+      else if (child.type === Done) doneChild = child;
+    });
 
-        <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
-          {content}
+    backgroundElement = backgroundChild;
+    doneElement = doneChild;
+    arrowsElement =
+      prevChild || nextChild ? (
+        <View style={styles.arrows}>
+          {prevChild}
+          {nextChild}
         </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>
+      ) : null;
+    contentContainer = contentChild ?? <Content>{contentChild}</Content>;
+  } else {
+    backgroundElement = blur;
+    arrowsElement = showArrows ? (
+      <View style={styles.arrows}>
+        <Prev
+          button={buttonContainer}
+          icon={iconContainer}
+          onPress={onPrevCallback}
+        />
+        <Next
+          button={buttonContainer}
+          icon={iconContainer}
+          onPress={onNextCallback}
+        />
       </View>
-    </KeyboardStickyView>
+    ) : null;
+    contentContainer = <Content>{content}</Content>;
+    doneElement = doneText ? (
+      <Done button={buttonContainer} text={doneText} onPress={onDoneCallback} />
+    ) : null;
+  }
+
+  const contextValue = useMemo(
+    () => ({ theme, isPrevDisabled, isNextDisabled }),
+    [theme, isPrevDisabled, isNextDisabled],
+  );
+
+  return (
+    <ToolbarContext.Provider value={contextValue}>
+      <KeyboardStickyView
+        enabled={enabled}
+        offset={offset}
+        style={containerStyle}
+      >
+        <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+          {backgroundElement}
+          {arrowsElement}
+          {contentContainer}
+          {doneElement}
+        </View>
+      </KeyboardStickyView>
+    </ToolbarContext.Provider>
   );
 };
 
 const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: KEYBOARD_TOOLBAR_HEIGHT,
   },
   toolbar: {
     position: "absolute",
@@ -208,16 +197,24 @@ const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
   },
-  doneButton: {
-    fontWeight: "600",
-    fontSize: 15,
+  arrows: {
+    flexDirection: "row",
+    paddingLeft: 8,
   },
-  doneButtonContainer: {
-    marginRight: 8,
+  floating: {
+    alignSelf: "center",
+    borderRadius: 20,
+    overflow: "hidden",
   },
 });
 
-export { colors as DefaultKeyboardToolbarTheme };
+KeyboardToolbar.Background = Background;
+KeyboardToolbar.Content = Content;
+KeyboardToolbar.Prev = Prev;
+KeyboardToolbar.Next = Next;
+KeyboardToolbar.Done = Done;
+KeyboardToolbar.Group = RCTKeyboardToolbarGroupView;
+
+export { colors as DefaultKeyboardToolbarTheme, KeyboardToolbarProps };
 export default KeyboardToolbar;

package/src/components/KeyboardToolbar/types.ts

@@ -1,4 +1,12 @@
-import type { ColorValue } from "react-native";
+import type Arrow from "./Arrow";
+import type Button from "./Button";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { ReactNode } from "react";
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  ViewProps,
+} from "react-native";
 
 type Theme = {
   /** Color for arrow when it's enabled */
@@ -38,3 +46,27 @@ type HexSymbol =
   | "e"
   | "f";
 export type HEX = `${HexSymbol}${HexSymbol}`;
+
+type SafeAreaInsets = {
+  left: number;
+  right: number;
+};
+
+export type KeyboardToolbarProps = Omit<
+  ViewProps,
+  "style" | "testID" | "children"
+> & {
+  content?: React.JSX.Element | null;
+  theme?: KeyboardToolbarTheme;
+  doneText?: ReactNode;
+  button?: typeof Button;
+  icon?: typeof Arrow;
+  showArrows?: boolean;
+  onNextCallback?: (event: GestureResponderEvent) => void;
+  onPrevCallback?: (event: GestureResponderEvent) => void;
+  onDoneCallback?: (event: GestureResponderEvent) => void;
+  blur?: React.JSX.Element | null;
+  opacity?: HEX;
+  insets?: SafeAreaInsets;
+  children?: ReactNode;
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;