Hack to make date popups appear to be inside popup

hackforla · Sep 16, 2024 · da36aa0 · da36aa0
1 parent 1f3d071
commit da36aa0
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 41 deletions.
diff --git a/client/src/components/Projects/ColumnHeaderPopups/DatePopup.js b/client/src/components/Projects/ColumnHeaderPopups/DatePopup.js
@@ -79,18 +79,21 @@ const DatePopup = ({
         />
         <hr style={{ width: "100%" }} />
       </div>
-      <DateRangePicker
-        startDate={newStartDate}
-        endDate={newEndDate}
-        setStartDate={date => {
-          setNewStartDate(date);
-        }}
-        setEndDate={date => {
-          setNewEndDate(date);
-        }}
-        startDatePlaceholder="Start Date"
-        endDatePlaceholder="End Date"
-      />
+      <div id="calendarPortal">
+        <DateRangePicker
+          startDate={newStartDate}
+          endDate={newEndDate}
+          setStartDate={date => {
+            setNewStartDate(date);
+          }}
+          setEndDate={date => {
+            setNewEndDate(date);
+          }}
+          startDatePlaceholder="Start Date"
+          endDatePlaceholder="End Date"
+        />
+      </div>
+
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
         <Button onClick={setDefault} variant="text">

diff --git a/client/src/components/UI/DateRangePicker.jsx b/client/src/components/UI/DateRangePicker.jsx
@@ -1,8 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import DatePicker from "react-datepicker";
 import DatePickerCustomInput from "./DatePickerCustomInput";
 
+// TODO: we want the calendar popup to appear as if it were in the normal CSS flow.
+// We should be able to do this with a React portal, but I (John Darragh) was not
+// able to get this to work (see https://reactdatepicker.com/#example-date-range-with-portalInstead
+// for the example that should work). Instead, we use a total hack by putting a spacer div below
+// the datepickers, and conditionally showi it if the calendar is open.  Would be
+// good to replace this with something more solid, cause it somethimes doesn't work well
+// e.g. if the popup doesn't have enough space in the broswser window below the datepicker,
+// the popup appears above the date picker and is then not positioned over the
+// spacer div.
+
 const DateRangePicker = ({
   startDate,
   endDate,
@@ -11,39 +21,68 @@ const DateRangePicker = ({
   startDatePlaceholder,
   endDatePlaceholder
 }) => {
+  const [calendarDivHeight, setCalendarDivHeight] = useState(false);
+  const handleCalendarOpen = () => {
+    setCalendarDivHeight(true);
+  };
+
+  const handleCalendarClose = () => {
+    setCalendarDivHeight(false);
+  };
+
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row"
-      }}
-    >
-      <DatePicker
-        selected={startDate}
-        selectsStart
-        onChange={date => setStartDate(date)}
-        startDate={startDate}
-        endDate={endDate}
-        customInput={<DatePickerCustomInput />}
-        dateFormat="yyyy-MM-dd"
-        placeholderText={startDatePlaceholder || ""}
-      />
-      <div style={{ margin: "auto 0" }}>&nbsp;to&nbsp;</div>
-      <DatePicker
-        selected={endDate}
-        selectsEnd
-        onChange={date => setEndDate(date)}
-        startDate={startDate}
-        endDate={endDate}
-        customInput={<DatePickerCustomInput />}
-        dateFormat="yyyy-MM-dd"
-        placeholderText={endDatePlaceholder || ""}
-      />
-    </div>
+    <>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          minWidth: "15.5rem"
+        }}
+      >
+        <DatePicker
+          selected={startDate}
+          selectsStart
+          onChange={date => setStartDate(date)}
+          startDate={startDate}
+          endDate={endDate}
+          customInput={<DatePickerCustomInput />}
+          dateFormat="yyyy-MM-dd"
+          placeholderText={startDatePlaceholder || ""}
+          popperPlacement="bottom-start"
+          onCalendarOpen={handleCalendarOpen}
+          onCalendarClose={handleCalendarClose}
+          // withPortal
+        />
+        <div
+          style={{ margin: "auto 0", minWidth: "2.5rem", textAlign: "center" }}
+        >
+          to
+        </div>
+        <DatePicker
+          selected={endDate}
+          selectsEnd
+          onChange={date => setEndDate(date)}
+          startDate={startDate}
+          endDate={endDate}
+          customInput={<DatePickerCustomInput />}
+          dateFormat="yyyy-MM-dd"
+          placeholderText={endDatePlaceholder || ""}
+          popperPlacement="bottom-end"
+          onCalendarOpen={handleCalendarOpen}
+          onCalendarClose={handleCalendarClose}
+          // withPortal
+        />
+      </div>
+      {calendarDivHeight ? (
+        <div style={{ height: "15rem" }}>{calendarDivHeight}</div>
+      ) : null}
+    </>
   );
 };
 
 DateRangePicker.propTypes = {
+  portalId: PropTypes.string,
   startDate: PropTypes.any,
   endDate: PropTypes.any,
   setStartDate: PropTypes.func,