Merge pull request #112 from skellock/upgrade-popmotion

⬆️ Upgrades popmotion

Author: skellock

package.json

@@ -71,8 +71,8 @@
     "electron-window-state-manager": "^0.3.2",
     "glamor": "^2.20.40",
     "mousetrap": "^1.6.1",
-    "popmotion": "^7.8.2",
-    "popmotion-react": "^1.1.1",
+    "popmotion": "^8.1.7",
+    "popmotion-react": "^2.1.0",
     "prop-types": "^15.6.0",
     "ramda": "^0.25.0",
     "react": "^16.2.0",

src/renderer/platform/components/spin-animation/spin-animation-state.test.ts

@@ -0,0 +1,14 @@
+import * as React from "react"
+import { StorybookStory as Story, StorybookGroup as Group } from "../storybook"
+import { storiesOf } from "@storybook/react"
+import { SpinAnimation } from "./index"
+
+storiesOf("SpinAnimation", module).add("default", () => (
+  <Story>
+    <Group title="default">
+      <span style={{ display: "inline-block", width: 100 }}>
+        <SpinAnimation>I am going to spin.</SpinAnimation>
+      </span>
+    </Group>
+  </Story>
+))

src/renderer/platform/components/spin-animation/spin-animation-state.ts

@@ -1,35 +1,43 @@
 import * as React from "react"
-import { MotionValue, MotionStates, MotionStateProps } from "popmotion-react"
-import { SpinAnimationStateProps, createSpinStates, next } from "./spin-animation-state"
+import { MotionValue, MotionStateProps, MotionStates } from "popmotion-react"
+import { tween } from "popmotion"
+
+const DEFAULT_DURATION = 500
+const DEFAULT_REVOLUTIONS = 1
+
+export interface SpinAnimationProps {
+  duration?: number
+  revolutions?: number
+}
 
 /**
  * Provides a container which will do a barrel roll when clicked.
  */
-export class SpinAnimation extends React.PureComponent<SpinAnimationStateProps, {}> {
-  animationStates: MotionStates
-
-  componentWillMount() {
-    this.animationStates = createSpinStates(this.props)
-  }
-
-  /* istanbul ignore next */
-  componentWillReceiveProps(newProps: SpinAnimationStateProps) {
-    this.animationStates = createSpinStates(newProps)
-  }
-
+export class SpinAnimation extends React.PureComponent<SpinAnimationProps, {}> {
   render() {
-    // the view to spin
-    // NOTE: This is a function and not a component due to popmotion-react.
-    const spinWrapper = (motionState: MotionStateProps) => {
-      const props = {
-        style: { transform: `rotate(${motionState.v}deg)`, cursor: "pointer" },
-        onClick: next(motionState),
-        children: this.props.children,
-      }
+    const duration = this.props.duration || DEFAULT_DURATION
+    const forwardAngle = 360 * (this.props.revolutions || DEFAULT_REVOLUTIONS)
 
-      return <div {...props} />
+    // istanbul ignore next
+    const motionStates: MotionStates = {
+      on: ({ value }) => tween({ from: value.get(), to: forwardAngle, duration }).start(value),
+      off: ({ value }) => tween({ from: value.get(), to: 0, duration }).start(value),
     }
 
-    return <MotionValue onStateChange={this.animationStates} children={spinWrapper} />
+    return (
+      <MotionValue onStateChange={motionStates}>
+        {(motionState: MotionStateProps) => (
+          <div
+            style={{ transform: `rotate(${motionState.v}deg)`, cursor: "pointer" }}
+            onClick={
+              // istanbul ignore next
+              motionState.state === "on" ? motionState.setStateTo.off : motionState.setStateTo.on
+            }
+          >
+            {this.props.children}
+          </div>
+        )}
+      </MotionValue>
+    )
   }
 }

src/renderer/platform/components/spin-animation/spin-animation.story.tsx

@@ -251,6 +251,61 @@ exports[`Storyshots ScrollableContent default 1`] = `
 </div>
 `;
 
+exports[`Storyshots SpinAnimation default 1`] = `
+<div
+  style={
+    Object {
+      "paddingLeft": 20,
+      "paddingRight": 20,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "paddingBottom": 20,
+      }
+    }
+  >
+    <p
+      style={
+        Object {
+          "borderBottom": "1px solid #eee",
+          "color": "#3d3d3d",
+          "fontFamily": "Helvetica Neue",
+          "fontSize": 14,
+          "marginBottom": 5,
+          "marginLeft": -20,
+          "paddingBottom": 5,
+        }
+      }
+    >
+      default
+    </p>
+    <span
+      style={
+        Object {
+          "display": "inline-block",
+          "width": 100,
+        }
+      }
+    >
+      <div
+        onClick={[Function]}
+        style={
+          Object {
+            "cursor": "pointer",
+            "transform": "rotate(0deg)",
+          }
+        }
+      >
+        I am going to spin.
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Tab Tab 1`] = `
 <div
   style={

src/renderer/platform/components/spin-animation/spin-animation.tsx

@@ -7,7 +7,7 @@
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": false,
     "noUnusedLocals": true,
-    "strictNullChecks": true,
+    "strictNullChecks": false,
     "noImplicitReturns": true,
     "noImplicitAny": true
   },

test/__snapshots__/storyshots.test.ts.snap

@@ -3464,7 +3464,7 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
-framesync@^3.0.1:
+framesync@^3.0.2, framesync@^3.1.7:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/framesync/-/framesync-3.1.7.tgz#9b9aa3eff8598625302597851a428f40c3dc1c6b"
 
@@ -6017,15 +6017,19 @@ podda@^1.2.2:
     babel-runtime "^6.11.6"
     immutable "^3.8.1"
 
-popmotion-react@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/popmotion-react/-/popmotion-react-1.1.1.tgz#5eef3877914cdd9fb007f1e92b32142b5b5676e0"
+popmotion-react@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/popmotion-react/-/popmotion-react-2.1.0.tgz#519e7004d9d5ab5c571c2bf03627daf4ebc18152"
+  dependencies:
+    popmotion "^8.1.0"
 
-popmotion@^7.8.2:
-  version "7.8.2"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-7.8.2.tgz#984ecbdc1ea70c022ee8d4bc36a4317ed619ba1d"
+popmotion@^8.1.0, popmotion@^8.1.7:
+  version "8.1.7"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-8.1.7.tgz#7dba748d9fae1284fc7a5702e5ed0b7be66ffcbe"
   dependencies:
-    framesync "^3.0.1"
+    framesync "^3.1.7"
+    style-value-types "^1.0.3"
+    stylefire "^1.1.8"
 
 postcss-calc@^5.2.0:
   version "5.3.1"
@@ -7556,6 +7560,17 @@ style-loader@^0.19.1:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+style-value-types@^1.0.0, style-value-types@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-1.0.3.tgz#651c3c75c988ea2ef86e20c6a07f98cce62efddf"
+
+stylefire@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-1.1.8.tgz#2e26894c5e2877c5100a7b29522d918a6fc4f1e1"
+  dependencies:
+    framesync "^3.0.2"
+    style-value-types "^1.0.0"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"