Commit 054f467d authored by Odair M.'s avatar Odair M.

Components rafael

parent 7d76b85a
import React from 'react';
import './App.css';
import {Header} from './components/header/Header';
import {Toast} from './components/toast/Toast';
// import {Wizard} from './components/wizard/Wizard';
import {SimpleModal} from './components/modal/Modal';
import {CustTable} from './components/table/Table';
function createData(a, b, c, d, t,f) {
return { a, b, c, d, t, f };
}
const tmp = [
createData('Cupcake', 305, 3.7, 67, 4.3,'da'),
createData('Donut', 452, 25.0, 51, 4.9,'da'),
createData('Eclair', 262, 16.0, 24, 6.0,'da'),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0,'da'),
createData('Gingerbread', 356, 16.0, 49, 3.9,'da'),
createData('Honeycomb', 408, 3.2, 87, 6.5,'da'),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3,'da'),
createData('Jelly Bean', 375, 0.0, 94, 0.0,'da'),
createData('KitKat', 518, 26.0, 65, 7.0,'da'),
createData('Lollipop', 392, 0.2, 98, 0.0,'da'),
createData('Marshmallow', 318, 0, 81, 2.0,'da'),
createData('Nougat', 360, 19.0, 9, 37.0,'da'),
createData('Oreo', 437, 18.0, 63, 4.0,'da'),
];
let tmp2 = [
{ id: 'a', numeric: false, disablePadding: true, label: 'a' },
{ id: 'b', numeric: true, disablePadding: false, label: 'b' },
{ id: 'c', numeric: true, disablePadding: false, label: 'c' },
{ id: 'd', numeric: true, disablePadding: false, label: 'd' },
{ id: 't', numeric: true, disablePadding: false, label: 'tdddddd' },
{ id: 'f', numeric: true, disablePadding: false, label: 'f' },
];
function App() {
return (
<div className="App">
<Header> </Header>
<Toast msg='Behold the work of the mighty toast' timer='60000' ></Toast>
{/* <SimpleModal /> */}
<CustTable rows={tmp} headCell={tmp2} order='asc' orderBy='b'/>
</div>
);
}
export default App;
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import {Wizard} from '../wizard/Wizard';
function getModalStyle() {
const top = 50 ;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles(theme => ({
paper: {
position: 'absolute',
width: 800,
height:600,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
export function SimpleModal() {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(true);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<button type="button" onClick={handleOpen}>
Open Modal
</button>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={open}
onClose={handleClose}
>
<div style={modalStyle} className={classes.paper}>
<Wizard ></Wizard>
</div>
</Modal>
</div>
);
}
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { lighten, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Checkbox from '@material-ui/core/Checkbox';
function desc(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function stableSort(array, cmp) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = cmp(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map(el => el[0]);
}
function getSorting(order, orderBy) {
return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
}
function EnhancedTableHead(props) {
const { onSelectAllClick, numSelected, rowCount} = props;
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{ 'aria-label': 'select all desserts' }}
/>
</TableCell>
{headCells.map(headCell => (
<TableCell
key={headCell.id}
align='left'
>
{headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
numSelected: PropTypes.number.isRequired,
onSelectAllClick: PropTypes.func.isRequired,
rowCount: PropTypes.number.isRequired,
};
const useToolbarStyles = makeStyles(theme => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
highlight:
theme.palette.type === 'light'
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85),
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark,
},
spacer: {
flex: '1 1 100%',
},
actions: {
color: theme.palette.text.secondary,
},
title: {
flex: '0 0 auto',
},
}));
const EnhancedTableToolbar = props => {
const classes = useToolbarStyles();
const { numSelected } = props;
return (
<Toolbar
className={clsx(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
Nutrition
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
</div>
</Toolbar>
);
};
EnhancedTableToolbar.propTypes = {
numSelected: PropTypes.number.isRequired,
};
const useStyles = makeStyles(theme => ({
root: {
width: '100%',
marginTop: theme.spacing(3),
},
paper: {
width: '50%',
marginBottom: theme.spacing(2),
},
table: {
minWidth: 750,
},
tableWrapper: {
overflowX: 'auto',
},
visuallyHidden: {
border: 0,
clip: 'rect(0 0 0 0)',
height: 1,
margin: -1,
overflow: 'hidden',
padding: 0,
position: 'absolute',
top: 20,
width: 1,
},
}));
let headCells = [];
export function CustTable(props) {
const {rows,headCell,order, orderBy} = props;
headCells = headCell;
const classes = useStyles();
const [selected, setSelected] = React.useState([]);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
function handleSelectAllClick(event) {
if (event.target.checked) {
const newSelecteds = rows.map(n => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
}
function 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);
}
function handleChangePage(event, newPage) {
setPage(newPage);
}
function handleChangeRowsPerPage(event) {
setRowsPerPage(+event.target.value);
setPage(0);
}
const isSelected = name => selected.indexOf(name) !== -1;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar numSelected={selected.length} />
<div className={classes.tableWrapper}>
<Table
className={classes.table}
aria-labelledby="tableTitle"
>
<EnhancedTableHead
numSelected={selected.length}
onSelectAllClick={handleSelectAllClick}
rowCount={rows.length}
/>
<TableBody>
{stableSort(rows, getSorting(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
onClick={event => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isItemSelected}
inputProps={{ 'aria-labelledby': labelId }}
/>
</TableCell>
{headCell.map(column => {
const value = row[column.id];
return (
<TableCell key={column.id} align={'left'}>
{column.format && typeof value === 'number' ? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
<TablePagination
rowsPerPageOptions={[10]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
'aria-label': 'previous page',
}}
nextIconButtonProps={{
'aria-label': 'next page',
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</div>
);
}
\ No newline at end of file
import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';
// import { makeStyles } from '@material-ui/core/styles';
export function Toast(props) {
const [state, setState] = React.useState({
open: true,
vertical: 'top',
horizontal: 'center',
});
const {msg,time} = props;
const timer = parseInt(time,10)
const { vertical, horizontal, open } = state;
function handleClose() {
setState({ ...state, open: false });
}
return (
<div>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
key={`${vertical},${horizontal}`}
open={open}
autoHideDuration={timer}
onClose={handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={msg}
/>
</div>
)
}
\ No newline at end of file
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
width: '90%',
},
backButton: {
marginRight: theme.spacing(1),
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}));
function getSteps() {
return ['Select master blaster campaign settings', 'Create an ad group', 'Create an ad','Make room for the king'];
}
function getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
case 3:
return 'The fuck is going on';
default:
return 'Uknown stepIndex';
}
}
export function Wizard() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
function handleNext() {
setActiveStep(prevActiveStep => prevActiveStep + 1);
}
function handleBack() {
setActiveStep(prevActiveStep => prevActiveStep - 1);
}
// function handleReset() {
// setActiveStep(0);
// }
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map(label => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>All steps completed</Typography>
{/* <Button onClick={handleReset}>Reset</Button> */}
</div>
) : (
<div>
<Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.backButton}
>
Back
</Button>
<Button variant="contained" color="primary" onClick={handleNext}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment