-
Notifications
You must be signed in to change notification settings - Fork 12
/
ResourceReferences.jsx
49 lines (47 loc) · 1.83 KB
/
ResourceReferences.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
import React from 'react';
import {
Accordion, AccordionSummary, AccordionDetails, List, ListItem, Tooltip, Chip
} from '@mui/material';
import {
InfoOutlined as InfoIcon,
} from '@mui/icons-material'
import { get, map } from 'lodash';
import { toFullAPIURL } from '../../common/utils';
import TabCountLabel from './TabCountLabel'
const ResourceReferences = ({headingStyles, detailStyles, references, resource}) => {
const count = get(references, 'length', 0)
return (
<Accordion expanded style={{borderRadius: 'unset'}}>
<AccordionSummary
className='light-gray-bg less-paded-accordion-header'
expandIcon={<span />}
aria-controls="panel1a-content"
style={{cursor: 'inherit'}}
>
<span className='flex-vertical-center' style={{width: '100%', justifyContent: 'space-between'}}>
<TabCountLabel label='References' count={count} style={headingStyles} />
<span className='flex-vertical-center'>
<span className='flex-vertical-center' style={{marginLeft: '10px'}}>
<Tooltip arrow title={`This ${resource} appears in this collection expansion as a result of these references.`}>
<InfoIcon fontSize='small' color='action' />
</Tooltip>
</span>
</span>
</span>
</AccordionSummary>
<AccordionDetails style={detailStyles}>
<List>
{
map(references, reference => (
<ListItem key={reference.id}>
{reference.expression}
<Chip style={{marginLeft: '5px'}} variant='outlined' color='primary' size='small' label='view' onClick={() => window.open(toFullAPIURL(reference.uri))} />
</ListItem>
))
}
</List>
</AccordionDetails>
</Accordion>
)
}
export default ResourceReferences;