feat: improved types for Picker component

Bur0 · May 27, 2022 · d4c2331 · d4c2331
1 parent 3a475fa
commit d4c2331
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -8,9 +8,11 @@ import { Picker, onOpen } from 'react-native-actions-sheet-picker';
  */
 import countries from './countries.json';
 
+type CountryInfo = typeof countries[number];
+
 export default function App() {
-  const [data, setData] = useState([]);
-  const [selected, setSelected] = useState(undefined);
+  const [data, setData] = useState<CountryInfo[]>([]);
+  const [selected, setSelected] = useState<CountryInfo | undefined>(undefined);
   const [query, setQuery] = useState('');
 
   useEffect(() => {
@@ -22,20 +24,16 @@ export default function App() {
    * @param {string} filter
    */
   const filteredData = useMemo(() => {
-    if (data && data.length > 0) {
-      return data.filter((item) =>
-        item.name
-          .toLocaleLowerCase('en')
-          .includes(query.toLocaleLowerCase('en'))
-      );
-    }
+    return data.filter((item) =>
+      item.name.toLocaleLowerCase('en').includes(query.toLocaleLowerCase('en'))
+    );
   }, [data, query]);
 
   /*
    **Input search
    *@param {string} text
    */
-  const onSearch = (text) => {
+  const onSearch = (text: string) => {
     setQuery(text);
   };
 

diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
@@ -21,7 +21,7 @@ export const onClose = (id: any) => {
   SheetManager.hide(id);
 };
 
-export const Picker: React.FC<PickerProps> = ({
+export const Picker = <T,>({
   id,
   data = [],
   inputValue,
@@ -39,10 +39,10 @@ export const Picker: React.FC<PickerProps> = ({
   flatListProps,
   actionsSheetProps,
   renderListItem,
-}) => {
+}: PickerProps<T>) => {
   const [selectedKey, setSelectedKey] = useState(null);
 
-  const actionSheetRef = createRef<any>();
+  const actionSheetRef = createRef<ActionSheet>();
 
   const scrollViewRef = useRef(null);
 
@@ -58,7 +58,7 @@ export const Picker: React.FC<PickerProps> = ({
         borderColor: '#CDD4D9',
       }}
       onPress={() => {
-        ItemOnPress(item);
+        itemOnPress(item);
         setSelectedKey(index);
       }}
     >
@@ -68,13 +68,12 @@ export const Picker: React.FC<PickerProps> = ({
     </TouchableOpacity>
   );
 
-  const ItemOnPress = (item: any) => {
+  const itemOnPress = (item: T) => {
     setSelected(item);
     onClose();
   };
 
-  const keyExtractor = (_item: any, index: { toString: () => any }) =>
-    index.toString();
+  const keyExtractor = (_item: T, index: number) => index.toString();
 
   return (
     <ActionSheet
@@ -90,7 +89,7 @@ export const Picker: React.FC<PickerProps> = ({
           height: height,
         }}
       >
-        <FlatList
+        <FlatList<T>
           disableScrollViewPanResponder={true}
           contentContainerStyle={{ paddingHorizontal: 20 }}
           stickyHeaderIndices={[0]}
@@ -177,7 +176,9 @@ export const Picker: React.FC<PickerProps> = ({
           nestedScrollEnabled={true}
           data={data}
           renderItem={({ item, index }) => {
-            if (renderListItem) return renderListItem(item, index);
+            if (renderListItem) {
+              return renderListItem(item, index);
+            }
 
             return <Item item={item} index={index} />;
           }}

diff --git a/src/components/Picker.types.ts b/src/components/Picker.types.ts
@@ -1,21 +1,27 @@
-import type { TextInputProps } from 'react-native';
+import type { FlatListProps, TextInputProps } from 'react-native';
+import type { ActionSheetProps } from 'react-native-actions-sheet';
 
-export interface PickerProps {
+type RenderItemProp<T> = {
+  renderListItem: (item: T, index: number) => React.ReactElement;
+};
+
+export type PickerProps<T> = {
   id: string;
-  data?: never[] | undefined;
+  data: T[];
   placeholderText?: string;
   searchable?: boolean;
   onSearch?: (value: string) => void;
   label?: string;
   placeholderTextColor?: string;
   closeText?: string;
-  setSelected?: any;
+  setSelected: (value: T) => void;
   loading?: boolean;
   height?: number;
   inputValue?: string;
   noDataFoundText?: string;
   searchInputProps?: TextInputProps;
-  flatListProps?: object;
-  actionsSheetProps?: object;
-  renderListItem?: any;
-}
+  flatListProps?: FlatListProps<T>;
+  actionsSheetProps?: ActionSheetProps;
+} & (T extends { name: string }
+  ? Partial<RenderItemProp<T>>
+  : RenderItemProp<T>);