-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
121 lines (116 loc) · 3.99 KB
/
App.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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import { useAsyncRetry } from 'react-use'
import { DateTime } from 'luxon'
import { CssBaseline, Container, IconButton } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import {
Refresh as RefreshIcon,
Add as AddIcon,
Create as EditIcon,
DeleteOutline as DeleteIcon
} from '@material-ui/icons'
import DataTable from '@plastic-ui/datatable'
import { Item, getItems } from './providers/items'
import Alert from './components/Alert'
const useStyles = makeStyles(theme => ({
root: {
padding: `${theme.spacing(4)}px 0`
},
tableHeader: {
backgroundColor: theme.palette.grey[300]
},
buttons: {
display: 'inline-flex'
}
}))
export default () => {
const classes = useStyles()
const [message, setMessage] = React.useState('')
const [items, setItems] = React.useState<Item[]>([])
const { loading, retry } = useAsyncRetry(async () => {
setItems(await getItems())
})
// Column visibility:
//
// xs: displayed on extra small screens and onwards (with >= 400px)
// sm: displayed on small screens and onwards (with < 600px)
// md: displayed on medium screens and onwards (width >= 960px)
// lg: displayed on large screens and onwards (width >= 1280px)
// xl: displayed on extra large screens (width >= 1920px)
return (
<div className={classes.root}>
<CssBaseline />
<Container>
<DataTable
headerProps={{ className: classes.tableHeader }}
tableProps={{ size: 'small' }}
loading={loading}
sort={[{ name: 'date', direction: 'desc' }, { name: 'gender' }]}
title="List of items"
columns={[
{
visibility: 'xl',
name: 'id',
label: '#ID',
sortable: true,
shrink: true,
align: 'right'
},
{
name: 'name',
label: 'Name',
sortable: true,
// by default the component prints the original value, except when
// we use a "computed field".
computed: row => `${row.first_name} ${row.last_name}`
},
{
visibility: 'xs',
name: 'date',
label: 'Birth',
align: 'center',
sortable: true,
// in this case the component uses the `sorted` function to sort columns, since
// we don't want to sort them by the local representation.
sorted: row => row.date,
computed: row => DateTime.fromISO(row.date).toLocaleString(DateTime.DATE_MED)
},
{ visibility: 'sm', name: 'gender', label: 'Gender' },
{ visibility: 'lg', name: 'job_title', label: 'Job title' },
{ visibility: 'lg', name: 'email', label: 'Email' },
{ visibility: 'md', name: 'phone', label: 'Phone' },
{
name: 'actions',
align: 'right',
label: (
<div className={classes.buttons}>
<IconButton onClick={retry}>
<RefreshIcon />
</IconButton>
<IconButton onClick={() => setMessage('ADD ITEM: not implemented')}>
<AddIcon />
</IconButton>
</div>
),
computed: row => (
<div className={classes.buttons}>
<IconButton onClick={() => setMessage(`EDIT ITEM ${row.id}: not implemented`)}>
<EditIcon />
</IconButton>
<IconButton
color="secondary"
onClick={() => setMessage(`DELETE ITEM ${row.id}: not implemented`)}
>
<DeleteIcon />
</IconButton>
</div>
)
}
]}
rows={items}
/>
</Container>
<Alert message={message} onClose={() => setMessage('')} />
</div>
)
}