|
|
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> |
|
|
); |
|
|
} |