Update TS

Author: retyui

src/CodeField.tsx

@@ -1,12 +1,22 @@
 import {
+  Omit,
   StyleProp,
   TextInput,
   TextInputProps,
   TextStyle,
   View,
   ViewProps,
 } from 'react-native';
-import React, {ComponentType, ReactNode, Ref} from 'react';
+import React, {
+  ComponentPropsWithRef,
+  ComponentType,
+  ElementType,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  Ref,
+  RefAttributes,
+} from 'react';
 import {getStyle, getSymbols} from './utils';
 import {useFocusState} from './useFocusState';
 
@@ -18,13 +28,12 @@ export interface RenderCellOptions {
   isFocused: boolean;
 }
 
-type TextInputPropsWithoutStyle = Omit<TextInputProps, 'style'>;
+type OmitStyle<T extends {style?: any}> = Omit<T, 'style'>;
 
-export interface Props extends TextInputPropsWithoutStyle {
+interface BaseProps {
   renderCell: (options: RenderCellOptions) => ReactNode;
   RootProps?: ViewProps;
   RootComponent?: ComponentType<ViewProps>;
-  InputComponent?: ComponentType<TextInputProps>;
   rootStyle?: ViewProps['style'];
   textInputStyle?: StyleProp<TextStyle>;
   cellCount?: number;
@@ -45,7 +54,7 @@ function CodeFieldComponent(
     RootComponent = View,
     InputComponent = TextInput,
     ...rest
-  }: Props,
+  }: Props & {InputComponent?: ComponentType<any>},
   ref: Ref<TextInput>,
 ) {
   const focusState = useFocusState(onBlur, onFocus);
@@ -87,4 +96,22 @@ function CodeFieldComponent(
   );
 }
 
-export const CodeField = React.forwardRef(CodeFieldComponent);
+export interface Props
+  extends BaseProps,
+    OmitStyle<TextInputProps>,
+    RefAttributes<TextInput> {
+  //
+}
+
+export interface CodeFieldOverridableComponent {
+  <C extends ElementType>(
+    props: {InputComponent: C} & OmitStyle<ComponentPropsWithRef<C>> &
+      BaseProps,
+  ): ReactElement;
+
+  (props: Props): ReactElement;
+}
+
+export const CodeField = forwardRef(
+  CodeFieldComponent,
+) as CodeFieldOverridableComponent;

src/__tests__/CodeField.test.tsx

@@ -1,6 +1,6 @@
-import React, {ComponentProps} from 'react';
-import {View, Text} from 'react-native';
-import {render, act} from '@testing-library/react-native';
+import React, {ComponentProps, ForwardedRef, forwardRef} from 'react';
+import {Text, TextInput, TextInputProps, View} from 'react-native';
+import {act, render} from '@testing-library/react-native';
 import {CodeField} from '../CodeField';
 import {styles} from '../CodeField.styles';
 
@@ -82,3 +82,72 @@ it('should invoke renderCell for third cell when isFocused and it empty', () =>
     [{index: 3, isFocused: false, symbol: ''}],
   ]);
 });
+
+{
+  console.log(
+    <CodeField
+      renderCell={() => null}
+      ref={(ref: TextInput | null) => {
+        ref?.focus();
+        ref?.blur();
+      }}
+    />,
+  );
+
+  console.log(
+    // @ts-expect-error - number is not function
+    <CodeField
+      onChangeText={123}
+      renderCell={() => null}
+      ref={(ref: TextInput | null) => {
+        ref?.focus();
+        ref?.blur();
+      }}
+    />,
+  );
+}
+
+{
+  interface MyTextInput extends TextInputProps {
+    myRequiredProps: string;
+  }
+
+  // eslint-disable-next-line react/display-name
+  const MyTextInput = forwardRef(
+    (props: MyTextInput, ref: ForwardedRef<TextInput>) => (
+      <View testID={props.myRequiredProps}>
+        <TextInput ref={ref} />
+      </View>
+    ),
+  );
+
+  console.log(
+    <CodeField
+      renderCell={() => null}
+      myRequiredProps="my-required-props"
+      InputComponent={MyTextInput}
+    />,
+  );
+
+  console.log(
+    // @ts-expect-error - `myRequiredProps` is required prop
+    <CodeField<typeof MyTextInput>
+      renderCell={() => null}
+      InputComponent={MyTextInput}
+    />,
+  );
+
+  console.log(
+    // @ts-expect-error - `myRequiredProps` is required prop
+    <CodeField renderCell={() => null} InputComponent={MyTextInput} />,
+  );
+
+  console.log(
+    <CodeField
+      renderCell={() => null}
+      // @ts-expect-error - number is not string
+      myRequiredProps={1}
+      InputComponent={MyTextInput}
+    />,
+  );
+}