/
MeasurementFamilyRow.tsx
38 lines (32 loc) · 1.08 KB
/
MeasurementFamilyRow.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, {useContext} from 'react';
import styled from 'styled-components';
import {
MeasurementFamily,
getMeasurementFamilyLabel,
getStandardUnitLabel,
} from 'akeneomeasure/model/measurement-family';
import {UserContext} from 'akeneomeasure/context/user-context';
const Container = styled.tr`
height: 54px;
border-bottom: 1px solid ${props => props.theme.color.grey70};
`;
const MeasurementFamilyLabelCell = styled.td`
color: ${props => props.theme.color.purple100};
font-style: italic;
font-weight: bold;
`;
type MeasurementFamilyRowProps = {
measurementFamily: MeasurementFamily;
};
const MeasurementFamilyRow = ({measurementFamily}: MeasurementFamilyRowProps) => {
const locale = useContext(UserContext)('uiLocale');
return (
<Container>
<MeasurementFamilyLabelCell>{getMeasurementFamilyLabel(measurementFamily, locale)}</MeasurementFamilyLabelCell>
<td>{measurementFamily.code}</td>
<td>{getStandardUnitLabel(measurementFamily, locale)}</td>
<td>{measurementFamily.units.length}</td>
</Container>
);
};
export {MeasurementFamilyRow};