@addev-be/ui 0.11.7 → 0.12.0

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

@@ -1,78 +1,78 @@
-import { DataGridContext, DataGridFilter } from '../types';
-import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { FilterModalContent } from '../FilterModalContent';
-import { Modal } from '../../../layout/Modal';
-import { useDataGridContext } from '../hooks';
-
-export const useFilterModal = <R,>({
-  columnKey,
-  context,
-  onClose,
-}: {
-  columnKey: string;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
-  const column = columns[columnKey];
-  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
-    filters[columnKey] ?? column?.filter
-  );
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-    onClose?.();
-  }, [onClose]);
-
-  const onClearClicked = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    closeModal();
-  }, [closeModal, columnKey, filters, setFilters]);
-
-  const onApplyClicked = useCallback(() => {
-    setFilters({ ...filters, [columnKey]: currentFilter });
-    closeModal();
-  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
-
-  const onCancelClicked = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-
-  const modal = isVisible ? (
-    <Modal>
-      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
-      <Modal.ContentWithIcon>
-        <FilterIcon fill="var(--color-primary-400)" />
-        <FilterModalContent
-          filter={currentFilter}
-          onFilterChanged={setCurrentFilter}
-        />
-      </Modal.ContentWithIcon>
-      <Modal.Buttons>
-        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
-          Supprimer
-        </Button>
-        <Button
-          style={{ marginLeft: 'auto' }}
-          $color="primary"
-          icon={FilterIcon}
-          onClick={onApplyClicked}
-        >
-          Filtrer
-        </Button>
-        <Button onClick={onCancelClicked}>Annuler</Button>
-      </Modal.Buttons>
-    </Modal>
-  ) : null;
-
-  return { openModal, closeModal, modal };
-};
+import { DataGridContext, DataGridFilter } from '../types';
+import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { FilterModalContent } from '../FilterModalContent';
+import { Modal } from '../../../layout/Modal';
+import { useDataGridContext } from '../hooks';
+
+export const useFilterModal = <R,>({
+  columnKey,
+  context,
+  onClose,
+}: {
+  columnKey: string;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
+  const column = columns[columnKey];
+  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
+    filters[columnKey] ?? column?.filter
+  );
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  const onClearClicked = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[columnKey];
+    setFilters(newFilters);
+    closeModal();
+  }, [closeModal, columnKey, filters, setFilters]);
+
+  const onApplyClicked = useCallback(() => {
+    setFilters({ ...filters, [columnKey]: currentFilter });
+    closeModal();
+  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
+
+  const onCancelClicked = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+
+  const modal = isVisible ? (
+    <Modal>
+      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
+      <Modal.ContentWithIcon>
+        <FilterIcon fill="var(--color-primary-400)" />
+        <FilterModalContent
+          filter={currentFilter}
+          onFilterChanged={setCurrentFilter}
+        />
+      </Modal.ContentWithIcon>
+      <Modal.Buttons>
+        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
+          Supprimer
+        </Button>
+        <Button
+          style={{ marginLeft: 'auto' }}
+          $color="primary"
+          icon={FilterIcon}
+          onClick={onApplyClicked}
+        >
+          Filtrer
+        </Button>
+        <Button onClick={onCancelClicked}>Annuler</Button>
+      </Modal.Buttons>
+    </Modal>
+  ) : null;
+
+  return { openModal, closeModal, modal };
+};