Aliendreamer

simple react component

Dec 30th, 2019
260
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React,{useState} from 'react';
  2. const slidesDate = ['Today', 'Last Week', 'Last Month', 'Last Quarter', 'Last Year'];
  3.  
  4. const initialState = 'Today';
  5. const rotationStep = 1;
  6. const BubbleChart =() => {
  7.     const [changeDate, setChangeDate] = useState(initialState);
  8.    
  9.     const handleChange = (isLeft) => {
  10.         let currentIndex = slidesDate.indexOf(changeDate);
  11.         let nextIndex;
  12.         if (isLeft) {
  13.             nextIndex = currentIndex - rotationStep >= 0 ? currentIndex - rotationStep : slidesDate.length-rotationStep;
  14.         } else {
  15.             nextIndex = currentIndex + rotationStep <= slidesDate.length - rotationStep ? currentIndex + rotationStep : 0;
  16.         }
  17.         setChangeDate(slidesDate[nextIndex])
  18.     }
  19. return (
  20. <div className="select-date-buttons">
  21. <button className="caret" onClick={() => handleChange(true)}>&#60;</button>
  22. <button>{changeDate}</button>
  23. <button className="caret" onClick={() => handleChange(false)}>&#62;</button>
  24. <button className="export-button">&#x2b73;</button>
  25. </div>
  26. )
  27.   }
  28. export default BubbleChart
Advertisement
Add Comment
Please, Sign In to add comment