Skip to content
Snippets Groups Projects
DataloadSection.tsx 2.38 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bastien DUMONT's avatar
    Bastien DUMONT committed
    import classNames from 'classnames'
    
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    
    import { DataloadSectionType, FluidType } from 'enums'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { Dataload } from 'models'
    import React from 'react'
    
    import { getFluidName } from 'utils/utils'
    
    import DataloadSectionDetail from './DataloadSectionDetail'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import DataloadSectionValue from './DataloadSectionValue'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import './consumptionVisualizer.scss'
    
    
    interface DataloadSectionProps {
      dataload: Dataload
      fluidType: FluidType
      dataloadSectionType: DataloadSectionType
      toggleEstimationModal: () => void
    }
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    const DataloadSection = ({
    
      dataload,
      fluidType,
      dataloadSectionType,
      toggleEstimationModal,
    }: DataloadSectionProps) => {
      const { t } = useI18n()
    
      if (
        dataload.value === -1 &&
        dataloadSectionType === DataloadSectionType.LEFT
      ) {
        return (
          <div className="dataloadvisualizer-section dataloadvisualizer-section-left-novalue">
            <div
              className={`dataloadvisualizer-novalue ${FluidType[
                fluidType
              ].toLowerCase()}-compare text-20-normal`}
            >
              {t('consumption_visualizer.no_data')}
            </div>
          </div>
        )
      }
    
      return (
        <div
          className={classNames('dataloadvisualizer-section', {
            ['dataloadvisualizer-section-left']:
              dataloadSectionType === DataloadSectionType.LEFT,
            ['dataloadvisualizer-section-right']:
              dataloadSectionType === DataloadSectionType.RIGHT,
          })}
        >
          <div
            className={classNames('dataloadvisualizer-value', 'text-36-bold', {
    
              [`${getFluidName(fluidType)}-compare`]:
    
                dataloadSectionType === DataloadSectionType.LEFT,
    
              [`${getFluidName(fluidType)}`]:
    
                dataloadSectionType === DataloadSectionType.NO_COMPARE ||
                dataloadSectionType === DataloadSectionType.RIGHT,
              ['multifluid-compare-color']:
                dataloadSectionType === DataloadSectionType.RIGHT &&
                fluidType === FluidType.MULTIFLUID,
            })}
          >
            <DataloadSectionValue
              dataload={dataload}
              fluidType={fluidType}
              dataloadSectionType={dataloadSectionType}
              toggleEstimationModal={toggleEstimationModal}
            />
          </div>
          <DataloadSectionDetail
            dataload={dataload}
            fluidType={fluidType}
            dataloadSectionType={dataloadSectionType}
          />
        </div>
      )
    }
    
    export default DataloadSection