Merge branch 'pull-21' into pull-750

Author: aleclarson

components/examples-hooks.js

@@ -74,6 +74,16 @@ return <animated.div style={{ transform }} children="Slide">`,
     link: 'https://codesandbox.io/embed/r5qmj8m6lq',
     tags: ['useSprings'],
   },
+  {
+    name: 'hooks/inertia',
+    title: 'Inertia',
+    tags: ['useSprings'],
+  },
+  {
+    name: 'hooks/clamp-bounce',
+    title: 'Clamp bounce',
+    tags: ['useSprings'],
+  },
   {
     name: 'hooks/mouse-parallax',
     title: 'Mouse parallax',

demos/hooks/card-flick/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useSprings, animated, to } from 'react-spring'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
 const cards = [
@@ -36,12 +36,11 @@ export default function Deck() {
   }))
 
   // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
-  const bind = useGesture(
+  const bind = useDrag(
     ({
       args: [index],
       down,
-      delta: [xDelta],
-      distance,
+      movement: [xMove],
       direction: [xDir],
       velocity,
     }) => {
@@ -57,9 +56,9 @@ export default function Deck() {
         if (index !== i) return
         const isGone = gone.has(index)
         // When a card is gone it flys out left or right, otherwise it's either dragged to delta, or goes back to zero
-        const x = isGone ? (200 + window.innerWidth) * dir : down ? xDelta : 0
+        const x = isGone ? (200 + window.innerWidth) * dir : down ? xMove : 0
         // How much the card tilts, flicking it harder makes it rotate faster
-        const rot = xDelta / 100 + (isGone ? dir * 10 * velocity : 0)
+        const rot = xMove / 100 + (isGone ? dir * 10 * velocity : 0)
         // Active cards lift up a bit
         const scale = down ? 1.1 : 1
         return {

demos/hooks/clamp-bounce/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { useSpring, animated } from 'react-spring'
+import './styles.css'
+
+export default function ClampBounce() {
+  const [toggle, setToggle] = React.useState(false)
+  const { y } = useSpring({
+    y: toggle ? 250 : -250,
+    config: { tension: 120, friction: 12, clamp: 2 },
+  })
+
+  return (
+    <div className="clamp-bounce">
+      <animated.div onClick={() => setToggle(t => !t)} style={{ y }} />
+    </div>
+  )
+}

demos/hooks/clamp-bounce/styles.css

@@ -0,0 +1,14 @@
+.clamp-bounce {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ecede7;
+  height: 100%;
+}
+
+.clamp-bounce > div {
+  width: 80px;
+  height: 80px;
+  background: hotpink;
+  border-radius: 16px;
+}

demos/hooks/draggable-list/index.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import clamp from 'lodash/clamp'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import { useSprings, animated, to } from 'react-spring'
 import './styles.css'
 
@@ -35,7 +35,7 @@ export default function DraggableList({
   const [springs, setSprings] = useSprings(items.length, fn(order.current))
 
   // Preps a gesture handler which returns drag-deltas, touched/clicked state, etc.
-  const bind = useGesture(({ args: [originalIndex], down, delta: [, y] }) => {
+  const bind = useDrag(({ args: [originalIndex], down, movement: [, y] }) => {
     // Bunch of math to calculate current row and new order, it's unavoidable ¯\_(ツ)_/¯
     const curIndex = order.current.indexOf(originalIndex)
     const curRow = clamp(
@@ -60,10 +60,8 @@ export default function DraggableList({
               boxShadow: shadow.to(
                 s => `rgba(0, 0, 0, 0.2) 0px ${s}px ${2 * s}px 0px`
               ),
-              transform: to(
-                [y, scale],
-                (y, s) => `translate3d(0,${y}px,0) scale(${s})`
-              ),
+              y,
+              scale,
             }}
             children={items[i]}
             {...bind(i)}

demos/hooks/gestures-pager/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react'
 import clamp from 'lodash-es/clamp'
 import { useSprings, animated } from 'react-spring'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
 const pages = [
@@ -25,8 +25,8 @@ export default function Viewpager() {
     set(i => ({ x: i * width.current, sc: 1, display: 'block' }))
   }, [])
 
-  const bind = useGesture(
-    ({ down, delta: [xDelta], direction: [xDir], distance, cancel }) => {
+  const bind = useDrag(
+    ({ down, movement: [xMovement], direction: [xDir], distance, cancel }) => {
       if (down && distance > width.current / 2)
         cancel(
           (index.current = clamp(
@@ -38,7 +38,7 @@ export default function Viewpager() {
       set(i => {
         if (i < index.current - 1 && i > index.current + 1)
           return { display: 'none' }
-        const x = (i - index.current) * width.current + (down ? xDelta : 0)
+        const x = (i - index.current) * width.current + (down ? xMovement : 0)
         const sc = down ? 1 - distance / width.current / 2 : 1
         return { x, sc, display: 'block' }
       })
@@ -49,13 +49,7 @@ export default function Viewpager() {
       ref={r => r && (width.current = r.getBoundingClientRect().width)}
       className="viewpager-main">
       {props.map(({ x, display, sc }, i) => (
-        <animated.div
-          {...bind()}
-          key={i}
-          style={{
-            display,
-            transform: x.to(x => `translate3d(${x}px,0,0)`),
-          }}>
+        <animated.div {...bind()} key={i} style={{ display, x }}>
           <animated.div
             style={{
               transform: sc.to(s => `scale(${s})`),

demos/hooks/gestures-pull/index.js

@@ -1,28 +1,21 @@
 import React, { useState, useRef, useEffect } from 'react'
 import clamp from 'lodash-es/clamp'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import { useSpring, animated } from 'react-spring'
 import { add, scale } from 'vec-la'
 import './styles.css'
 
 function Pull() {
-  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }))
-  const bind = useGesture(({ down, delta, velocity }) => {
+  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
+  const bind = useDrag(({ down, movement: [mx, my], velocity }) => {
     velocity = Math.max(1, velocity)
-    console.log(delta, velocity)
     set({
-      xy: down ? delta : [0, 0],
+      x: down ? mx : 0,
+      y: down ? my : 0,
       config: { mass: velocity, tension: 500 * velocity, friction: 50 },
     })
   })
-  return (
-    <animated.div
-      {...bind()}
-      style={{
-        transform: xy.to((x, y) => `translate3d(${x}px,${y}px,0)`),
-      }}
-    />
-  )
+  return <animated.div {...bind()} style={{ x, y }} />
 }
 
 export default function App() {

demos/hooks/inertia/index.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import { useSpring, animated } from 'react-spring'
+import { useDrag } from 'react-use-gesture'
+import './styles.css'
+
+const [min, max] = [-250, 250]
+
+export default function Inertia() {
+  const [{ y }, set] = useSpring(() => ({ y: 0 }))
+
+  const bind = useDrag(
+    ({ down, movement: [, dy], vxvy: [, vy], memo = y.getValue() }) => {
+      if (down) set({ y: dy + memo, onFrame: () => {}, immediate: true })
+      else inertia(dy + memo + 1, vy)
+      return memo
+    }
+  )
+
+  const springBounce = React.useCallback(
+    velocity => {
+      set({
+        y: velocity > 0 ? max : min,
+        onFrame: () => {}, // <-- this is annoying :)
+        config: { velocity: velocity * 3 },
+      })
+    },
+    [set]
+  )
+
+  const inertia = React.useCallback(
+    (position, velocity) => {
+      set({
+        to: async (next, stop) => {
+          await next({
+            y: position,
+            onFrame: async v => {
+              const vel = y.lastVelocity
+
+              if ((v.y > max && vel > 0) || (v.y < min && vel < 0)) {
+                stop()
+                springBounce(vel)
+              }
+            },
+            config: { decay: true, velocity },
+          })
+        },
+      })
+    },
+    [y, set, springBounce]
+  )
+  // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
+  return (
+    <div className="inertia">
+      <animated.div {...bind()} style={{ y }} />
+    </div>
+  )
+}

demos/hooks/inertia/styles.css

@@ -0,0 +1,14 @@
+.inertia {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ecede7;
+  height: 100%;
+}
+
+.inertia > div {
+  width: 80px;
+  height: 80px;
+  background: hotpink;
+  border-radius: 16px;
+}

package.json

@@ -75,6 +75,7 @@
     "react-feather": "^1.1.6",
     "react-loadable": "^5.5.0",
     "react-spring": "^8.0.5",
+    "react-use-gesture": "^6.0.0-beta.3",
     "react-with-gesture": "^4.0.2",
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^4.1.3",