Allow extension of input

src/components/Dialog/index.tsx

@@ -10,7 +10,7 @@ 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 {createInput} from '#/components/forms/TextField'
 
 import {
   DialogOuterProps,
@@ -22,7 +22,7 @@ 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 const Input = createInput(BottomSheetTextInput)
 
 export function Outer({
   children,

src/components/forms/TextField.tsx

@@ -149,7 +149,8 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   isInvalid?: boolean
 }
 
-function Input({
+export function createInput(Component: typeof TextInput) {
+  return function Input({
     label,
     placeholder,
     value,
@@ -181,7 +182,7 @@ function Input({
 
     return (
       <>
-      <TextInput
+        <Component
           accessibilityHint={undefined}
           {...rest}
           aria-label={label}
@@ -215,12 +216,17 @@ function Input({
             ctx.hovered ? chromeHover : {},
             ctx.focused ? chromeFocus : {},
             ctx.isInvalid ? chromeError : {},
-          ctx.isInvalid && (ctx.hovered || ctx.focused) ? chromeErrorHover : {},
+            ctx.isInvalid && (ctx.hovered || ctx.focused)
+              ? chromeErrorHover
+              : {},
           ]}
         />
       </>
     )
   }
+}
+
+const Input = createInput(TextInput)
 
 function Icon({icon: Comp}: {icon: React.ComponentType<SVGIconProps>}) {
   const t = useTheme()

src/view/screens/Storybook/Dialogs.tsx

@@ -18,8 +18,7 @@ export function Dialogs() {
         color="secondary"
         size="small"
         onPress={() => control.open()}
-        accessibilityLabel="Open basic dialog"
-        accessibilityHint="Open basic dialog">
+        label="Open basic dialog">
         Open basic dialog
       </Button>
 
@@ -28,8 +27,7 @@ export function Dialogs() {
         color="primary"
         size="small"
         onPress={() => prompt.open()}
-        accessibilityLabel="Open prompt"
-        accessibilityHint="Open prompt">
+        label="Open prompt">
         Open prompt
       </Button>
 
@@ -58,14 +56,7 @@ export function Dialogs() {
             <P nativeID="dialog-description">
               A scrollable dialog with an input within it.
             </P>
-            <Dialog.InputText
-              testID=""
-              value=""
-              onChange={() => {}}
-              placeholder="Type here"
-              accessibilityLabel="Type"
-              accessibilityHint="Type"
-            />
+            <Dialog.Input value="" onChangeText={() => {}} label="Type here" />
             <View style={{height: 1000}} />
             <View style={[a.flex_row, a.justify_end]}>
               <Button
@@ -73,8 +64,7 @@ export function Dialogs() {
                 color="primary"
                 size="small"
                 onPress={() => control.close()}
-                accessibilityLabel="Open basic dialog"
-                accessibilityHint="Open basic dialog">
+                label="Open basic dialog">
                 Close basic dialog
               </Button>
             </View>