fix: date picker mobile size

metrico · Apr 4, 2022 · 6271d0a · 6271d0a
1 parent 57d3077
commit 6271d0a
Show file tree

Hide file tree

Showing 9 changed files with 582 additions and 275 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react-dom": "^17.0.2",
     "react-flot": "^1.3.0",
     "react-redux": "^7.2.6",
+    "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^6.2.1",
     "redux-thunk": "^2.4.1",
     "slate": "^0.73.1",

diff --git a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js
@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import DateRangeIcon from "@mui/icons-material/DateRange";
 const SelectorsContainer = styled.div`
-    display: flex;
+    display: ${(props) => (props.isDisplay ? "flex" : "none")};
     flex-direction: column;
     margin: 4px;
-    .time-selector {
-        display: flex;
+    .time-selectors {
+        display: ${(props) => (props.isDisplay ? "flex" : "none")};
         flex-direction: column;
         padding: 5px;
 
@@ -18,28 +18,27 @@ const SelectorsContainer = styled.div`
         }
         .input-group {
             display: flex;
-            .date-time-range {
+            .date-time-ranged {
                 font-size: 1em;
                 width: 170px;
                 line-height: 1.5;
                 text-align: center;
                 color: #ddd;
             }
             button {
-               cursor:pointer;
-                display:flex;
+                cursor: pointer;
+                display: flex;
                 align-items: center;
                 justify-content: center;
-            border:none;
-            padding:0px 8px;
-            margin:3px;
-            border-radius: 3px;
+                border: none;
+                padding: 0px 8px;
+                margin: 3px;
+                border-radius: 3px;
                 color: #eee;
-    background: #0c8181;
-    &:hover {
-        background: #159d9d;
-    }
-
+                background: #0c8181;
+                &:hover {
+                    background: #159d9d;
+                }
             }
         }
     }
@@ -56,11 +55,11 @@ const AbsoluteSubmitButton = styled.button`
     border-radius: 3px;
     transition: 0.2s all;
     margin: 10px;
-    margin-top: 40px;
+    margin-top: {props => (props.isHorizontal && props.isMobile ? '20px':'40px')}
     cursor: pointer;
     &:hover {
         background: #159d9d;
-    }
+    } 
 `;
 
 export default function AbsoluteSelector({
@@ -69,49 +68,75 @@ export default function AbsoluteSelector({
     handleStart,
     handleStop,
     onTimeRangeSet,
-    calendarOpen,
     setCalendarOpen,
+    isFullCalendar,
+    setStopCalendar,
+    setStartCalendar,
+    calendarOpen,
+    startCalendarOpen,
+    stopCalendarOpen,
+    isHorizontal,
+    styles,
+    isMobile,
 }) {
+    function handleStartOpen() {
+        if (isFullCalendar) {
+            setCalendarOpen((open) => (open ? false : true));
+        } else {
+            setCalendarOpen((open) =>
+                open && startCalendarOpen ? false : true
+            );
+            setStopCalendar(() => false);
+            setStartCalendar((open) => (open ? false : true));
+        }
+    }
+
+    function handleStopOpen() {
+        if (isFullCalendar) {
+            setCalendarOpen((open) => (open ? false : true));
+        } else {
+            setCalendarOpen((open) =>
+                open && stopCalendarOpen ? false : true
+            );
+            setStartCalendar(() => false);
+            setStopCalendar((open) => (open ? false : true));
+        }
+    }
+
     return (
-        <SelectorsContainer>
-            <div className={"time-selector"}>
+        <SelectorsContainer isDisplay={styles}>
+            <div className={"time-selectors"}>
                 <span className={"label"}>{"From"}</span>
                 <div className="input-group">
                     <input
-                        className={"date-time-range"}
+                        className={"date-time-ranged"}
                         value={getEditedStartDate()}
                         onChange={(e) => handleStart(e, false)}
                         onBlur={(e) => handleStart(e, true)}
                     />
-                    <button
-                        onClick={(e) =>
-                            setCalendarOpen((open) => (open ? false : true))
-                        }
-                    >
+                    <button onClick={handleStartOpen}>
                         <DateRangeIcon fontSize="small" />
                     </button>
                 </div>
             </div>
 
-            <div className={"time-selector"}>
+            <div className={"time-selectors"}>
                 <span className={"label"}>{"To"}</span>
                 <div className="input-group">
                     <input
-                        className={"date-time-range"}
+                        className={"date-time-ranged"}
                         value={getEditedEndDate()}
                         onChange={(e) => handleStop(e, false)}
                         onBlur={(e) => handleStop(e, true)}
                     />
-                    <button
-                        onClick={(e) =>
-                            setCalendarOpen((open) => (open ? false : true))
-                        }
-                    >
+                    <button onClick={handleStopOpen}>
                         <DateRangeIcon fontSize="small" />
                     </button>
                 </div>
             </div>
             <AbsoluteSubmitButton
+                isHorizontal={isHorizontal}
+                isMobile={isMobile}
                 onClick={(e) => {
                     onTimeRangeSet(e);
                 }}