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

package/src/components/KeyboardToolbar/index.tsx

@@ -1,223 +1,220 @@
-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, { useEffect, useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+
+import {
+  FocusedInputEvents,
+  RCTKeyboardToolbarGroupView,
+} from "../../bindings";
+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 { KeyboardToolbarProps } from "./types";
+import type { ReactNode } from "react";
+
+/**
+ * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
+ * `Done` buttons.
+ */
+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 = "Done",
+  button,
+  icon,
+  showArrows = true,
+  onNextCallback,
+  onPrevCallback,
+  onDoneCallback,
+  blur = null,
+  opacity = DEFAULT_OPACITY,
+  offset: { closed = 0, opened = 0 } = {},
+  enabled = true,
+  insets,
+  ...rest
+}) => {
+  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) => {
+      setInputs(e);
+    });
+
+    return subscription.remove;
+  }, []);
+  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, 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: opened + OPENED_OFFSET,
+    }),
+    [closed, opened],
+  );
+  let backgroundElement: ReactNode = null;
+  let arrowsElement: ReactNode = null;
+  let contentContainer: ReactNode = null;
+  let doneElement: ReactNode = null;
+
+  if (children) {
+    let prevChild: ReactNode = null;
+    let nextChild: ReactNode = null;
+    let contentChild: ReactNode = null;
+    let doneChild: ReactNode = null;
+    let backgroundChild: ReactNode = null;
+
+    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;
+    });
+
+    backgroundElement = backgroundChild;
+    doneElement = doneChild;
+    arrowsElement =
+      prevChild || nextChild ? (
+        <View style={styles.arrows}>
+          {prevChild}
+          {nextChild}
+        </View>
+      ) : 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>
+    ) : 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({
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: KEYBOARD_TOOLBAR_HEIGHT,
+  },
+  toolbar: {
+    position: "absolute",
+    bottom: 0,
+    alignItems: "center",
+    width: "100%",
+    flexDirection: "row",
+    height: KEYBOARD_TOOLBAR_HEIGHT,
+  },
+  arrows: {
+    flexDirection: "row",
+    paddingLeft: 8,
+  },
+  floating: {
+    alignSelf: "center",
+    borderRadius: 20,
+    overflow: "hidden",
+  },
+});
+
+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,40 +1,72 @@
-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 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 */
+  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}`;
+
+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">;