import React from 'react'; import { 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 TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; import './index.scss'; const useStyles = makeStyles({ table: { }, }); const maxMobileSize = 550; const fontSize = { mobile: { info: { strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, }, price: { strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, }, counter: { button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, }, delete: { span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, }, }, }; export default function BasicTable(props) { const classes = useStyles(); const {list, handleCounter, handleDelete} = props; return ( <> { window.innerWidth < 1000 ? <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> <TableHead> <TableRow> <TableCell align="right">محصولات</TableCell> <TableCell align="center">قیمت</TableCell> </TableRow> </TableHead> <TableBody> { list.map((row,i) => ( <Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} /> ))} </TableBody> </Table> </TableContainer> : null } </> ); } // id: 1, // title: "ریاضیات گسسته خیلی پیشرفته", // subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد", // options: "بستههای الحاقی: کیف، کفش و کوله پشتی", // image: book1, // slicePrice: 300000, // number: 1, // price: 2500000, const Item = (props) => { const {data, handleCounter, handleDelete} = props; return( <TableRow key={data.name}> <TableCell align="right" component="th" scope="row"> <div className="mobile-cart-table-product d-flex align-items-center"> <img src={data.image} alt={data.title} /> <div className="mobile-cart-table-product__info d-flex flex-column p-1"> <strong style={{ fontSize: fontSize.mobile.info.strong }}> {data.title} </strong> <p style={{ fontSize: fontSize.mobile.info.p }}>{data.subTitle}</p> <span style={{ fontSize: fontSize.mobile.info.span }}> {data.options} </span> <div className="cart-item__delete d-flex align-items-center justify-content-center"> <DeleteOutlineOutlinedIcon style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }} onClick={() => handleDelete(data.id)} /> <span onClick={() => handleDelete(data.id)} style={{ fontSize: fontSize.mobile.delete.span, color: "#FC120A"}} > حذف </span> </div> </div> </div> </TableCell> <TableCell> <div className="mobile-cart-table-price d-flex flex-column align-items-center"> <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> <strong style={{ fontSize: fontSize.mobile.price.strong }}> {data.price} </strong> <span style={{ fontSize: fontSize.mobile.price.span }}> {data.slicePrice} قیمت هر واحد </span> </div> <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> <button onClick={() => handleCounter("increase", data.id)} style={{ fontSize: fontSize.mobile.counter.button }} > + </button> <span style={{ fontSize: fontSize.mobile.counter.span }}> {data.number} </span> <button onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)} style={{ fontSize: fontSize.mobile.counter.button }} > - </button> </div> </div> </TableCell> </TableRow> ); }