From 37216b34b555ab6af5684db584076f7e497987df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Fri, 20 Apr 2018 14:11:40 +0200
Subject: [PATCH] Use react-spring

---
 package.json                            |  1 +
 src/components/base/FlipTicker/index.js | 40 +++++++++++++------------
 yarn.lock                               | 27 ++++++++++++++++-
 3 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 20b9d6ab..dc0051a9 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "5.0.0-alpha.9",
     "react-smooth-scrollbar": "^8.0.6",
+    "react-spring": "^4.2.1",
     "redux": "^4.0.0",
     "redux-actions": "^2.3.0",
     "redux-thunk": "^2.2.0",
diff --git a/src/components/base/FlipTicker/index.js b/src/components/base/FlipTicker/index.js
index 6d14ca87..e6d9b271 100644
--- a/src/components/base/FlipTicker/index.js
+++ b/src/components/base/FlipTicker/index.js
@@ -5,7 +5,7 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import styled from 'styled-components'
-import { Motion, spring } from 'react-motion'
+import { Spring, animated } from 'react-spring'
 
 import Box from 'components/base/Box'
 
@@ -17,22 +17,10 @@ const Container = styled(Box).attrs({
   white-space: pre;
 `
 
-const TickWrapper = styled(Box).attrs({
-  style: p => ({
-    transform: `translate3d(0, -${p.offset}px, 0)`,
-  }),
-})`
-  top: 0;
-  position: absolute;
-`
-
 const RANGE_NUMBER = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
 const RANGE_COMPONENT = RANGE_NUMBER.map((r, i) => <Box key={i}>{r}</Box>)
 
-const SPRINT_CONFIG = {
-  stiffness: 280,
-  damping: 23,
-}
+const SPRINT_CONFIG = { tension: 130, friction: 12 }
 
 type Props = {
   value: string,
@@ -96,14 +84,28 @@ function Tick(props: { height: number, value: string }) {
   const index = RANGE_NUMBER.indexOf(value)
   const offset = height * index
 
+  const Content = <Box>{RANGE_COMPONENT}</Box>
+
   return (
-    <Motion
-      style={{
-        offset: spring(offset, SPRINT_CONFIG),
+    <Spring
+      native
+      config={SPRINT_CONFIG}
+      to={{
+        offset,
       }}
     >
-      {m => <TickWrapper offset={m.offset}>{RANGE_COMPONENT}</TickWrapper>}
-    </Motion>
+      {m => (
+        <animated.div
+          style={{
+            transform: m.offset.interpolate(v => `translate3d(0, -${v}px, 0)`),
+            top: 0,
+            position: 'absolute',
+          }}
+        >
+          {Content}
+        </animated.div>
+      )}
+    </Spring>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index 3c9de45b..27bccbb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -869,6 +869,13 @@
     "@babel/plugin-syntax-dynamic-import" "7.0.0-beta.42"
     "@babel/plugin-syntax-import-meta" "7.0.0-beta.42"
 
+"@babel/runtime@^7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.44.tgz#ea5ad6c6fe9a2c1187b025bf42424d28050ee696"
+  dependencies:
+    core-js "^2.5.3"
+    regenerator-runtime "^0.11.1"
+
 "@babel/template@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -3855,6 +3862,13 @@ create-react-class@^15.5.2, create-react-class@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-context@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 crocket@^0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/crocket/-/crocket-0.9.11.tgz#288fca11ef0d3dd239b62c488265f30c8edfb0c5"
@@ -5616,7 +5630,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -6225,6 +6239,10 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -10234,6 +10252,13 @@ react-split-pane@^0.1.77:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
+react-spring@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-4.2.1.tgz#7bcf1eb660c88e322820b88f05355d44768c53be"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.44"
+    create-react-context "^0.2.2"
+
 react-style-proptype@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.0.tgz#be5de15358b890d83aecfaf6634cc033aa2b1483"