Newer
Older
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadSectionType, FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
import { getFluidName } from 'utils/utils'
import DataloadSectionDetail from './DataloadSectionDetail'
import DataloadSectionValue from './DataloadSectionValue'
interface DataloadSectionProps {
dataload: Dataload
fluidType: FluidType
dataloadSectionType: DataloadSectionType
toggleEstimationModal: () => void
}
dataload,
fluidType,
dataloadSectionType,
toggleEstimationModal,
}: DataloadSectionProps) => {
const { t } = useI18n()
const isLeft = dataloadSectionType === DataloadSectionType.LEFT
const isRight = dataloadSectionType === DataloadSectionType.RIGHT
const noCompare = dataloadSectionType === DataloadSectionType.NO_COMPARE
const isMulti = fluidType === FluidType.MULTIFLUID
const fluidName = getFluidName(fluidType)
if (dataload.value === -1 && isLeft) {
return (
<div className="dataloadvisualizer-section dataloadvisualizer-section-left-novalue">
<div
className={`dataloadvisualizer-novalue ${fluidName}-compare text-20-normal`}
>
{t('consumption_visualizer.no_data')}
</div>
</div>
)
}
return (
<div
className={classNames('dataloadvisualizer-section', {
'dataloadvisualizer-section-left': isLeft,
'dataloadvisualizer-section-right': isRight,
})}
>
<div
className={classNames('dataloadvisualizer-value', 'text-36-bold', {
[fluidName]: noCompare || isRight,
[`${fluidName}-compare`]: isLeft,
'multifluid-compare-color': isRight && isMulti,
alignTop: isMulti,
})}
>
<DataloadSectionValue
dataload={dataload}
fluidType={fluidType}
dataloadSectionType={dataloadSectionType}
toggleEstimationModal={toggleEstimationModal}
/>
</div>
<DataloadSectionDetail
dataload={dataload}
fluidType={fluidType}
dataloadSectionType={dataloadSectionType}
/>
</div>
)
}
export default DataloadSection