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
}
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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', {
dataloadSectionType === DataloadSectionType.LEFT,
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