-
Notifications
You must be signed in to change notification settings - Fork 12
/
Results.jsx
103 lines (97 loc) · 3.42 KB
/
Results.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from 'react';
import { CircularProgress } from '@mui/material';
import { Pagination } from '@mui/material';
import { map, startCase, uniq, without, filter, includes, isEmpty, get, find, last } from 'lodash';
import RowComponent from './RowComponent';
import MinimalRowComponent from './MinimalRowComponent';
import SelectedResourceControls from './SelectedResourceControls';
import InfiniteScroll from 'react-infinite-scroll-component';
const Results = props => {
const {
resource, results, viewFields, onPageChange, onCreateSimilarClick, onCreateMappingClick,
onLoadMore, isInfinite, noControls, onReferencesDelete, history, onSelect,
splitView
} = props;
const items = get(results, 'items', [])
const count = get(items, 'length', 0)
const total = get(results, 'total', 0)
const [selectedList, setSelectedList] = React.useState([]);
const onSelectChange = (event, id) => {
const newSelectedList = event.target.checked ?
uniq([...selectedList, id]) :
without(selectedList, id);
setSelectedList(newSelectedList)
if (props.onSelectChange)
props.onSelectChange(newSelectedList);
if(onSelect)
onSelect(find(results.items, {url: last(newSelectedList)}))
}
const selectedItemObjects = filter(items, item => includes(selectedList, item.url));
const resultDOM = () => map(
items,
item => splitView ?
<MinimalRowComponent
key={item.uuid || item.id} onSelect={onSelectChange}
item={item} resource={resource} /> :
<RowComponent
key={item.uuid || item.id} onSelect={onSelectChange}
item={item} resource={resource} viewFields={viewFields}
history={history} />
)
const infiniteResults = () => (
<InfiniteScroll
dataLength={count}
next={onLoadMore}
hasMore={count !== total}
loader={<CircularProgress />}
endMessage={
<p style={{ textAlign: "center" }}>
<b>You have reached end of results!</b>
</p>
}
>
{ resultDOM() }
</InfiniteScroll>
)
const paginatedResults = () => (
<React.Fragment>
{ resultDOM() }
<div className='col-sm-12 no-side-padding pagination' style={{textAlign: 'center', marginTop: '10px'}}>
<Pagination
onChange={(event, page) => onPageChange(page)}
count={results.pages}
variant="outlined"
shape="rounded"
color="primary"
showFirstButton
showLastButton
page={results.pageNumber}
/>
</div>
</React.Fragment>
)
return (
<div className='col-sm-12 no-side-padding'>
{
!isEmpty(selectedItemObjects) && !noControls && !splitView &&
<div className='col-sm-12' style={{padding: '10px', background: 'rgba(0, 0, 0, 0.1)', borderRadius: '4px'}}>
<SelectedResourceControls
selectedItems={selectedItemObjects}
resource={resource}
onCreateSimilarClick={onCreateSimilarClick}
onCreateMappingClick={onCreateMappingClick}
onReferencesDelete={onReferencesDelete}
/>
</div>
}
{
total ?
<div className='col-sm-12 no-side-padding'>
{ isInfinite ? infiniteResults() : paginatedResults() }
</div> :
<div style={{padding: '2px'}}>We found 0 {startCase(resource)}.</div>
}
</div>
)
}
export default Results