/* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { useSpring, animated } from 'react-spring'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { useDrag } from 'react-use-gesture'; import actions from 'redux/actions/actions'; import noSelectCss from 'styles/noSelect'; const useStyles = makeStyles({ ...noSelectCss, item: { backgroundColor: '#ffffff', position: 'relative', height: '90px', pointerEvents: 'auto', transformOrigin: '50% 50% 0px', boxSizing: 'border-box', display: 'grid', alignItems: 'center', textAlign: 'center', }, fg: { cursor: '-webkit-grab', backgroundColor: '#6795fc', color: '#ffffff', position: 'absolute', height: '100%', width: '100%', display: 'grid', alignItems: 'center', textAlign: 'center', boxShadow: '-10px 0 10px 0 #aaaaaa', fontsize: '3em', fontWeight: '600', transition: 'box-shadow 0.75s', '&:active': { cursor: '-webkit-grabbing', }, ' > *': { pointerEvents: 'none', }, }, }); const WeeklyTracker = props => { const { children, setToggleValue, setDetailData } = props; const classes = useStyles(); let swiped = false; const [{ x }, set] = useSpring(() => ({ x: 0, onRest: () => { if (swiped) { // After swipe animation finishes, show survey details setDetailData([children.props.dayData]); setToggleValue('showMeMore'); } }, })); const bind = useDrag( ({ down, movement: [mx], swipe: [swipeX] }) => { if (swipeX === 1) { // User swiped set({ x: window.innerWidth }); swiped = true; return; } // Don't allow user to drag off the left side of the screen if (mx < 0) { return; } set({ x: down ? mx : 0, immediate: down }); }, { axis: 'x' } ); return ( <div className={classes.noSelect}> <animated.div className={classes.item}> <animated.div {...bind()} className={classes.fg} style={{ x }}> {children} </animated.div> </animated.div> </div> ); }; WeeklyTracker.propTypes = { children: PropTypes.node, setToggleValue: PropTypes.func.isRequired, setDetailData: PropTypes.func.isRequired, }; WeeklyTracker.defaultProps = { children: '', }; const mapDispatchToProps = dispatch => { return { setToggleValue: toggleValue => dispatch(actions.setToggleValue(toggleValue)), setDetailData: detailData => dispatch(actions.setDetailData(detailData)), }; }; export default connect(null, mapDispatchToProps)(WeeklyTracker);