]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/Slider.js
svg dungeon tracker
[alttp.git] / resources / js / components / common / Slider.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3
4 const Slider = ({ children, duration, vertical }) => {
5         const [index, setIndex] = React.useState(0);
6
7         React.useEffect(() => {
8                 const interval = setInterval(() => {
9                         setIndex(i => (i + 1) % React.Children.count(children));
10                 }, duration);
11                 return () => {
12                         clearInterval(interval);
13                 };
14         }, [React.Children.count(children), duration]);
15
16         return <div className={`slider-container ${vertical ? 'vertical' : 'horizontal'}`}>
17                 <div className="slider-slides" style={{
18                         transform: vertical ? `translateY(${-index * 100}%)` : `translateX(${-index * 100}%)`
19                 }}>
20                         {children}
21                 </div>
22         </div>;
23 };
24
25 Slider.propTypes = {
26         children: PropTypes.node,
27         duration: PropTypes.number,
28         vertical: PropTypes.bool,
29 };
30
31 Slider.defaultProps = {
32         duration: 2500,
33 };
34
35 const Slide = ({ children }) => {
36         return <div className="slider-slide">
37                 {children}
38         </div>;
39 };
40
41 Slide.propTypes = {
42         children: PropTypes.node,
43 };
44
45 Slider.Slide = Slide;
46
47 export default Slider;