-
Notifications
You must be signed in to change notification settings - Fork 13
/
SourceListItem.jsx
88 lines (82 loc) · 3.09 KB
/
SourceListItem.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
81
82
83
84
85
86
87
88
import React from 'react';
import { ListItem, ListItemIcon, ListItemText, Typography, Tooltip } from '@mui/material';
import {
List as SourceIcon, LocalOffer as ConceptIcon,
Person as UserIcon, AccountBalance as OrgIcon,
} from '@mui/icons-material';
import { isNumber, merge } from 'lodash'
import { GREEN } from '../../common/constants';
const SubText = ({ text, divider }) => (
<span className='flex-vertical-center'>
<Typography
sx={{ display: 'inline', color: 'rgba(0, 0, 0, 0.6)' }}
component="span"
className='flex-vertical-center'>
<span className='flex-vertical-center'>
{
divider &&
<span className='flex-vertical-center' style={{backgroundColor: 'rgba(0, 0, 0, 0.6)', width: '3px', height: '3px', borderRadius: '100px', margin: '0 8px'}} />
}
<span className='flex-vertical-center' style={{fontSize: '14px'}}>
{text}
</span>
</span>
</Typography>
</span>
)
const Owner = ({ option, marginTop }) => (
<Tooltip title={option.owner}>
<span style={{display: 'flex', marginTop: marginTop || 0, alignItems: 'center'}}>
{
option.owner_type === 'User' ?
<UserIcon style={{marginRight: '4px', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px' }}/> :
<OrgIcon style={{marginRight: '4px', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px'}} />
}
<span className='flex-vertical-center' style={{maxWidth: '70px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px'}}>
{option.owner}
</span>
</span>
</Tooltip>
)
const SourceListItem = ({ option, listItemProps, style }) => {
return (
<ListItem
{...listItemProps}
alignItems="flex-start"
style={merge({alignItems: 'flex-start'}, (style || {}))}
secondaryAction={
<Owner option={option} marginTop='-22px' />
}>
<ListItemIcon style={{minWidth: 'auto', marginRight: '10px'}}>
<SourceIcon style={{color: GREEN, marginTop: '-5px'}} fontSize='large' />
</ListItemIcon>
<ListItemText
primary={
<Typography
sx={{ maxWidth: 'calc(100% - 20px)' }}>
{option.name}
</Typography>
}
secondary={
(
isNumber(option.summary.active_concepts) ?
<span className='flex-vertical-center'>
<Typography
sx={{ display: 'inline', color: 'rgba(0, 0, 0, 0.6)', fontSize: '14px' }}
component="span"
className='flex-vertical-center'>
<ConceptIcon size='small' style={{marginRight: '4px', width: '13.3px', height: '13.3px'}} />
{option.summary.active_concepts.toLocaleString()}
</Typography>
{ option.suggestionType && <SubText text={option.suggestionType} divider /> }
</span> :
(
option.suggestionType ? <SubText text={option.suggestionType} /> : ''
)
)
}
/>
</ListItem>
)
}
export default SourceListItem;