Merge branch 'master' into master

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/chenqingspring/react-lottie/compare/v1.0.0...v1.1.0) (2018-04-03)
+
+
+
 <a name="1.0.0"></a>
 # [1.0.0](https://github.com/chenqingspring/react-lottie/compare/v0.2.5...v1.0.0) (2018-01-17)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lottie",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "lottie animation view for React",
   "repository": {
     "type": "git",

src/index.js

@@ -9,7 +9,8 @@ export default class Lottie extends React.Component {
         loop,
         autoplay,
         animationData,
-        rendererSettings
+        rendererSettings,
+        segments,
       },
       eventListeners,
     } = this.props;
@@ -19,6 +20,7 @@ export default class Lottie extends React.Component {
       renderer: 'svg',
       loop: loop !== false,
       autoplay: autoplay !== false,
+      segments: segments !== false,
       animationData,
       rendererSettings,
     };
@@ -39,7 +41,14 @@ export default class Lottie extends React.Component {
   }
 
   componentDidUpdate() {
-    this.props.isStopped ? this.stop() : this.play();
+    if (this.props.isStopped) {
+      this.stop();
+    } else if (this.props.segments) {
+      this.playSegments();
+    } else {
+      this.play();
+    }
+
     this.pause();
     this.setSpeed();
     this.setDirection();
@@ -64,6 +73,10 @@ export default class Lottie extends React.Component {
     this.anim.play();
   }
 
+  playSegments() {
+    this.anim.playSegments(this.props.segments);
+  }
+
   stop() {
     this.anim.stop();
   }
@@ -92,8 +105,25 @@ export default class Lottie extends React.Component {
     });
   }
 
+  handleClickToPause = () => {
+    // The pause() method is for handling pausing by passing a prop isPaused
+    // This method is for handling the ability to pause by clicking on the animation
+    if (this.anim.isPaused) {
+      this.anim.play();
+    } else {
+      this.anim.pause();
+    }
+  }
+
   render() {
-    const {width, height} = this.props;
+    const {
+      width,
+      height,
+      ariaRole,
+      ariaLabel,
+      isClickToPauseDisabled,
+      title,
+    } = this.props;
 
     const getSize = (initial) => {
       let size;
@@ -114,12 +144,21 @@ export default class Lottie extends React.Component {
       margin: '0 auto',
     };
 
+    const onClickHandler = isClickToPauseDisabled ? () => null : this.handleClickToPause;
+
     return (
+      // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         ref={(c) => {
           this.el = c;
         }}
         style={lottieStyles}
+        onClick={onClickHandler}
+        title={title}
+        role={ariaRole}
+        aria-label={ariaLabel}
+        tabIndex="0"
       />
     );
   }
@@ -133,12 +172,21 @@ Lottie.propTypes = {
   isStopped: PropTypes.bool,
   isPaused: PropTypes.bool,
   speed: PropTypes.number,
+  segments: PropTypes.arrayOf(PropTypes.number),
   direction: PropTypes.number,
+  ariaRole: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  isClickToPauseDisabled: PropTypes.bool,
+  title: PropTypes.string,
 };
 
 Lottie.defaultProps = {
   eventListeners: [],
   isStopped: false,
   isPaused: false,
   speed: 1,
+  ariaRole: 'button',
+  ariaLabel: 'animation',
+  isClickToPauseDisabled: false,
+  title: '',
 };

src/stories/TransitionLoop.js

@@ -24,7 +24,6 @@ export default class TransitionLoop extends React.Component {
   }
 
   transition() {
-    console.log('transition:');
     this.setState({ isTransitioned: true });
   }
 

src/stories/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf } from '@kadira/storybook';
 import LottieControl from './lottie-control';
+import LottieControlSegments from './lottie-control-segments';
 import ToggleLike from './toggle-like';
 import TransitionLoop from './TransitionLoop';
 import TransitionWithOptions from './TransitionWithOptions';
@@ -9,4 +10,5 @@ storiesOf('Lottie Animation View', module)
   .add('with control', () => <LottieControl />)
   .add('toggle like', () => <ToggleLike />)
   .add('transitions & loops', () => <TransitionLoop />)
-  .add('transitions with options', () => <TransitionWithOptions />);
+  .add('transitions with options', () => <TransitionWithOptions />)
+  .add('with segments', () => <LottieControlSegments />);

src/stories/lottie-control-segments.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationDataA from './pinjump.json';
+import * as animationDataB from './TwitterHeart.json';
+
+export default class LottieControlSegment extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isStopped: false,
+      isPaused: false,
+      speed: 1,
+      direction: 1,
+      isDataA: true,
+      startFrame: 0,
+      endFrame: 50,
+    };
+  }
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { isStopped, isPaused, direction, speed, isDataA, startFrame, endFrame } = this.state;
+    const defaultOptions = { animationData: (isDataA ? animationDataA : animationDataB) };
+
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        isPaused={isPaused}
+        speed={speed}
+        segments={[startFrame, endFrame]}
+        direction={direction}
+      />
+
+      <p style={centerStyle}>Speed: x{speed}</p>
+      <input
+        style={centerStyle}
+        type="range" value={speed} min="0" max="3" step="0.5"
+        onChange={e => this.setState({ speed: e.currentTarget.value })}
+      />
+      <p style={centerStyle}>Segment range: [{startFrame}, {endFrame}]</p>
+      <div style={centerStyle}>
+        <input
+          type="text" value={startFrame}
+          onChange={e => this.setState({ startFrame: parseInt(e.currentTarget.value, 10) || 0 })}
+        />
+        <input
+          type="text" value={endFrame}
+          onChange={e => this.setState({ endFrame: parseInt(e.currentTarget.value, 10) || 0 })}
+        />
+      </div>
+    </div>);
+  }
+}

src/stories/lottie-control.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 import Lottie from '../index';
-import * as animationDataA from './pinjump.json'
-import * as animationDataB from './TwitterHeart.json'
+import * as animationDataA from './pinjump.json';
+import * as animationDataB from './TwitterHeart.json';
 
 export default class LottieControl extends React.Component {
 
@@ -13,39 +13,56 @@ export default class LottieControl extends React.Component {
       isPaused: false,
       speed: 1,
       direction: 1,
-      isDataA: true
+      isDataA: true,
     };
-
   }
 
   render() {
     const centerStyle = {
       display: 'block',
       margin: '10px auto',
-      textAlign: 'center'
+      textAlign: 'center',
     };
-    const {isStopped, isPaused, direction, speed, isDataA} = this.state;
-    const defaultOptions = {animationData: (isDataA ? animationDataA : animationDataB )};
+    const { isStopped, isPaused, direction, speed, isDataA } = this.state;
+    const defaultOptions = { animationData: (isDataA ? animationDataA : animationDataB) };
 
-    return <div>
-      <Lottie options={defaultOptions}
-              height={400}
-              width={400}
-              isStopped={isStopped}
-              isPaused={isPaused}
-              speed={speed}
-              direction={direction}/>
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        isPaused={isPaused}
+        speed={speed}
+        direction={direction}
+      />
 
       <p style={centerStyle}>Speed: x{speed}</p>
-      <input style={centerStyle}
-             type="range" value={speed} min="0" max="3" step="0.5"
-             onChange={(e) => this.setState({speed: e.currentTarget.value})}/>
-      <button style={centerStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
-      <button style={centerStyle} onClick={() => this.setState({isStopped: false})}>play</button>
-      <button style={centerStyle} onClick={() => this.setState({isPaused: !isPaused})}>pause</button>
-      <button style={centerStyle} onClick={() => this.setState({direction: direction * -1})}>change direction</button>
-      <button style={centerStyle} onClick={() => this.setState({isDataA: !isDataA})}>toggle animation
-      </button>
-    </div>
+      <input
+        style={centerStyle}
+        type="range" value={speed} min="0" max="3" step="0.5"
+        onChange={e => this.setState({ speed: e.currentTarget.value })}
+      />
+      <button
+        style={centerStyle}
+        onClick={() => this.setState({ isStopped: true })}
+      >stop</button>
+      <button
+        style={centerStyle}
+        onClick={() => this.setState({ isStopped: false })}
+      >play</button>
+      <button
+        style={centerStyle}
+        onClick={() => this.setState({ isPaused: !isPaused })}
+      >pause</button>
+      <button
+        style={centerStyle}
+        onClick={() => this.setState({ direction: direction * -1 })}
+      >change direction</button>
+      <button
+        style={centerStyle}
+        onClick={() => this.setState({ isDataA: !isDataA })}
+      >toggle animation</button>
+    </div>);
   }
 }

src/stories/toggle-like.js

@@ -1,6 +1,6 @@
-import React from 'react'
+import React from 'react';
 import Lottie from '../index';
-import * as animationDataA from './TwitterHeart.json'
+import * as animationDataA from './TwitterHeart.json';
 
 export default class ToggleLike extends React.Component {
 
@@ -12,36 +12,37 @@ export default class ToggleLike extends React.Component {
       isPaused: false,
       speed: 1,
       direction: 1,
-      isLike: false
+      isLike: false,
     };
   }
 
   render() {
     const centerStyle = {
       display: 'block',
       margin: '10px auto',
-      textAlign: 'center'
+      textAlign: 'center',
     };
-    const {isStopped, isPaused, direction, speed, isLike} = this.state;
-    const defaultOptions = {animationData: animationDataA, loop: false, autoplay: false};
+    const { isStopped, isPaused, direction, speed, isLike } = this.state;
+    const defaultOptions = { animationData: animationDataA, loop: false, autoplay: false };
 
     const clickHandler = () => {
-      const {isStopped, direction, isLike} = this.state;
       if (!isStopped) {
-        this.setState({direction: direction * -1})
+        this.setState({ direction: direction * -1 });
       }
-      this.setState({isStopped: false, isLike: !isLike})
-    }
+      this.setState({ isStopped: false, isLike: !isLike });
+    };
 
-    return <div>
-      <Lottie options={defaultOptions}
-              height={400}
-              width={400}
-              isStopped={isStopped}
-              isPaused={isPaused}
-              speed={speed}
-              direction={direction}/>
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        isStopped={isStopped}
+        isPaused={isPaused}
+        speed={speed}
+        direction={direction}
+      />
       <button style={centerStyle} onClick={clickHandler}>{isLike ? 'unlike' : 'like'}</button>
-    </div>
+    </div>);
   }
 }