automatic slideshow in react js

1import React from 'react';
2
3import SlidesShowStore   from '../stores/SlidesShowStore';
4import SlidesShowActions from '../actions/SlidesShowActions';
5import Slides from '../components/Slides';
6
7class SlidesShow extends React.Component {
8  constructor(props) {
9    super(props);
10    this.state = SlidesShowStore.getState();
11    this.onChange = this.onChange.bind(this);
12    this.IMAGES = [];
13  }
14
15  componentDidMount() {
16    SlidesShowStore.listen(this.onChange);
17    this.tick();
18    SlidesShowActions.startTimer();
19    this.handleChange();
20  }
21
22  componentWillUnmount() {
23    SlidesShowStore.unlisten(this.onChange);
24  }
25
26  onChange(state) {
27    this.setState(state);
28  }
29
30  handleChange() {
31    this.setState(SlidesShowStore.getState());
32  }
33
34  toggleNext( event) {
35    event.preventDefault();
36    var current = this.state.currentSlide;
37    var next = current + 1;
38    if (next > this.IMAGES.length - 1) {
39      next = 0;
40    }
41    this.setState( {currentSlide: next} );
42  }
43
44  togglePrev(event) {
45    event.preventDefault();   
46    var current = this.state.currentSlide;
47    var prev = current - 1;
48    if (prev < 0) {
49      prev = this.IMAGES.length - 1;
50    }
51    this.setState( {currentSlide: prev} );  
52  }   
53
54  toggleSlide(id) {
55    var index = this.IMAGES.map(function (el) {
56      return (
57        el.id
58      );
59    });
60    var currentIndex = index.indexOf(id);       
61    this.setState( {currentSlide: currentIndex} );
62  }
63
64  Next() {
65    var current = this.state.currentSlide;
66    var next = current + 1;
67    if (next > this.IMAGES.length - 1) {
68      next = 0;
69    }
70    this.setState( {currentSlide: next} );
71  }
72
73  tick() {
74    var self = this;
75    this.interval = setTimeout(function() {
76      if (self.state.status === 'stop') {
77        self.interval = undefined;
78        return;
79      }
80      if (self.state.timeLeft <= 0) {
81        SlidesShowActions.timeout();
82      } else {
83        SlidesShowActions.tick();
84        self.Next();
85      }
86      self.tick();
87    }, 1000);
88  }
89
90  handleClickStart(event) {
91    event.preventDefault();  
92    this.tick();
93    SlidesShowActions.startTimer();
94    this.handleChange();
95  }
96
97  handleClickStop(event) {
98    event.preventDefault(); 
99    SlidesShowActions.stopTimer();
100    this.handleChange();
101  }
102
103  handleClickReset(event) {
104    event.preventDefault();  
105    SlidesShowActions.resetTimer();
106  }
107
108  render() {
109    this.IMAGES = [
110     {id: "slide1", imagePath : "/img/img1.jpg", imageAlt : "Slide 1 Image", title : "Slide 1", subtitle : "Slide 1 Image SubTitle", text : "Slide 1 Image Text", action : "Slide 1 Image Action", actionHref : "href"  },
111     {id: "slide2", imagePath : "/img/img2.jpg", imageAlt : "Slide 2 Image", title : "Slide 2", subtitle : "Slide 2 Image SubTitle", text : "Slide 2 Image Text", action : "Slide 2 Image Action", actionHref : "href"  },
112     {id: "slide3", imagePath : "/img/img3.jpg", imageAlt : "Slide 3 Image", title : "Slide 3", subtitle : "Slide 3 Image SubTitle", text : "Slide 3 Image Text", action : "Slide 3 Image Action", actionHref : "href"  }
113    ];
114
115    var self = this;
116    var paginationNodes = this.IMAGES.map(function (paginationNode, i) {
117      var boundClick = self.toggleSlide.bind(self, paginationNode.id);
118      return (
119        <span className="pager" onClick={boundClick}>  key={paginationNode.Title}  </span>
120      );
121     });
122
123   return (  
124    <div className="container">
125      <div className="slideshow">
126        <link rel="stylesheet" href="css/styles.css" />
127        <Slides data={this.IMAGES} currentSlide={this.state.currentSlide} />
128        <div className="pagination">{paginationNodes}</div>
129        <div className="toggle toggle--prev" onClick={this.togglePrev.bind(this)}>Prev</div>
130        <div className="toggle toggle--next" onClick={this.toggleNext.bind(this)}>Next</div>    
131        <button onClick={this.handleClickStart.bind(this)}>Start</button>
132        <button onClick={this.handleClickStop.bind(this)}>Stop</button>
133        <button onClick={this.handleClickReset.bind(this)}>Reset</button>   
134       </div>
135    </div>
136    );
137  }
138}
139
140export default SlidesShow;
141