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 = (

1000 ? fontSize.desktop.h2 : fontSize.mobile.h2, marginBottom: 20, color: "#4e4e4e", letterSpacing: "-1px", }} > {window.t("کامنت خود را وارد کرده و دکمه ثبت را بزنید.")}

); return (
{body}
); } export default connect( (state) => ({ info: state.book.info, id: state.user.status.id, }), { addComment: comment.add } )(SimpleModal);