Merge pull request #11 from kimcoder/feature/issue-10

[feature/issuse-10] add onClick callback

Author: kimcoder

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
 

README.md

@@ -74,6 +74,7 @@ If You want to see more detail source,<br>
 |**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,<br>`onClick = (idx, event) => { }`<br>idx : number : clicked bullet index (begin from 0)||
 |**onClickNav**|`Function`|`Optional`|Arrow Navigation Callback function,<br>`onClickNav = (toRight) => { }`<br>toRight : Boolean : slide direction||
 |**onClickBullets**|`Function`|`Optional`|Bullets Callback function,<br>`onClickBullets = (idx) => { }`<br>idx : Number : clicked bullet index (begin from 0)||
 |**onStartSlide**|`Function`|`Optional`|Slide Transition Start function,<br>`onStartSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length||

example/App.jsx

@@ -14,6 +14,20 @@ import Select from "@material-ui/core/Select";
 import SimpleImageSlider from "..";
 
 class App extends React.Component {
+    listSubHeader = <ListSubheader><h1>Slider Settings</h1></ListSubheader>;
+
+    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 = <ListSubheader><h1>Slider Settings</h1></ListSubheader>;
-        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 (
             <div style={{ textAlign: "center" }}>
@@ -93,14 +100,15 @@ class App extends React.Component {
                 </AppBar>
                 <SimpleImageSlider
                     style={{ margin: "0 auto", marginTop: "50px" }}
-                    width={200}
-                    height={200}
-                    images={images}
+                    width={896}
+                    height={504}
+                    images={this.images}
                     showBullets={this.state.showBullets}
                     showNavs={this.state.showNavs}
                     useGPURender={this.state.useGPURender}
                     navStyle={this.state.navStyle}
                     slideDuration={this.state.slideDuration}
+                    onClick={this.onClick}
                     onClickNav={this.onClickNav}
                     onClickBullets={this.onClickBullets}
                     onStartSlide={this.onStartSlide}
@@ -114,8 +122,8 @@ class App extends React.Component {
                 {
                     // Slide Settings
                 }
-                <List subheader={listSubHeader} style={{ margin: "0 auto 100px auto", width: 900, textAlign: "left" }}>
-                    {toggleOptions.map(value => (
+                <List subheader={this.listSubHeader} style={{ margin: "0 auto 100px auto", width: 900, textAlign: "left" }}>
+                    {this.toggleOptions.map(value => (
                         <ListItem key={value} button onClick={this.onToggleOptions(value)}>
                             <Checkbox checked={this.state[value]} disableRipple />
                             <ListItemText primary={`${value}`} />

index.d.ts

@@ -9,14 +9,14 @@ export interface RSISProps {
     width: string;
     height: string;
     images: RSISImage[],
-
     style?: CSSStyleDeclaration,
     slideDuration?: number;
     showNavs?: boolean;
     showBullets?: boolean;
     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;

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": {

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 => (
-        <div style={styles.ImageSlider}>
+        <div style={styles.ImageSlider} onClick={this.onClick}>
             <div style={this.state.currentSlideStyle} onTransitionEnd={this.onSlideEnd} />
             <div style={this.state.nextSlideStyle} />
         </div>

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,