You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

144 lines
5.0 KiB

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