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 04be6b3
Showing 1 changed file with 25 additions and 26 deletions.
51 changes: 25 additions & 26 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 @@ -113,20 +114,18 @@ type Transform = (arg: any) => [string, boolean]
* including shortcuts such as x, y and z for translateX/Y/Z
*/
export class AnimatedStyle extends AnimatedObject {
constructor(style = {} as Style) {
constructor({ x, y, z, ...style } = {} as Style) {
const props: SpringValue[] = []

// transforms will be an array of functions applied to the props. Each function
// will return the interpolated transformed string, and a flag indicating if the
// interpolation result is an identity transform of its own
const transforms: Transform[] = []

const { x, y, z, ...swiftStyle } = style

// 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,30 +142,29 @@ 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(style, (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),
])
delete swiftStyle[key]
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 style[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) => {
style.transform = to(props, (...args) => {
let transform = ''
let identity = true
for (let i = 0; i < args.length; i++) {
Expand All @@ -179,6 +177,7 @@ export class AnimatedStyle extends AnimatedObject {
return identity ? 'none' : transform
})
}
super(swiftStyle)

super(style)
}
}

0 comments on commit 04be6b3

Please sign in to comment.