FDTMI-27: date/time range picker

package.json

@@ -31,6 +31,7 @@
     "qs": "^6.7.0",
     "randomstring": "^1.2.1",
     "react": "^17.0.2",
+    "react-calendar": "^3.7.0",
     "react-country-flag": "^2.3.1",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.15.0",

src/App.js

@@ -27,6 +27,7 @@ import { DropdownDemoPage } from "./pages/Examples/dropdown-demo";
 import { HealthPage } from "./pages/health";
 import { TopologySelectorModalPage } from "./pages/Examples/TopologySelectorModalPage/TopologySelectorModalPage";
 import { ModalPage } from "./pages/Examples/Modal/modal-page";
+import { TimeRangePickerDemo } from './pages/Examples/TimeRangePickerDemo';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -121,6 +122,7 @@ export function App() {
           <Route path="examples" element={sidebar}>
             <Route path="rs" element={<RsDemoPage />} />
             <Route path="dropdown" element={<DropdownDemoPage />} />
+            <Route path="timerangepicker" element={<TimeRangePickerDemo />} />
             <Route
               path="topology"
               element={<ExamplesTopologyPage url="/canary/api" />}

src/components/TimeRangePicker/TimeRangeList.js

@@ -0,0 +1,29 @@
+import { v4 as uuidv4 } from "uuid";
+import { rangeValues } from "./rangeValues";
+
+export const TimeRangeList = ({ selected = false }) => {
+  return (
+    <ul>
+      {rangeValues.map((range) => {
+        const id = uuidv4();
+        return (
+          <li
+            key={range.title}
+            className="py-1 px-2 hover:bg-blue-200 flex justify-between items-center"
+          >
+            <label htmlFor={id} className="cursor-pointer w-full">
+              {range.title}
+            </label>
+            <input
+              type="radio"
+              className="opacity-0 cursor-pointer"
+              // checked={false}
+              name="range-radio"
+              id={id}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

src/components/TimeRangePicker/TimeRangePicker.js

@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useState } from "react";
+import { FiClock } from "react-icons/fi";
+import { TimeRangePickerBody } from "./TimeRangePickerBody";
+import "./index.css";
+
+export const TimeRangePicker = () => {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [currentRangeDisplay, setCurrentRangeDisplay] = useState("some-range");
+
+  return (
+    <div className="relative text-sm">
+      <div
+        className="time-range-picker-widget flex items-center justify-center px-2 py-1 bg-gray-50 cursor-pointer rounded-sm border border-gray-300"
+        onClick={() =>
+          setIsPickerOpen((prevIsPickerValue) => !prevIsPickerValue)
+        }
+      >
+        <div>
+          <FiClock />
+        </div>
+        <div className="ml-2 font-medium">
+          Time range: <span>{currentRangeDisplay}</span>
+        </div>
+      </div>
+      <TimeRangePickerBody
+        isOpen={isPickerOpen}
+        closePicker={() => setIsPickerOpen(false)}
+        currentRange={currentRangeDisplay}
+        setCurrentRange={setCurrentRangeDisplay}
+      />
+    </div>
+  );
+};

src/components/TimeRangePicker/TimeRangePickerBody.js

@@ -0,0 +1,122 @@
+import Calendar from "react-calendar";
+import clsx from "clsx";
+import { useState } from "react";
+import { GrClose } from "react-icons/gr";
+import { FaRegCalendarAlt, FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import dayjs from "dayjs";
+import { TimeRangeList } from "./TimeRangeList";
+import "./index.css";
+
+export const TimeRangePickerBody = ({
+  isOpen,
+  closePicker,
+  currentRangeDisplay,
+  setCurrentRangeDisplay
+}) => {
+  const timeFormat = "YYYY-MM-DD HH:mm";
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [value, setValue] = useState(new Date());
+
+  const onChangeRange = (value) => {
+    setValue(value);
+    console.log(value[0].getTime());
+    setCurrentRangeDisplay(dayjs(value[0]).format(timeFormat));
+  };
+
+  return (
+    <div
+      className={clsx(
+        "time-range-picker-body flex justify-center cursor-auto w-max bg-gray-50 absolute rounded-sm border border-gray-300 z-50 shadow-lg shadow-gray-200",
+        { active: isOpen }
+      )}
+    >
+      <div
+        className={clsx(
+          "calendar-wrapper absolute p-2 bg-gray-50 rounded-sm border border-gray-300 shadow-lg shadow-gray-200",
+          { active: showCalendar }
+        )}
+      >
+        <div className="flex justify-between align-center mb-2">
+          <div className="font-medium">Select a time range</div>
+          <div>
+            <button
+              type="button"
+              onClick={() => setShowCalendar(false)}
+              className="bg-gray-200 hover:bg-gray-300 rounded-sm px-1.5 py-1.5 transition duration-200 ease"
+            >
+              <GrClose size="12px" />
+            </button>
+          </div>
+        </div>
+        <div>
+          <Calendar
+            locale="en"
+            selectRange
+            next2Label={null}
+            prev2Label={null}
+            nextLabel={<FaAngleRight size="18px" color="#272727" />}
+            prevLabel={<FaAngleLeft size="18px" color="#272727" />}
+            className="react-calendar-custom"
+            tileClassName="react-calendar-custom__tile"
+            value={value}
+            onChange={onChangeRange}
+          />
+        </div>
+      </div>
+      <div className="p-3 border-r border-gray-300 w-3/5">
+        <div className="font-medium">Absolute time range</div>
+        <div>
+          <div className="mb-6">
+            <div className="my-3">
+              <div className="text-sm mb-1">From</div>
+              <div className="flex">
+                <div>
+                  <input className="px-1 py-0.5 border border-gray-300 rounded-sm focus:border-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-300" />
+                </div>
+                <div className="flex bg-gray-200 ml-0.5 rounded-sm">
+                  <button
+                    type="button"
+                    onClick={() => setShowCalendar((prevState) => !prevState)}
+                    className="px-1 mx-1"
+                  >
+                    <FaRegCalendarAlt color="#303030" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div className="text-sm mb-1">To</div>
+              <div className="flex">
+                <div>
+                  <input className="px-1 py-0.5 border border-gray-300 rounded-sm focus:border-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-300" />
+                </div>
+                <div className="flex bg-gray-200 ml-0.5 rounded-sm">
+                  <button
+                    type="button"
+                    onClick={() => setShowCalendar((prevState) => !prevState)}
+                    className="px-1 mx-1"
+                  >
+                    <FaRegCalendarAlt color="#303030" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={() => {
+              setCurrentRangeDisplay(value);
+              console.log(currentRangeDisplay);
+            }}
+            type="button"
+            className="block bg-blue-200 hover:bg-blue-300 rounded-sm px-2 py-1 transition duration-200 ease"
+          >
+            Apply time range
+          </button>
+        </div>
+      </div>
+      <div className="w-2/5 overflow-y-auto">
+        <TimeRangeList />
+      </div>
+    </div>
+  );
+};