feat: button/icon on per element specification

Author: kirillzyusko

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

@@ -3,21 +3,23 @@ import { useCallback, useMemo } from "react";
 import { StyleSheet, Text } from "react-native";
 
 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<ButtonSubProps & { text?: ReactNode }> = ({
+const Done: React.FC<Omit<ButtonSubProps, "icon"> & { text?: ReactNode }> = ({
   children,
   onPress,
   rippleRadius = 28,
   text,
+  button: ButtonContainer = Button,
 }) => {
   const context = useToolbarContext();
-  const { theme, colorScheme, buttonContainer: ButtonContainer } = context;
+  const { theme, colorScheme } = context;
 
   const doneStyle = useMemo(
     () => [styles.doneButton, { color: theme[colorScheme].primary }],

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

@@ -1,6 +1,8 @@
 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";
 
@@ -13,14 +15,11 @@ const Next: React.FC<ButtonSubProps> = ({
   disabled,
   rippleRadius,
   style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
 }) => {
   const context = useToolbarContext();
-  const {
-    theme,
-    buttonContainer: ButtonContainer,
-    iconContainer: IconContainer,
-    isNextDisabled,
-  } = context;
+  const { theme, isNextDisabled } = context;
 
   const isDisabled = disabled ?? isNextDisabled;
 

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

@@ -2,6 +2,8 @@ import React from "react";
 import { 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";
 
@@ -14,14 +16,11 @@ const Prev: React.FC<ButtonSubProps> = ({
   disabled,
   rippleRadius,
   style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow,
 }) => {
   const context = useToolbarContext();
-  const {
-    theme,
-    buttonContainer: ButtonContainer,
-    iconContainer: IconContainer,
-    isPrevDisabled,
-  } = context;
+  const { theme, isPrevDisabled } = context;
 
   const isDisabled = disabled ?? isPrevDisabled;
 

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

@@ -1,3 +1,5 @@
+import type Arrow from "../../Arrow";
+import type Button from "../../Button";
 import type { ReactNode } from "react";
 import type { GestureResponderEvent, ViewStyle } from "react-native";
 
@@ -8,4 +10,6 @@ export type ButtonSubProps = {
   testID?: string;
   rippleRadius?: number;
   style?: ViewStyle;
+  button?: typeof Button;
+  icon?: typeof Arrow;
 };

src/components/KeyboardToolbar/compound/context.ts

@@ -1,14 +1,10 @@
 import { createContext, useContext } from "react";
 
-import type Arrow from "../Arrow";
-import type Button from "../Button";
 import type { KeyboardToolbarTheme } from "../types";
 
 type ToolbarContextType = {
   theme: KeyboardToolbarTheme;
   colorScheme: "light" | "dark";
-  buttonContainer: typeof Button;
-  iconContainer: typeof Arrow;
   isPrevDisabled: boolean;
   isNextDisabled: boolean;
 };

src/components/KeyboardToolbar/index.tsx

@@ -67,6 +67,8 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
   });
   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) => {
@@ -110,7 +112,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
     [closed, opened],
   );
 
-  let blurElement: ReactNode = null;
+  let backgroundElement: ReactNode = null;
   let arrowsElement: ReactNode = null;
   let contentContainer: ReactNode = null;
   let doneElement: ReactNode = null;
@@ -120,7 +122,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
     let nextChild: ReactNode = null;
     let contentChild: ReactNode = null;
     let doneChild: ReactNode = null;
-    let blurChild: ReactNode = null;
+    let backgroundChild: ReactNode = null;
 
     React.Children.forEach(children, (child) => {
       if (!React.isValidElement(child)) {
@@ -129,7 +131,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
       const type = child.type;
 
       if (type === Background) {
-        blurChild = child;
+        backgroundChild = child;
       } else if (type === Content) {
         contentChild = child;
       } else if (type === Prev) {
@@ -141,7 +143,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
       }
     });
 
-    blurElement = blurChild;
+    backgroundElement = backgroundChild;
     doneElement = doneChild;
     arrowsElement =
       prevChild || nextChild ? (
@@ -152,25 +154,31 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
       ) : null;
     contentContainer = contentChild ?? <Content>{contentChild}</Content>;
   } else {
-    blurElement = blur;
+    backgroundElement = blur;
     arrowsElement = showArrows ? (
       <View style={styles.arrows}>
-        <Prev onPress={onPrevCallback} />
-        <Next onPress={onNextCallback} />
+        <Prev
+          button={buttonContainer}
+          icon={iconContainer}
+          onPress={onPrevCallback}
+        />
+        <Next
+          button={buttonContainer}
+          icon={iconContainer}
+          onPress={onNextCallback}
+        />
       </View>
     ) : null;
     contentContainer = <Content>{content}</Content>;
     doneElement = doneText ? (
-      <Done text={doneText} onPress={onDoneCallback} />
+      <Done button={buttonContainer} text={doneText} onPress={onDoneCallback} />
     ) : null;
   }
 
   const contextValue = useMemo(
     () => ({
       theme,
       colorScheme,
-      buttonContainer: button ?? Button,
-      iconContainer: icon ?? Arrow,
       isPrevDisabled,
       isNextDisabled,
     }),
@@ -185,7 +193,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
         style={containerStyle}
       >
         <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
-          {blurElement}
+          {backgroundElement}
           {arrowsElement}
           {contentContainer}
           {doneElement}

src/components/KeyboardToolbar/types.ts

@@ -70,9 +70,27 @@ export type KeyboardToolbarProps = Omit<
    * @deprecated Use compound API with `<KeyboardToolbar.Done />` component and `text` prop instead.
    */
   doneText?: ReactNode;
-  /** Custom touchable component for toolbar (used for prev/next/done buttons). */
+  /**
+   * Custom touchable component for toolbar (used for prev/next/done buttons).
+   *
+   * @deprecated Use `button` property for corresponding element instead:
+   * ```tsx
+   * <KeyboardToolbar>
+   *   <KeyboardToolbar.Prev button={MyCustomButton} />
+   * </KeyboardToolbar>
+   * ```.
+   */
   button?: typeof Button;
-  /** Custom icon component used to display next/prev buttons. */
+  /**
+   * Custom icon component used to display next/prev buttons.
+   *
+   * @deprecated Use `icon` property for corresponding element instead:
+   * ```tsx
+   * <KeyboardToolbar>
+   *   <KeyboardToolbar.Prev icon={MyCustomIcon} />
+   * </KeyboardToolbar>
+   * ```.
+   */
   icon?: typeof Arrow;
   /**
    * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input