|
| 1 | +import React, { useState, useEffect } from 'react'; |
| 2 | +import Slider from 'rc-slider'; |
| 3 | +import Tooltip from 'rc-tooltip'; |
| 4 | +import { changeSlider, pause } from '../../slices/mainSlice'; |
| 5 | +import { useDispatch, useSelector } from 'react-redux'; |
| 6 | +import { HandleProps, MainSliderProps, MainState, RootState } from '../../FrontendTypes'; |
| 7 | + |
| 8 | +const { Handle } = Slider; // component constructor of Slider that allows customization of the handle |
| 9 | +//takes in snapshot length |
| 10 | +const handle = (props: HandleProps): JSX.Element => { |
| 11 | + const { value, dragging, index, ...restProps } = props; |
| 12 | + |
| 13 | + return ( |
| 14 | + <Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index |
| 15 | + className='travel-tooltip' |
| 16 | + prefixCls='rc-slider-tooltip' |
| 17 | + overlay={value} // the currentIndex |
| 18 | + visible={dragging} // tooltip only visible when slider thumb is click and/or dragged |
| 19 | + placement='top' // display the tooltip above the slider thumb |
| 20 | + key={index} |
| 21 | + > |
| 22 | + <Handle |
| 23 | + value={value} // the currentIndex / slider thumb position on the slider |
| 24 | + {...restProps} |
| 25 | + /> |
| 26 | + </Tooltip> |
| 27 | + ); |
| 28 | +}; |
| 29 | + |
| 30 | +function VerticalSlider(props: MainSliderProps): JSX.Element { |
| 31 | + const dispatch = useDispatch(); |
| 32 | + const { snapshotsLength, snapshots } = props; // destructure props to get our total number of snapshots |
| 33 | + const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0. |
| 34 | + const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main); |
| 35 | + const { currLocation } = tabs[currentTab]; // we destructure the currentTab object |
| 36 | + |
| 37 | + // useEffect(() => { |
| 38 | + // if (currLocation) { |
| 39 | + // // if we have a 'currLocation' |
| 40 | + // //@ts-ignore |
| 41 | + // setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index' |
| 42 | + // } else { |
| 43 | + // setSliderIndex(0); // just set the thumb position to the beginning |
| 44 | + // } |
| 45 | + // }, [currLocation]); // if currLocation changes, rerun useEffect |
| 46 | + |
| 47 | + return ( |
| 48 | + <Slider |
| 49 | + className='travel-slider' |
| 50 | + color='#0af548' |
| 51 | + vertical = 'true' |
| 52 | + reverse = 'true' |
| 53 | + height = '100%' |
| 54 | + min={0} // index of our first snapshot |
| 55 | + max={snapshotsLength - 1} // index of our last snapshot |
| 56 | + value={sliderIndex} // currently slider thumb position |
| 57 | + onChange={(index: any) => { |
| 58 | + // when the slider position changes |
| 59 | + setSliderIndex(index); // update the sliderIndex |
| 60 | + dispatch(changeSlider(snapshots[index].props.index)); |
| 61 | + }} |
| 62 | + // onChangeComplete={() => { |
| 63 | + // // after updating the sliderIndex |
| 64 | + // console.log("sliderIndex", sliderIndex) |
| 65 | + // dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex] |
| 66 | + // dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null |
| 67 | + // }} |
| 68 | + handle={handle} |
| 69 | + /> |
| 70 | + ); |
| 71 | +} |
| 72 | + |
| 73 | +export default VerticalSlider; |
0 commit comments