From 3cbf292b6d4976589428d0841cd1201057d104d4 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 15:51:19 +0300
Subject: feat: use icon in header instead of submit button

---
 src/components/ModalScreen/ModalScreen.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components/ModalScreen/ModalScreen.tsx')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 81e5c5a..110bd8b 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -12,11 +12,12 @@ import {
   useTheme
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
 import { TransitionProps } from '@material-ui/core/transitions';
+import CloseIcon from '@material-ui/icons/Close';
 
 interface PropTypes {
   title: string;
+  rightIcon?: JSX.Element;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -37,7 +38,7 @@ const Transition = React.forwardRef((
   ref: React.Ref<unknown>
 ) => <Slide direction="left" ref={ref} {...props} />);
 
-const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+const ModalScreen: React.FC<PropTypes> = ({ title, rightIcon, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
@@ -64,9 +65,11 @@ const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
           <Typography variant="h6">
             { title }
           </Typography>
-          <IconButton style={{ opacity: 0, pointerEvents: 'none' }}>
-            <CloseIcon />
-          </IconButton>
+          { rightIcon || (
+            <IconButton style={{ visibility: 'hidden' }}>
+              <CloseIcon />
+            </IconButton>
+          )}
         </Toolbar>
       </AppBar>
       <Divider />
-- 
cgit v1.2.3