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

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;