Move example to top

Author: Saadnajmi

packages/rn-tester/js/examples/DragAndDrop/DragAndDropExample.js

@@ -24,6 +24,77 @@ const styles = StyleSheet.create({
   },
 });
 
+
+function DragDropView(): React.Node {
+  // $FlowFixMe[missing-empty-array-annot]
+  const [log, setLog] = React.useState([]);
+  const appendLog = (line: string) => {
+    const limit = 3;
+    let newLog = log.slice(0, limit - 1);
+    newLog.unshift(line);
+    setLog(newLog);
+  };
+  const [imageUri, setImageUri] = React.useState(
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==',
+  );
+  const [isDraggingOver, setIsDraggingOver] = React.useState(false);
+
+  return (
+    <>
+      <View
+        draggedTypes={['fileUrl', 'image']}
+        onDragEnter={e => {
+          appendLog('onDragEnter');
+          setIsDraggingOver(true);
+        }}
+        onDragLeave={e => {
+          appendLog('onDragLeave');
+          setIsDraggingOver(false);
+        }}
+        onDrop={e => {
+          appendLog('onDrop');
+          setIsDraggingOver(false);
+          if (e.nativeEvent.dataTransfer.files && e.nativeEvent.dataTransfer.files[0]) {
+            setImageUri(e.nativeEvent.dataTransfer.files[0].uri);
+          }
+        }}
+        style={{
+          height: 150,
+          backgroundColor: isDraggingOver ? '#e3f2fd' : '#f0f0f0',
+          borderWidth: 2,
+          borderColor: isDraggingOver ? '#2196f3' : '#0066cc',
+          borderStyle: 'dashed',
+          borderRadius: 8,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginVertical: 10,
+        }}>
+        <Text style={{color: isDraggingOver ? '#1976d2' : '#666', fontSize: 14}}>
+          {isDraggingOver ? 'Release to drop' : 'Drop an image or file here'}
+        </Text>
+      </View>
+      <View style={{flexDirection: 'row', gap: 10, alignItems: 'flex-start'}}>
+        <View style={{flex: 1}}>
+          <Text style={{fontWeight: 'bold', marginBottom: 4}}>Event Log:</Text>
+          <Text style={{height: 90}}>{log.join('\n')}</Text>
+        </View>
+        <View style={{flex: 1}}>
+          <Text style={{fontWeight: 'bold', marginBottom: 4}}>Dropped Image:</Text>
+          <Image
+            source={{uri: imageUri}}
+            style={{
+              width: 128,
+              height: 128,
+              borderWidth: 1,
+              borderColor: '#ccc',
+            }}
+          />
+        </View>
+      </View>
+    </>
+  );
+}
+
 function OnDragEnterOnDragLeaveOnDrop(): React.Node {
   // $FlowFixMe[missing-empty-array-annot]
   const [log, setLog] = React.useState([]);
@@ -117,94 +188,24 @@ function OnPaste(): React.Node {
   );
 }
 
-function OnDropView(): React.Node {
-  // $FlowFixMe[missing-empty-array-annot]
-  const [log, setLog] = React.useState([]);
-  const appendLog = (line: string) => {
-    const limit = 3;
-    let newLog = log.slice(0, limit - 1);
-    newLog.unshift(line);
-    setLog(newLog);
-  };
-  const [imageUri, setImageUri] = React.useState(
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==',
-  );
-  const [isDraggingOver, setIsDraggingOver] = React.useState(false);
-  
-  return (
-    <>
-      <View
-        draggedTypes={['fileUrl', 'image']}
-        onDragEnter={e => {
-          appendLog('onDragEnter');
-          setIsDraggingOver(true);
-        }}
-        onDragLeave={e => {
-          appendLog('onDragLeave');
-          setIsDraggingOver(false);
-        }}
-        onDrop={e => {
-          appendLog('onDrop');
-          setIsDraggingOver(false);
-          if (e.nativeEvent.dataTransfer.files && e.nativeEvent.dataTransfer.files[0]) {
-            setImageUri(e.nativeEvent.dataTransfer.files[0].uri);
-          }
-        }}
-        style={{
-          height: 150,
-          backgroundColor: isDraggingOver ? '#e3f2fd' : '#f0f0f0',
-          borderWidth: 2,
-          borderColor: isDraggingOver ? '#2196f3' : '#0066cc',
-          borderStyle: 'dashed',
-          borderRadius: 8,
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginVertical: 10,
-        }}>
-        <Text style={{color: isDraggingOver ? '#1976d2' : '#666', fontSize: 14}}>
-          {isDraggingOver ? 'Release to drop' : 'Drop an image or file here'}
-        </Text>
-      </View>
-      <View style={{flexDirection: 'row', gap: 10, alignItems: 'flex-start'}}>
-        <View style={{flex: 1}}>
-          <Text style={{fontWeight: 'bold', marginBottom: 4}}>Event Log:</Text>
-          <Text style={{height: 90}}>{log.join('\n')}</Text>
-        </View>
-        <View style={{flex: 1}}>
-          <Text style={{fontWeight: 'bold', marginBottom: 4}}>Dropped Image:</Text>
-          <Image
-            source={{uri: imageUri}}
-            style={{
-              width: 128,
-              height: 128,
-              borderWidth: 1,
-              borderColor: '#ccc',
-            }}
-          />
-        </View>
-      </View>
-    </>
-  );
-}
-
 exports.title = 'Drag and Drop Events';
 exports.category = 'UI';
 exports.description = 'Demonstrates onDragEnter, onDragLeave, onDrop, and onPaste event handling in TextInput.';
 exports.examples = [
   {
-    title: 'onDrop with View - Drop Image',
+    title: 'Drag and Drop (View)',
     render: function (): React.Node {
-      return <OnDropView />;
+      return <DragDropView />;
     },
   },
   {
-    title: 'onDragEnter, onDragLeave and onDrop - Single- & MultiLineTextInput',
+    title: 'Drag and Drop (TextInput)',
     render: function (): React.Node {
       return <OnDragEnterOnDragLeaveOnDrop />;
     },
   },
   {
-    title: 'onPaste - MultiLineTextInput',
+    title: 'onPaste (MultiLineTextInput)',
     render: function (): React.Node {
       return <OnPaste />;
     },