feat: update storybook

Author: SilverFox70

.storybook/head.html

@@ -1,4 +1,4 @@
-<a href="https://github.com/chenqingspring/react-lottie" class="github-corner" aria-label="View source on Github">
+<a href="https://github.com/SilverFox70/react-lottie-segments" class="github-corner" aria-label="View source on Github">
     <svg width="80" height="80" viewBox="0 0 250 250"
          style="fill:#e91e63;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true">
         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>

src/stories/index.js

@@ -13,6 +13,6 @@ storiesOf('Lottie Animation View', module)
   .add('toggle like', () => <ToggleLike />)
   .add('transitions & loops', () => <TransitionLoop />)
   .add('transitions with options', () => <TransitionWithOptions />)
-  .add('with segments', () => <LottieControlSegments />)
+  .add('with playSegments', () => <LottieControlSegments />)
   .add('with goToAndStop', () => <LottieGoToAndStop />)
   .add('with goToAndPlay', () => <LottieGoToAndPlay />);

src/stories/lottie-control-segments.js

@@ -25,8 +25,12 @@ export default class LottieControlSegment extends React.Component {
       margin: '10px auto',
       textAlign: 'center',
     };
-    const { isStopped, isPaused, direction, speed, isDataA, startFrame, endFrame } = this.state;
+    const { isStopped, isPaused, direction, speed, isDataA, startFrame, endFrame, forceFlag } = this.state;
     const defaultOptions = { animationData: (isDataA ? animationDataA : animationDataB) };
+    const segmentOptions = {
+      segments: [startFrame, endFrame],
+      forceFlag: false
+    }
 
     return (<div>
       <Lottie
@@ -36,7 +40,7 @@ export default class LottieControlSegment extends React.Component {
         isStopped={isStopped}
         isPaused={isPaused}
         speed={speed}
-        segments={[startFrame, endFrame]}
+        playSegments={segmentOptions}
         direction={direction}
       />
 
@@ -56,6 +60,17 @@ export default class LottieControlSegment extends React.Component {
           type="text" value={endFrame}
           onChange={e => this.setState({ endFrame: parseInt(e.currentTarget.value, 10) || 0 })}
         />
+        <label htmlFor="forceFlag">
+          <input
+            id="forceFlag"
+            name="forceFlag"
+            type="checkbox"
+            checked={forceFlag}
+            onChange={e => this.setState({ forceFlag: e.currentTarget.checked })}
+
+          />
+          forceFlag
+        </label>
       </div>
     </div>);
   }