Extend Form provider suppressedError to TextInput component (#274)

* Update form package export types * import type * Allow form suppressError on TextInputs * suppress Error on dynamic flat list example screen * Added changesets
FormidableLabs · Nov 18, 2024 · 4c437e9 · 4c437e9
1 parent 9cdde2d
commit 4c437e9
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 23 deletions.
diff --git a/.changeset/six-kings-complain.md b/.changeset/six-kings-complain.md
@@ -0,0 +1,11 @@
+---
+'@react-native-ama/forms': patch
+'@react-native-ama/lists': patch
+'@react-native-ama/animations': patch
+'@react-native-ama/core': patch
+'@react-native-ama/extras': patch
+'@react-native-ama/internal': patch
+'@react-native-ama/react-native': patch
+---
+
+Added `suppressError` to `forms` package Form provider
diff --git a/examples/shared/src/screens/FlatListDynamic.screen.tsx b/examples/shared/src/screens/FlatListDynamic.screen.tsx
@@ -29,6 +29,7 @@ export const FlatListDynamicScreen = () => {
     <View style={styles.container}>
       <Spacer height="normal" />
       <TextInput
+        suppressError={true}
         labelComponent={<Text>Filter:</Text>}
         returnKeyType={'done'}
         style={styles.input}

diff --git a/packages/forms/src/components/FormField.tsx b/packages/forms/src/components/FormField.tsx
@@ -26,7 +26,6 @@ export const FormField = ({
     typeof TouchableWithoutFeedback
   > | null>(null);
 
-  // @ts-ignore
   const formProps = useFormField({
     hasFocusCallback: false,
     ref: viewRef,

diff --git a/packages/forms/src/components/FormSwitch.tsx b/packages/forms/src/components/FormSwitch.tsx
@@ -1,6 +1,6 @@
 import {
   SwitchListItem,
-  SwitchListItemProps,
+  type SwitchListItemProps,
 } from '@react-native-ama/react-native';
 import React from 'react';
 

diff --git a/packages/forms/src/components/TextInput.tsx b/packages/forms/src/components/TextInput.tsx
@@ -8,20 +8,18 @@ import {
   TextInputProps as RNTextInputProps,
 } from 'react-native';
 
-import { useTextInput } from '../hooks/useTextInput';
+import { UseTextInput, useTextInput } from '../hooks/useTextInput';
 
-export type TextInputProps = RNTextInputProps & {
-  labelComponent: JSX.Element;
-  labelPosition?: 'beforeInput' | 'afterInput';
-  nextFormField?: React.RefObject<RNTextInput>;
-  id?: string;
-  nextFieldId?: string;
-  hasValidation: boolean;
-  errorComponent?: JSX.Element;
-  hasError?: boolean;
-  errorPosition?: 'belowLabel' | 'afterInput';
-  errorMessage?: string;
-};
+export type TextInputProps = RNTextInputProps &
+  Omit<UseTextInput, 'required' | 'accessibilityLabel'> & {
+    labelComponent: JSX.Element;
+    labelPosition?: 'beforeInput' | 'afterInput';
+    nextFormField?: React.RefObject<RNTextInput>;
+    id?: string;
+    nextFieldId?: string;
+    errorComponent?: JSX.Element;
+    errorPosition?: 'belowLabel' | 'afterInput';
+  };
 
 export const TextInput = React.forwardRef<RNTextInput, TextInputProps>(
   (
@@ -55,18 +53,17 @@ export const TextInput = React.forwardRef<RNTextInput, TextInputProps>(
       [labelComponent, rest.accessibilityLabel],
     );
 
-    // @ts-ignore
     const textInputProps = useTextInput({
-      required: false,
+      ...rest,
       ref: inputRef,
       id,
       nextFieldId,
       nextFormFieldRef: nextFormField,
       hasError,
       hasValidation,
       errorMessage,
+      required: false,
       accessibilityLabel,
-      ...rest,
     });
 
     const checks = __DEV__ ? useChecks?.() : undefined;

diff --git a/packages/forms/src/hooks/useTextInput.ts b/packages/forms/src/hooks/useTextInput.ts
@@ -14,7 +14,7 @@ import type {
 import { TextInputProps } from '../components/TextInput';
 import { UseFormField, useFormField } from './useFormField';
 
-type UseTextInput = Omit<UseFormField, 'hasFocusCallback'> & {
+export type UseTextInput = Omit<UseFormField, 'hasFocusCallback'> & {
   onLayout?: (event: LayoutChangeEvent) => void;
   returnKeyType?: ReturnKeyTypeOptions;
   onSubmitEditing?: (

diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
@@ -4,8 +4,8 @@ import { isFocused } from '@react-native-ama/internal';
 
 import {
   FormActions,
-  FormProps,
   Form as FormProvider,
+  type FormProps,
 } from './components/Form';
 import { FormField, FormFieldProps } from './components/FormField';
 import { FormSubmit, FormSubmitProps } from './components/FormSubmit';
@@ -26,11 +26,11 @@ Form.Switch = FormSwitch;
 export { Form, FormField, FormSubmit, FormSwitch };
 
 // Components
-export { TextInput } from './components/TextInput';
+export { TextInput, type TextInputProps } from './components/TextInput';
 
 // Hooks
-export { useFormField } from './hooks/useFormField';
-export { useTextInput } from './hooks/useTextInput';
+export { useFormField, type UseFormField } from './hooks/useFormField';
+export { useTextInput, type UseTextInput } from './hooks/useTextInput';
 
 // utils
 export { isFocused };