upgrade with react simple aniamte

beekai-oss · May 15, 2019 · 87b0c15 · 87b0c15
1 parent 37910ca
commit 87b0c15
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 45 deletions.
diff --git a/example/package.json b/example/package.json
@@ -7,11 +7,11 @@
     "@types/node": "10.12.18",
     "@types/react": "16.7.18",
     "@types/react-dom": "16.0.11",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-flip-numbers": "^2.1.0",
     "react-scripts": "2.1.3",
-    "react-smooth-range-input": "0.2.9",
+    "react-smooth-range-input": "0.3.0-beta.1",
     "typescript": "3.2.2"
   },
   "scripts": {

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -7936,15 +7936,15 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dom@^16.7.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
-  integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
+react-dom@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0"
+    scheduler "^0.13.6"
 
 react-error-overlay@^5.1.2:
   version "5.1.2"
@@ -8030,23 +8030,28 @@ react-simple-animate@^2.6.0:
   resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.6.4.tgz#6a6fd5d52801c0a52873204dfb236c778d781262"
   integrity sha512-Jj6hVRJbb+OrEOv/yviuIoacQCDOI7hMOXOMZ5pF/rlD7iK8U4F98bta1MgN7PrSXBYHq2Yt7+bhGMxj5pr5XA==
 
-react-smooth-range-input@0.2.9:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/react-smooth-range-input/-/react-smooth-range-input-0.2.9.tgz#16201a0062fd0b12dd1eafe9f5274864c8215f74"
-  integrity sha512-5l5dLSKhWiZnuAhg+k5g05Mos9LTa6Ama59W3EbOyo7v0nX4sajL7NnLsQWBcm68B+FuPVNJnc8nQ6TcUWBQWw==
+react-simple-animate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.1.tgz#4f0768069a5b99744069e8815f7a5d5c848bb093"
+  integrity sha512-HlXVleShQvDiwvv7C1sEet166XskRT5TLf2IRdlianz5XJPV/kXALTBB6sJFD3JuvPEvL6siP5+uozCXeZwPYg==
+
+react-smooth-range-input@0.3.0-beta.1:
+  version "0.3.0-beta.1"
+  resolved "https://registry.yarnpkg.com/react-smooth-range-input/-/react-smooth-range-input-0.3.0-beta.1.tgz#c29256c4e3aae8a1b48b4dc4348cf8d5de95484f"
+  integrity sha512-1w53iS1lH+eBU0WyJ9vVsycS0XMfmseO0/ZNdEJY+2U/0Orc3xSN90zOlFCx14Kg/NN12aRzGH5oJvuRc31I5w==
   dependencies:
     react-flip-numbers "^2.1.3"
-    react-simple-animate "^2.6.0"
+    react-simple-animate "^3.0.1"
 
-react@^16.7.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
-  integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==
+react@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0"
+    scheduler "^0.13.6"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -8509,10 +8514,10 @@ saxes@^3.1.4:
   dependencies:
     xmlchars "^1.3.1"
 
-scheduler@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b"
-  integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-smooth-range-input",
-  "version": "0.2.9",
+  "version": "0.3.0-beta.1",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -41,10 +41,10 @@
   },
   "dependencies": {
     "react-flip-numbers": "^2.1.3",
-    "react-simple-animate": "^2.6.0"
+    "react-simple-animate": "^3.0.1"
   },
   "peerDependencies": {
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   }
 }
diff --git a/src/__snapshots__/controller.test.tsx.snap b/src/__snapshots__/controller.test.tsx.snap
@@ -34,7 +34,6 @@ exports[`Controller should render correct when isThin set to true 1`] = `
         "position": "absolute",
         "top": "-25px",
         "transform": "translateY(0)",
-        "transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
       }
     }
     viewBox="0 0 40 64"
@@ -61,7 +60,6 @@ exports[`Controller should render correct when isThin set to true 1`] = `
         "height": "0px",
         "position": "absolute",
         "transform": "translateY(0)",
-        "transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
         "width": "0px",
       }
     }
@@ -107,7 +105,7 @@ exports[`Controller should render correct when isThin set to true 1`] = `
                 "height": "100%",
                 "position": "absolute",
                 "transformStyle": "preserve-3d",
-                "transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
+                "transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
               }
             }
           >
@@ -377,7 +375,7 @@ exports[`Controller should render correct when isThin set to true 1`] = `
                 "height": "100%",
                 "position": "absolute",
                 "transformStyle": "preserve-3d",
-                "transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
+                "transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
               }
             }
           >
@@ -668,7 +666,6 @@ exports[`Controller should render correct when shouldAnimateNumber set to false
         "position": "absolute",
         "top": "-25px",
         "transform": "translateY(0)",
-        "transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
       }
     }
     viewBox="0 0 40 64"
@@ -695,7 +692,6 @@ exports[`Controller should render correct when shouldAnimateNumber set to false
         "height": "0px",
         "position": "absolute",
         "transform": "translateY(0)",
-        "transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
         "width": "0px",
       }
     }
@@ -757,7 +753,6 @@ exports[`Controller should render correctly 1`] = `
         "position": "absolute",
         "top": "-25px",
         "transform": "translateY(0)",
-        "transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
       }
     }
     viewBox="0 0 40 64"
@@ -784,7 +779,6 @@ exports[`Controller should render correctly 1`] = `
         "height": "0px",
         "position": "absolute",
         "transform": "translateY(0)",
-        "transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
         "width": "0px",
       }
     }
@@ -830,7 +824,7 @@ exports[`Controller should render correctly 1`] = `
                 "height": "100%",
                 "position": "absolute",
                 "transformStyle": "preserve-3d",
-                "transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
+                "transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
               }
             }
           >
@@ -1100,7 +1094,7 @@ exports[`Controller should render correctly 1`] = `
                 "height": "100%",
                 "position": "absolute",
                 "transformStyle": "preserve-3d",
-                "transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
+                "transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
               }
             }
           >

diff --git a/src/controller.tsx b/src/controller.tsx
@@ -5,7 +5,7 @@ import { bubbleWithTail, bubble } from './constants/svgPath';
 
 const commonAnimationProps = {
   easeType: 'cubic-bezier(0.86, 0, 0.07, 1)',
-  startStyle: {
+  start: {
     transform: 'translateY(0)',
   },
 };
@@ -43,7 +43,7 @@ const flipNumberProps = {
   color: 'black',
   background: 'white',
   perspective: 370,
-  durationSeconds: 0.4,
+  duration: 0.4,
   play: true,
   numberStyle: { outline: '1px solid transparent' },
   disabled: false,
@@ -124,12 +124,11 @@ export default React.forwardRef(function Controller(
         <Animate
           play={showBubble}
           {...commonAnimationProps}
-          reverseDurationSeconds={0.3}
-          durationSeconds={0.2}
-          startStyle={{
+          duration={showBubble ? 0.2 : 0.3}
+          start={{
             transform: 'translateY(0)',
           }}
-          endStyle={{
+          end={{
             transform: `translateY(-${isThin ? 32 : 22}px) scale(1.65)`,
           }}
           easeType="cubic-bezier(0.86, 0, 0.07, 1)"
@@ -162,11 +161,10 @@ export default React.forwardRef(function Controller(
       <Animate
         play={showBubble}
         {...commonAnimationProps}
-        endStyle={{
+        end={{
           transform: `translateY(-${isThin ? 58 : 48}px) scale(1.3)`,
         }}
-        durationSeconds={0.3}
-        reverseDurationSeconds={0.1}
+        duration={showBubble? 0.3 : 0.1}
         render={({ style }) =>
           customController ? (
             customController({

diff --git a/yarn.lock b/yarn.lock
@@ -3323,6 +3323,11 @@ react-simple-animate@^2.6.0:
   resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.6.4.tgz#6a6fd5d52801c0a52873204dfb236c778d781262"
   integrity sha512-Jj6hVRJbb+OrEOv/yviuIoacQCDOI7hMOXOMZ5pF/rlD7iK8U4F98bta1MgN7PrSXBYHq2Yt7+bhGMxj5pr5XA==
 
+react-simple-animate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.1.tgz#4f0768069a5b99744069e8815f7a5d5c848bb093"
+  integrity sha512-HlXVleShQvDiwvv7C1sEet166XskRT5TLf2IRdlianz5XJPV/kXALTBB6sJFD3JuvPEvL6siP5+uozCXeZwPYg==
+
 react-test-renderer@^16.0.0-0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c"