Dialog text input

src/components/Dialog/index.tsx

@@ -3,12 +3,14 @@ import {View, Dimensions} from 'react-native'
 import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetScrollView,
+  BottomSheetTextInput,
   BottomSheetView,
 } from '@gorhom/bottom-sheet'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {useTheme, atoms as a} from '#/alf'
 import {Portal} from '#/components/Portal'
+import {createTextInput} from '#/components/forms/InputText'
 
 import {
   DialogOuterProps,
@@ -19,6 +21,8 @@ import {Context} from '#/components/Dialog/context'
 
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
+// @ts-ignore
+export const InputText = createTextInput(BottomSheetTextInput)
 
 export function Outer({
   children,

src/components/Dialog/index.web.tsx

@@ -13,6 +13,7 @@ import {Context, useDialogContext} from '#/components/Dialog/context'
 
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
+export {InputText} from '#/components/forms/InputText'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 

src/components/forms/InputText.tsx

@@ -20,7 +20,8 @@ type Props = BaseProps &
     suffix?: React.FunctionComponent<any>
   }
 
-export function InputText({
+export function createTextInput(Input: typeof TextInput) {
+  return function InputText({
     value: initialValue,
     onChange,
     testID,
@@ -31,7 +32,7 @@ export function InputText({
     icon: Icon,
     suffix: Suffix,
     ...props
-}: Props) {
+  }: Props) {
     const labelId = React.useId()
     const t = useTheme()
     const [value, setValue] = React.useState<string>(initialValue)
@@ -75,7 +76,9 @@ export function InputText({
         if (hasError) {
           base.push({
             backgroundColor:
-            t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
+              t.name === 'light'
+                ? t.palette.negative_25
+                : t.palette.negative_900,
             borderColor:
               t.name === 'light'
                 ? t.palette.negative_300
@@ -86,7 +89,9 @@ export function InputText({
           })
           focus.push({
             backgroundColor:
-            t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
+              t.name === 'light'
+                ? t.palette.negative_25
+                : t.palette.negative_900,
             borderColor: tokens.color.red_500,
           })
         }
@@ -155,7 +160,7 @@ export function InputText({
           </Text>
         )}
 
-      <TextInput
+        <Input
           {...props}
           value={value}
           testID={testID}
@@ -237,4 +242,7 @@ export function InputText({
         )}
       </View>
     )
+  }
 }
+
+export const InputText = createTextInput(TextInput)

src/view/screens/Storybook/Dialogs.tsx

@@ -56,6 +56,14 @@ export function Dialogs() {
           <View style={[a.relative, a.gap_md, a.w_full]}>
             <H3 nativeID="dialog-title">Dialog</H3>
             <P nativeID="dialog-description">Description</P>
+            <Dialog.InputText
+              testID=""
+              value=""
+              onChange={() => {}}
+              placeholder="Type here"
+              accessibilityLabel="Type"
+              accessibilityHint="Type"
+            />
             <View style={{height: 1000}} />
             <View style={[a.flex_row, a.justify_end]}>
               <Button