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.
117 lines
2.8 KiB
117 lines
2.8 KiB
import React, { useState } from "react"; |
|
import { connect } from "react-redux"; |
|
import { comment } from "~/Redux/actions"; |
|
import { makeStyles } from "@material-ui/core/styles"; |
|
import Modal from "@material-ui/core/Modal"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
|
}, |
|
mobile: { |
|
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22, |
|
}, |
|
}; |
|
|
|
function getModalStyle() { |
|
return { |
|
top: `${50}%`, |
|
left: `${50}%`, |
|
transform: `translate(-${50}%, -${50}%)`, |
|
padding: "10px", |
|
}; |
|
} |
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
paper: { |
|
position: "absolute", |
|
width: "100%", |
|
maxWidth: "500px", |
|
backgroundColor: theme.palette.background.paper, |
|
border: "0px solid #000", |
|
boxShadow: theme.shadows[5], |
|
padding: theme.spacing(2, 4, 3), |
|
direction: "rtl", |
|
fontFamily: "numeralLight", |
|
}, |
|
})); |
|
|
|
function SimpleModal(props) { |
|
const classes = useStyles(); |
|
const [modalStyle] = React.useState(getModalStyle); |
|
const [text, setText] = useState(null); |
|
//TODO check |
|
const cancle = () => { |
|
props.handleOpenComment(false); |
|
}; |
|
const submitComment = () => { |
|
props.addComment({ |
|
userId: props.id, |
|
bookId: props.info.id, |
|
title: null, |
|
text: text, |
|
}); |
|
props.handleOpenComment(); |
|
}; |
|
|
|
const body = ( |
|
<div style={modalStyle} className={classes.paper + " material-modal"}> |
|
<h2 |
|
id="simple-modal-title" |
|
style={{ |
|
fontSize: |
|
window.innerWidth > 1000 ? fontSize.desktop.h2 : fontSize.mobile.h2, |
|
marginBottom: 20, |
|
color: "#4e4e4e", |
|
letterSpacing: "-1px", |
|
}} |
|
> |
|
{window.t("کامنت خود را وارد کرده و دکمه ثبت را بزنید.")} |
|
</h2> |
|
<textarea |
|
placeholder={window.t("متن پیام")} |
|
name="description" |
|
rows="5" |
|
onChange={(e) => setText(e.target.value)} |
|
></textarea> |
|
<button |
|
style={{ marginTop: 20, borderRadius: 6, padding: 8 }} |
|
onClick={() => submitComment()} |
|
> |
|
{window.t("ثبت")}{" "} |
|
</button> |
|
<button |
|
style={{ marginTop: 20, borderRadius: 6, padding: 8 }} |
|
onClick={() => cancle()} |
|
> |
|
{window.t("انصراف")} |
|
</button> |
|
</div> |
|
); |
|
|
|
return ( |
|
<div style={{ margin: 5 }}> |
|
<Modal |
|
open={props.openComment} |
|
onClose={props.handleOpenComment} |
|
aria-labelledby="simple-modal-title" |
|
aria-describedby="simple-modal-description" |
|
> |
|
{body} |
|
</Modal> |
|
</div> |
|
); |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
info: state.book.info, |
|
id: state.user.status.id, |
|
}), |
|
{ addComment: comment.add } |
|
)(SimpleModal);
|
|
|