Example and readme fix

tero-paananen · Mar 7, 2022 · 9078f10 · 9078f10
1 parent 4d262ea
commit 9078f10
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/App.tsx b/App.tsx
@@ -20,15 +20,18 @@ const INITIAL_DATA = Array.from({length: 30}, (_, i) => {
 const App = () => {
   const [data, setData] = useState<MyItem[]>(INITIAL_DATA);
 
+  // Item move done and new item array received
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number, items: Item[]) => {
       setData(items);
     },
     [],
   );
 
+  // Your custom FlatList item
   const MyListItem = React.memo(
     ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => {
+      // Long press fires 'drag' to start item dragging
       const handleLongPress = useCallback(() => {
         drag && drag(item.id);
       }, [drag, item.id]);

diff --git a/README.md b/README.md
@@ -22,46 +22,45 @@ Not tested in production.
 ```
 const App = () => {
   const [data, setData] = useState<MyItem[]>(INITIAL_DATA);
-  const [selected, setSelected] = useState<Item | undefined>(undefined);
 
-  // Handle item data update on move
+  // Item move done and new item array received
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number, items: Item[]) => {
-      console.log('handleMove ', {fromIndex, toIndex});
-      setSelected(undefined);
       setData(items);
     },
     [],
   );
 
-  // Make your custom item for FlatList
-  const MyListItem = React.memo(({item}: {item: MyItem}) => {
-    const handleSelected = useCallback(() => {
-      console.log('selected', {item});
-      item.id === selected?.id ? setSelected(undefined) : setSelected(item);
-    }, [item]);
-    const backgroundColor = item.id === selected?.id ? 'lightgray' : undefined;
-    return (
-      <TouchableOpacity
-        onPress={handleSelected}
-        style={[styles.itemContainer, {backgroundColor}]}
-        key={item.id}>
-        <Text style={[styles.item, {height: item.height}]}>{item.title}</Text>
-      </TouchableOpacity>
-    );
-  });
-
-  const renderItem = useCallback(({item}: {item: MyItem}) => {
-    return <MyListItem item={item} />;
-  }, [selected]);
+  // Your custom FlatList item
+  const MyListItem = React.memo(
+    ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => {
+      // Long press fires 'drag' to start item dragging
+      const handleLongPress = useCallback(() => {
+        drag && drag(item.id);
+      }, [drag, item.id]);
+      return (
+        <TouchableOpacity
+          onLongPress={handleLongPress}
+          style={styles.itemContainer}
+          key={item.id}>
+          <Text style={[styles.item, {height: item.height}]}>{item.title}</Text>
+        </TouchableOpacity>
+      );
+    },
+  );
+  const renderItem = useCallback(
+    ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => {
+      return <MyListItem item={item} drag={drag} />;
+    },
+    [],
+  );
 
   return (
     <View style={styles.container}>
       <View style={styles.header} />
       <DraggableFlatList
         style={styles.list}
         data={data}
-        selected={selected}
         renderItem={renderItem}
         onHandleMove={handleMove}
       />