summaryrefslogtreecommitdiffstats
path: root/front/odiparpack/app/containers/Tables/TablePlayground.js
diff options
context:
space:
mode:
Diffstat (limited to 'front/odiparpack/app/containers/Tables/TablePlayground.js')
-rw-r--r--front/odiparpack/app/containers/Tables/TablePlayground.js419
1 files changed, 419 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/Tables/TablePlayground.js b/front/odiparpack/app/containers/Tables/TablePlayground.js
new file mode 100644
index 0000000..30382bb
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/TablePlayground.js
@@ -0,0 +1,419 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+import EnhancedTableHead from 'ba-components/Tables/tableParts/TableHeader';
+import EnhancedTableToolbar from 'ba-components/Tables/tableParts/TableToolbar';
+import { PapperBlock } from 'ba-components';
+
+import {
+ Grid,
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+ FormGroup,
+ RadioGroup,
+ Radio,
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+ TablePagination,
+ Paper,
+ Checkbox,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ demo: {
+ height: 240,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ height: '100%',
+ backgroundColor: theme.palette.secondary.light,
+ },
+ control: {
+ padding: theme.spacing(2),
+ },
+ settings: {
+ padding: 30
+ },
+});
+
+let counter = 0;
+function createData(name, calories, fat, carbs, protein) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+class InteractiveGrid extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ order: 'asc',
+ orderBy: 'calories',
+ selected: [],
+ columnData: [
+ {
+ id: 'name',
+ numeric: false,
+ disablePadding: false,
+ 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)'
+ },
+ ],
+ data: [
+ 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),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ defaultPerPage: 5,
+ filterText: '',
+ size: 'medium',
+ bordered: false,
+ stripped: true,
+ hovered: false,
+ toolbar: true,
+ checkcell: false,
+ pagination: true
+ };
+ }
+
+ handleChangeRadio = key => (event, value) => {
+ this.setState({
+ [key]: value,
+ });
+ };
+
+ handleChangeCheck = name => event => {
+ this.setState({ [name]: event.target.checked });
+ };
+
+ handleRequestSort = (event, property) => {
+ const orderBy = property;
+ let order = 'desc';
+
+ if (this.state.orderBy === property && this.state.order === 'desc') {
+ order = 'asc';
+ }
+
+ const data = order === 'desc'
+ ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
+ : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));
+
+ this.setState({ data, order, orderBy });
+ };
+
+ handleSelectAllClick = (event, checked) => {
+ if (checked) {
+ this.setState({ selected: this.state.data.map(n => n.id) });
+ return;
+ }
+ this.setState({ selected: [] });
+ };
+
+ handleClick = (event, id) => {
+ if (!this.state.checkcell) {
+ return;
+ }
+ const { selected } = this.state;
+ const selectedIndex = selected.indexOf(id);
+ let newSelected = [];
+
+ if (selectedIndex === -1) {
+ newSelected = newSelected.concat(selected, id);
+ } 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),
+ );
+ }
+
+ this.setState({ selected: newSelected });
+ };
+
+ handleChangePage = (event, page) => {
+ this.setState({ page });
+ };
+
+ handleChangeRowsPerPage = event => {
+ this.setState({ rowsPerPage: event.target.value });
+ };
+
+ isSelected = id => this.state.selected.indexOf(id) !== -1;
+
+ handleUserInput(value) {
+ // Show all item first
+ if (value !== '') {
+ this.setState({ rowsPerPage: this.state.data.length });
+ } else {
+ this.setState({ rowsPerPage: this.state.defaultPerPage });
+ }
+
+ // Show result base on keyword
+ this.setState({ filterText: value.toLowerCase() });
+ }
+
+ render() {
+ const { classes } = this.props;
+ const {
+ data,
+ order,
+ orderBy,
+ selected,
+ rowsPerPage,
+ page,
+ filterText,
+ size,
+ columnData,
+ toolbar, pagination, checkcell,
+ bordered, stripped, hovered
+ } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+ const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => (
+ <TableCell align={itemCell.numeric ? 'right' : 'left'} key={index.toString()}>{dataArray[itemCell.id]}</TableCell>
+ ));
+ return (
+ <PapperBlock title="Table Playground" desc="">
+ <div>
+ <Grid container className={classes.root}>
+ <Grid item xs={12}>
+ <Grid container className={classes.settings}>
+ <Grid item xs={6} sm={4}>
+ <FormControl component="fieldset">
+ <FormLabel>Size</FormLabel>
+ <RadioGroup
+ name="size"
+ aria-label="size"
+ value={size}
+ onChange={this.handleChangeRadio('size')}
+ >
+ <FormControlLabel value="small" control={<Radio />} label="Small" />
+ <FormControlLabel value="medium" control={<Radio />} label="Medium" />
+ <FormControlLabel value="big" control={<Radio />} label="Big" />
+ </RadioGroup>
+ </FormControl>
+ </Grid>
+ <Grid item xs={6} sm={4}>
+ <FormControl component="fieldset">
+ <FormLabel>Style</FormLabel>
+ <FormGroup>
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.bordered}
+ onChange={this.handleChangeCheck('bordered')}
+ value="bordered"
+ />
+ )}
+ label="Bordered"
+ />
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.stripped}
+ onChange={this.handleChangeCheck('stripped')}
+ value="stripped"
+ />
+ )}
+ label="Strppied"
+ />
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.hovered}
+ onChange={this.handleChangeCheck('hovered')}
+ value="hovered"
+ />
+ )}
+ label="Hovered"
+ />
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ <Grid item xs={6} sm={4}>
+ <FormControl component="fieldset">
+ <FormLabel>Component</FormLabel>
+ <FormGroup>
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.toolbar}
+ onChange={this.handleChangeCheck('toolbar')}
+ value="toolbar"
+ />
+ )}
+ label="Toolbar"
+ />
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.checkcell}
+ onChange={this.handleChangeCheck('checkcell')}
+ value="checkcell"
+ />
+ )}
+ label="Checkbox"
+ />
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={this.state.pagination}
+ onChange={this.handleChangeCheck('pagination')}
+ value="pagination"
+ />
+ )}
+ label="Pagination"
+ />
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12}>
+ <Paper className={classes.root}>
+ {toolbar
+ && (
+ <EnhancedTableToolbar
+ numSelected={selected.length}
+ filterText={filterText}
+ onUserInput={(event) => this.handleUserInput(event)}
+ />
+ )
+ }
+ <div className={classes.tableWrapper}>
+ <Table className={
+ classNames(
+ classes.table,
+ hovered && tableStyles.hover,
+ stripped && tableStyles.stripped,
+ bordered && tableStyles.bordered,
+ tableStyles[size]
+ )}
+ >
+ <EnhancedTableHead
+ numSelected={selected.length}
+ order={order}
+ orderBy={orderBy}
+ onSelectAllClick={this.handleSelectAllClick}
+ onRequestSort={this.handleRequestSort}
+ rowCount={data.length}
+ columnData={columnData}
+ checkcell={checkcell}
+ />
+ <TableBody>
+ {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => {
+ const isSelected = this.isSelected(n.id);
+ if (n.name.toLowerCase().indexOf(filterText) === -1) {
+ return false;
+ }
+ return (
+ <TableRow
+ onClick={event => this.handleClick(event, n.id)}
+ role="checkbox"
+ aria-checked={isSelected}
+ tabIndex={-1}
+ key={n.id}
+ selected={isSelected}
+ >
+ {checkcell
+ && (
+ <TableCell padding="checkbox">
+ <Checkbox checked={isSelected} />
+ </TableCell>
+ )
+ }
+ {renderCell(n, columnData)}
+ </TableRow>
+ );
+ })}
+ {emptyRows > 0 && (
+ <TableRow style={{ height: 49 * emptyRows }}>
+ <TableCell colSpan={6} />
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ </div>
+ {pagination
+ && (
+ <TablePagination
+ rowsPerPageOptions={[5, 10, 25]}
+ component="div"
+ count={data.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ backIconButtonProps={{
+ 'aria-label': 'Previous Page',
+ }}
+ nextIconButtonProps={{
+ 'aria-label': 'Next Page',
+ }}
+ onChangePage={this.handleChangePage}
+ onChangeRowsPerPage={this.handleChangeRowsPerPage}
+ />
+ )
+ }
+ </Paper>
+ </Grid>
+ </Grid>
+ </div>
+ </PapperBlock>
+ );
+ }
+}
+
+InteractiveGrid.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(InteractiveGrid);
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-28 20:45:06 +0000