FluidChartSwipe.tsx

import React, { useState, useEffect, useRef } from 'react'
import SwipeableViews from 'react-swipeable-views'
import { virtualize } from 'react-swipeable-views-utils'
import { DateTime } from 'luxon'
import {
  IConsumptionDataManager,
  IDataload,
  TimeStep,
  ITimePeriod,
} from 'services/dataConsumptionContracts'
import { FluidType } from 'enum/fluid.enum'
import FluidChartSlide from 'components/ContentComponents/FluidChart/FluidChartSlide'

const VirtualizeSwipeableViews = virtualize(SwipeableViews)

interface FluidChartSwipeProps {
  fluidTypes: FluidType[]
  timeStep: TimeStep
  multiFluid: boolean
  referenceDate: DateTime
  selectedDate: DateTime
  indexDisplayed: number
  showCompare: boolean
  challengePeriod: ITimePeriod | null
  handleChangeIndex: (index: number) => void
  handleClickData: (
    dataload: IDataload,
    compareDataload: IDataload | null
  ) => void
  consumptionDataManager: IConsumptionDataManager
}

const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
  fluidTypes,
  timeStep,
  multiFluid,
  referenceDate,
  selectedDate,
  indexDisplayed,
  showCompare,
  challengePeriod,
  handleChangeIndex,
  handleClickData,
  consumptionDataManager,
}: FluidChartSwipeProps) => {
  const swipe = useRef<HTMLDivElement>(null)
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  useEffect(() => {
    function handleResize() {
      const maxWidth = 940
      const maxHeight = 300
      const _width = swipe.current
        ? swipe.current.offsetWidth > maxWidth
          ? maxWidth
          : swipe.current.offsetWidth
        : 400
      setWidth(_width)
      const _height = swipe.current
        ? swipe.current.offsetHeight > maxHeight
          ? maxHeight
          : swipe.current.offsetHeight
        : 300
      setHeight(_height)
    }
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [swipe.current])

  return (
    <div className="fs-root" ref={swipe}>
      <VirtualizeSwipeableViews
        index={indexDisplayed}
        overscanSlideAfter={1}
        overscanSlideBefore={1}
        onChangeIndex={handleChangeIndex}
        slideRenderer={({ key, index }) => (
          <FluidChartSlide
            key={key}
            index={index}
            fluidTypes={fluidTypes}
            timeStep={timeStep}
            multiFluid={multiFluid}
            referenceDate={referenceDate}
            selectedDate={selectedDate}
            showCompare={showCompare}
            width={width}
            height={height}
            challengePeriod={challengePeriod}
            handleClickData={handleClickData}
            consumptionDataManager={consumptionDataManager}
          />
        )}
        enableMouseEvents
        axis="x-reverse"
      />
    </div>
  )
}

export default FluidChartSwipe