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,87 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import PropTypes from "prop-types";
+import { v4 as uuidv4 } from "uuid";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import { rangeOptions } from "./rangeOptions";
+import { getFromValues } from "./helpers";
+
+export const TimeRangeList = ({
+  closePicker,
+  rangeDisplayValue,
+  setRangeDisplayValue,
+  setRangeValue,
+  setInputValue,
+  setCalendarValue,
+  setShowCalendar
+}) => {
+  const isChecked = (option, value) => {
+    if (!option || !value) {
+      return false;
+    }
+
+    return option.from === value.from && option.to === value.to;
+  };
+
+  const setOption = (option) => {
+    const { from } = option;
+    const { to } = option;
+    setRangeDisplayValue({
+      from,
+      to,
+      display: option.display
+    });
+    setInputValue((prevState) => ({ ...prevState, from, to }));
+    setRangeValue({
+      from: dayjs()
+        .subtract(...getFromValues(option.from))
+        .format(),
+      to: dayjs().format()
+    });
+    closePicker();
+    setShowCalendar(false);
+    setCalendarValue(null);
+  };
+
+  return (
+    <ul>
+      {rangeOptions.map((option) => {
+        const id = uuidv4();
+        return (
+          <li
+            onClick={() => setOption(option)}
+            key={id}
+            className={clsx(
+              "option-item py-1 px-2 hover:bg-blue-200 flex justify-between items-center",
+              { active: isChecked(option, rangeDisplayValue) }
+            )}
+          >
+            <label htmlFor={id} className="cursor-pointer w-full">
+              {option.display}
+            </label>
+            <input
+              type="checkbox"
+              className="opacity-0 cursor-pointer"
+              checked={isChecked(option, rangeDisplayValue)}
+              onChange={() => {}}
+              name="range-checkbox"
+              id={id}
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+TimeRangeList.propTypes = {
+  closePicker: PropTypes.func,
+  rangeDisplayValue: PropTypes.shape({}),
+  setRangeDisplayValue: PropTypes.func,
+  setRangeValue: PropTypes.func,
+  setInputValue: PropTypes.func,
+  setCalendarValue: PropTypes.func,
+  setShowCalendar: PropTypes.func
+};

src/components/TimeRangePicker/TimeRangePicker.js

@@ -0,0 +1,39 @@
+/* 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";
+import { defaultValue } from "./rangeOptions";
+
+export const TimeRangePicker = () => {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [rangeDisplayValue, setRangeDisplayValue] = useState({
+    ...defaultValue
+  });
+  const [rangeValue, setRangeValue] = useState({});
+
+  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((prevState) => !prevState)}
+      >
+        <div>
+          <FiClock />
+        </div>
+        <div className="ml-2 font-medium">
+          Time range: <span>{rangeDisplayValue.display}</span>
+        </div>
+      </div>
+      <TimeRangePickerBody
+        isOpen={isPickerOpen}
+        closePicker={() => setIsPickerOpen(false)}
+        rangeDisplayValue={rangeDisplayValue}
+        setRangeDisplayValue={setRangeDisplayValue}
+        rangeValue={rangeValue}
+        setRangeValue={setRangeValue}
+      />
+    </div>
+  );
+};