fix eslint

reyhappen · Apr 3, 2018 · 334231e · 334231e
1 parent 836dd6e
commit 334231e
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/stories/TransitionLoop.js b/src/stories/TransitionLoop.js
@@ -24,7 +24,6 @@ export default class TransitionLoop extends React.Component {
   }
 
   transition() {
-    console.log('transition:');
     this.setState({ isTransitioned: true });
   }
 

diff --git a/src/stories/index.js b/src/stories/index.js
@@ -1,5 +1,5 @@
 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';

diff --git a/src/stories/lottie-control-segments.js b/src/stories/lottie-control-segments.js
@@ -1,57 +1,62 @@
-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 LottieControlSegment extends React.Component {
 
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.state = {
-            isStopped: false,
-            isPaused: false,
-            speed: 1,
-            direction: 1,
-            isDataA: true,
-            startFrame: 0,
-            endFrame: 50
-        };
+    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) };
 
-    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}
+      />
 
-        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) || 0 })} />
-                <input
-                    type="text" value={endFrame}
-                    onChange={(e) => this.setState({ endFrame: parseInt(e.currentTarget.value) || 0 })} />
-            </div>
-        </div>
-    }
+      <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>);
+  }
 }
diff --git a/src/stories/lottie-control.js b/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>);
   }
 }
diff --git a/src/stories/toggle-like.js b/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>);
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,6 @@ export default class TransitionLoop extends React.Component { @@
       }
       transition() {
-        console.log('transition:');
         this.setState({ isTransitioned: true });
       }
@@ Expand Down @@