@addev-be/ui 2.4.0 → 2.4.2

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -1,81 +1,81 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import { MouseEvent, useCallback, useMemo } from 'react';
-
-import { DataGridCellProps } from './types';
-import { DataGridEditableCell } from './DataGridEditableCell';
-import { useDataGridContext } from './hooks';
-
-const defaultRender = (value: any) => (!value ? '' : String(value));
-
-export const DataGridCell = <R, T>({
-  row,
-  rowIndex,
-  columnKey,
-  columnIndex,
-  column,
-  context,
-  style,
-}: DataGridCellProps<R, T>) => {
-  const {
-    name,
-    editable,
-    editingCell = [-1, -1],
-    setEditingCell,
-    onRowDoubleClick,
-    userSelect,
-    headerColor,
-  } = useDataGridContext(context);
-  const isEditable =
-    !!editable &&
-    'editable' in column &&
-    !!column.editable &&
-    !!column.editComponent;
-  const isEditing =
-    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
-  const DataGridCellComponent = column.component ?? styles.DataGridCell;
-
-  const value = useMemo(() => column.getter(row), [column, row]);
-
-  const onDoubleClick = useCallback(
-    (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (isEditable) {
-        setEditingCell([rowIndex, columnIndex]);
-      } else onRowDoubleClick?.(row, e);
-    },
-    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
-  );
-
-  if (isEditing) {
-    return (
-      <DataGridEditableCell
-        key={`${name}-${rowIndex}-${columnIndex}`}
-        row={row}
-        rowIndex={rowIndex}
-        columnKey={columnKey}
-        columnIndex={columnIndex}
-        column={column as any}
-        context={context}
-        userSelect={userSelect}
-      />
-    );
-  }
-
-  return (
-    <DataGridCellComponent
-      key={`${name}-${rowIndex}-${columnIndex}`}
-      onDoubleClick={onDoubleClick}
-      style={style}
-      $userSelect={userSelect}
-      $color={column.color}
-      $textAlign={column.textAlign}
-      $headerColor={headerColor}
-    >
-      {(column.render ?? defaultRender)(value, row, column)}
-    </DataGridCellComponent>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import { MouseEvent, useCallback, useMemo } from 'react';
+
+import { DataGridCellProps } from './types';
+import { DataGridEditableCell } from './DataGridEditableCell';
+import { useDataGridContext } from './hooks';
+
+const defaultRender = (value: any) => (!value ? '' : String(value));
+
+export const DataGridCell = <R, T>({
+  row,
+  rowIndex,
+  columnKey,
+  columnIndex,
+  column,
+  context,
+  style,
+}: DataGridCellProps<R, T>) => {
+  const {
+    name,
+    editable,
+    editingCell = [-1, -1],
+    setEditingCell,
+    onRowDoubleClick,
+    userSelect,
+    headerColor,
+  } = useDataGridContext(context);
+  const isEditable =
+    !!editable &&
+    'editable' in column &&
+    !!column.editable &&
+    !!column.editComponent;
+  const isEditing =
+    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+  const DataGridCellComponent = column.component ?? styles.DataGridCell;
+
+  const value = useMemo(() => column.getter(row), [column, row]);
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setEditingCell([rowIndex, columnIndex]);
+      } else onRowDoubleClick?.(row, e);
+    },
+    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
+  );
+
+  if (isEditing) {
+    return (
+      <DataGridEditableCell
+        key={`${name}-${rowIndex}-${columnIndex}`}
+        row={row}
+        rowIndex={rowIndex}
+        columnKey={columnKey}
+        columnIndex={columnIndex}
+        column={column as any}
+        context={context}
+        userSelect={userSelect}
+      />
+    );
+  }
+
+  return (
+    <DataGridCellComponent
+      key={`${name}-${rowIndex}-${columnIndex}`}
+      onDoubleClick={onDoubleClick}
+      style={style}
+      $userSelect={userSelect}
+      $color={column.color}
+      $textAlign={column.textAlign}
+      $headerColor={headerColor}
+    >
+      {(column.render ?? defaultRender)(value, row, column)}
+    </DataGridCellComponent>
+  );
+};

package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts

@@ -1,9 +1,9 @@
-import { DataGridColumns } from '../types';
-
-export const normalizeColumnsOrders = <R>(
-  columns: DataGridColumns<R>
-): DataGridColumns<R> =>
-  columns.map((column, index) => ({
-    ...column,
-    order: index,
-  }));
+import { DataGridColumns } from '../types';
+
+export const normalizeColumnsOrders = <R>(
+  columns: DataGridColumns<R>
+): DataGridColumns<R> =>
+  columns.map((column, index) => ({
+    ...column,
+    order: index,
+  }));

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

@@ -1,59 +1,59 @@
-import { keyBy, mapValues } from 'lodash';
-import { useCallback, useContext, useMemo, useState } from 'react';
-
-import { Button } from '../../../forms/Button';
-import { DataGridColumnsEditor } from '.';
-import { DataGridContext } from '../types';
-import { Modal } from '../../../layout/Modal';
-
-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(() => {
-    setCurrentColumns(columns);
-    setIsVisible(true);
-  }, [columns]);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onApplyClicked = useCallback(() => {
-    const newSettings = mapValues(keyBy(currentColumns, 'key'), (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 { keyBy, mapValues } from 'lodash';
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms/Button';
+import { DataGridColumnsEditor } from '.';
+import { DataGridContext } from '../types';
+import { Modal } from '../../../layout/Modal';
+
+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(() => {
+    setCurrentColumns(columns);
+    setIsVisible(true);
+  }, [columns]);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onApplyClicked = useCallback(() => {
+    const newSettings = mapValues(keyBy(currentColumns, 'key'), (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,182 +1,182 @@
-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>>>;
-}) => {
-  console.log('DataGridColumnsEditor columns:', columns);
-  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
-  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
-    _.sortBy(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(() => [...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(() => [...newArray, ...hiddenColumns]);
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onHideButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) =>
-        prev.map((column) =>
-          column.key === columnKey
-            ? {
-                ...column,
-                order: -1,
-              }
-            : column
-        )
-      );
-    },
-    [onColumnsChanged]
-  );
-
-  const onShowButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) =>
-        prev.map((column) =>
-          column.key === columnKey
-            ? {
-                ...column,
-                order: Object.keys(prev).length,
-              }
-            : column
-        )
-      );
-    },
-    [onColumnsChanged]
-  );
-
-  return (
-    <styles.Container>
-      <styles.Panel>
-        <styles.Title>Colonnes visibles</styles.Title>
-        <styles.ColumnsList>
-          {sortedVisibleColumnsEntries.map((column, index) => (
-            <DataGridColumnItem
-              key={column.key}
-              columnKey={column.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>
-          {hiddenColumns.map((column, index) => (
-            <DataGridColumnItem
-              key={column.key}
-              columnKey={column.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>>>;
+}) => {
+  console.log('DataGridColumnsEditor columns:', columns);
+  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
+  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
+    _.sortBy(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(() => [...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(() => [...newArray, ...hiddenColumns]);
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onHideButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: -1,
+              }
+            : column
+        )
+      );
+    },
+    [onColumnsChanged]
+  );
+
+  const onShowButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: Object.keys(prev).length,
+              }
+            : column
+        )
+      );
+    },
+    [onColumnsChanged]
+  );
+
+  return (
+    <styles.Container>
+      <styles.Panel>
+        <styles.Title>Colonnes visibles</styles.Title>
+        <styles.ColumnsList>
+          {sortedVisibleColumnsEntries.map((column, index) => (
+            <DataGridColumnItem
+              key={column.key}
+              columnKey={column.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>
+          {hiddenColumns.map((column, index) => (
+            <DataGridColumnItem
+              key={column.key}
+              columnKey={column.key}
+              columnIndex={index}
+              column={column}
+              visible={false}
+              onVisibleButtonClicked={onShowButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+    </styles.Container>
+  );
+};