animation middleware, fixAuto, async propTransforms

drcmda · drcmda · commit 07528f4bab8c · 2018-04-15T23:40:26.000+02:00
diff --git a/examples/demos/sunburst/index.js b/examples/demos/sunburst/index.js
@@ -7,7 +7,7 @@ import { scaleLinear, scaleSqrt, scaleOrdinal } from 'd3-scale'
 import { schemeCategory10 as scheme } from 'd3-scale-chromatic'
 import { interpolate as d3interpolate } from 'd3-interpolate'
 import { Spring, animated } from 'react-spring'
-import Partition from './partition'
+import Partition from './Partition'
 import data from './data'
 import './styles.css'
 
diff --git a/src/Parallax.js b/src/Parallax.js
@@ -203,8 +203,8 @@ export default class Parallax extends React.PureComponent {
             const { style, children, offset, speed, factor, className, ...props } = this.props
             const horizontal = this.context.parallax.props.horizontal
             const translate3d = this.animatedTranslate.interpolate({
-                inputRange: [0, 1],
-                outputRange: horizontal
+                range: [0, 1],
+                output: horizontal
                     ? ['translate3d(0px,0,0)', 'translate3d(1px,0,0)']
                     : ['translate3d(0,0px,0)', 'translate3d(0,1px,0)'],
             })
diff --git a/src/Spring.js b/src/Spring.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import Animated from './animated/targets/react-dom'
 import SpringAnimation from './animated/SpringAnimation'
@@ -40,34 +41,46 @@ export default class Spring extends React.PureComponent {
         impl: SpringAnimation,
     }
 
-    constructor(props) {
-        super()
-        this._defaultAnimation = new Animated.Value(0)
-        this._animations = {}
-        this._updateProps(props, false)
+    state = { props: undefined }
+    defaultAnimation = new Animated.Value(0)
+    animations = {}
+
+    componentWillUnmount() {
+        this.stop()
     }
 
-    _updateProps({ impl, from, to, config, attach, immediate, reset, onFrame, onRest }, start = false) {
+    componentWillMount() {
+        this.updateProps(this.props)
+    }
+
+    componentWillReceiveProps(props) {
+        this.updateProps(props)
+    }
+
+    async updateProps({ inject, ...props }) {
+        const { impl, from, to, config, attach, immediate, reset, onFrame, onRest } = inject ? await inject(this, props) : props
+
         const allProps = Object.entries({ ...from, ...to })
-        const defaultAnimationValue = this._defaultAnimation._value
+        const defaultAnimationValue = this.defaultAnimation._value
+
+        this.defaultAnimation.setValue(0)
+        this.interpolators = {}
+        this.animations = allProps.reduce((acc, [name, value], i) => {
+            const entry = (reset === false && this.animations[name]) || (this.animations[name] = {})
 
-        this._interpolators = {}
-        this._defaultAnimation.setValue(0)
-        this._animations = allProps.reduce((acc, [name, value], i) => {
-            const entry = (reset === false && this._animations[name]) || (this._animations[name] = {})
             let isNumber = typeof value === 'number'
             let isArray = !isNumber && Array.isArray(value)
             let fromValue = from[name] !== undefined ? from[name] : value
-            let toValue = isNumber || isArray ? value : 1
+            let toValue = isNumber || isArray ? value : 1
 
             if (isNumber && attach) {
                 // Attach value to target animation
                 const target = attach(this)
-                const targetAnimation = target && target._animations[name]
+                const targetAnimation = target && target.animations[name]
                 if (targetAnimation) toValue = targetAnimation.animation
             }
 
-            if (isNumber) {
+            if (isNumber || toValue === 'auto') {
                 // Create animated value
                 entry.animation = entry.interpolation = entry.animation || new Animated.Value(fromValue)
             } else if (isArray) {
@@ -76,10 +89,10 @@ export default class Spring extends React.PureComponent {
             } else {
                 // Deal with interpolations
                 const previous = entry.interpolation && entry.interpolation._interpolation(defaultAnimationValue)
-                entry.animation = this._defaultAnimation
-                entry.interpolation = this._defaultAnimation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [previous !== undefined ? previous : fromValue, value],
+                entry.animation = this.defaultAnimation
+                entry.interpolation = this.defaultAnimation.interpolate({
+                    range: [0, 1],
+                    output: [previous !== undefined ? previous : fromValue, value],
                 })
             }
 
@@ -89,8 +102,8 @@ export default class Spring extends React.PureComponent {
             entry.start = cb => {
                 Animated.controller(entry.animation, { toValue, ...config }, impl).start(props => {
                     if (props.finished) {
-                        this._animations[name].stopped = true
-                        if (Object.values(this._animations).every(animation => animation.stopped)) {
+                        this.animations[name].stopped = true
+                        if (Object.values(this.animations).every(animation => animation.stopped)) {
                             const current = { ...this.props.from, ...this.props.to }
                             onRest && onRest(current)
                             cb && cb(current)
@@ -103,54 +116,49 @@ export default class Spring extends React.PureComponent {
                 entry.animation.stopAnimation()
             }
 
-            this._interpolators[name] = entry.interpolation
+            this.interpolators[name] = entry.interpolation
             return { ...acc, [name]: entry }
         }, {})
 
-        if (start) this.start()
+        const oldAnimatedProps = this.animatedProps
+        this.animatedProps = new Animated.AnimatedProps(this.interpolators, this.callback)
+        oldAnimatedProps && oldAnimatedProps.__detach()
 
-        var oldPropsAnimated = this._propsAnimated
-        this._propsAnimated = new Animated.AnimatedProps(this._interpolators, this.callback)
-        oldPropsAnimated && oldPropsAnimated.__detach()
+        this.forceUpdate()
+        this.start()
     }
 
-    start(props = this.props) {
-        return new Promise(res => Object.values(this._animations).forEach(animation => animation.start(res)))
+    start() {
+        return new Promise(res => this.getAnimations().forEach(animation => animation.start(res)))
     }
 
     stop() {
-        Object.values(this._animations).forEach(animation => animation.stop())
-    }
-
-    update(props) {
-        this._updateProps({ ...this.props, ...props }, true)
+        this.getAnimations().forEach(animation => animation.stop())
     }
 
     callback = () => {
-        if (this.props.onFrame) this.props.onFrame(this._propsAnimated.__getValue())
+        if (this.props.onFrame) this.props.onFrame(this.animatedProps.__getValue())
         !this.props.native && this.forceUpdate()
     }
 
-    componentWillReceiveProps(props) {
-        this._updateProps(props, true)
-    }
-
-    componentDidMount() {
-        this.start()
+    getAnimations() {
+        return Object.values(this.animations)
     }
 
-    componentWillUnmount() {
-        this.stop()
+    getValues() {
+        return this.animatedProps ? this.animatedProps.__getValue() : {}
     }
 
-    getValues() {
-        return this._propsAnimated.__getValue()
+    getAnimatedValues() {
+        return this.props.native ? this.interpolators : this.getValues()
     }
 
     render() {
-        const { children, render, from, to, config, native, ...extra } = this.props
-        let animatedProps = { ...(native ? this._interpolators : this._propsAnimated.__getValue()), ...extra }
-        if (render) return render({ ...animatedProps, children })
-        else return Array.isArray(children) ? children.map(child => child(animatedProps)) : children(animatedProps)
+        const { children, render, from, to, config, native, inject, ...extra } = this.props
+        const values = this.getAnimatedValues()
+        if (Object.keys(values).length) {
+            const animatedProps = { ...this.getAnimatedValues(), ...extra }
+            return render ? render({ ...animatedProps, children }) : children(animatedProps)
+        } else return null
     }
 }
diff --git a/src/addons/fixAuto.js b/src/addons/fixAuto.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Value } from 'react-spring'
+
+export default function fixAuto(spring, props) {
+    return new Promise(res => {
+        const { native, children, from, to, ...extra } = props
+
+        // Create portal
+        const portal = document.createElement('div')
+        portal.style.cssText = 'position:static;visibility:hidden;'
+        document.body.appendChild(portal)
+
+        // Call children with to-state
+        const componentProps = native
+            ? Object.entries({ ...from, ...to }).reduce((acc, [name, value]) => ({ ...acc, [name]: new Value(value) }), {})
+            : { ...from, ...to }
+        const result = children({ ...componentProps, ...extra })
+
+        // Render to-state vdom to portal
+        ReactDOM.render(
+            <div
+                ref={ref => {
+                    if (ref) {
+                        // Once it's rendered out, fetch bounds
+                        const height = ref.clientHeight
+                        const width = ref.clientWidth
+
+                        // Remove portal and resolve promise with updated props
+                        document.body.removeChild(portal)
+                        let newToProps = {}
+                        Object.entries(to).forEach(
+                            ([name, value]) => value === 'auto' && (newToProps[name] = name === 'height' ? height : width),
+                        )
+                        res({ ...props, to: newToProps })
+                    }
+                }}>
+                {result}
+            </div>,
+            portal,
+        )
+    })
+}
diff --git a/src/animated/AnimatedValue.js b/src/animated/AnimatedValue.js
@@ -56,7 +56,8 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
 
     _flush() {
-        if (this._animatedStyles.size === 0 || this._tracked) findAnimatedStyles(this, this._animatedStyles)
+        //if (this._animatedStyles.size === 0 || this._tracked) this._update()
+        findAnimatedStyles(this, this._animatedStyles)
         this._animatedStyles.forEach(animatedStyle => animatedStyle.update())
     }
 
diff --git a/src/animated/Interpolation.js b/src/animated/Interpolation.js
@@ -9,11 +9,9 @@ var linear = t => t
 export default class Interpolation {
     static create(config) {
         if (typeof config === 'function') return (...args) => config(...args)
-        if (config.outputRange && typeof config.outputRange[0] === 'string') {
-            return createInterpolationFromStringOutputRange(config)
-        }
-        var outputRange = config.outputRange
-        var inputRange = config.inputRange
+        if (config.output && typeof config.output[0] === 'string') return createInterpolationFromStringOutputRange(config)
+        var outputRange = config.output
+        var inputRange = config.range
         var easing = config.easing || linear
         var extrapolateLeft = 'extend'
 
@@ -49,7 +47,7 @@ export default class Interpolation {
 
 function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight) {
     var result = input
-    
+
     // Extrapolate
     if (result < inputMin) {
         if (extrapolateLeft === 'identity') {
@@ -71,14 +69,9 @@ function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, ex
         }
     }
 
-    if (outputMin === outputMax) {
-        return outputMin
-    }
-
+    if (outputMin === outputMax) return outputMin
     if (inputMin === inputMax) {
-        if (input <= inputMin) {
-            return outputMin
-        }
+        if (input <= inputMin) return outputMin
         return outputMax
     } // Input Range
 
@@ -99,17 +92,13 @@ function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, ex
     } else {
         result = result * (outputMax - outputMin) + outputMin
     }
-
     return result
 }
 
 function colorToRgba(input) {
     var int32Color = normalizeColor(input)
-
     if (int32Color === null) return input
-
     int32Color = int32Color || 0 // $FlowIssue
-
     var r = (int32Color & 0xff000000) >>> 24
     var g = (int32Color & 0x00ff0000) >>> 16
     var b = (int32Color & 0x0000ff00) >>> 8
@@ -128,7 +117,7 @@ var stringShapeRegex = /[0-9\.-]+/g
  *   -45deg                  // values with units
  */
 function createInterpolationFromStringOutputRange(config) {
-    var outputRange = config.outputRange
+    var outputRange = config.output
     outputRange = outputRange.map(colorToRgba)
 
     // ->
@@ -147,16 +136,14 @@ function createInterpolationFromStringOutputRange(config) {
         /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard
      * against this possibility.
      */
-        value.match(stringShapeRegex).forEach((number, i) => {
-            outputRanges[i].push(+number)
-        })
+        value.match(stringShapeRegex).forEach((number, i) => outputRanges[i].push(+number))
     })
 
     /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
      * guard against this possibility.
      */
     var interpolations = outputRange[0].match(stringShapeRegex).map((value, i) => {
-        return Interpolation.create({ ...config, outputRange: outputRanges[i] })
+        return Interpolation.create({ ...config, output: outputRanges[i] })
     })
 
     // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
@@ -176,4 +163,4 @@ function createInterpolationFromStringOutputRange(config) {
 function findRange(input, inputRange) {
     for (var i = 1; i < inputRange.length - 1; ++i) if (inputRange[i] >= input) break
     return i - 1
-}
+}
diff --git a/src/animated/SpringAnimation.js b/src/animated/SpringAnimation.js
@@ -40,7 +40,6 @@ export default class SpringAnimation extends Animation {
         }
 
         if (this._initialVelocity !== undefined && this._initialVelocity !== null) this._lastVelocity = this._initialVelocity
-
         if (this._delay) this._timeout = setTimeout(this.onUpdate, this._delay)
         else this.onUpdate()
     }
diff --git a/src/animated/createAnimatedComponent.js b/src/animated/createAnimatedComponent.js
@@ -35,8 +35,10 @@ export default function createAnimatedComponent(Component) {
             // need to re-render it. In this case, we have a fallback that uses
             // forceUpdate.
             var callback = () => {
-                const didUpdate = ApplyAnimatedValues.current(this.refs['node'], this._propsAnimated.__getAnimatedValue(), this)
-                if (didUpdate === false) this.forceUpdate()
+                if (this.refs['node']) {
+                    const didUpdate = ApplyAnimatedValues.current(this.refs['node'], this._propsAnimated.__getAnimatedValue(), this)
+                    if (didUpdate === false) this.forceUpdate()
+                }
             }
 
             this._propsAnimated = new AnimatedProps(nextProps, callback)

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,8 @@ export default class AnimatedValue extends AnimatedWithChildren {`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`_flush() {`
`59`		`- if (this._animatedStyles.size === 0 \|\| this._tracked) findAnimatedStyles(this, this._animatedStyles)`
	`59`	`+ //if (this._animatedStyles.size === 0 \|\| this._tracked) this._update()`
	`60`	`+ findAnimatedStyles(this, this._animatedStyles)`
`60`	`61`	`this._animatedStyles.forEach(animatedStyle => animatedStyle.update())`
`61`	`62`	`}`
`62`	`63`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,6 @@ export default class SpringAnimation extends Animation {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`if (this._initialVelocity !== undefined && this._initialVelocity !== null) this._lastVelocity = this._initialVelocity`
`43`		`-`
`44`	`43`	`if (this._delay) this._timeout = setTimeout(this.onUpdate, this._delay)`
`45`	`44`	`else this.onUpdate()`
`46`	`45`	`}`