Add eventhandler example to storybook

Added transition loop example, which illustrates how an event can be
used to trigger state changes.
Made note of broken loop prop, to investigate.
added babel-eslint parser setting to eslint (babel-eslint
was already a project dependancy).

Author: jwfwessels

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": "airbnb",
   "rules": {
     # We use _ to define private variables and methods in clases

src/stories/TransitionLoop.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationDataA from './TwitterHeart.json';
+import * as animationDataB from './beating-heart.json';
+
+/**
+ * TransitionLoop, demonstrates the use of the eventListener Props.
+ * NOTE: there appears to currently be a bug in either
+ * react-lottie or bodymovin which results in a chance of the loop option not 
+ * taking effect accross different animations.
+ */
+export default class TransitionLoop extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isStopped: true,
+      isPaused: false,
+      speed: 1,
+      direction: 1,
+      isLike: false,
+      isTransitioned: false,
+    };
+  }
+
+  transition() {
+    console.log('transition:');
+    this.setState({ isTransitioned: true });
+  }
+
+  clickHandler = () => {
+    this.setState({ isTransitioned: false });
+  };
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { isTransitioned } = this.state;
+    const defaultOptions = {
+      animationData: !isTransitioned ? animationDataA : animationDataB,
+      loop: true,
+      autoplay: true,
+    };
+
+    return (
+      <div>
+        <Lottie
+          options={defaultOptions}
+          height={400}
+          width={400}
+          eventListeners={
+            !isTransitioned
+              ? [
+                {
+                  eventName: 'loopComplete',
+                  callback: () => this.transition(),
+                },
+              ]
+              : []
+          }
+        />
+        <button style={centerStyle} onClick={this.clickHandler}>
+          restart
+        </button>
+      </div>
+    );
+  }
+}

src/stories/beating-heart.json

@@ -0,0 +1 @@
+{"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"corasón","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.34,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p34_1_0p167_0p167","t":0,"s":[256,360,0],"e":[256,300,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.66,"y":0},"n":"0p833_0p833_0p66_0","t":8,"s":[256,300,0],"e":[256,360,0],"to":[0,0,0],"ti":[0,0,0]},{"t":16}]},"a":{"k":[0,67,0]},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_0p667_0p333_0p333"],"t":0,"s":[105,95,100],"e":[90,120,100]},{"i":{"x":[0.34,0.34,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p34_1_0p333_0","0p34_1_0p333_0","0p667_0p667_0p333_0p333"],"t":2,"s":[90,120,100],"e":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,0.667]},"o":{"x":[0.66,0.66,0.333],"y":[0,0,0.333]},"n":["0p667_1_0p66_0","0p667_1_0p66_0","0p667_0p667_0p333_0p333"],"t":8,"s":[100,100,100],"e":[90,120,100]},{"i":{"x":[0.667,0.667,0.667],"y":[0.667,0.8,0.667]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0.333]},"n":["0p667_0p667_0p333_0","0p667_0p8_0p333_0","0p667_0p667_0p333_0p333"],"t":14,"s":[90,120,100],"e":[105,95,100]},{"t":16}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[25.079,0],[7.698,-12.8],[14.334,0],[0,-26.379],[-10.313,-12.267],[-19.972,-13.2],[0,0],[-19.972,13.201],[-10.312,12.267],[0,11.377]],"o":[[-14.334,0],[-7.698,-12.8],[-25.079,0],[0,11.377],[10.312,12.267],[19.972,13.201],[0,0],[19.972,-13.2],[10.313,-12.267],[0,-26.379]],"v":[[37.595,-64],[0,-44.8],[-37.594,-64],[-81.454,-21.898],[-66.574,16.522],[-30.154,48.522],[0,64],[30.154,48.522],[66.573,16.522],[81.454,-21.898]],"c":true}},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"k":[0.839,0.176,0.318,1]},"o":{"k":100},"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformar"}],"nm":"Forma 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":16,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":1,"nm":"BG","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[256,256,0]},"a":{"k":[64,64,0]},"s":{"k":[409.375,409.375,100]}},"ao":0,"sw":128,"sh":128,"sc":"#ffffff","ip":0,"op":16,"st":0,"bm":0,"sr":1}],"v":"4.5.4","ddd":0,"ip":0,"op":16,"fr":24,"w":512,"h":512}

src/stories/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import LottieControl from './lottie-control'
-import ToggleLike from "./toggle-like";
+import { storiesOf, action } from '@kadira/storybook';
+import LottieControl from './lottie-control';
+import ToggleLike from './toggle-like';
+import TransitionLoop from './TransitionLoop';
 
 storiesOf('Lottie Animation View', module)
-  .add('with control', () => (
-    <LottieControl/>
-  )).add('toggle like', () => (
-  <ToggleLike/>
-));
+  .add('with control', () => <LottieControl />)
+  .add('toggle like', () => <ToggleLike />)
+  .add('transitions & loops', () => <TransitionLoop />);