@onewelcome/react-lib-components 8.6.0 → 8.7.0

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/{dist/esm/src/hooks/useBodyClick.esm.js → src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.ts}

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 /*
  * Copyright 2022 OneWelcome B.V.
  *
@@ -15,19 +13,18 @@ import { useEffect } from 'react';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const useBodyClick = (checkFunction, callbackFunction, dependingStateVariable) => {
-    function bodyClickListener(event) {
-        if (checkFunction(event)) {
-            callbackFunction();
-        }
-    }
-    useEffect(() => {
-        window.addEventListener("click", bodyClickListener);
-        return () => {
-            window.removeEventListener("click", bodyClickListener);
-        };
-    }, [dependingStateVariable]);
-};
 
-export { useBodyClick };
-//# sourceMappingURL=useBodyClick.esm.js.map
+import { format, Locale } from "date-fns";
+
+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";
+
+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");

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

@@ -0,0 +1,50 @@
+/*
+ * 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 contextMenuItemClasses from "../../../ContextMenu/ContextMenuItem.module.scss";
+import { SideMenuItem } from "./DateTimePicker";
+import { DateTimeFilterType } from "../DataGridFilters.interfaces";
+
+type Props = {
+  sideMenuItems: SideMenuItem[];
+  selectedItemId: string;
+  onItemSelect: (id: DateTimeFilterType) => void;
+};
+
+export const SideMenu = ({ sideMenuItems, selectedItemId, onItemSelect }: Props) => {
+  return (
+    <ul className={classes["aside-menu"]}>
+      {sideMenuItems.map(item => (
+        <li
+          key={item.id}
+          role="none"
+          className={`${contextMenuItemClasses["context-menu-item"]} ${classes["aside-menu-item"]}`}
+        >
+          <button
+            role="menuitem"
+            style={{ height: "2rem" }}
+            className={selectedItemId === item.id ? contextMenuItemClasses["active"] : undefined}
+            onClick={() => onItemSelect(item.id)}
+          >
+            {item.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/src/components/DataGrid/testUtils.ts

@@ -15,8 +15,9 @@
  */
 
 import { useEffect, useState } from "react";
-import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+import { DateTimeFilter, Filter } from "./DataGridFilters/DataGridFilters.interfaces";
 import { useFiltersReducer } from "./DataGridFilters/useFiltersReducer";
+import { isWithinInterval } from "date-fns";
 
 type OperatorPredicateMap<TOperator extends string> = {
   [op in TOperator]: (v1: string, v2: string) => boolean;
@@ -47,10 +48,26 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
 
   const [gridData, setGridData] = useState(data);
 
+  const filterRow = (row: T) => {
+    let shouldBeDiscarded: boolean[] = [];
+    state.filters.forEach(filter => {
+      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator];
+      shouldBeDiscarded = [
+        ...shouldBeDiscarded,
+        !reduce(filter.value, val => operatorPredicate(row[filter.column], val))
+      ];
+    });
+
+    return shouldBeDiscarded.length > 0 && shouldBeDiscarded.reduce((acc, val) => acc || val, false)
+      ? undefined
+      : row;
+  };
+
   useEffect(() => {
     const filteredData = data.map(filterRow).filter(val => {
       return val !== undefined;
-    });
+    }) as T[];
     setGridData(filteredData);
   }, [state.filters]);
 
@@ -63,20 +80,36 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
     setGridData,
     filters: state.filters
   };
+};
 
-  function filterRow(row: T) {
-    let shouldBeDiscarded: boolean[] = [];
-    state.filters.forEach(filter => {
-      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
-      const operatorPredicate = operatorPredicateMap[filter.operator];
-      shouldBeDiscarded = [
-        ...shouldBeDiscarded,
-        !reduce(filter.value, val => operatorPredicate(row[filter.column], val))
-      ];
+export const useMockFilteringByDateLogic = <T extends { [k: string]: string | Date }>(
+  data: T[],
+  dateFieldKey: string,
+  filterValue: DateTimeFilter | undefined
+) => {
+  const [gridData, setGridData] = useState(data);
+
+  const filterRowByDateRange = (date: string | Date, fromDate: string, toDate: string): boolean => {
+    return isWithinInterval(new Date(date), {
+      start: new Date(fromDate),
+      end: new Date(toDate)
     });
+  };
 
-    return shouldBeDiscarded.length > 0 && shouldBeDiscarded.reduce((acc, val) => acc || val, false)
-      ? undefined
-      : row;
-  }
+  useEffect(() => {
+    if (filterValue) {
+      const fromDate = filterValue.fromDate;
+      const toDate = filterValue.toDate;
+
+      const filteredData = data.filter(item =>
+        filterRowByDateRange(item[dateFieldKey], fromDate, toDate)
+      );
+      setGridData(filteredData);
+    }
+  }, [filterValue, data]);
+
+  return {
+    gridData,
+    setGridData
+  };
 };