feat: 2.0.1 done

Author: kimcoder

.babelrc

@@ -3,7 +3,7 @@
     [
       "@babel/preset-env",
       {
-        "loose": true,
+        "useBuiltIns": "usage",
         "modules": false,
         "targets": "> 0.25%, not dead"
       }

.eslintignore

@@ -1,2 +1,5 @@
 node_modules/* 
 dist/*
+example/index.js
+webpack.config.js
+rollup.config.js

.eslintrc

@@ -1,13 +1,19 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react", "jsx-a11y", "import"],
-  "extends": [
-    "airbnb",
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "prettier/prettier": "error"
+  },
   "env": {
     "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // https://github.com/yannickcr/eslint-plugin-react#configuration
+    }
   }
 }

.npmignore

@@ -2,8 +2,13 @@
 .vscode
 .git*
 
+src
 example
 node_modules
 npm-debug.log
 yarn-debug.log
-yarn-error.log
+yarn-error.log
+demo.gif
+rollup.config.js
+webpack.config.js
+tsconfig.json

.prettierignore

@@ -1,7 +1,7 @@
 dist
 src
 example
-rollup.config.js
 webpack.config.js
 *.json
-*.md
+*.md
+.babelrc

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "useTabs": false,
+  "semi": true,
+  "requirePragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "ignore",
+  "endOfLine": "auto",
+  "trailingComma": "none"
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+2.0.0 (November 15, 2020)
+- development by typescript
+- migration functional component
+
 1.0.4 (June 22, 2020)
 - add 'onClick' props. 
   - can handle callback when image was clicked 

README.md

@@ -10,7 +10,7 @@
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg
 [license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE
 
-Simple ImageSlider Component for ReactJS v16.0<br>
+Simple ImageSlider Component for ReactJS v16.13<br>
 - Just Two Elements will be used. (for display images)
 - Support GPU Render, by default. 
 - Support Image Preload.
@@ -103,7 +103,7 @@ npm run build:watch     // build watch mode
 // yarn
 yarn example
 yarn build
-yarn buidl:watch
+yarn build:watch
 ```
 If you want to run a test app, should build before do that.<br>
 

example/App.jsx

@@ -15,7 +15,6 @@ import SimpleImageSlider from "..";
 
 class App extends React.Component {
     listSubHeader = <ListSubheader><h1>Slider Settings</h1></ListSubheader>;
-
     toggleOptions = ["useGPURender", "showNavs", "showBullets"];
 
     images = [

example/index.js

@@ -1,13 +1,18 @@
 {
   "name": "react-simple-image-slider",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "simple image slider component for react",
-  "main": "dist/ImageSlider.js",
+  "main": "dist/index.js",
   "scripts": {
-    "example": "webpack-dev-server --inline --mode development",
+    "example": "webpack-dev-server",
+    "example:deploy": "webpack --config webpack.config.js",
+    "dev": "rollup -c --watch & npm run example",
     "build": "rollup -c",
-    "build:watch": "rollup -c --watch",
-    "prebuild": "rm -rf dist"
+    "prebuild": "rm -rf dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "prettier": "prettier --check .",
+    "prettier:fix": "prettier --write ."
   },
   "keywords": [
     "reactjs",
@@ -31,36 +36,29 @@
     "url": "https://github.com/kimcoder/react-simple-image-slider/issues"
   },
   "homepage": "https://github.com/kimcoder/react-simple-image-slider#readme",
-  "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "prop-types": "^15.6.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.11.4",
-    "@babel/eslint-parser": "^7.11.4",
-    "@babel/eslint-plugin": "^7.11.3",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/polyfill": "^7.10.4",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@material-ui/core": "^4.11.0",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-typescript": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.7.0",
     "@typescript-eslint/parser": "^3.10.1",
     "babel-loader": "^8.0.2",
-    "eslint": "^7.7.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint": "^7.13.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "prettier": "^2.1.1",
+    "gh-pages": "^3.1.0",
+    "prettier": "^2.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup": "^2.26.5",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-img": "^1.1.0",
-    "rollup-plugin-typescript2": "^0.27.2",
     "typescript": "^4.0.2",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",

index.d.ts

@@ -1,26 +1,16 @@
-import babel from "rollup-plugin-babel";
-import image from "rollup-plugin-img";
-import typescript from 'rollup-plugin-typescript2';
-import pkg from "./package.json";
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import image from '@rollup/plugin-image';
+import typescript from '@rollup/plugin-typescript';
+import babelConfig from './babel.config';
 
-const external = id => !id.startsWith("/") && !id.startsWith(".");
+const external = (id) => !id.startsWith('/') && !id.startsWith('.');
 
 export default {
-    input: "src/index.ts",
-    output: {
-        file: pkg.main,
-        format: "esm",
-    },
-    plugins: [
-        babel({ runtimeHelpers: true }),
-        image({ limit: 1000 }),
-        typescript({
-        tsconfig: 'tsconfig.json',
-        tsconfigOverride: {
-            include: [ 'src/**/*' ],
-            exclude: [ 'node_modules', 'example' ]
-          }
-        })
-    ],
-    external,
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'esm'
+  },
+  plugins: [typescript(), getBabelOutputPlugin({ presets: ['@babel/preset-env'] }), image({ limit: 1000 })],
+  external
 };

package-lock.json

@@ -0,0 +1,151 @@
+import React from "react";
+import ImagePreLoader from "./ImageSliderPreLoader";
+import styles from "./ImageSliderStyle";
+import ImageSliderNavigation, { ImageSliderNavDirection, ImageSliderNavStyle } from './ImageSliderNavigation';
+
+export type SimpleImageSliderProps = {
+  width: number | string;
+  height: number | string;
+  images: Array<{ url: string }>;
+  style?: React.CSSProperties;
+  showNavs: boolean;
+  showBullets: boolean;
+  slideDuration?: number;
+  bgColor?: string;
+  useGPURender?: boolean;
+  navStyle?: ImageSliderNavStyle;
+  onClick?: (idx: number, event: React.SyntheticEvent) => void;
+  onClickNav?: (toRight: boolean) => void;
+  onClickBullets?: (idx: number) => void;
+  onStartSlide?: (idx: number, length: number) => void;
+  onCompleteSlide?: (idx: number, length: number) => void;
+};
+
+const SimpleImageSlider: React.FC<SimpleImageSliderProps> = ({
+  width,
+  height,
+  images,
+  showNavs,
+  showBullets,
+  style = undefined,
+  slideDuration = 0.5,
+  bgColor = '#000',
+  useGPURender = true,
+  navStyle = ImageSliderNavStyle.NORMAL,
+  onClick = undefined,
+  onClickNav = undefined,
+  onClickBullets = undefined,
+  onStartSlide = undefined,
+  onCompleteSlide = undefined,
+}: SimpleImageSliderProps) => {
+  const rootStyle: React.CSSProperties = React.useMemo(() => (styles.getRootContainer(width, height, bgColor)), [width, height, bgColor]);
+  const [slideIdx, setSlideIdx] = React.useState(0);
+  const [slideDirection, setSlideDirection] = React.useState(ImageSliderNavDirection.RIGHT);
+  const [isSliding, setIsSliding] = React.useState(false);
+  const [currentSliderStyle, setCurrentSlideStyle] = React.useState(styles.getImageSlide(images[0].url, slideDuration, 0, useGPURender));
+  const [nextSliderStyle, setNextSliderStyle] = React.useState(styles.getImageSlide(images[1].url, slideDuration, 1, useGPURender));
+
+  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+    onClick && onClick(slideIdx, event);
+  }, [slideIdx]);
+
+  const handleClickNav = React.useCallback((direction: ImageSliderNavDirection) => () => {
+    if (isSliding) {
+      return;
+    }
+
+    onClickNav && onClickNav(true);
+    slide(direction === ImageSliderNavDirection.RIGHT ? slideIdx + 1 : slideIdx - 1);
+  }, [slideIdx, isSliding]);
+
+  const handleClickBullets = React.useCallback((idx: number) => () => {
+    console.log(idx , slideIdx, isSliding);
+    if (idx === slideIdx || isSliding) {
+      return;
+    }
+
+    onClickBullets && onClickBullets(idx);
+    slide(idx);
+  }, [slideIdx, isSliding]);
+
+  const slide = (idx: number) => {
+    const toNext: boolean = idx > slideIdx;
+    const currentUrl: string = images[slideIdx].url;
+    const nextUrl: string = images[idx].url;
+    const nextReadyX: 1 | -1 = toNext ? 1 : -1;
+
+    setSlideIdx(idx);
+    setSlideDirection(idx > slideIdx ? ImageSliderNavDirection.RIGHT : ImageSliderNavDirection.LEFT);
+    setCurrentSlideStyle(styles.getImageSlide(currentUrl, 0, 0, useGPURender));
+    setNextSliderStyle(styles.getImageSlide(nextUrl, 0, nextReadyX, useGPURender));
+    setIsSliding(true);
+
+    onStartSlide && onStartSlide(idx + 1, images.length);
+    idx + 2 < images.length && ImagePreLoader.load(images[idx + 2].url);
+  };
+
+  React.useEffect(() => {
+    if (isSliding) {
+      setTimeout(() => {
+        const toRight: boolean = slideDirection === ImageSliderNavDirection.RIGHT;
+        const currentUrl: string = images[toRight ? slideIdx - 1 : slideIdx + 1].url;
+        const nextUrl: string = images[slideIdx].url;
+        const currentOffetX: 1 | -1 = toRight ? -1 : 1;
+
+        setCurrentSlideStyle(styles.getImageSlide(currentUrl, slideDuration, currentOffetX, useGPURender));
+        setNextSliderStyle(styles.getImageSlide(nextUrl, slideDuration, 0, useGPURender));
+      }, 50);
+    }
+  }, [slideIdx, isSliding]);
+
+  const handleSlideEnd = React.useCallback(() => {
+    setCurrentSlideStyle(styles.getImageSlide(images[slideIdx].url, 0, 0, useGPURender));
+    setIsSliding(false);
+    onCompleteSlide && onCompleteSlide(slideIdx + 1, images.length);
+  }, [slideIdx]);
+
+  return (
+    <div style={{ ...rootStyle, ...style }}>
+      <div style={styles.getSubContainer(width, height)}>
+        {/* Render Slider */}
+        <div style={styles.ImageSlider} onClick={handleClick}>
+          <div style={currentSliderStyle} onTransitionEnd={handleSlideEnd}/>
+          <div style={nextSliderStyle}/>
+        </div>
+
+        {/* Render Navigation */}
+        {showNavs && images.length > 0 && slideIdx > 0 && (
+          <ImageSliderNavigation
+            direction={ImageSliderNavDirection.LEFT}
+            navStyle={navStyle}
+            onClickNav={handleClickNav}
+          />
+        )}
+        {showNavs && images.length > 0 && slideIdx < images.length - 1 && (
+          <ImageSliderNavigation
+            direction={ImageSliderNavDirection.RIGHT}
+            navStyle={navStyle}
+            onClickNav={handleClickNav}
+          />
+        )}
+
+        {/* Render Bullets */}
+        {showBullets && images.length > 0 && (
+          <div style={styles.getBulletContainer(images.length)}>
+            {Array.from(Array(images.length).keys()).map((e) => (
+              <button
+                key={`bullet-${e}`}
+                type="button"
+                data-id={`bullet-${e}`}
+                style={e === slideIdx ? styles.BulletActive : styles.BulletNormal}
+                onClick={handleClickBullets(e)}
+              />))
+            }
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SimpleImageSlider;

package.json

@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "./ImageSliderStyle";
+import ImageNavArrowLeft1 from "./images/arrow-left-1.png";
+import ImageNavArrowLeft2 from "./images/arrow-left-2.png";
+import ImageNavArrowRight1 from "./images/arrow-right-1.png";
+import ImageNavArrowRight2 from "./images/arrow-right-2.png";
+
+export enum ImageSliderNavStyle {
+  NORMAL = 1,
+  BOLD = 2
+}
+
+export enum ImageSliderNavDirection {
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+type ImageSliderNavigationProps = {
+  navStyle: ImageSliderNavStyle;
+  direction: ImageSliderNavDirection;
+  onClickNav: (direction: ImageSliderNavDirection) => (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+};
+
+const altNavArrowLeft = "slide to left";
+const altNavArrowRight = "slide to right";
+const images: { [key: string]: string } = {
+  [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowLeft1,
+  [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowRight1,
+  [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowLeft2,
+  [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowRight2
+};
+
+const ImageSliderNavigation: React.FC<ImageSliderNavigationProps> = (props: ImageSliderNavigationProps) => {
+  return (
+    <button
+      type="button"
+      style={props.direction === ImageSliderNavDirection.LEFT ? styles.NavLeft : styles.NavRight}
+      onClick={props.onClickNav(props.direction)}
+    >
+      <img
+        src={images[`image-${props.direction}-${props.navStyle}`]}
+        alt={props.direction === ImageSliderNavDirection.LEFT ? altNavArrowLeft : altNavArrowRight}
+      />
+    </button>
+  )
+};
+
+export default ImageSliderNavigation;

rollup.config.js

@@ -0,0 +1,32 @@
+const ImageSliderPreLoader = (() => {
+  const loadedUrl: { [key: string]: boolean } = {};
+  const loadQueue: Array<string> = [];
+  const loaderCount = 3;
+  const loaderPool: Array<HTMLImageElement> = new Array(loaderCount).fill(0).map(() => new Image());
+
+  return {
+    load: (url: string) => {
+      if (!url || loadedUrl[url]) {
+        return;
+      }
+
+      if (loaderPool.length === 0) {
+        loadQueue.push(url);
+      } else {
+        const imageLoader: HTMLImageElement = loaderPool.shift() as HTMLImageElement;
+
+        imageLoader.src = url;
+        imageLoader.onload = () => {
+          loadedUrl[url] = true;
+          if (loadQueue.length > 0) {
+            imageLoader.src = loadQueue.shift() as string;
+          } else {
+            loaderPool.push(imageLoader);
+          }
+        };
+      }
+    }
+  };
+})();
+
+export default ImageSliderPreLoader;

src/ImageSlider.jsx

@@ -0,0 +1,81 @@
+const basic = {
+  display: "block",
+  margin: "0",
+  padding: "0",
+  border: "0",
+};
+const basicRootContainer = {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%",
+};
+const basicSlide = {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%",
+  backgroundSize: "cover",
+};
+const basicNav = {
+  position: "absolute",
+  top: "50%",
+  cursor: "pointer",
+  outline: "none",
+  background: "none",
+};
+const bulletContainer = {
+    position: "absolute",
+    left: "50%",
+    bottom: "15px",
+};
+const bulletSize = 15;
+const bulletMargin = 3;
+const basicBullet = {
+    display: "inline-block",
+    cursor: "pointer",
+    outline: "none",
+    background: "none",
+    boxShadow: "1px 1px 1px 0px #1a1a1a",
+    borderRadius: "50%",
+    border: "1px solid #FFFFFF",
+    width: `${bulletSize}px`,
+    height: `${bulletSize}px`,
+    marginLeft: `${bulletMargin}px`,
+    marginRight: `${bulletMargin}px`,
+};
+
+export default {
+    ImageSlider: { ...basic, ...basicRootContainer } as React.CSSProperties,
+    ImageSlideCurrent: { ...basicSlide, overflow: "hidden" } as React.CSSProperties,
+    ImageSlideNext: { ...basicSlide, overflow: "hidden" } as React.CSSProperties,
+    NavLeft: { ...basic, ...basicNav, left: "30px", marginTop: "-25px" } as React.CSSProperties,
+    NavRight: { ...basic, ...basicNav, right: "30px", marginTop: "-25px" } as React.CSSProperties,
+    BulletNormal: { ...basic, ...basicBullet } as React.CSSProperties,
+    BulletActive: { ...basic, ...basicBullet, background: "#FFF" } as React.CSSProperties,
+
+    getRootContainer: (width: number | string, height: number | string, backgroundColor: string): React.CSSProperties => ({ ...basic,
+      overflow: "hidden",
+      width,
+      height,
+      backgroundColor,
+    }) as React.CSSProperties,
+    getSubContainer: (width: number | string, height: number | string): React.CSSProperties => ({ ...basic,
+        position: "absolute",
+        overflow: "hidden",
+        width,
+        height,
+    }) as React.CSSProperties,
+    getBulletContainer: (bulletLength: number): React.CSSProperties => ({ ...basic,
+      ...bulletContainer,
+      marginLeft: `-${bulletLength * (bulletSize + bulletMargin * 2) / 2}px`
+    }) as React.CSSProperties,
+    getImageSlide: (url: string, duration: number, idx: number, isGpuRender: boolean): React.CSSProperties => ({ ...basicSlide,
+        overflow: "hidden",
+        transition: `${duration}s`,
+        backgroundImage: `url(${url})`,
+        transform: isGpuRender ? `translate3d(${idx * 100}%, 0px, 0px)` : `translate(${idx * 100}%, 0px)`,
+    }) as React.CSSProperties,
+};

src/ImageSlider.tsx

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export = value;
+}

src/ImageSliderData.js

@@ -0,0 +1,3 @@
+import ImageSlider from './ImageSlider';
+
+export default ImageSlider;

src/ImageSliderNavigation.tsx

@@ -6,7 +6,6 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "sourceMap": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
@@ -18,7 +17,8 @@
 
     "jsx": "react",
     "types": ["react"],
-    "outDir": "dist"
+    "rootDir": "src",
+    "outDir": "dist",
   },
   "include": [
     "src/**/*",

src/ImageSliderPreLoader.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
     entry: {
-        index: ["@babel/polyfill", "./example/App.jsx"],
+        index: ["./example/App.jsx"],
     },
     output: {
         filename: "[name].js",
@@ -20,6 +20,8 @@ module.exports = {
     ],
     devServer: {
         contentBase: "./example",
-        host: "0.0.0.0",
+        host: "localhost",
+        inline: true,
+        open: true
     },
 };