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

@@ -22,6 +22,7 @@ import {
 } from "./pages";
 import { DropdownDemoPage } from "./pages/Examples/dropdown-demo";
 import { ModalPage } from "./pages/Examples/Modal/modal-page";
+import { TimeRangePickerDemo } from "./pages/Examples/TimeRangePickerDemo";
 import { TypologyDropdownDemo } from "./pages/Examples/topology-dropdown";
 import { RsDemoPage } from "./pages/Examples/rs-demo";
 import { TopologyPage as ExamplesTopologyPage } from "./pages/Examples/Topology/topology-page";
@@ -113,6 +114,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/RecentlyRanges.js

@@ -0,0 +1,35 @@
+import PropTypes from "prop-types";
+import dayjs from "dayjs";
+import { displayTimeFormat } from "./rangeOptions";
+
+export const RecentlyRanges = ({ recentRanges, applyTimeRange }) => (
+  <div>
+    <div className="font-medium mt-3.5 px-3">
+      Recently used absolute ranges:
+    </div>
+    <div>
+      {recentRanges?.map((range) => (
+        <button
+          type="button"
+          onClick={() => applyTimeRange(range)}
+          key={`${dayjs(range.from).format()}${dayjs(range.to).format()}`}
+          className="hover:bg-blue-100 flex justify-between items-center w-full cursor-pointer py-1.5 px-3"
+        >
+          {`${dayjs(range.from).format(displayTimeFormat)} to ${dayjs(
+            range.to
+          ).format(displayTimeFormat)}`}
+        </button>
+      ))}
+    </div>
+  </div>
+);
+
+RecentlyRanges.propTypes = {
+  recentRanges: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
+  applyTimeRange: PropTypes.func
+};
+
+RecentlyRanges.defaultProps = {
+  recentRanges: [],
+  applyTimeRange: () => {}
+};

src/components/TimeRangePicker/TimePickerCalendar.js

@@ -0,0 +1,52 @@
+import PropTypes from "prop-types";
+import Calendar from "react-calendar";
+import "./index.css";
+import { GrClose } from "react-icons/gr";
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
+
+export const TimePickerCalendar = ({
+  calendarValue,
+  onChangeCalendarRange,
+  setShowCalendar
+}) => (
+  <div className="p-2 bg-gray-50 rounded-sm border border-gray-300">
+    <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={calendarValue}
+        onChange={onChangeCalendarRange}
+      />
+    </div>
+  </div>
+);
+
+TimePickerCalendar.propTypes = {
+  calendarValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+  onChangeCalendarRange: PropTypes.func,
+  setShowCalendar: PropTypes.func
+};
+
+TimePickerCalendar.defaultProps = {
+  calendarValue: null,
+  onChangeCalendarRange: () => {},
+  setShowCalendar: () => {}
+};

src/components/TimeRangePicker/TimePickerInput.js

@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+import { FaRegCalendarAlt } from "react-icons/fa";
+import { FiAlertTriangle } from "react-icons/fi";
+import clsx from "clsx";
+import "./index.css";
+
+export const TimePickerInput = ({
+  inputValue,
+  setInputValue,
+  setShowCalendar,
+  error
+}) => (
+  <div className="input-range-box">
+    <div className="flex">
+      <div>
+        <input
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onClick={() => setShowCalendar(false)}
+          className={clsx(
+            "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",
+            { "border-red-300": error }
+          )}
+        />
+      </div>
+      <div className="flex bg-gray-200 hover:bg-gray-300 ml-0.5 rounded-sm">
+        <button
+          type="button"
+          onClick={() => setShowCalendar((prevState) => !prevState)}
+          className="px-1 mx-1"
+        >
+          <FaRegCalendarAlt color="#303030" />
+        </button>
+      </div>
+    </div>
+    {error && (
+      <div className="error-range-box">
+        <div className="mt-0.5 mr-1">
+          <FiAlertTriangle />
+        </div>
+        <div>{error}</div>
+      </div>
+    )}
+  </div>
+);
+
+TimePickerInput.propTypes = {
+  inputValue: PropTypes.string,
+  setInputValue: PropTypes.func,
+  error: PropTypes.string,
+  setShowCalendar: PropTypes.func
+};
+
+TimePickerInput.defaultProps = {
+  inputValue: "",
+  setInputValue: () => {},
+  error: null,
+  setShowCalendar: () => {}
+};