feat: pass data to the component

kosmydel · Aug 24, 2023 · ff3f44b · ff3f44b
1 parent a2e7397
commit ff3f44b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 43 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,14 +1,23 @@
 import * as React from 'react';
+import { useState } from 'react';
 
 import { StyleSheet, SafeAreaView, Platform, StatusBar } from 'react-native';
 import { MyButton } from 'react-native-awesome-module';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
+const getItems = (count: number) =>
+  Array.from({ length: count }, (_, k) => k).map((k) => ({
+    id: `item-${k}`,
+    content: `item ${k}`,
+  }));
+
 export default function App() {
+  const [items, setItems] = useState(getItems(5));
+
   return (
     <GestureHandlerRootView style={[styles.container]}>
       <SafeAreaView style={[styles.container, styles.androidSafeArea]}>
-        <MyButton />
+        <MyButton items={items} setData={setItems} />
       </SafeAreaView>
     </GestureHandlerRootView>
   );

diff --git a/src/MyButton/index.tsx b/src/MyButton/index.tsx
@@ -1,38 +1,22 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Text, StyleSheet, TouchableOpacity } from 'react-native';
 import DraggableFlatList, {
   ScaleDecorator,
   type RenderItemParams,
 } from 'react-native-draggable-flatlist';
 
-const NUM_ITEMS = 10;
-function getColor(i: number) {
-  const multiplier = 255 / (NUM_ITEMS - 1);
-  const colorVal = i * multiplier;
-  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
-}
-
-type Item = {
-  key: string;
-  label: string;
-  height: number;
-  width: number;
-  backgroundColor: string;
+export type Item = {
+  id: string;
+  content: string;
 };
 
-const initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) => {
-  const backgroundColor = getColor(index);
-  return {
-    key: `item-${index}`,
-    label: String(index) + '',
-    height: 100,
-    width: 60 + Math.random() * 40,
-    backgroundColor,
-  };
-});
+export type Props = {
+  items: Item[];
+  setData: (data: Item[]) => void;
+};
 
-export const MyButton = () => {
-  const [data, setData] = useState(initialData);
+export const MyButton = ({ items, setData }: Props) => {
+  console.log('items', items);
 
   const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
     return (
@@ -45,17 +29,17 @@ export const MyButton = () => {
             { backgroundColor: isActive ? 'red' : item.backgroundColor },
           ]}
         >
-          <Text style={styles.text}>{item.label}</Text>
+          <Text style={styles.text}>{item.content}</Text>
         </TouchableOpacity>
       </ScaleDecorator>
     );
   };
 
   return (
     <DraggableFlatList
-      data={data}
+      data={items}
       onDragEnd={({ data }) => setData(data)}
-      keyExtractor={(item) => item.key}
+      keyExtractor={(item) => item.id}
       renderItem={renderItem}
     />
   );
@@ -69,7 +53,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   text: {
-    color: 'white',
+    color: 'red',
     fontSize: 24,
     fontWeight: 'bold',
     textAlign: 'center',

diff --git a/src/MyButton/index.web.tsx b/src/MyButton/index.web.tsx
@@ -1,12 +1,6 @@
 import React, { useState } from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-
-// fake data generator
-const getItems = (count) =>
-  Array.from({ length: count }, (v, k) => k).map((k) => ({
-    id: `item-${k}`,
-    content: `item ${k}`,
-  }));
+import { View } from 'react-native';
 
 // a little function to help us with reordering the result
 const reorder = (list, startIndex, endIndex) => {
@@ -38,9 +32,17 @@ const getListStyle = (isDraggingOver) => ({
   width: 250,
 });
 
-export const MyButton = () => {
-  const [items, setItems] = useState(getItems(10));
+export type Item = {
+  id: string;
+  content: string;
+};
+
+export type Props = {
+  items: Item[];
+  setData: (data: Item[]) => void;
+};
 
+export const MyButton = ({ items, setData }: Props) => {
   const onDragEnd = (result) => {
     // dropped outside the list
     if (!result.destination) {
@@ -53,14 +55,14 @@ export const MyButton = () => {
       result.destination.index
     );
 
-    setItems(reorderedItems);
+    setData(reorderedItems);
   };
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable">
         {(provided, snapshot) => (
-          <div
+          <View
             {...provided.droppableProps}
             ref={provided.innerRef}
             style={getListStyle(snapshot.isDraggingOver)}
@@ -83,7 +85,7 @@ export const MyButton = () => {
               </Draggable>
             ))}
             {provided.placeholder}
-          </div>
+          </View>
         )}
       </Droppable>
     </DragDropContext>