@addev-be/ui 0.2.2 → 0.2.6

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

@@ -1,75 +1,73 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { DataGridCellProps, DataGridColumn } from './types';
-import { MouseEvent, useCallback } from 'react';
-
-import { DataGridEditableCell } from './DataGridEditableCell';
-import { join } from 'lodash';
-import { useDataGridContext } from './hooks';
-
-const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
-  const value = col.propertyName ? row[col.propertyName] : '';
-  return !value ? '' : String(value);
-};
-
-export const DataGridCell = <R,>({
-  row,
-  rowIndex,
-  columnKey,
-  columnIndex,
-  column,
-  context,
-  className,
-  style,
-}: DataGridCellProps<R>) => {
-  const {
-    name,
-    editable,
-    editingCell = [-1, -1],
-    setEditingCell,
-    onRowDoubleClick,
-  } = useDataGridContext(context);
-  const isEditable =
-    !!editable && !!column.editable && column.type && column.getter;
-  const isEditing =
-    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
-
-  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}
-        context={context}
-      />
-    );
-  }
-
-  return (
-    <styles.DataGridCell
-      key={`${name}-${rowIndex}-${columnIndex}`}
-      className={join([className, column.className, column.bodyClassName], ' ')}
-      onDoubleClick={onDoubleClick}
-      style={style}
-    >
-      {(column.render ?? defaultRender)(row, column)}
-    </styles.DataGridCell>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { DataGridCellProps, DataGridColumn } from './types';
+import { MouseEvent, useCallback } from 'react';
+
+import { DataGridEditableCell } from './DataGridEditableCell';
+import { useDataGridContext } from './hooks';
+
+const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
+  const value = col.propertyName ? row[col.propertyName] : '';
+  return !value ? '' : String(value);
+};
+
+export const DataGridCell = <R,>({
+  row,
+  rowIndex,
+  columnKey,
+  columnIndex,
+  column,
+  context,
+  style,
+}: DataGridCellProps<R>) => {
+  const {
+    name,
+    editable,
+    editingCell = [-1, -1],
+    setEditingCell,
+    onRowDoubleClick,
+  } = useDataGridContext(context);
+  const isEditable =
+    !!editable && !!column.editable && column.type && column.getter;
+  const isEditing =
+    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+  const DataGridCellComponent = column.component ?? styles.DataGridCell;
+
+  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}
+        context={context}
+      />
+    );
+  }
+
+  return (
+    <DataGridCellComponent
+      key={`${name}-${rowIndex}-${columnIndex}`}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {(column.render ?? defaultRender)(row, column)}
+    </DataGridCellComponent>
+  );
+};

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

@@ -1,14 +1,14 @@
-import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
-
-export const normalizeColumnsOrders = <R>(
-  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
-) =>
-  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
-    DataGridColumnKeyValuePair<R>
-  >(([key, column], index) => [
-    key,
-    {
-      ...column,
-      order: index,
-    },
-  ]);
+import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
+
+export const normalizeColumnsOrders = <R>(
+  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
+) =>
+  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
+    DataGridColumnKeyValuePair<R>
+  >(([key, column], index) => [
+    key,
+    {
+      ...column,
+      order: index,
+    },
+  ]);

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>
+  );
+};