react-garden
Version:
React + TypeScript + ThreeJS app using Material UI on NextJS, Apollo Client, GraphQL + WordPress REST APIs, for ThreeD web development.. a part of the threed.ai code family.
309 lines (284 loc) • 9.63 kB
JavaScript
// ** React Imports
import { useState } from 'react'
// ** MUI Imports
import Box from '@mui/material/Box'
import Table from '@mui/material/Table'
import Paper from '@mui/material/Paper'
import Toolbar from '@mui/material/Toolbar'
import Tooltip from '@mui/material/Tooltip'
import { visuallyHidden } from '@mui/utils'
import { alpha } from '@mui/material/styles'
import Checkbox from '@mui/material/Checkbox'
import TableRow from '@mui/material/TableRow'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableHead from '@mui/material/TableHead'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import TableContainer from '@mui/material/TableContainer'
import TableSortLabel from '@mui/material/TableSortLabel'
import TablePagination from '@mui/material/TablePagination'
// ** Icons Imports
import Delete from 'mdi-material-ui/Delete'
const createData = (name, calories, fat, carbs, protein) => {
return { name, calories, fat, carbs, protein }
}
const rows = [
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Donut', 452, 25.0, 51, 4.9),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Gingerbread', 356, 16.0, 49, 3.9),
createData('Honeycomb', 408, 3.2, 87, 6.5),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Jelly Bean', 375, 0.0, 94, 0.0),
createData('KitKat', 518, 26.0, 65, 7.0),
createData('Lollipop', 392, 0.2, 98, 0.0),
createData('Marshmallow', 318, 0, 81, 2.0),
createData('Nougat', 360, 19.0, 9, 37.0),
createData('Oreo', 437, 18.0, 63, 4.0)
]
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1
}
if (b[orderBy] > a[orderBy]) {
return 1
}
return 0
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy)
}
// This method is created for cross-browser compatibility, if you don't
// need to support IE11, you can use Array.prototype.sort() directly
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index])
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0])
if (order !== 0) return order
return a[1] - b[1]
})
return stabilizedThis.map(el => el[0])
}
const headCells = [
{
id: 'name',
numeric: false,
disablePadding: true,
label: 'Dessert (100g serving)'
},
{
id: 'calories',
numeric: true,
disablePadding: false,
label: 'Calories'
},
{
id: 'fat',
numeric: true,
disablePadding: false,
label: 'Fat (g)'
},
{
id: 'carbs',
numeric: true,
disablePadding: false,
label: 'Carbs (g)'
},
{
id: 'protein',
numeric: true,
disablePadding: false,
label: 'Protein (g)'
}
]
function EnhancedTableHead(props) {
// ** Props
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props
const createSortHandler = property => event => {
onRequestSort(event, property)
}
return (
<TableHead>
<TableRow>
<TableCell padding='checkbox'>
<Checkbox
onChange={onSelectAllClick}
checked={rowCount > 0 && numSelected === rowCount}
inputProps={{ 'aria-label': 'select all desserts' }}
indeterminate={numSelected > 0 && numSelected < rowCount}
/>
</TableCell>
{headCells.map(headCell => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
onClick={createSortHandler(headCell.id)}
direction={orderBy === headCell.id ? order : 'asc'}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component='span' sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
)
}
const EnhancedTableToolbar = props => {
// ** Prop
const { numSelected } = props
return (
<Toolbar
sx={{
pl: { sm: 5 },
pr: { xs: 1, sm: 1 },
...(numSelected > 0 && {
bgcolor: theme => alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
})
}}
>
{numSelected > 0 ? (
<Typography sx={{ flex: '1 1 100%' }} color='inherit' variant='subtitle1' component='div'>
{numSelected} selected
</Typography>
) : (
<Typography sx={{ flex: '1 1 100%' }} variant='h6' id='tableTitle' component='div'>
Sorting & Selecting
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title='Delete'>
<IconButton sx={{ color: 'text.secondary' }}>
<Delete />
</IconButton>
</Tooltip>
) : null}
</Toolbar>
)
}
const EnhancedTable = () => {
// ** States
const [page, setPage] = useState(0)
const [order, setOrder] = useState('asc')
const [rowsPerPage, setRowsPerPage] = useState(5)
const [orderBy, setOrderBy] = useState('calories')
const [selected, setSelected] = useState([])
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc'
setOrder(isAsc ? 'desc' : 'asc')
setOrderBy(property)
}
const handleSelectAllClick = event => {
if (event.target.checked) {
const newSelecteds = rows.map(n => n.name)
setSelected(newSelecteds)
return
}
setSelected([])
}
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name)
let newSelected = []
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name)
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1))
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1))
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1))
}
setSelected(newSelected)
}
const handleChangePage = (event, newPage) => {
setPage(newPage)
}
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10))
setPage(0)
}
const isSelected = name => selected.indexOf(name) !== -1
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0
return (
<Box sx={{ width: '100%' }}>
<Paper sx={{ width: '100%' }}>
<EnhancedTableToolbar numSelected={selected.length} />
<TableContainer>
<Table sx={{ minWidth: 750 }} aria-labelledby='tableTitle'>
<EnhancedTableHead
order={order}
orderBy={orderBy}
rowCount={rows.length}
numSelected={selected.length}
onRequestSort={handleRequestSort}
onSelectAllClick={handleSelectAllClick}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name)
const labelId = `enhanced-table-checkbox-${index}`
return (
<TableRow
hover
tabIndex={-1}
key={row.name}
role='checkbox'
selected={isItemSelected}
aria-checked={isItemSelected}
onClick={event => handleClick(event, row.name)}
>
<TableCell padding='checkbox'>
<Checkbox checked={isItemSelected} inputProps={{ 'aria-labelledby': labelId }} />
</TableCell>
<TableCell component='th' id={labelId} scope='row' padding='none'>
{row.name}
</TableCell>
<TableCell align='right'>{row.calories}</TableCell>
<TableCell align='right'>{row.fat}</TableCell>
<TableCell align='right'>{row.carbs}</TableCell>
<TableCell align='right'>{row.protein}</TableCell>
</TableRow>
)
})}
{emptyRows > 0 && (
<TableRow
sx={{
height: 53 * emptyRows
}}
>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
page={page}
component='div'
count={rows.length}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[5, 10, 25]}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
)
}
export default EnhancedTable