@addev-be/ui 0.1.18 → 0.1.19

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

@@ -1,58 +1,58 @@
-import { useCallback, useContext, useMemo, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { DataGridColumnsEditor } from '.';
-import { DataGridContext } from '../types';
-import { Modal } from '../../../layout/Modal';
-import { mapValues } from 'lodash';
-
-export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { columns, setSettings, saveSettings } = useContext(context);
-  const [currentColumns, setCurrentColumns] = useState(columns);
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onApplyClicked = useCallback(() => {
-    const newSettings = mapValues(currentColumns, (col) => ({
-      order: col.order ?? 0,
-      width: col.width ?? 150,
-    }));
-    setSettings(() => newSettings);
-    saveSettings(newSettings);
-    closeModal();
-  }, [currentColumns, closeModal, saveSettings, setSettings]);
-
-  const modal = useMemo(
-    () =>
-      isVisible ? (
-        <Modal $width={600} $height={400}>
-          <Modal.Header>Paramètres des colonnes</Modal.Header>
-          <Modal.Content>
-            <DataGridColumnsEditor
-              columns={currentColumns}
-              onColumnsChanged={setCurrentColumns}
-            />
-          </Modal.Content>
-          <Modal.Footer>
-            <Button onClick={closeModal}>Annuler</Button>
-            <Button
-              color="primary"
-              style={{ marginLeft: 'auto' }}
-              onClick={onApplyClicked}
-            >
-              Appliquer
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      ) : null,
-    [closeModal, currentColumns, isVisible, onApplyClicked]
-  );
-
-  return { openModal, closeModal, modal };
-};
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { DataGridColumnsEditor } from '.';
+import { DataGridContext } from '../types';
+import { Modal } from '../../../layout/Modal';
+import { mapValues } from 'lodash';
+
+export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { columns, setSettings, saveSettings } = useContext(context);
+  const [currentColumns, setCurrentColumns] = useState(columns);
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onApplyClicked = useCallback(() => {
+    const newSettings = mapValues(currentColumns, (col) => ({
+      order: col.order ?? 0,
+      width: col.width ?? 150,
+    }));
+    setSettings(() => newSettings);
+    saveSettings(newSettings);
+    closeModal();
+  }, [currentColumns, closeModal, saveSettings, setSettings]);
+
+  const modal = useMemo(
+    () =>
+      isVisible ? (
+        <Modal $width={600} $height={400}>
+          <Modal.Header>Paramètres des colonnes</Modal.Header>
+          <Modal.Content>
+            <DataGridColumnsEditor
+              columns={currentColumns}
+              onColumnsChanged={setCurrentColumns}
+            />
+          </Modal.Content>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Annuler</Button>
+            <Button
+              color="primary"
+              style={{ marginLeft: 'auto' }}
+              onClick={onApplyClicked}
+            >
+              Appliquer
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      ) : null,
+    [closeModal, currentColumns, isVisible, onApplyClicked]
+  );
+
+  return { openModal, closeModal, modal };
+};

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

@@ -1,181 +1,181 @@
-import * as styles from './styles';
-
-import { DataGridColumn, DataGridColumns } from '../types';
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
-
-import { IconButton } from '../../../forms/IconButton';
-import _ from 'lodash';
-import { normalizeColumnsOrders } from './helpers';
-import { useVisibleAndHiddenColumns } from '../hooks';
-
-export const DataGridColumnItem = <R,>({
-  columnIndex,
-  columnKey,
-  column,
-  visible,
-  onUpButtonClicked,
-  onDownButtonClicked,
-  onVisibleButtonClicked,
-}: {
-  columnIndex: number;
-  columnKey: string;
-  column: DataGridColumn<R>;
-  visible: boolean;
-  onUpButtonClicked?: (index: number) => void;
-  onDownButtonClicked?: (index: number) => void;
-  onVisibleButtonClicked: (key: string) => void;
-}) => (
-  <styles.ColumnItem $visible={visible}>
-    {!visible && (
-      <styles.Buttons $visible={false}>
-        <IconButton
-          size="small"
-          icon={LeftIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-    <span>{column?.name}</span>
-    {visible && (
-      <styles.Buttons $visible>
-        {onUpButtonClicked && (
-          <IconButton
-            size="small"
-            icon={UpIcon}
-            onClick={() => onUpButtonClicked(columnIndex)}
-          />
-        )}
-        {onDownButtonClicked && (
-          <IconButton
-            size="small"
-            icon={DownIcon}
-            onClick={() => onDownButtonClicked(columnIndex)}
-          />
-        )}
-        <IconButton
-          size="small"
-          icon={RightIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-  </styles.ColumnItem>
-);
-
-export const DataGridColumnsEditor = <R,>({
-  columns,
-  onColumnsChanged,
-}: {
-  columns: DataGridColumns<R>;
-  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
-}) => {
-  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
-  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
-    _.sortBy(Object.entries(visibleColumns), ([, col]) => col.order ?? 0)
-  );
-
-  const onUpButtonClicked = useCallback(
-    (index: number) => {
-      if (index > 0) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index - 1),
-          sortedVisibleColumnsEntries[index],
-          sortedVisibleColumnsEntries[index - 1],
-          ...sortedVisibleColumnsEntries.slice(index + 1),
-        ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onDownButtonClicked = useCallback(
-    (index: number) => {
-      if (index < sortedVisibleColumnsEntries.length - 1) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index),
-          sortedVisibleColumnsEntries[index + 1],
-          sortedVisibleColumnsEntries[index],
-          ...sortedVisibleColumnsEntries.slice(index + 2),
-        ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onHideButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...prev[columnKey],
-          order: -1,
-        },
-      }));
-    },
-    [onColumnsChanged]
-  );
-
-  const onShowButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...hiddenColumns[columnKey],
-          order: Object.keys(prev).length,
-        },
-      }));
-    },
-    [hiddenColumns, onColumnsChanged]
-  );
-
-  return (
-    <styles.Container>
-      <styles.Panel>
-        <styles.Title>Colonnes visibles</styles.Title>
-        <styles.ColumnsList>
-          {sortedVisibleColumnsEntries.map(([key, column], index) => (
-            <DataGridColumnItem
-              key={key}
-              columnKey={key}
-              columnIndex={index}
-              column={column}
-              visible
-              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
-              onDownButtonClicked={
-                index < sortedVisibleColumnsEntries.length - 1
-                  ? onDownButtonClicked
-                  : undefined
-              }
-              onVisibleButtonClicked={onHideButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-
-      <styles.Panel>
-        <styles.Title>Colonnes masquées</styles.Title>
-        <styles.ColumnsList>
-          {Object.entries(hiddenColumns).map(([key, column], index) => (
-            <DataGridColumnItem
-              key={key}
-              columnKey={key}
-              columnIndex={index}
-              column={column}
-              visible={false}
-              onVisibleButtonClicked={onShowButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-    </styles.Container>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridColumn, DataGridColumns } from '../types';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
+
+import { IconButton } from '../../../forms/IconButton';
+import _ from 'lodash';
+import { normalizeColumnsOrders } from './helpers';
+import { useVisibleAndHiddenColumns } from '../hooks';
+
+export const DataGridColumnItem = <R,>({
+  columnIndex,
+  columnKey,
+  column,
+  visible,
+  onUpButtonClicked,
+  onDownButtonClicked,
+  onVisibleButtonClicked,
+}: {
+  columnIndex: number;
+  columnKey: string;
+  column: DataGridColumn<R>;
+  visible: boolean;
+  onUpButtonClicked?: (index: number) => void;
+  onDownButtonClicked?: (index: number) => void;
+  onVisibleButtonClicked: (key: string) => void;
+}) => (
+  <styles.ColumnItem $visible={visible}>
+    {!visible && (
+      <styles.Buttons $visible={false}>
+        <IconButton
+          size="small"
+          icon={LeftIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+    <span>{column?.name}</span>
+    {visible && (
+      <styles.Buttons $visible>
+        {onUpButtonClicked && (
+          <IconButton
+            size="small"
+            icon={UpIcon}
+            onClick={() => onUpButtonClicked(columnIndex)}
+          />
+        )}
+        {onDownButtonClicked && (
+          <IconButton
+            size="small"
+            icon={DownIcon}
+            onClick={() => onDownButtonClicked(columnIndex)}
+          />
+        )}
+        <IconButton
+          size="small"
+          icon={RightIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+  </styles.ColumnItem>
+);
+
+export const DataGridColumnsEditor = <R,>({
+  columns,
+  onColumnsChanged,
+}: {
+  columns: DataGridColumns<R>;
+  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
+}) => {
+  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
+  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
+    _.sortBy(Object.entries(visibleColumns), ([, col]) => col.order ?? 0)
+  );
+
+  const onUpButtonClicked = useCallback(
+    (index: number) => {
+      if (index > 0) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index - 1),
+          sortedVisibleColumnsEntries[index],
+          sortedVisibleColumnsEntries[index - 1],
+          ...sortedVisibleColumnsEntries.slice(index + 1),
+        ]);
+        onColumnsChanged(() => ({
+          ...Object.fromEntries(newArray),
+          ...hiddenColumns,
+        }));
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onDownButtonClicked = useCallback(
+    (index: number) => {
+      if (index < sortedVisibleColumnsEntries.length - 1) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index),
+          sortedVisibleColumnsEntries[index + 1],
+          sortedVisibleColumnsEntries[index],
+          ...sortedVisibleColumnsEntries.slice(index + 2),
+        ]);
+        onColumnsChanged(() => ({
+          ...Object.fromEntries(newArray),
+          ...hiddenColumns,
+        }));
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onHideButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) => ({
+        ...prev,
+        [columnKey]: {
+          ...prev[columnKey],
+          order: -1,
+        },
+      }));
+    },
+    [onColumnsChanged]
+  );
+
+  const onShowButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) => ({
+        ...prev,
+        [columnKey]: {
+          ...hiddenColumns[columnKey],
+          order: Object.keys(prev).length,
+        },
+      }));
+    },
+    [hiddenColumns, onColumnsChanged]
+  );
+
+  return (
+    <styles.Container>
+      <styles.Panel>
+        <styles.Title>Colonnes visibles</styles.Title>
+        <styles.ColumnsList>
+          {sortedVisibleColumnsEntries.map(([key, column], index) => (
+            <DataGridColumnItem
+              key={key}
+              columnKey={key}
+              columnIndex={index}
+              column={column}
+              visible
+              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
+              onDownButtonClicked={
+                index < sortedVisibleColumnsEntries.length - 1
+                  ? onDownButtonClicked
+                  : undefined
+              }
+              onVisibleButtonClicked={onHideButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+
+      <styles.Panel>
+        <styles.Title>Colonnes masquées</styles.Title>
+        <styles.ColumnsList>
+          {Object.entries(hiddenColumns).map(([key, column], index) => (
+            <DataGridColumnItem
+              key={key}
+              columnKey={key}
+              columnIndex={index}
+              column={column}
+              visible={false}
+              onVisibleButtonClicked={onShowButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+    </styles.Container>
+  );
+};