Merge pull request #11 from emilpalsson/combine-animation-settings

Combine animation settings + wrapperType default prop

README.md

@@ -90,8 +90,10 @@ renderMetroContainer() {
 
 #### Customizing animations
 ```javascript
-// override Metro´s default animations settings for each unique item in your items
+// Override Metro´s default animations settings for each unique item in your items
 // array, see greensock tweenmax for reference.
+// The animation settings are combined with the default animation settings, so
+// you only have to specify the values you want to change.
 const animationMap = [
   {
     in: {
@@ -121,6 +123,8 @@ const animationMap = [
 
 // Metro comes with a simple, fade in / out default. This object passed
 // in as the third argument in the Metro.sequence overrides the default settings.
+// The override settings are combined with the built in defaults, so you only
+// have to specify the values you want to change.
 const defaultAnimationOverride = {
   animation: {
     out: {

__tests__/metroTests.js

@@ -4,6 +4,25 @@ import Metro from '../src/index'
 describe('sequence api', () => {
   const testArr = [{ name: 'dog' }, { name: 'cat' }]
 
+  const defaultAnimation = {
+    out: {
+      time: 0.4,
+      delay: 0
+    },
+    in: {
+      time: 0.4,
+      delay: 0
+    },
+    willEnter: {
+      from: { opacity: 0 },
+      to: { opacity: 1, ease: 'easeInOut' }
+    },
+    willLeave: {
+      from: { opacity: 1 },
+      to: { opacity: 0 }
+    }
+  }
+
   it('transforms an array to a Metro sequence', () => {
     const sequence = Metro.sequence(testArr, [])
     expect(sequence[0].content.name).toBe(testArr[0].name)
@@ -12,29 +31,6 @@ describe('sequence api', () => {
   it('uses the default animation settings', () => {
     const sequence = Metro.sequence(testArr, [])
 
-    const defaultAnimation = {
-      out: {
-        time: 0.4,
-        delay: 0
-      },
-      in: {
-        time: 0.4,
-        delay: 0
-      },
-      willEnter: {
-        from: { opacity: 0 },
-        to: { opacity: 1, ease: 'easeInOut' }
-      },
-      willLeave: {
-        from: {
-          opacity: 1
-        },
-        to: {
-          opacity: 0
-        }
-      }
-    }
-
     expect(sequence[0].animation).toEqual(defaultAnimation)
   })
 
@@ -69,7 +65,7 @@ describe('sequence api', () => {
     expect(sequence[0].animation).toEqual(defaultAnimationOverrideBase)
   })
 
-  it('overrides default animation per array item though a custom animationmMap', () => {
+  it('overrides default animation per array item though a custom animationMap', () => {
     const dogMap = {
       in: {
         time: 3,
@@ -114,4 +110,150 @@ describe('sequence api', () => {
     expect(sequence[1].animation.out).toEqual(catMap.out)
     expect(sequence[1].animation.willEnter).toEqual(catMap.willEnter)
   })
+
+  it('overrides single properties of the default animation settings', () => {
+    const defaultAnimationOverride = {
+      animation: {
+        willEnter: {
+          from: { y: -100 },
+          to: { y: 0, ease: 'linear' }
+        },
+        willLeave: {
+          from: { y: 100 },
+          to: { y: 0 }
+        }
+      }
+    }
+    const sequence = Metro.sequence(testArr, [], defaultAnimationOverride)
+
+    const expected = {
+      out: {
+        time: 0.4,
+        delay: 0
+      },
+      in: {
+        time: 0.4,
+        delay: 0
+      },
+      willEnter: {
+        from: { opacity: 0, y: -100 },
+        to: { opacity: 1, ease: 'linear', y: 0 }
+      },
+      willLeave: {
+        from: { opacity: 1, y: 100 },
+        to: { opacity: 0, y: 0 }
+      }
+    }
+
+    expect(sequence[0].animation).toEqual(expected)
+  })
+
+  it('applies single properties in the animationMap to the default animation settings', () => {
+    const animationMap = [
+      {},
+      {
+        out: {
+          delay: 1
+        },
+        willLeave: {
+          to: { opacity: 0.5 }
+        }
+      }
+    ]
+    const sequence = Metro.sequence(testArr, animationMap)
+
+    const expectedSettingsForSecondItem = {
+      out: {
+        time: 0.4,
+        delay: 1
+      },
+      in: {
+        time: 0.4,
+        delay: 0
+      },
+      willEnter: {
+        from: { opacity: 0 },
+        to: { opacity: 1, ease: 'easeInOut' }
+      },
+      willLeave: {
+        from: { opacity: 1 },
+        to: { opacity: 0.5 }
+      }
+    }
+
+    expect(sequence[0].animation).toEqual(defaultAnimation)
+    expect(sequence[1].animation).toEqual(expectedSettingsForSecondItem)
+  })
+
+  it('applies single properties in the animationMap to the overridden animation settings', () => {
+    const defaultAnimationOverride = {
+      animation: {
+        willEnter: {
+          from: { y: -100 },
+          to: { y: 0, ease: 'linear' }
+        },
+        willLeave: {
+          from: { y: 100 },
+          to: { y: 0 }
+        }
+      }
+    }
+    const animationMap = [
+      {},
+      {
+        out: {
+          delay: 1
+        },
+        willLeave: {
+          to: { opacity: 0.5 }
+        }
+      }
+    ]
+    const sequence = Metro.sequence(
+      testArr,
+      animationMap,
+      defaultAnimationOverride
+    )
+
+    const expectedSettingsForFirstItem = {
+      out: {
+        time: 0.4,
+        delay: 0
+      },
+      in: {
+        time: 0.4,
+        delay: 0
+      },
+      willEnter: {
+        from: { opacity: 0, y: -100 },
+        to: { opacity: 1, y: 0, ease: 'linear' }
+      },
+      willLeave: {
+        from: { opacity: 1, y: 100 },
+        to: { opacity: 0, y: 0 }
+      }
+    }
+
+    const expectedSettingsForSecondItem = {
+      out: {
+        time: 0.4,
+        delay: 1
+      },
+      in: {
+        time: 0.4,
+        delay: 0
+      },
+      willEnter: {
+        from: { opacity: 0, y: -100 },
+        to: { opacity: 1, y: 0, ease: 'linear' }
+      },
+      willLeave: {
+        from: { opacity: 1, y: 100 },
+        to: { opacity: 0.5, y: 0 }
+      }
+    }
+
+    expect(sequence[0].animation).toEqual(expectedSettingsForFirstItem)
+    expect(sequence[1].animation).toEqual(expectedSettingsForSecondItem)
+  })
 })