@onewelcome/react-lib-components 8.5.0 → 8.7.0

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss

@@ -0,0 +1,134 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  min-width: 40rem;
+
+  .content-wrapper {
+    display: flex;
+  }
+
+  .aside {
+    display: flex;
+    flex-direction: column;
+
+    width: 9.25rem;
+    border-right: 1px solid var(--color-blue-grey100);
+  }
+
+  .aside-menu {
+    margin: 0.5rem 0;
+    padding: 0;
+
+    white-space: nowrap;
+
+    list-style: none;
+  }
+
+  .aside-menu-item {
+    height: 2rem;
+
+    button {
+      padding: 0.5rem 0.75rem;
+
+      font-size: 0.75rem;
+      line-height: 1rem;
+      text-align: start;
+    }
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    flex-grow: 1;
+
+    padding: 2rem 2rem 0 2rem;
+
+    &.has-error {
+      //left it in px - height + margin of the error text span in the input wrapper
+      gap: calc(2rem - 15.5681px);
+    }
+  }
+
+  .controls-panel {
+    display: flex;
+    gap: 2rem;
+
+    & > * {
+      flex-grow: 1;
+    }
+
+    &.set-height {
+      min-height: 17.5rem;
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-grow: 1;
+
+    width: calc(100% - 3rem);
+    border-top: 1px solid var(--color-blue-grey100);
+    padding: 1rem 1.5rem;
+  }
+
+  .input {
+    margin-top: 0;
+    max-width: 14rem;
+
+    label {
+      font-size: 0.75rem;
+    }
+  }
+
+  .nav {
+    position: absolute;
+  }
+
+  .next-button {
+    position: absolute;
+    left: 27.3125rem;
+    top: 0;
+  }
+
+  .prev-button {
+    position: absolute;
+    top: 0;
+  }
+
+  .month-caption {
+    width: 100%;
+    height: 2.5rem;
+    margin: 0;
+    padding: 0.75rem 0;
+
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    text-align: center;
+  }
+}
+
+.error-message {
+  font-size: 0.625rem;
+}

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,267 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useState } from "react";
+import { Popover } from "../../../Popover/Popover";
+import classes from "./DateTimePicker.module.scss";
+import { Button } from "../../../Button/Button";
+import { DateRange } from "react-day-picker";
+import {
+  CUSTOM_DATE_RANGE,
+  FIVE_MINUTES,
+  ONE_HOUR,
+  ONE_MINUTE,
+  THIRTY_SECONDS,
+  TWENTY_FOUR_HOURS,
+  formatInputDate
+} from "./DateTimeService";
+import { SideMenu } from "./SideMenu";
+import { addSeconds } from "date-fns";
+import { DateTimePickerInputSection } from "./DateTimePickerInputSection";
+import { DateTimePickerCalendarSection } from "./DateTimePickerCalendarSection";
+import { DateTimeFilter, DateTimeFilterType } from "../DataGridFilters.interfaces";
+import { useRepeatFocus } from "../../../../hooks/useRepeatFocus";
+
+export type DateTimePickerTranslations = {
+  errors: {
+    dateFormatError: string;
+  };
+  previousMonth: string;
+  nextMonth: string;
+  from: string;
+  to: string;
+  cancel: string;
+  apply: string;
+  dateInputPlaceholder: string;
+};
+
+export type Props = {
+  popoverRef: React.RefObject<HTMLDivElement>;
+  anchorRef?: React.RefObject<HTMLDivElement>;
+  isOpen: boolean;
+  onTagCaptionChange: (value: string) => void;
+  setPickerOpen: (open: boolean) => void;
+  translations?: DateTimePickerTranslations;
+  dateFilterValue?: DateTimeFilter;
+  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+};
+
+export type SideMenuItem = {
+  id: DateTimeFilterType;
+  name: string;
+  rangeSeconds?: number;
+};
+
+export const dateFormat = "yyyy-mm-dd hh:mm:ss";
+
+const sideMenuItems: SideMenuItem[] = [
+  { id: THIRTY_SECONDS, name: "Last 30 seconds", rangeSeconds: 30 },
+  { id: ONE_MINUTE, name: "Last 1 minute", rangeSeconds: 60 },
+  { id: FIVE_MINUTES, name: "Last 5 minutes", rangeSeconds: 300 },
+  { id: ONE_HOUR, name: "Last 1 hour", rangeSeconds: 3600 },
+  { id: TWENTY_FOUR_HOURS, name: "Last 24 hours", rangeSeconds: 86400 },
+  { id: CUSTOM_DATE_RANGE, name: "Custom" }
+];
+
+export const DateTimePicker = ({
+  anchorRef,
+  popoverRef,
+  isOpen,
+  setPickerOpen,
+  onTagCaptionChange,
+  translations = {
+    errors: {
+      dateFormatError: `The format must be ${dateFormat}`
+    },
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    from: "From",
+    to: "To",
+    cancel: "Cancel",
+    apply: "Apply",
+    dateInputPlaceholder: dateFormat
+  },
+  dateFilterValue,
+  onDateFilterValueChange
+}: Props) => {
+  const {
+    errors: { dateFormatError },
+    previousMonth,
+    nextMonth,
+    cancel,
+    from,
+    to,
+    apply,
+    dateInputPlaceholder
+  } = translations;
+  const [selectedDate, setSelectedDate] = useState<DateRange>({
+    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,
+    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined
+  });
+  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(
+    sideMenuItems[0].id
+  );
+  const [fromDateText, setFromDateText] = useState("");
+  const [toDateText, setToDateText] = useState("");
+  const [fromDateError, setFromDateError] = useState("");
+  const [toDateError, setToDateError] = useState("");
+  useRepeatFocus(popoverRef);
+
+  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;
+
+  useEffect(() => {
+    if (isOpen) {
+      popoverRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (dateFilterValue) {
+      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);
+
+      foundItem && onTagCaptionChange(foundItem.name);
+
+      setSelectedPredefinedRange(dateFilterValue.type);
+
+      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {
+        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);
+        const toDate = new Date();
+
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+        setSelectedDate({ from: fromDate, to: toDate });
+
+        return;
+      }
+
+      dateFilterValue.fromDate &&
+        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));
+
+      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));
+
+      setSelectedDate({
+        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,
+        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined
+      });
+    }
+  }, [dateFilterValue]);
+
+  useEffect(() => {
+    if (!dateFilterValue) {
+      isOpen && onSideMenuItemSelect(selectedPredefinedRange);
+    }
+  }, [isOpen, dateFilterValue]);
+
+  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {
+    setSelectedPredefinedRange(itemId);
+    const foundItem = sideMenuItems.find(item => item.id === itemId);
+    foundItem && onTagCaptionChange(foundItem.name);
+
+    if (itemId !== CUSTOM_DATE_RANGE) {
+      if (!foundItem) {
+        return;
+      }
+
+      if (foundItem.rangeSeconds) {
+        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);
+        const toDate = new Date();
+
+        setSelectedDate({ from: fromDate, to: toDate });
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+      }
+    }
+  };
+
+  const closeDateTimePicker = () => {
+    setPickerOpen(false);
+  };
+
+  const saveDateTimePicker = () => {
+    onDateFilterValueChange &&
+      onDateFilterValueChange({
+        toDate: selectedDate.to?.toISOString() ?? "",
+        fromDate: selectedDate.from?.toISOString() ?? "",
+        type: selectedPredefinedRange
+      });
+    setPickerOpen(false);
+  };
+
+  return (
+    <Popover
+      tabIndex={-1}
+      anchorEl={anchorRef}
+      ref={popoverRef}
+      show={isOpen}
+      placement={{ horizontal: "left", vertical: "bottom" }}
+      transformOrigin={{ horizontal: "left", vertical: "top" }}
+    >
+      {isOpen && (
+        <div className={classes["popover"]}>
+          <div className={classes["content-wrapper"]}>
+            <div className={classes["aside"]}>
+              <SideMenu
+                sideMenuItems={sideMenuItems}
+                selectedItemId={selectedPredefinedRange}
+                onItemSelect={onSideMenuItemSelect}
+              />
+            </div>
+            <div
+              className={`${classes["controls"]} ${toDateError || fromDateError ? classes["has-error"] : ""}`}
+            >
+              <div className={classes["controls-panel"]}>
+                <DateTimePickerInputSection
+                  from={from}
+                  to={to}
+                  dateInputPlaceholder={dateInputPlaceholder}
+                  dateFormatError={dateFormatError}
+                  fromDateText={fromDateText}
+                  toDateText={toDateText}
+                  fromDateError={fromDateError}
+                  toDateError={toDateError}
+                  setSelectedDate={setSelectedDate}
+                  setFromDateText={setFromDateText}
+                  setToDateText={setToDateText}
+                  setFromDateError={setFromDateError}
+                  setToDateError={setToDateError}
+                />
+              </div>
+              <div className={`${classes["controls-panel"]} ${classes["set-height"]}`}>
+                <DateTimePickerCalendarSection
+                  previousMonth={previousMonth}
+                  nextMonth={nextMonth}
+                  selectedDate={selectedDate}
+                  disableDateRangePickers={disableDateRangePickers}
+                  setSelectedDate={setSelectedDate}
+                  setFromDateText={setFromDateText}
+                  setFromDateError={setFromDateError}
+                  setToDateText={setToDateText}
+                  setToDateError={setToDateError}
+                />
+              </div>
+            </div>
+          </div>
+          <div className={classes["actions"]}>
+            <Button variant="text" onClick={closeDateTimePicker}>
+              {cancel}
+            </Button>
+            <Button onClick={saveDateTimePicker}>{apply}</Button>
+          </div>
+        </div>
+      )}
+    </Popover>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+import classes from "./DateTimePicker.module.scss";
+import { DatePicker } from "../../../DatePicker/DatePicker";
+import { IconButton } from "../../../Button/IconButton";
+import { DateRange } from "react-day-picker";
+import { formatInputDate, getMonthName, getYearFromDate } from "./DateTimeService";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Typography } from "../../../Typography/Typography";
+
+type Props = {
+  previousMonth: string;
+  nextMonth: string;
+  selectedDate: DateRange | undefined;
+  disableDateRangePickers: boolean;
+  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;
+  setFromDateText: React.Dispatch<React.SetStateAction<string>>;
+  setToDateText: React.Dispatch<React.SetStateAction<string>>;
+  setFromDateError: React.Dispatch<React.SetStateAction<string>>;
+  setToDateError: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const DateTimePickerCalendarSection = ({
+  previousMonth,
+  nextMonth,
+  selectedDate,
+  disableDateRangePickers,
+  setSelectedDate,
+  setFromDateText,
+  setFromDateError,
+  setToDateError,
+  setToDateText
+}: Props) => {
+  const onDatePickerSelect = (date: Date | DateRange | undefined): void => {
+    if (date) {
+      setSelectedDate(date as DateRange);
+
+      const fromDate = (date as DateRange).from;
+      const toDate = (date as DateRange).to;
+
+      if (fromDate) {
+        setFromDateText(formatInputDate(fromDate));
+        setFromDateError("");
+      }
+
+      if (toDate) {
+        setToDateText(formatInputDate(toDate));
+        setToDateError("");
+      }
+    }
+  };
+  return (
+    <DatePicker
+      onSelect={onDatePickerSelect}
+      value={selectedDate}
+      disabled={disableDateRangePickers}
+      mode={"range"}
+      components={{
+        Nav: ({ onNextClick, onPreviousClick }) => (
+          <div className={classes["nav"]}>
+            <IconButton
+              title={previousMonth}
+              onClick={onPreviousClick}
+              className={classes["prev-button"]}
+              disabled={disableDateRangePickers}
+            >
+              <Icon size="0.75rem" icon={Icons.ChevronLeft} />
+            </IconButton>
+            <IconButton
+              title={nextMonth}
+              onClick={onNextClick}
+              className={classes["next-button"]}
+              disabled={disableDateRangePickers}
+            >
+              <Icon size="0.75rem" icon={Icons.ChevronRight} />
+            </IconButton>
+          </div>
+        ),
+        MonthCaption: ({ calendarMonth }) => (
+          <Typography className={classes["month-caption"]} variant="body">
+            {getMonthName(calendarMonth.date)} {getYearFromDate(calendarMonth.date)}
+          </Typography>
+        )
+      }}
+      numberOfMonths={2}
+    />
+  );
+};

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { Fragment } from "react";
+import { InputWrapper } from "../../../Form/Wrapper/InputWrapper/InputWrapper";
+import classes from "./DateTimePicker.module.scss";
+import { parse } from "date-fns";
+import { DateRange } from "react-day-picker";
+
+export type Props = {
+  from: string;
+  to: string;
+  dateInputPlaceholder: string;
+  dateFormatError: string;
+  fromDateText: string;
+  toDateText: string;
+  fromDateError: string;
+  toDateError: string;
+  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;
+  setFromDateText: React.Dispatch<React.SetStateAction<string>>;
+  setToDateText: React.Dispatch<React.SetStateAction<string>>;
+  setFromDateError: React.Dispatch<React.SetStateAction<string>>;
+  setToDateError: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const DateTimePickerInputSection = ({
+  from,
+  to,
+  dateInputPlaceholder,
+  dateFormatError,
+  toDateText,
+  fromDateText,
+  fromDateError,
+  toDateError,
+  setSelectedDate,
+  setFromDateText,
+  setToDateText,
+  setFromDateError,
+  setToDateError
+}: Props) => {
+  const dateParseTemplate = "yyyy-MM-dd HH:mm:ss";
+  const parseDate = (date: string) => {
+    const dateText = parse(date, dateParseTemplate, new Date());
+    return dateText;
+  };
+
+  const validationRegex =
+    /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\d|3[01]) ([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
+  const validateInput = (text: string) => validationRegex.test(text);
+
+  const onInputBlur =
+    (setError: (value: React.SetStateAction<string>) => void, setDate: (value: string) => void) =>
+    (e: React.FocusEvent<HTMLInputElement, Element>) => {
+      if (!validateInput(e.target.value)) {
+        setError(dateFormatError);
+        return;
+      }
+
+      setDate(e.target.value);
+      setError("");
+    };
+
+  const setFromDate = (value: string) =>
+    setSelectedDate(prev => ({ ...prev, from: parseDate(value) }));
+
+  const setToDate = (value: string) =>
+    setSelectedDate(prev => ({ from: prev?.from, to: parseDate(value) }));
+
+  const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);
+  const onToInputBlur = onInputBlur(setToDateError, setToDate);
+
+  return (
+    <Fragment>
+      <InputWrapper
+        label={from}
+        name="fromDate"
+        error={!!fromDateError}
+        errorMessage={fromDateError}
+        errorMessageProps={{ className: classes["error-message"] }}
+        helperProps={{
+          style: { fontSize: "0.625rem" }
+        }}
+        type="text"
+        value={fromDateText}
+        onBlur={onFromInputBlur}
+        onChange={e => setFromDateText(e.target.value)}
+        inputProps={{ style: { height: "2rem" }, placeholder: dateInputPlaceholder }}
+        className={classes["input"]}
+      />
+      <InputWrapper
+        className={classes["input"]}
+        inputProps={{ style: { height: "2rem" }, placeholder: dateInputPlaceholder }}
+        label={to}
+        value={toDateText}
+        error={!!toDateError}
+        errorMessage={toDateError}
+        errorMessageProps={{ className: classes["error-message"] }}
+        helperProps={{
+          style: { fontSize: "0.625rem" }
+        }}
+        onChange={e => setToDateText(e.target.value)}
+        onBlur={onToInputBlur}
+        name="toDate"
+        type="text"
+      />
+    </Fragment>
+  );
+};

package/src/{hooks/useBodyClick.ts → components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.ts}

@@ -14,23 +14,17 @@
  *    limitations under the License.
  */
 
-import { useEffect } from "react";
+import { format, Locale } from "date-fns";
 
-export const useBodyClick = (
-  checkFunction: (event: MouseEvent) => boolean,
-  callbackFunction: (...args: unknown[]) => unknown,
-  dependingStateVariable: React.ComponentState | React.ComponentState[]
-) => {
-  function bodyClickListener(event: MouseEvent) {
-    if (checkFunction(event)) {
-      callbackFunction();
-    }
-  }
-  useEffect(() => {
-    window.addEventListener("click", bodyClickListener);
+export const THIRTY_SECONDS = "THIRTY_SECONDS";
+export const ONE_MINUTE = "ONE_MINUTE";
+export const FIVE_MINUTES = "FIVE_MINUTES";
+export const ONE_HOUR = "ONE_HOUR";
+export const TWENTY_FOUR_HOURS = "TWENTY_FOUR_HOURS";
+export const CUSTOM_DATE_RANGE = "CUSTOM";
 
-    return () => {
-      window.removeEventListener("click", bodyClickListener);
-    };
-  }, [dependingStateVariable]);
-};
+export const getMonthName = (date: Date, locale?: Locale) => format(date, "MMMM", { locale });
+
+export const getYearFromDate = (date: Date) => format(date, "yyyy");
+
+export const formatInputDate = (date: Date) => format(date, "yyyy-MM-dd HH:mm:ss");