From ce500ae3dd2fe45918be95100714e2ffdbb3ebc5 Mon Sep 17 00:00:00 2001 From: kimcoder Date: Mon, 22 Jun 2020 17:38:53 +0900 Subject: [PATCH 1/2] [feature/issuse-10] add onClick callback --- README.md | 1 + example/App.jsx | 42 ++++++++++++++++++++++--------------- index.d.ts | 2 +- src/ImageSlider.jsx | 6 +++++- src/ImageSliderPropTypes.js | 1 + 5 files changed, 33 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index d4b2a60..349f614 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ If You want to see more detail source,
|**showBullets**|`Boolean`|`Optional`|Toggle Bullets|`true`| |**useGPURender**|`Boolean`|`Optional`|Toggle GPU Render|`true`| |**bgColor**|`String`|`Optional`|slider container's css background-color property|`#000000`| +|**onClick**|`Function`|`Optional`|Image Click Callback function,
`onClick = (idx, event) => { }`
idx : number : clicked bullet index (begin from 0)|| |**onClickNav**|`Function`|`Optional`|Arrow Navigation Callback function,
`onClickNav = (toRight) => { }`
toRight : Boolean : slide direction|| |**onClickBullets**|`Function`|`Optional`|Bullets Callback function,
`onClickBullets = (idx) => { }`
idx : Number : clicked bullet index (begin from 0)|| |**onStartSlide**|`Function`|`Optional`|Slide Transition Start function,
`onStartSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length|| diff --git a/example/App.jsx b/example/App.jsx index 11d8323..b55c628 100644 --- a/example/App.jsx +++ b/example/App.jsx @@ -14,6 +14,20 @@ 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 = { @@ -35,6 +49,10 @@ class App extends React.Component { console.log("[App componentDidUpdate]"); } + onClick = (idx, event) => { + console.log(`[App onClick] ${idx} ${event.target}`); + } + onClickNav = (toRight) => { console.log(`[App onClickNav] ${toRight}`); } @@ -62,18 +80,7 @@ class App extends React.Component { onChangeSelect = event => this.setState({ [event.target.name]: event.target.value }); render() { - const listSubHeader =

Slider Settings

; - const toggleOptions = ["useGPURender", "showNavs", "showBullets"]; - const 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" }, - ]; - const slideText = this.state.slideIndexText || `${1} / ${images.length}`; + const slideText = this.state.slideIndexText || `${1} / ${this.images.length}`; return (
@@ -93,14 +100,15 @@ class App extends React.Component { - {toggleOptions.map(value => ( + + {this.toggleOptions.map(value => ( diff --git a/index.d.ts b/index.d.ts index 48f0f04..423acd2 100644 --- a/index.d.ts +++ b/index.d.ts @@ -9,7 +9,6 @@ export interface RSISProps { width: string; height: string; images: RSISImage[], - style?: CSSStyleDeclaration, slideDuration?: number; showNavs?: boolean; @@ -17,6 +16,7 @@ export interface RSISProps { bgColor?: string; useGPURender?: boolean; navStyle?: 1 | 2; + onClick?: (idx: number, event: React.SyntheticEvent) => void; onClickNav?: (toRight: boolean) => void; onClickBullets?: (idx: number) => void; onStartSlide?: (current: number, length: number) => void; diff --git a/src/ImageSlider.jsx b/src/ImageSlider.jsx index 118edf0..cb2f952 100644 --- a/src/ImageSlider.jsx +++ b/src/ImageSlider.jsx @@ -28,6 +28,10 @@ class ImageSlider extends React.Component { } } + onClick = (event) => { + this.callPropsFunc("onClick", this.state.idx, event); + } + onClickNav = (toRight) => { if (!this.isCanSlide(-1)) { return; @@ -125,7 +129,7 @@ class ImageSlider extends React.Component { } renderSlide = length => ( -
+
diff --git a/src/ImageSliderPropTypes.js b/src/ImageSliderPropTypes.js index 38e2b76..81d4275 100644 --- a/src/ImageSliderPropTypes.js +++ b/src/ImageSliderPropTypes.js @@ -24,6 +24,7 @@ export default { showBullets: PropTypes.bool, bgColor: PropTypes.string, useGPURender: PropTypes.bool, + onClick: PropTypes.func, onClickNav: PropTypes.func, onClickBullets: PropTypes.func, onStartSlide: PropTypes.func, From ed08162e1663f6bba3cc6a84174303faaf3b1a53 Mon Sep 17 00:00:00 2001 From: kimcoder Date: Mon, 22 Jun 2020 17:43:10 +0900 Subject: [PATCH 2/2] [features/issue-10] update CHANGELOG, package.json --- CHANGELOG.md | 6 +++++- package.json | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 31d1a90..3f15b9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Change Log -1.0.3 (March 30, 2018) +1.0.4 (June 22, 2020) +- add 'onClick' props. + - can handle callback when image was clicked + +1.0.3 (March 30, 2020) - modify props types about width and height. ( number -> string or number ) - can set value like this. '100%' or '100px' or 100 diff --git a/package.json b/package.json index c2a8646..f9f2c9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-simple-image-slider", - "version": "1.0.3", + "version": "1.0.4", "description": "simple image slider component for react", "main": "dist/ImageSlider.js", "scripts": {