Dark mode 2 (#100)

* 🗂️ Added tab icons and styles * 🪑 Styled download panel table * 🪑 Cleaned up the DC++ search results table * 🪑 Many changes to DC++ downloads table * 🏗️ Wired up search with RQ * 🏗️ Changes to ComicDetail section * 🔧 Fixing table styes * 🏗 Fixed the archive ops panel * 🔧 Tweaked Archive ops further * 🃏 Styling the action menu * 🧩 CV Match panel refactor WIP * 🏗️ Refactored the action menu * 🤼 Cleaning up CV match panel * 🏗️ Refactored the scored matches * 🤼 Revamped CV match panel UX * 🖌️ Styling tweaks to the side panel * 🖌️ Cleaned up the form * 🏗️ Refactored the search form * 🤐 Added a uncompress indicator * 🏗️ Fix for encoding # in URIs * 🔧 Fixed # symbol handling in URLs * 🔧 Started work on Edit Metadata panel * 🔎 Added a check for existing uncompressed archives * 🏗️ Settings styling tweaks * 🏗️ Fixed invalidation of archiveOps * 🏗️ Fixed an invalidation query on DC++ download panel * 🏗️ Fixed CV-sourced Volume info panel * 🏗️ Fixed volume group card stacks on Dashboard * 🔍 Fixing CV search page * 🏗️ Refactoring Volume groups and wanted panel * 🏗️ Cleaning up useless files * 🛝 Added keen-slider for pull list * 🏗️ Abstracted heading/subheading into Header * 🏗️ Continued refactoring of PullList, Volumes etc. * 📆 Wired up the datepicker to LoCG pull list
2024-02-06 05:58:56 -05:00
parent 4f49e538a8
commit c03f706e9d
48 changed files with 13032 additions and 1928 deletions
--- a/src/client/components/shared/DatePicker.tsx
+++ b/src/client/components/shared/DatePicker.tsx
@@ -0,0 +1,128 @@
+import React, { ChangeEventHandler, useRef, useState } from "react";
+
+import { format, isValid, parse, parseISO } from "date-fns";
+import FocusTrap from "focus-trap-react";
+import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
+import { usePopper } from "react-popper";
+
+export const DatePickerDialog = (props) => {
+  console.log(props);
+  const { setter, apiAction } = props;
+  const [selected, setSelected] = useState<Date>();
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const popperRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const customStyles = {
+    container: {
+      // Style for the entire container
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      padding: "10px",
+      width: "300px",
+    },
+    day: {
+      // Style for individual days
+
+      padding: "5px",
+      margin: "2px",
+    },
+    selected: {
+      // Style for selected days
+      backgroundColor: "#007bff",
+      color: "#fff",
+    },
+    disabled: {
+      // Style for disabled days
+      color: "#ccc",
+    },
+    today: {
+      // Style for today's date
+      backgroundColor: "#f0f0f0",
+    },
+    dayWrapper: {
+      // Style for the wrapper around each day
+      display: "inline-block",
+    },
+  };
+
+  const popper = usePopper(popperRef.current, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const closePopper = () => {
+    setIsPopperOpen(false);
+    buttonRef?.current?.focus();
+  };
+
+  const handleButtonClick = () => {
+    setIsPopperOpen(true);
+  };
+
+  const handleDaySelect: SelectSingleEventHandler = (date) => {
+    setSelected(date);
+    if (date) {
+      setter(format(date, "M-dd-yyyy"));
+      apiAction();
+      closePopper();
+    } else {
+      setter("");
+    }
+  };
+
+  return (
+    <div>
+      <div ref={popperRef}>
+        <button
+          ref={buttonRef}
+          type="button"
+          aria-label="Pick a date"
+          onClick={handleButtonClick}
+          className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+        >
+          <span className="pr-1 pt-0.5 h-8">
+            <span className="icon-[solar--calendar-date-bold-duotone] w-6 h-6"></span>
+          </span>
+          Pick a date
+        </button>
+      </div>
+      {isPopperOpen && (
+        <FocusTrap
+          active
+          focusTrapOptions={{
+            initialFocus: false,
+            allowOutsideClick: true,
+            clickOutsideDeactivates: true,
+            onDeactivate: closePopper,
+            fallbackFocus: buttonRef.current || undefined,
+          }}
+        >
+          <div
+            tabIndex={-1}
+            style={popper.styles.popper}
+            className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
+            {...popper.attributes.popper}
+            ref={setPopperElement}
+            role="dialog"
+            aria-label="DayPicker calendar"
+          >
+            <DayPicker
+              initialFocus={isPopperOpen}
+              mode="single"
+              defaultMonth={selected}
+              selected={selected}
+              onSelect={handleDaySelect}
+              styles={customStyles}
+            />
+          </div>
+        </FocusTrap>
+      )}
+    </div>
+  );
+};
+
+export default DatePickerDialog;