@addev-be/ui 0.11.7 → 0.12.0

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -1,378 +1,378 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  ArrowDown19Icon,
-  ArrowDownAZIcon,
-  ArrowDownBigSmallIcon,
-  ArrowUp91Icon,
-  ArrowUpBigSmallIcon,
-  ArrowUpZAIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  IconFC,
-  MagnifierIcon,
-  SigmaIcon,
-  SortCalendarAscendingIcon,
-  SortCalendarDescendingIcon,
-  TableFooterIcon,
-  TableFooterSlashIcon,
-  TallyIcon,
-  XBarIcon,
-} from '../../../../Icons';
-import {
-  DataGridContext,
-  DataGridFilterType,
-  DataGridFilterValue,
-  DataGridFooterPredefinedFunction,
-} from '../types';
-import {
-  applyFilters,
-  defaultRendererAndFormatter,
-  getDateGroups,
-} from '../helpers';
-import { intersection, uniq, without } from 'lodash';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { ContextMenu } from '../../../ui/ContextMenu';
-import { FilterValuesScroller } from './FilterValuesScroller';
-import { Input } from '../../../forms';
-import { MenuContainer } from '../../../ui/ContextMenu/styles';
-import { useFilterModal } from './hooks';
-
-type FilterValuesProps<R> = {
-  columnKey: string;
-  columnIndex: number;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-  contextMenu?: boolean;
-  showTotalButton?: boolean;
-};
-
-const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
-  number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
-  text: ['Trier de A à Z', ArrowDownAZIcon],
-  date: ['Trier du plus ancien au plus récent', SortCalendarAscendingIcon],
-};
-const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
-  number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
-  text: ['Trier de Z à A', ArrowUpZAIcon],
-  date: ['Trier du plus récent au plus ancien', SortCalendarDescendingIcon],
-};
-
-const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
-  average: 'Moyenne',
-  avg: 'Moyenne',
-  count: 'Nombre',
-  max: 'Maximum',
-  min: 'Minimum',
-  sum: 'Somme',
-};
-const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
-  average: XBarIcon,
-  avg: XBarIcon,
-  count: TallyIcon,
-  max: ArrowUpBigSmallIcon,
-  min: ArrowDownBigSmallIcon,
-  sum: SigmaIcon,
-};
-
-export const DataGridFilterMenu = <R,>({
-  columnKey,
-  context,
-  onClose,
-  contextMenu = true,
-  showTotalButton = true,
-}: FilterValuesProps<R>) => {
-  const { openModal, modal } = useFilterModal({ columnKey, context, onClose });
-  const {
-    filters = {},
-    footers = {},
-    rows,
-    columns,
-    setFilters,
-    filterValuesLoader,
-    setSorts,
-    setFooters,
-  } = useContext(context);
-  const column = columns[columnKey] ?? {};
-  const textFilterInputRef = useRef<HTMLInputElement>(null);
-  const [textFilter, setTextFilter] = useState('');
-
-  const [availableValues, setAvailableValues] = useState<DataGridFilterValue[]>(
-    []
-  );
-
-  useEffect(() => {
-    if (filterValuesLoader) {
-      filterValuesLoader(columnKey).then((values) => {
-        setAvailableValues(() => values);
-      });
-    } else {
-      const otherFilters = Object.entries(filters)
-        .filter(([key]) => key !== columnKey)
-        .map(([, filter]) => filter);
-      const availableRows = applyFilters(rows, otherFilters);
-      const values = availableRows.map((row) => column.filter!.getter(row));
-      setAvailableValues(() =>
-        uniq(values).sort(
-          column.filter?.type === 'number'
-            ? (a, b) => (a as number) - (b as number)
-            : (a, b) => (a as string).localeCompare(b as string)
-        )
-      );
-    }
-  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
-
-  const selectedValues = useMemo(
-    () => filters?.[columnKey]?.values ?? [],
-    [columnKey, filters]
-  );
-
-  const clearFilter = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    onClose?.();
-  }, [filters, columnKey, setFilters, onClose]);
-
-  const setValuesChecked = useCallback(
-    (values: any[], checked?: boolean) => {
-      setFilters((prevFilters) => {
-        const newValues = checked
-          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
-          : without(prevFilters[columnKey]?.values ?? [], ...values);
-        const newFilters = {
-          ...prevFilters,
-        };
-        if (newValues.length === 0) {
-          delete newFilters[columnKey];
-        } else {
-          newFilters[columnKey] = {
-            ...(prevFilters[columnKey] ?? column.filter),
-            operator: 'inArray',
-            values: newValues,
-          };
-        }
-        return newFilters;
-      });
-    },
-    [setFilters, columnKey, column.filter]
-  );
-
-  const toggleValues = useCallback(
-    (values: DataGridFilterValue[]) => {
-      const checked =
-        intersection(selectedValues, values).length === values.length;
-      setValuesChecked(values, !checked);
-    },
-    [setValuesChecked, selectedValues]
-  );
-
-  const formatter = useMemo(
-    () => column.filter?.formatter ?? defaultRendererAndFormatter,
-    [column.filter?.formatter]
-  );
-  const renderer = useMemo(
-    () => column.filter?.renderer ?? defaultRendererAndFormatter,
-    [column.filter?.renderer]
-  );
-
-  const filteredAvailableValues = useMemo(
-    () =>
-      !textFilter
-        ? availableValues
-        : availableValues.filter((value) =>
-            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
-          ),
-    [availableValues, formatter, textFilter]
-  );
-
-  useEffect(() => {
-    if (textFilterInputRef.current) {
-      textFilterInputRef.current.focus();
-    }
-  }, []);
-
-  const checkboxesComponent = useMemo(() => {
-    const groups =
-      column.type === 'date'
-        ? getDateGroups(filteredAvailableValues)
-        : undefined;
-    return (
-      <FilterValuesScroller
-        values={filteredAvailableValues}
-        selectedValues={selectedValues}
-        onToggle={toggleValues}
-        formatter={formatter}
-        renderer={renderer}
-        groups={groups}
-      />
-    );
-  }, [
-    column.type,
-    filteredAvailableValues,
-    formatter,
-    renderer,
-    selectedValues,
-    toggleValues,
-  ]);
-
-  const onSortAscClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'asc' });
-    onClose?.();
-  }, [columnKey, onClose, setSorts]);
-  const onSortDescClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'desc' });
-    onClose?.();
-  }, [columnKey, onClose, setSorts]);
-
-  const hasFilters = filters[columnKey]?.values.length > 0;
-  const [[sortAscText, SortAscIcon], [sortDescText, SortDescIcon]] = [
-    sortAsc[column.filter?.type ?? 'text'],
-    sortDesc[column.filter?.type ?? 'text'],
-  ];
-
-  const isFooterVisible =
-    columnKey in footers && footers[columnKey] !== undefined;
-  const showFooter = useCallback(
-    (key: string) => {
-      setFooters((prevFooters) => ({
-        ...prevFooters,
-        [columnKey]: key,
-      }));
-      onClose?.();
-    },
-    [columnKey, onClose, setFooters]
-  );
-  const hideFooter = useCallback(() => {
-    setFooters((prevFooters) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { [columnKey]: _, ...newFooters } = prevFooters;
-      return newFooters;
-    });
-    onClose?.();
-  }, [columnKey, onClose, setFooters]);
-
-  const content = (
-    <>
-      {modal}
-      {column.sortGetter && (
-        <>
-          <ContextMenu.Item onClick={onSortAscClicked}>
-            <SortAscIcon />
-            {sortAscText}
-          </ContextMenu.Item>
-          <ContextMenu.Item onClick={onSortDescClicked}>
-            <SortDescIcon />
-            {sortDescText}
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {isFooterVisible && typeof column.footer === 'function' && (
-        <>
-          <ContextMenu.Item onClick={hideFooter}>
-            <TableFooterSlashIcon />
-            Masquer le total
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {showTotalButton && (
-        <>
-          {!isFooterVisible && typeof column.footer === 'function' && (
-            <>
-              <ContextMenu.Item onClick={() => showFooter('count')}>
-                <TableFooterIcon />
-                Afficher le total
-              </ContextMenu.Item>
-              <ContextMenu.Divider />
-            </>
-          )}
-          {showTotalButton && typeof column.footer === 'object' && (
-            <>
-              <ContextMenu.ParentItem>
-                <TableFooterIcon />
-                Afficher le total
-                <ContextMenu.SubMenu>
-                  {Object.keys(column.footer).map((key) => {
-                    const TotalIcon =
-                      footerFunctionsIcons[
-                        key as DataGridFooterPredefinedFunction
-                      ] ?? TableFooterIcon;
-                    return (
-                      <ContextMenu.Item
-                        key={key}
-                        onClick={() => showFooter(key)}
-                      >
-                        <TotalIcon />
-                        {key in footerFunctionsTexts
-                          ? footerFunctionsTexts[
-                              key as DataGridFooterPredefinedFunction
-                            ]
-                          : key}
-                      </ContextMenu.Item>
-                    );
-                  })}
-                  <ContextMenu.Divider />
-                  <ContextMenu.Item
-                    onClick={hideFooter}
-                    disabled={!isFooterVisible}
-                  >
-                    <TableFooterSlashIcon />
-                    Masquer le total
-                  </ContextMenu.Item>
-                </ContextMenu.SubMenu>
-              </ContextMenu.ParentItem>
-              <ContextMenu.Divider />
-            </>
-          )}
-        </>
-      )}
-      <ContextMenu.Item onClick={openModal}>
-        <FilterIcon />
-        Filtrer ...
-      </ContextMenu.Item>
-      <ContextMenu.Item
-        $color="danger"
-        onClick={clearFilter}
-        disabled={!hasFilters}
-      >
-        <FilterSlashIcon />
-        Supprimer le filtre
-      </ContextMenu.Item>
-      <ContextMenu.Divider />
-      <styles.InputContainer>
-        <MagnifierIcon />
-        <Input
-          ref={textFilterInputRef}
-          type="text"
-          name="search"
-          id="search"
-          placeholder="Rechercher ..."
-          value={textFilter}
-          onChange={(e) => setTextFilter(e.target.value)}
-        />
-      </styles.InputContainer>
-      <styles.CheckboxesContainer>
-        {checkboxesComponent}
-      </styles.CheckboxesContainer>
-    </>
-  );
-
-  if (!contextMenu) {
-    return <MenuContainer>{content}</MenuContainer>;
-  }
-
-  return <ContextMenu>{content}</ContextMenu>;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import {
+  ArrowDown19Icon,
+  ArrowDownAZIcon,
+  ArrowDownBigSmallIcon,
+  ArrowUp91Icon,
+  ArrowUpBigSmallIcon,
+  ArrowUpZAIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  IconFC,
+  MagnifierIcon,
+  SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TallyIcon,
+  XBarIcon,
+} from '../../../../Icons';
+import {
+  DataGridContext,
+  DataGridFilterType,
+  DataGridFilterValue,
+  DataGridFooterPredefinedFunction,
+} from '../types';
+import {
+  applyFilters,
+  defaultRendererAndFormatter,
+  getDateGroups,
+} from '../helpers';
+import { intersection, uniq, without } from 'lodash';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { ContextMenu } from '../../../ui/ContextMenu';
+import { FilterValuesScroller } from './FilterValuesScroller';
+import { Input } from '../../../forms';
+import { MenuContainer } from '../../../ui/ContextMenu/styles';
+import { useFilterModal } from './hooks';
+
+type FilterValuesProps<R> = {
+  columnKey: string;
+  columnIndex: number;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+  contextMenu?: boolean;
+  showTotalButton?: boolean;
+};
+
+const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
+  number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
+  text: ['Trier de A à Z', ArrowDownAZIcon],
+  date: ['Trier du plus ancien au plus récent', SortCalendarAscendingIcon],
+};
+const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
+  number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
+  text: ['Trier de Z à A', ArrowUpZAIcon],
+  date: ['Trier du plus récent au plus ancien', SortCalendarDescendingIcon],
+};
+
+const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
+  average: 'Moyenne',
+  avg: 'Moyenne',
+  count: 'Nombre',
+  max: 'Maximum',
+  min: 'Minimum',
+  sum: 'Somme',
+};
+const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
+  average: XBarIcon,
+  avg: XBarIcon,
+  count: TallyIcon,
+  max: ArrowUpBigSmallIcon,
+  min: ArrowDownBigSmallIcon,
+  sum: SigmaIcon,
+};
+
+export const DataGridFilterMenu = <R,>({
+  columnKey,
+  context,
+  onClose,
+  contextMenu = true,
+  showTotalButton = true,
+}: FilterValuesProps<R>) => {
+  const { openModal, modal } = useFilterModal({ columnKey, context, onClose });
+  const {
+    filters = {},
+    footers = {},
+    rows,
+    columns,
+    setFilters,
+    filterValuesLoader,
+    setSorts,
+    setFooters,
+  } = useContext(context);
+  const column = columns[columnKey] ?? {};
+  const textFilterInputRef = useRef<HTMLInputElement>(null);
+  const [textFilter, setTextFilter] = useState('');
+
+  const [availableValues, setAvailableValues] = useState<DataGridFilterValue[]>(
+    []
+  );
+
+  useEffect(() => {
+    if (filterValuesLoader) {
+      filterValuesLoader(columnKey).then((values) => {
+        setAvailableValues(() => values);
+      });
+    } else {
+      const otherFilters = Object.entries(filters)
+        .filter(([key]) => key !== columnKey)
+        .map(([, filter]) => filter);
+      const availableRows = applyFilters(rows, otherFilters);
+      const values = availableRows.map((row) => column.filter!.getter(row));
+      setAvailableValues(() =>
+        uniq(values).sort(
+          column.filter?.type === 'number'
+            ? (a, b) => (a as number) - (b as number)
+            : (a, b) => (a as string).localeCompare(b as string)
+        )
+      );
+    }
+  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+
+  const selectedValues = useMemo(
+    () => filters?.[columnKey]?.values ?? [],
+    [columnKey, filters]
+  );
+
+  const clearFilter = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[columnKey];
+    setFilters(newFilters);
+    onClose?.();
+  }, [filters, columnKey, setFilters, onClose]);
+
+  const setValuesChecked = useCallback(
+    (values: any[], checked?: boolean) => {
+      setFilters((prevFilters) => {
+        const newValues = checked
+          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
+          : without(prevFilters[columnKey]?.values ?? [], ...values);
+        const newFilters = {
+          ...prevFilters,
+        };
+        if (newValues.length === 0) {
+          delete newFilters[columnKey];
+        } else {
+          newFilters[columnKey] = {
+            ...(prevFilters[columnKey] ?? column.filter),
+            operator: 'inArray',
+            values: newValues,
+          };
+        }
+        return newFilters;
+      });
+    },
+    [setFilters, columnKey, column.filter]
+  );
+
+  const toggleValues = useCallback(
+    (values: DataGridFilterValue[]) => {
+      const checked =
+        intersection(selectedValues, values).length === values.length;
+      setValuesChecked(values, !checked);
+    },
+    [setValuesChecked, selectedValues]
+  );
+
+  const formatter = useMemo(
+    () => column.filter?.formatter ?? defaultRendererAndFormatter,
+    [column.filter?.formatter]
+  );
+  const renderer = useMemo(
+    () => column.filter?.renderer ?? defaultRendererAndFormatter,
+    [column.filter?.renderer]
+  );
+
+  const filteredAvailableValues = useMemo(
+    () =>
+      !textFilter
+        ? availableValues
+        : availableValues.filter((value) =>
+            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
+          ),
+    [availableValues, formatter, textFilter]
+  );
+
+  useEffect(() => {
+    if (textFilterInputRef.current) {
+      textFilterInputRef.current.focus();
+    }
+  }, []);
+
+  const checkboxesComponent = useMemo(() => {
+    const groups =
+      column.type === 'date'
+        ? getDateGroups(filteredAvailableValues)
+        : undefined;
+    return (
+      <FilterValuesScroller
+        values={filteredAvailableValues}
+        selectedValues={selectedValues}
+        onToggle={toggleValues}
+        formatter={formatter}
+        renderer={renderer}
+        groups={groups}
+      />
+    );
+  }, [
+    column.type,
+    filteredAvailableValues,
+    formatter,
+    renderer,
+    selectedValues,
+    toggleValues,
+  ]);
+
+  const onSortAscClicked = useCallback(() => {
+    setSorts({ [columnKey]: 'asc' });
+    onClose?.();
+  }, [columnKey, onClose, setSorts]);
+  const onSortDescClicked = useCallback(() => {
+    setSorts({ [columnKey]: 'desc' });
+    onClose?.();
+  }, [columnKey, onClose, setSorts]);
+
+  const hasFilters = filters[columnKey]?.values.length > 0;
+  const [[sortAscText, SortAscIcon], [sortDescText, SortDescIcon]] = [
+    sortAsc[column.filter?.type ?? 'text'],
+    sortDesc[column.filter?.type ?? 'text'],
+  ];
+
+  const isFooterVisible =
+    columnKey in footers && footers[columnKey] !== undefined;
+  const showFooter = useCallback(
+    (key: string) => {
+      setFooters((prevFooters) => ({
+        ...prevFooters,
+        [columnKey]: key,
+      }));
+      onClose?.();
+    },
+    [columnKey, onClose, setFooters]
+  );
+  const hideFooter = useCallback(() => {
+    setFooters((prevFooters) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { [columnKey]: _, ...newFooters } = prevFooters;
+      return newFooters;
+    });
+    onClose?.();
+  }, [columnKey, onClose, setFooters]);
+
+  const content = (
+    <>
+      {modal}
+      {column.sortGetter && (
+        <>
+          <ContextMenu.Item onClick={onSortAscClicked}>
+            <SortAscIcon />
+            {sortAscText}
+          </ContextMenu.Item>
+          <ContextMenu.Item onClick={onSortDescClicked}>
+            <SortDescIcon />
+            {sortDescText}
+          </ContextMenu.Item>
+          <ContextMenu.Divider />
+        </>
+      )}
+      {isFooterVisible && typeof column.footer === 'function' && (
+        <>
+          <ContextMenu.Item onClick={hideFooter}>
+            <TableFooterSlashIcon />
+            Masquer le total
+          </ContextMenu.Item>
+          <ContextMenu.Divider />
+        </>
+      )}
+      {showTotalButton && (
+        <>
+          {!isFooterVisible && typeof column.footer === 'function' && (
+            <>
+              <ContextMenu.Item onClick={() => showFooter('count')}>
+                <TableFooterIcon />
+                Afficher le total
+              </ContextMenu.Item>
+              <ContextMenu.Divider />
+            </>
+          )}
+          {showTotalButton && typeof column.footer === 'object' && (
+            <>
+              <ContextMenu.ParentItem>
+                <TableFooterIcon />
+                Afficher le total
+                <ContextMenu.SubMenu>
+                  {Object.keys(column.footer).map((key) => {
+                    const TotalIcon =
+                      footerFunctionsIcons[
+                        key as DataGridFooterPredefinedFunction
+                      ] ?? TableFooterIcon;
+                    return (
+                      <ContextMenu.Item
+                        key={key}
+                        onClick={() => showFooter(key)}
+                      >
+                        <TotalIcon />
+                        {key in footerFunctionsTexts
+                          ? footerFunctionsTexts[
+                              key as DataGridFooterPredefinedFunction
+                            ]
+                          : key}
+                      </ContextMenu.Item>
+                    );
+                  })}
+                  <ContextMenu.Divider />
+                  <ContextMenu.Item
+                    onClick={hideFooter}
+                    disabled={!isFooterVisible}
+                  >
+                    <TableFooterSlashIcon />
+                    Masquer le total
+                  </ContextMenu.Item>
+                </ContextMenu.SubMenu>
+              </ContextMenu.ParentItem>
+              <ContextMenu.Divider />
+            </>
+          )}
+        </>
+      )}
+      <ContextMenu.Item onClick={openModal}>
+        <FilterIcon />
+        Filtrer ...
+      </ContextMenu.Item>
+      <ContextMenu.Item
+        $color="danger"
+        onClick={clearFilter}
+        disabled={!hasFilters}
+      >
+        <FilterSlashIcon />
+        Supprimer le filtre
+      </ContextMenu.Item>
+      <ContextMenu.Divider />
+      <styles.InputContainer>
+        <MagnifierIcon />
+        <Input
+          ref={textFilterInputRef}
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Rechercher ..."
+          value={textFilter}
+          onChange={(e) => setTextFilter(e.target.value)}
+        />
+      </styles.InputContainer>
+      <styles.CheckboxesContainer>
+        {checkboxesComponent}
+      </styles.CheckboxesContainer>
+    </>
+  );
+
+  if (!contextMenu) {
+    return <MenuContainer>{content}</MenuContainer>;
+  }
+
+  return <ContextMenu>{content}</ContextMenu>;
+};