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


From 3ea7d6bd0bfd6aefd939bf84f5dc1696cf68231e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 19:31:20 +0300
Subject: feat: tweak modal paddings on desktop

---
 src/components/ModalScreen/ModalScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 110bd8b..7090980 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.default
   },
   content: {
-    padding: theme.spacing(3, 0, 0, 0)
+    padding: theme.spacing(6, 0)
   },
   toolbar: {
     display: 'flex',
@@ -55,6 +55,7 @@ const ModalScreen: React.FC<PropTypes> = ({ title, rightIcon, children }) => {
       TransitionComponent={Transition}
       PaperProps={{ className: classes.root }}
       fullScreen={isMobile}
+      maxWidth="md"
       fullWidth
     >
       <AppBar position="static">
-- 
cgit v1.2.3


From fd7e4817cd0e0160e85ad98ad81f406c66a94800 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 20:21:35 +0300
Subject: feat: correctly wire modal logic

---
 src/components/ModalScreen/ModalScreen.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

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

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 7090980..6c514cd 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -17,7 +17,9 @@ import CloseIcon from '@material-ui/icons/Close';
 
 interface PropTypes {
   title: string;
-  rightIcon?: JSX.Element;
+  actionIcon?: JSX.Element;
+  handleAction?: () => void;
+  isActionDisabled?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -38,7 +40,7 @@ const Transition = React.forwardRef((
   ref: React.Ref<unknown>
 ) => <Slide direction="left" ref={ref} {...props} />);
 
-const ModalScreen: React.FC<PropTypes> = ({ title, rightIcon, children }) => {
+const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
@@ -48,6 +50,11 @@ const ModalScreen: React.FC<PropTypes> = ({ title, rightIcon, children }) => {
   const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
   const onExited = useCallback(() => history.goBack(), [history]);
 
+  const handleClickAction = useCallback(async () => {
+    if (handleAction) await handleAction();
+    return handleClose();
+  }, [handleAction, handleClose]);
+
   return (
     <Dialog
       open={isOpen}
@@ -66,11 +73,9 @@ const ModalScreen: React.FC<PropTypes> = ({ title, rightIcon, children }) => {
           <Typography variant="h6">
             { title }
           </Typography>
-          { rightIcon || (
-            <IconButton style={{ visibility: 'hidden' }}>
-              <CloseIcon />
-            </IconButton>
-          )}
+          <IconButton onClick={handleClickAction} disabled={isActionDisabled}>
+            { actionIcon }
+          </IconButton>
         </Toolbar>
       </AppBar>
       <Divider />
-- 
cgit v1.2.3


From 2c093ce738cb1281db04a8a3f2b6a35b3aa9b354 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 20:24:46 +0300
Subject: fix: close modal on clickaway

---
 src/components/ModalScreen/ModalScreen.tsx | 1 +
 1 file changed, 1 insertion(+)

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

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 6c514cd..c6f0565 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -58,6 +58,7 @@ const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isA
   return (
     <Dialog
       open={isOpen}
+      onClose={handleClose}
       onExited={onExited}
       TransitionComponent={Transition}
       PaperProps={{ className: classes.root }}
-- 
cgit v1.2.3