From e18f3511d3feba4b9d3982ecfa48e0a67031a13c Mon Sep 17 00:00:00 2001 From: kimcoder Date: Fri, 12 Feb 2021 17:37:04 +0900 Subject: [PATCH 1/3] fix: fix error for image length 1 --- .babelrc | 2 +- .editorconfig | 13 - .prettierignore | 4 +- .prettierrc | 2 +- example/App.jsx | 165 -- example/App.tsx | 178 ++ example/index.html | 22 +- example/mobile.html | 22 +- package-lock.json | 3418 +++++++++++++++++++++++---------- package.json | 31 +- rollup.config.js | 2 +- src/ImageSlider.tsx | 109 +- src/ImageSliderBullets.tsx | 26 + src/ImageSliderNavigation.tsx | 23 +- src/ImageSliderStyle.ts | 110 +- src/global.d.ts | 2 +- webpack.config.js | 52 +- 17 files changed, 2817 insertions(+), 1364 deletions(-) delete mode 100644 .editorconfig delete mode 100644 example/App.jsx create mode 100644 example/App.tsx create mode 100644 src/ImageSliderBullets.tsx diff --git a/.babelrc b/.babelrc index 9bd7508..3d03c6e 100644 --- a/.babelrc +++ b/.babelrc @@ -5,6 +5,7 @@ { "useBuiltIns": "usage", "modules": false, + "corejs": 3, "targets": "> 0.25%, not dead" } ], @@ -12,7 +13,6 @@ "@babel/preset-typescript" ], "plugins": [ - "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ], "ignore": ["node_modules/**"] diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index f693d5f..0000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = false diff --git a/.prettierignore b/.prettierignore index 8b7ddbb..cd78a3c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,7 +1,5 @@ dist -src -example -webpack.config.js +example/index.js *.json *.md .babelrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 53b79b5..8424f8c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { "tabWidth": 2, "singleQuote": true, - "printWidth": 120, + "printWidth": 150, "bracketSpacing": true, "jsxBracketSameLine": true, "useTabs": false, diff --git a/example/App.jsx b/example/App.jsx deleted file mode 100644 index 558a796..0000000 --- a/example/App.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import AppBar from "@material-ui/core/AppBar"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListSubheader from "@material-ui/core/ListSubheader"; -import Checkbox from "@material-ui/core/Checkbox"; -import FormControl from "@material-ui/core/FormControl"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import Select from "@material-ui/core/Select"; -import SimpleImageSlider from ".."; - -class App extends React.Component { - listSubHeader =

Slider Settings

; - toggleOptions = ["useGPURender", "showNavs", "showBullets"]; - - images = [ - { url: "images/1.jpg" }, - { url: "images/2.jpg" }, - { url: "images/3.jpg" }, - { url: "images/4.jpg" }, - { url: "images/5.jpg" }, - { url: "images/6.jpg" }, - { url: "images/7.jpg" }, - ]; - - constructor() { - super(); - this.state = { - useGPURender: true, - showNavs: true, - showBullets: true, - navStyle: 1, - slideDuration: 0.5, - bgColor: "#000000", - slideIndexText: "", - }; - } - - componentDidMount() { - console.log("[App componentDidMount]"); - } - - componentDidUpdate(prevProps, prevState, snapshot) { - console.log("[App componentDidUpdate]"); - } - - onClick = (idx, event) => { - console.log(`[App onClick] ${idx} ${event.target}`); - } - - onClickNav = (toRight) => { - console.log(`[App onClickNav] ${toRight}`); - } - - onClickBullets = (idx) => { - console.log(`[App onClickBullets] ${idx}`); - } - - onStartSlide = (idx, length) => { - console.log(`[App onStartSlide] ${idx}/${length}`); - this.setState({ slideIndexText: `${idx} / ${length}`}); - } - - onCompleteSlide = (idx, length) => { - console.log(`[App onCompleteSlide] ${idx}/${length}`); - this.setState({ slideIndexText: `${idx} / ${length}`}); - } - - onToggleOptions = value => () => { - console.log(`[App onToggleOptions] ${value}`); - const updateValue = !this.state[value]; - this.setState({ [value]: updateValue }); - } - - onChangeSelect = event => this.setState({ [event.target.name]: event.target.value }); - - render() { - const slideText = this.state.slideIndexText || `${1} / ${this.images.length}`; - - return ( -
- - -

React Simple Image Slider Example

-

simple image slider component for react

-
-