-
Notifications
You must be signed in to change notification settings - Fork 12
/
LocalizedTextRow.jsx
80 lines (77 loc) · 3.36 KB
/
LocalizedTextRow.jsx
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from 'react';
import {
TableRow, TableCell, Tooltip, Chip, IconButton
} from '@mui/material';
import {
Flag as FlagIcon, FileCopy as CopyIcon
} from '@mui/icons-material'
import { get, map, orderBy } from 'lodash';
import ExternalIdLabel from '../common/ExternalIdLabel';
import { toFullAPIURL, copyURL } from '../../common/utils';
const LocalizedTextRow = ({concept, locale, localizedTexts, isDescription}) => {
const typeAttr = isDescription ? 'description_type' : 'name_type'
const nameAttr = isDescription ? 'description' : 'name'
const urlAttr = isDescription ? 'descriptions' : 'names'
const onCopyClick = localizedTextId => copyURL(toFullAPIURL(concept.url + urlAttr + '/' + localizedTextId + '/'))
const count = get(localizedTexts, 'length') || 0
return (
<React.Fragment key={locale}>
<TableRow hover>
<TableCell align='left' rowSpan={count + 1} style={{paddingRight: '5px', verticalAlign: 'top', paddingLeft: '15px', width: '50px', paddingTop: '8px'}}>
<div className='gray-italics-small flex-vertical-center'>
{`[${locale}]`}
</div>
</TableCell>
</TableRow>
{
map(orderBy(localizedTexts, ['locale_preferred', typeAttr, nameAttr], ['desc', 'asc', 'asc']), localizedText => {
const type = get(localizedText, typeAttr)
return (
<TableRow
hover
key={localizedText.uuid}>
<TableCell
align='left'
className='ellipsis-text'
style={{maxWidth: '200px'}}>
<div className='col-md-12 no-side-padding'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<span style={{marginRight: '10px', whiteSpace: 'pre-wrap'}}>{ get(localizedText, nameAttr) }</span>
{
type &&
<span style={{marginRight: '5px'}}>
<Chip style={{height: '20px', fontSize: '10px'}} size='small' label={type} />
</span>
}
{
localizedText.locale_preferred &&
<span style={{marginRight: '5px'}}>
<Tooltip arrow title={`Preferred ${nameAttr} for this locale`} placement='top-start'>
<FlagIcon color='secondary' fontSize='inherit' style={{width: '18px', marginTop: '4px'}}/>
</Tooltip>
</span>
}
</div>
{
localizedText.external_id &&
<div className='col-md-12 no-side-padding'>
<ExternalIdLabel externalId={localizedText.external_id} iconSize='small' />
</div>
}
</div>
</TableCell>
<TableCell align='right' style={{width: '24px', paddingRight: '5px'}}>
<Tooltip arrow title='Copy Link' placement='right'>
<IconButton onClick={() => onCopyClick(localizedText.uuid)} color='primary' size='small'>
<CopyIcon fontSize='inherit' />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})
}
</React.Fragment>
);
}
export default LocalizedTextRow;