@addev-be/ui 2.7.5 → 2.7.7

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

@@ -1,83 +1,83 @@
-import * as styles from './styles';
-
-import { DataGridCell } from './DataGridCell';
-import { DataGridRowTemplateProps } from './types';
-import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
-import { useContext } from 'react';
-
-export const DataGridRowTemplate = <R,>({
-  item,
-  index: rowIndex,
-  context,
-}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
-  const {
-    visibleColumns,
-    rowKeyGetter,
-    toggleSelection,
-    updatedRows,
-    addedRows,
-    ...props
-  } = useContext(context);
-
-  if (!item) {
-    return (
-      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-        {!!props.selectable && (
-          <styles.LoadingCell className="animate-pulse">
-            <div />
-          </styles.LoadingCell>
-        )}
-        {visibleColumns.map((_, colIndex) => (
-          <styles.LoadingCell
-            className="animate-pulse"
-            key={`loading-${rowIndex}-${colIndex}`}
-          >
-            <div />
-          </styles.LoadingCell>
-        ))}
-      </styles.DataGridRow>
-    );
-  }
-  const rowKey = rowKeyGetter(item);
-  const selected = props.selectedKeys.includes(rowKey);
-  const { className, style } = props.rowClassNameGetter?.(item) ?? {
-    className: '',
-    style: undefined,
-  };
-  const isAdded = addedRows.some((row) => rowKeyGetter(row as R) === rowKey);
-  const isUpdated = updatedRows.some(
-    (row) => rowKeyGetter(row as R) === rowKey
-  );
-
-  return (
-    <styles.DataGridRow key={rowKey} $edited={isAdded || isUpdated}>
-      {!!props.selectable && (
-        <styles.SelectionCell
-          key="__select_checkbox__"
-          onClick={() => toggleSelection(rowKey)}
-        >
-          <input
-            type="checkbox"
-            value={rowKey as string}
-            checked={selected}
-            readOnly
-          />
-        </styles.SelectionCell>
-      )}
-      {visibleColumns.map((col, colIndex) => (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        <DataGridCell<R, any>
-          key={`loading-${colIndex}-${colIndex}`}
-          {...(colIndex === 0 ? { className, style } : {})}
-          row={item}
-          rowIndex={rowIndex}
-          column={col}
-          columnIndex={colIndex}
-          context={context}
-          columnKey={col.key}
-          color={col.color}
-        />
-      ))}
-    </styles.DataGridRow>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  item,
+  index: rowIndex,
+  context,
+}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
+  const {
+    visibleColumns,
+    rowKeyGetter,
+    toggleSelection,
+    updatedRows,
+    addedRows,
+    ...props
+  } = useContext(context);
+
+  if (!item) {
+    return (
+      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, colIndex) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${rowIndex}-${colIndex}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const rowKey = rowKeyGetter(item);
+  const selected = props.selectedKeys.includes(rowKey);
+  const { className, style } = props.rowClassNameGetter?.(item) ?? {
+    className: '',
+    style: undefined,
+  };
+  const isAdded = addedRows.some((row) => rowKeyGetter(row as R) === rowKey);
+  const isUpdated = updatedRows.some(
+    (row) => rowKeyGetter(row as R) === rowKey
+  );
+
+  return (
+    <styles.DataGridRow key={rowKey} $edited={isAdded || isUpdated}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(rowKey)}
+        >
+          <input
+            type="checkbox"
+            value={rowKey as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map((col, colIndex) => (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        <DataGridCell<R, any>
+          key={`loading-${colIndex}-${colIndex}`}
+          {...(colIndex === 0 ? { className, style } : {})}
+          row={item}
+          rowIndex={rowIndex}
+          column={col}
+          columnIndex={colIndex}
+          context={context}
+          columnKey={col.key}
+          color={col.color}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};

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

@@ -1,134 +1,134 @@
-import * as styles from './styles';
-
-import {
-  ArrowsRotateIcon,
-  CopyIcon,
-  FilterSlashIcon,
-  FloppyDiskIcon,
-  PlusIcon,
-  TableColumnsIcon,
-} from '../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../forms/Button';
-import { DataGridContext } from './types';
-import { Loading } from '../../layout/Loading';
-import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
-import { useDataGridContext } from './hooks';
-import { useRefreshModal } from './hooks/useRefreshModal';
-
-export const DataGridToolbar = <R,>({
-  context,
-}: {
-  context: DataGridContext<R>;
-}) => {
-  const {
-    name,
-    setSelectedKeys,
-    copyTable,
-    setFilters,
-    refresh,
-    editable,
-    onSaveClicked,
-    onAddClicked,
-    addedRows,
-    updatedRows,
-    addRow,
-    clearChangedRows,
-    headerContent,
-  } = useDataGridContext(context);
-
-  const { openModal, modal } = useDataGridColumnsModal<R>(context);
-
-  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
-  const runCopyTable = useCallback(() => {
-    setIsLoadingVisible(true);
-    copyTable().then(() => setIsLoadingVisible(false));
-  }, [copyTable]);
-
-  const save = useCallback(async () => {
-    if (
-      Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
-      onSaveClicked
-    ) {
-      const savedIds = await onSaveClicked(addedRows, updatedRows);
-      clearChangedRows(savedIds);
-    }
-  }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
-
-  const add = useCallback(async () => {
-    if (onAddClicked) {
-      const row = await onAddClicked();
-      addRow(row);
-    }
-  }, [addRow, onAddClicked]);
-
-  const doRefresh = useCallback(() => {
-    refresh?.();
-    clearChangedRows();
-    setSelectedKeys([]);
-  }, [clearChangedRows, refresh, setSelectedKeys]);
-
-  const { openModal: openRefreshModal, modal: refreshModal } =
-    useRefreshModal(doRefresh);
-
-  const onRefreshClicked = useCallback(async () => {
-    if (addedRows.length + updatedRows.length > 0) {
-      openRefreshModal();
-    } else {
-      doRefresh();
-    }
-  }, [addedRows.length, doRefresh, openRefreshModal, updatedRows.length]);
-
-  return (
-    <>
-      {modal}
-      {refreshModal}
-      <styles.DataGridToolsRow>
-        <styles.DataGridToolsRowHeaderContent>
-          {headerContent}
-        </styles.DataGridToolsRowHeaderContent>
-        <styles.DataGridToolsRowButtonsContainer>
-          <Loading visible={isLoadingVisible} />
-          {editable && onSaveClicked && (
-            <Button size="small" $color="primary" onClick={save} bordered>
-              <FloppyDiskIcon />
-              Enregistrer
-            </Button>
-          )}
-          {editable && onAddClicked && (
-            <Button size="small" $color="success" onClick={add} bordered>
-              <PlusIcon />
-              Ajouter
-            </Button>
-          )}
-          {
-            <Button size="small" onClick={onRefreshClicked} bordered>
-              <ArrowsRotateIcon />
-              Rafraîchir
-            </Button>
-          }
-          <Button $color="emerald" size="small" onClick={runCopyTable} bordered>
-            <CopyIcon />
-            Copier la table
-          </Button>
-          <Button
-            size="small"
-            $color="danger"
-            onClick={() => setFilters({})}
-            bordered
-          >
-            <FilterSlashIcon />
-            Supprimer les filtres
-          </Button>
-          {name && (
-            <Button $color="info" size="small" onClick={openModal} bordered>
-              <TableColumnsIcon />
-              Paramètres des colonnes
-            </Button>
-          )}
-        </styles.DataGridToolsRowButtonsContainer>
-      </styles.DataGridToolsRow>
-    </>
-  );
-};
+import * as styles from './styles';
+
+import {
+  ArrowsRotateIcon,
+  CopyIcon,
+  FilterSlashIcon,
+  FloppyDiskIcon,
+  PlusIcon,
+  TableColumnsIcon,
+} from '../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../forms/Button';
+import { DataGridContext } from './types';
+import { Loading } from '../../layout/Loading';
+import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
+import { useDataGridContext } from './hooks';
+import { useRefreshModal } from './hooks/useRefreshModal';
+
+export const DataGridToolbar = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    name,
+    setSelectedKeys,
+    copyTable,
+    setFilters,
+    refresh,
+    editable,
+    onSaveClicked,
+    onAddClicked,
+    addedRows,
+    updatedRows,
+    addRow,
+    clearChangedRows,
+    headerContent,
+  } = useDataGridContext(context);
+
+  const { openModal, modal } = useDataGridColumnsModal<R>(context);
+
+  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
+  const runCopyTable = useCallback(() => {
+    setIsLoadingVisible(true);
+    copyTable().then(() => setIsLoadingVisible(false));
+  }, [copyTable]);
+
+  const save = useCallback(async () => {
+    if (
+      Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
+      onSaveClicked
+    ) {
+      const savedIds = await onSaveClicked(addedRows, updatedRows);
+      clearChangedRows(savedIds);
+    }
+  }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
+
+  const add = useCallback(async () => {
+    if (onAddClicked) {
+      const row = await onAddClicked();
+      addRow(row);
+    }
+  }, [addRow, onAddClicked]);
+
+  const doRefresh = useCallback(() => {
+    refresh?.();
+    clearChangedRows();
+    setSelectedKeys([]);
+  }, [clearChangedRows, refresh, setSelectedKeys]);
+
+  const { openModal: openRefreshModal, modal: refreshModal } =
+    useRefreshModal(doRefresh);
+
+  const onRefreshClicked = useCallback(async () => {
+    if (addedRows.length + updatedRows.length > 0) {
+      openRefreshModal();
+    } else {
+      doRefresh();
+    }
+  }, [addedRows.length, doRefresh, openRefreshModal, updatedRows.length]);
+
+  return (
+    <>
+      {modal}
+      {refreshModal}
+      <styles.DataGridToolsRow>
+        <styles.DataGridToolsRowHeaderContent>
+          {headerContent}
+        </styles.DataGridToolsRowHeaderContent>
+        <styles.DataGridToolsRowButtonsContainer>
+          <Loading visible={isLoadingVisible} />
+          {editable && onSaveClicked && (
+            <Button size="small" $color="primary" onClick={save} bordered>
+              <FloppyDiskIcon />
+              Enregistrer
+            </Button>
+          )}
+          {editable && onAddClicked && (
+            <Button size="small" $color="success" onClick={add} bordered>
+              <PlusIcon />
+              Ajouter
+            </Button>
+          )}
+          {
+            <Button size="small" onClick={onRefreshClicked} bordered>
+              <ArrowsRotateIcon />
+              Rafraîchir
+            </Button>
+          }
+          <Button $color="emerald" size="small" onClick={runCopyTable} bordered>
+            <CopyIcon />
+            Copier la table
+          </Button>
+          <Button
+            size="small"
+            $color="danger"
+            onClick={() => setFilters({})}
+            bordered
+          >
+            <FilterSlashIcon />
+            Supprimer les filtres
+          </Button>
+          {name && (
+            <Button $color="info" size="small" onClick={openModal} bordered>
+              <TableColumnsIcon />
+              Paramètres des colonnes
+            </Button>
+          )}
+        </styles.DataGridToolsRowButtonsContainer>
+      </styles.DataGridToolsRow>
+    </>
+  );
+};