Skip to content

Commit

Permalink
nit: minor cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
aleclarson committed Aug 13, 2019
1 parent 2953cf5 commit a7b7db7
Showing 1 changed file with 21 additions and 20 deletions.
41 changes: 21 additions & 20 deletions targets/web/src/AnimatedStyle.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { SpringValue } from 'shared'
import { SpringValue, each } from 'shared'

import {
AnimatedObject,
Animated,
AnimatedArray,
AnimatedValue,
isAnimated,
to,
} from '@react-spring/animated'

Expand Down Expand Up @@ -54,12 +55,12 @@ type AnimatedValueType = Animated & { to: any; interpolate: any }
*
* @param value
*/
const returnAnimatedValue = (
const ensureAnimated = (
value: AnimatedValueType | StyleValue = 0
): AnimatedValueType =>
Array.isArray(value) && value.some((v: any) => v instanceof Animated)
? new AnimatedArray(value.map(v => returnAnimatedValue(v)))
: value instanceof Animated
Array.isArray(value) && value.some(isAnimated)
? new AnimatedArray(value.map(ensureAnimated))
: isAnimated(value)
? value
: new AnimatedValue(value)

Expand All @@ -75,7 +76,7 @@ const returnAnimatedValue = (
*/
const isValueIdentity = (styleValue: StyleValue, id: number): boolean =>
Array.isArray(styleValue)
? !styleValue.some((v: string | number) => !isValueIdentity(v, id))
? styleValue.every(v => isValueIdentity(v, id))
: typeof styleValue === 'number'
? styleValue === id
: parseFloat(styleValue) === id
Expand Down Expand Up @@ -126,7 +127,7 @@ export class AnimatedStyle extends AnimatedObject {
// first we deal with x, y, z to group them into a single translate3d
if (x || y || z) {
// xyz should be an AnimatedValue or AnimatedArray
const xyz = returnAnimatedValue([x, y, z])
const xyz = ensureAnimated([x, y, z])
// we add it to the array of Animated objects that will be interpolated
props.push(xyz)

Expand All @@ -143,28 +144,27 @@ export class AnimatedStyle extends AnimatedObject {
// then for each style key that matches the transform functions class
// supports, we add the input value to the props and the interpolation
// transform function
Object.entries(swiftStyle).forEach(([key, value]) => {
each(swiftStyle, (value, key) => {
if (domTransforms.some(transform => key.startsWith(transform))) {
const unit = getUnit(key)
props.push(returnAnimatedValue(value))

if (key === 'transform')
transforms.push((transform: any) => [transform, transform === ''])
else
transforms.push((arg: any) => [
Array.isArray(arg)
? `${key}(${arg.map(v => mergeUnit(v, unit)).join(',')})`
: `${key}(${mergeUnit(arg, unit)})`,
isTransformIdentity(key, arg),
])
props.push(ensureAnimated(value))
transforms.push(
key === 'transform'
? (transform: string) => [transform, transform === '']
: (arg: StyleValue) => [
Array.isArray(arg)
? `${key}(${arg.map(v => mergeUnit(v, unit)).join(',')})`
: `${key}(${mergeUnit(arg, unit)})`,
isTransformIdentity(key, arg),
]
)
delete swiftStyle[key]
}
})

// finally, we set the transform key of the animated style to the
// interpolation of all the props, using the transform functions we defined
// above

if (props.length > 0) {
swiftStyle.transform = to(props, (...args) => {
let transform = ''
Expand All @@ -179,6 +179,7 @@ export class AnimatedStyle extends AnimatedObject {
return identity ? 'none' : transform
})
}

super(swiftStyle)
}
}

0 comments on commit a7b7db7

Please sign in to comment.