feat: better typing, remove haptics

kosmydel · Aug 24, 2023 · 43b7e57 · 43b7e57
1 parent a408740
commit 43b7e57
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 46 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "expo": "~49.0.8",
-    "expo-haptics": "~12.4.0",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -13,8 +13,6 @@ import {
 import { DraggableList, ScaleDecorator } from 'react-native-x-draggable-list';
 import type { RenderItemParams } from 'react-native-draggable-flatlist';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import type { Item } from 'src/DraggableList/types';
-import * as Haptics from 'expo-haptics';
 
 const COLORS = {
   LIST: ['#FAF1E4', '#CEDEBD', '#9EB384'],
@@ -25,10 +23,19 @@ const COLORS = {
 };
 
 const getBackgroundColor = (index: number) => {
-  return COLORS.LIST[index % COLORS.LIST.length];
+  return COLORS.LIST[index % COLORS.LIST.length] ?? 'white';
 };
 
-const getItems = (count: number) =>
+export type Item = {
+  id: string;
+  content: {
+    label: string;
+    subtitle: string;
+    color: string;
+  };
+};
+
+const getItems = (count: number): Item[] =>
   Array.from({ length: count }, (_, k) => k).map((k) => ({
     id: `item-${k}`,
     content: {
@@ -42,8 +49,6 @@ const getCurrentTime = () => {
   return new Date().toLocaleTimeString();
 };
 
-const isNative = Platform.OS === 'ios' || Platform.OS === 'android';
-
 export default function App() {
   const [items, setItems] = useState(getItems(15));
   const [lastEvent, setLastEvent] = useState('Listening for events...');
@@ -82,29 +87,14 @@ export default function App() {
         <DraggableList
           items={items}
           renderItem={renderItem}
-          onDragEnd={({ data }: any) => {
+          onDragEnd={({ data }) => {
             logEvent('onDragEnd');
             setItems(data);
-            if (isNative) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-            }
-          }}
-          onDragBegin={() => {
-            logEvent('onDragBegin');
-            if (isNative) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-            }
-          }}
-          onPlaceholderIndexChange={(index: number) => {
-            logEvent(`onPlaceholderIndexChange ${index}`);
-            if (isNative) {
-              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-            }
           }}
+          onDragBegin={() => logEvent('onDragBegin')}
+          onPlaceholderIndexChange={(index: number) =>
+            logEvent(`onPlaceholderIndexChange ${index}`)
+          }
         />
       </SafeAreaView>
     </GestureHandlerRootView>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3972,11 +3972,6 @@ expo-font@~11.4.0:
   dependencies:
     fontfaceobserver "^2.1.0"
 
-expo-haptics@~12.4.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.4.0.tgz#99ad9d6a8eafb219aee022ec1412a998e1c90d71"
-  integrity sha512-eELhZOO64oJa6AtEUxosatjSENE/tQgF2rVJxDsvRdx8Vgd3uFC+FRoM3nbMVJkxDgAaP3EKOPT1zVM41sNurw==
-
 expo-keep-awake@~12.3.0:
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz#c42449ae19c993274ddc43aafa618792b6aec408"

diff --git a/src/DraggableList/index.tsx b/src/DraggableList/index.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
-import type { DraggableListProps } from './types';
+import type { DefaultItemProps, DraggableListProps } from './types';
 
-export const DraggableList = ({ items, ...props }: DraggableListProps) => {
+export const DraggableList = <T extends DefaultItemProps>({
+  items,
+  ...props
+}: DraggableListProps<T>) => {
   return (
     <DraggableFlatList
       data={items}

diff --git a/src/DraggableList/index.web.tsx b/src/DraggableList/index.web.tsx
@@ -7,16 +7,16 @@ import {
   type OnDragUpdateResponder,
 } from 'react-beautiful-dnd';
 import { View } from 'react-native';
-import type { DraggableListProps, Item } from './types';
+import type { DraggableListProps, DefaultItemProps } from './types';
 
-type ReoderParams = {
-  list: Item[];
+type ReoderParams<T> = {
+  list: T[];
   startIndex: number;
   endIndex: number;
 };
 
 // Function to help us with reordering the result
-const reorder = ({ list, startIndex, endIndex }: ReoderParams) => {
+const reorder = <T,>({ list, startIndex, endIndex }: ReoderParams<T>): T[] => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
 
@@ -27,13 +27,13 @@ const reorder = ({ list, startIndex, endIndex }: ReoderParams) => {
   return result;
 };
 
-export const DraggableList = ({
+export const DraggableList = <T extends DefaultItemProps>({
   items,
   renderItem,
   onDragEnd: onDragEndCallback,
   onDragBegin: onDragBegin,
   onPlaceholderIndexChange,
-}: DraggableListProps) => {
+}: DraggableListProps<T>) => {
   const onDragEnd: OnDragEndResponder = useCallback(
     (result) => {
       if (!result.destination) {

diff --git a/src/DraggableList/types.tsx b/src/DraggableList/types.tsx
@@ -1,14 +1,13 @@
 import type { RenderItemParams } from 'react-native-draggable-flatlist';
 
-export type Item = {
+export type DefaultItemProps = {
   id: string;
-  content: any;
 };
 
-export type DraggableListProps = {
-  items: Item[];
-  renderItem: (params: RenderItemParams<Item>) => React.ReactNode;
-  onDragEnd?: (params: { data: Item[] }) => void;
+export type DraggableListProps<T extends DefaultItemProps> = {
+  items: T[];
+  renderItem: (params: RenderItemParams<T>) => React.ReactNode;
+  onDragEnd?: (params: { data: T[] }) => void;
   onDragBegin?: () => void;
   onPlaceholderIndexChange?: ((placeholderIndex: number) => void) | undefined;
 };