[release] 1.1.0

.npmignore

@@ -2,6 +2,8 @@
 .vscode
 .git*
 .storybook
+.babelrc
+.gitignore
 
 example
 node_modules

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.storybook/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
         test: /\.tsx?$/,
         include: path.resolve(__dirname, "../"),
         use: [
-          require.resolve("ts-loader")
+          require.resolve("babel-loader")
         ]
       },
       {

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+1.1.0 (January 25, 2020)
+- update devDepencies packages version
+- use ``useCallback`` in main source
+
 1.0.6 (January 25, 2020)
 - add example sources
 - add Live demo

README.md

@@ -4,9 +4,9 @@
 [![Download Count][download-image]][download-url]
 
 [react-url]: https://reactjs.org
-[react-image]: https://img.shields.io/badge/React-%5E16.9.0-blue
+[react-image]: https://img.shields.io/badge/React-16.13.1-blue
 [typescript-url]: https://www.typescriptlang.org
-[typescript-image]: https://img.shields.io/badge/Typescript-%5E3.7.0-brightgreen
+[typescript-image]: https://img.shields.io/badge/Typescript-3.9.7-orange
 [download-image]: http://img.shields.io/npm/dm/react-sequence-player.svg?style=flat
 [download-url]: http://www.npmjs.com/package/react-sequence-player
 

example/delay.story.tsx

@@ -45,6 +45,7 @@ storiesOf('SequencePlayer', module)
           imageSize={{ width: 918, height: 506 }}
           ref={playerRef}
           delay={200}
+          logging={true}
         />
       </div>
     );

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-sequence-player",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "react component for sequence playing in <div>",
   "main": "dist/index.js",
   "scripts": {
     "type-check": "tsc -p tsconfig.json",
     "dev": "start-storybook -p 6006",
+    "prebuild": "npm run type-check",
     "build": "rm -rf dist && rollup -c",
     "build:watch": "rollup -c --watch",
     "build:storybook": "build-storybook --quiet"
@@ -33,30 +34,29 @@
   },
   "homepage": "https://github.com/kimcoder/react-sequence-player#readme",
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.8.0",
-    "@babel/preset-env": "^7.8.2",
-    "@babel/preset-react": "^7.8.0",
-    "@babel/preset-typescript": "^7.8.0",
-    "@storybook/addon-info": "^5.3.1",
-    "@storybook/addon-links": "^5.3.1",
-    "@storybook/addons": "^5.3.1",
-    "@storybook/preset-typescript": "^1.2.0",
-    "@storybook/react": "^5.3.1",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "rollup": "^1.29.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-typescript2": "^0.25.3",
-    "style-loader": "^1.1.2",
-    "ts-loader": "^6.2.1",
-    "tslint": "^5.20.1",
-    "tslint-config-standard": "^9.0.0",
-    "tslint-react": "^4.1.0",
-    "typescript": "^3.7.4"
+    "@babel/plugin-transform-runtime": "7.11.0",
+    "@babel/preset-env": "7.11.0",
+    "@babel/preset-react": "7.10.4",
+    "@babel/preset-typescript": "7.10.4",
+    "@storybook/addon-info": "5.3.19",
+    "@storybook/addon-links": "6.0.6",
+    "@storybook/addons": "6.0.6",
+    "@storybook/preset-typescript": "3.0.0",
+    "@storybook/react": "6.0.6",
+    "@types/react": "16.9.46",
+    "@types/react-dom": "16.9.8",
+    "babel-loader": "8.1.0",
+    "css-loader": "4.2.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "rollup": "2.25.0",
+    "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-typescript2": "0.27.2",
+    "style-loader": "1.2.1",
+    "tslint": "6.1.3",
+    "tslint-config-standard": "9.0.0",
+    "tslint-react": "5.0.0",
+    "typescript": "3.9.7"
   },
   "dependencies": {}
 }

rollup.config.js

@@ -7,7 +7,7 @@ const config = {
   output: [
     {
       file: pkg.main,
-      format: 'cjs'
+      format: 'esm'
     },
   ],
   external: [

src/SequencePlayer.tsx

@@ -36,42 +36,44 @@ const SequencePlayer = (props: Props, ref: any) => {
   const [isReverse, setIsReverse] = React.useState(false);
   const getSize = (size: number) => props.forMobile ? Math.round(size / 2) : size;
 
-  const play = (idx: number = 0) => {
-    props.logging && console.log('[SequencePlayer play]');
+  const play = React.useCallback((idx: number = 0) => {
+    if (isPlaying) return;
+    props.logging && console.log('[SequencePlayer play]', isPlaying);
     props.onStart && props.onStart();
     setIndex(idx);
     setIsPlaying(true);
     setIsReverse(false);
-    update();
-  };
+  }, [isPlaying]);
 
-  const reverse = () => {
-    props.logging && console.log('[SequencePlayer reverse]');
-    if (index > 0) {
+  const reverse = React.useCallback(() => {
+    if (isReverse) return;
+    props.logging && console.log('[SequencePlayer reverse]', index);
+    if (index > 0 && !isReverse) {
       props.onStart && props.onStart();
-      setIsPlaying(true);
       setIsReverse(true);
-      update();
+      setIsPlaying(true);
     } else {
-      props.logging && console.log('[SequencePlayer reverse] can not reverse, because idx is 0', index);
+      props.logging && console.log('[SequencePlayer reverse] can not reverse, because idx is 0 or currently is reversing', index);
     }
-  };
+  }, [index]);
 
-  const pause = (idx?: number) => {
+  const pause = React.useCallback((idx?: number) => {
+    if (!isPlaying) return;
     props.logging && console.log('[SequencePlayer pause]');
     if (idx) {
       setIndex(idx);
     }
     setIsPlaying(false);
     props.onPaused && props.onPaused();
-  };
+  }, [isPlaying]);
 
-  const resume = () => {
+  const resume = React.useCallback(() => {
+    if (isPlaying) return;
     props.logging && console.log('[SequencePlayer resume]');
-    isPlaying ? pause() : play(index);
-  };
-
-  const update = () => {
+    play(index);
+  }, [index, isPlaying]);
+  
+  const update = React.useCallback(() => {
     if (!isPlaying) return;
     props.logging && console.log(`[SequencePlayer update] isReverse:${isReverse} ${index}/${props.data.length - 1}`);
     const isFirst: boolean = index === 0;
@@ -83,29 +85,22 @@ const SequencePlayer = (props: Props, ref: any) => {
     } else if (isReverse && isFirst) {
       setIsPlaying(false);
       props.onComplete && props.onComplete();
-    } else if (isReverse && index > 1) {
+    } else if (isReverse && index > 0) {
       setIndex(index - 1);
     } else if (!isReverse && props.data.length > index + 1) {
       setIndex(index + 1);
     }
-  };
+  }, [index, isPlaying, isReverse]);
 
   React.useImperativeHandle(ref, () => ({ play, resume, pause, reverse }));
   React.useEffect(() => {
-    setTimeout(update, props.delay || 50);
+    isPlaying && setTimeout(update, props.delay || 50);
   }, [index]);
 
   React.useEffect(() => {
     isPlaying && update();
   }, [isPlaying]);
 
-  React.useEffect(() => {
-    // window.addEventListener("mousemove", logMousePosition);
-    return () => {
-      // window.removeEventListener("mousemove", logMousePosition);
-    };
-  }, []);
-
   const overrideStyle: React.CSSProperties = {
     ...props.style,
     backgroundRepeat: 'no-repeat',