From d8cd48faa6a12b981e20833b5d0eb9da8f5ab7d9 Mon Sep 17 00:00:00 2001
From: haywirez <hello@haywirez.com>
Date: Fri, 15 Jul 2022 10:41:01 +0300
Subject: [PATCH] Add example for dragover event handling

---
 example/src/demos/FileDragDrop.tsx | 31 ++++++++++++++++++++++++++++++
 example/src/demos/index.tsx        |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 example/src/demos/FileDragDrop.tsx

diff --git a/example/src/demos/FileDragDrop.tsx b/example/src/demos/FileDragDrop.tsx
new file mode 100644
index 0000000000..4b54001abc
--- /dev/null
+++ b/example/src/demos/FileDragDrop.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { a, useSpring } from '@react-spring/three'
+import { OrbitControls } from '@react-three/drei'
+
+export default function Box() {
+  const [active, setActive] = useState(0)
+  // create a common spring that will be used later to interpolate other values
+  const { spring } = useSpring({
+    spring: active,
+    config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 },
+  })
+  // interpolate values from commong spring
+  const scale = spring.to([0, 1], [1, 2])
+  const rotation = spring.to([0, 1], [0, Math.PI])
+  const color = active ? spring.to([0, 1], ['#6246ea', '#e45858']) : spring.to([0, 1], ['#620000', '#e40000'])
+  return (
+    <Canvas>
+      <a.mesh
+        rotation-y={rotation}
+        scale-x={scale}
+        scale-z={scale}
+        onDragOverEnter={() => setActive(1)}
+        onDragOverLeave={() => setActive(0)}>
+        <boxBufferGeometry />
+        <a.meshBasicMaterial color={color} />
+      </a.mesh>
+      <OrbitControls />
+    </Canvas>
+  )
+}
diff --git a/example/src/demos/index.tsx b/example/src/demos/index.tsx
index e2c31327e7..90807ec669 100644
--- a/example/src/demos/index.tsx
+++ b/example/src/demos/index.tsx
@@ -4,6 +4,7 @@ const Animation = { Component: lazy(() => import('./Animation')) }
 const AutoDispose = { Component: lazy(() => import('./AutoDispose')) }
 const ClickAndHover = { Component: lazy(() => import('./ClickAndHover')) }
 const ContextMenuOverride = { Component: lazy(() => import('./ContextMenuOverride')) }
+const FileDragDrop = { Component: lazy(() => import('./FileDragDrop')) }
 const Gestures = { Component: lazy(() => import('./Gestures')) }
 const Gltf = { Component: lazy(() => import('./Gltf')) }
 const Inject = { Component: lazy(() => import('./Inject')) }
@@ -30,6 +31,7 @@ export {
   AutoDispose,
   ClickAndHover,
   ContextMenuOverride,
+  FileDragDrop,
   Gestures,
   Gltf,
   Inject,