Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React,{useState} from 'react';
- const slidesDate = ['Today', 'Last Week', 'Last Month', 'Last Quarter', 'Last Year'];
- const initialState = 'Today';
- const rotationStep = 1;
- const BubbleChart =() => {
- const [changeDate, setChangeDate] = useState(initialState);
- const handleChange = (isLeft) => {
- let currentIndex = slidesDate.indexOf(changeDate);
- let nextIndex;
- if (isLeft) {
- nextIndex = currentIndex - rotationStep >= 0 ? currentIndex - rotationStep : slidesDate.length-rotationStep;
- } else {
- nextIndex = currentIndex + rotationStep <= slidesDate.length - rotationStep ? currentIndex + rotationStep : 0;
- }
- setChangeDate(slidesDate[nextIndex])
- }
- return (
- <div className="select-date-buttons">
- <button className="caret" onClick={() => handleChange(true)}><</button>
- <button>{changeDate}</button>
- <button className="caret" onClick={() => handleChange(false)}>></button>
- <button className="export-button">⭳</button>
- </div>
- )
- }
- export default BubbleChart
Advertisement
Add Comment
Please, Sign In to add comment