@addev-be/ui 2.7.0 → 2.7.1

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

@@ -1,48 +1,48 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { Button } from '../../../forms/Button';
-import { Modal } from '../../../layout/Modal';
-import { TriangleExclamationIcon } from '../../../../Icons';
-
-export const useRefreshModal = (onConfirm: () => void) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const modal = useMemo(
-    () =>
-      isVisible ? (
-        <Modal $width={400}>
-          <Modal.Header>Rafraichir</Modal.Header>
-          <Modal.ContentWithIcon>
-            <TriangleExclamationIcon fill="var(--color-danger-600)" />
-            <div>
-              Attention : vous avez des modifications en cours. Si vous
-              rafraîchissez la liste, ces modifications seront perdues !
-            </div>
-          </Modal.ContentWithIcon>
-          <Modal.Footer>
-            <Button onClick={closeModal}>Annuler</Button>
-            <Button
-              $color="danger"
-              style={{ marginLeft: 'auto' }}
-              onClick={() => {
-                closeModal();
-                onConfirm();
-              }}
-            >
-              Rafraîchir
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      ) : null,
-    [closeModal, isVisible, onConfirm]
-  );
-
-  return { openModal, closeModal, modal };
-};
+import { useCallback, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms/Button';
+import { Modal } from '../../../layout/Modal';
+import { TriangleExclamationIcon } from '../../../../Icons';
+
+export const useRefreshModal = (onConfirm: () => void) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const modal = useMemo(
+    () =>
+      isVisible ? (
+        <Modal $width={400}>
+          <Modal.Header>Rafraichir</Modal.Header>
+          <Modal.ContentWithIcon>
+            <TriangleExclamationIcon fill="var(--color-danger-600)" />
+            <div>
+              Attention : vous avez des modifications en cours. Si vous
+              rafraîchissez la liste, ces modifications seront perdues !
+            </div>
+          </Modal.ContentWithIcon>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Annuler</Button>
+            <Button
+              $color="danger"
+              style={{ marginLeft: 'auto' }}
+              onClick={() => {
+                closeModal();
+                onConfirm();
+              }}
+            >
+              Rafraîchir
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      ) : null,
+    [closeModal, isVisible, onConfirm]
+  );
+
+  return { openModal, closeModal, modal };
+};

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

@@ -1,111 +1,111 @@
-import * as styles from './styles';
-
-import { Context, useImperativeHandle, useMemo, useRef } from 'react';
-import {
-  DEFAULT_COLUMN_WIDTH,
-  DEFAULT_ROW_HEIGHT,
-  SELECTION_CELL_WIDTH,
-} from './constants';
-import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
-
-import { DataGridFooter } from './DataGridFooter';
-import { DataGridHeader } from './DataGridHeader';
-import { DataGridRowTemplate } from './DataGridRowTemplate';
-import { DataGridToolbar } from './DataGridToolbar';
-import { VirtualScroller } from '../VirtualScroller';
-import { extractSpaceProps } from '../../../helpers/styled/space';
-import { useDataGrid } from './hooks';
-
-export const DataGrid = <R,>({
-  contextOverride,
-  ...props
-}: DataGridProps<R> & {
-  contextOverride?: Partial<DataGridContextProps<R>>;
-  ref?: React.Ref<DataGridRefProps<R>>;
-}) => {
-  const scrollableRef = useRef<HTMLDivElement>(null);
-  const { className } = props;
-  const spaceProps = extractSpaceProps(props);
-  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
-  const {
-    columns,
-    selectable,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    headerRowHeight = 40,
-    gridTemplateColumns,
-    sortedRows,
-    onVisibleRowsChange,
-    refresh,
-    setSelectedKeys,
-    addRows,
-    fixedColumnsCount,
-    resizingColumnKey,
-    moveResizing,
-    endResizing,
-    footerFunctions,
-  } = contextProps;
-
-  useImperativeHandle(
-    props.ref,
-    () => ({
-      refresh: refresh ?? (() => {}),
-      setSelectedKeys,
-      addRows,
-    }),
-    [addRows, refresh, setSelectedKeys]
-  );
-
-  const hasFooter =
-    footerFunctions && Object.values(footerFunctions).length > 0;
-  const fixedColumnWidths = useMemo(
-    () => [
-      ...(selectable ? [SELECTION_CELL_WIDTH] : []),
-      ...Object.values(columns)
-        .slice(0, fixedColumnsCount ?? 0)
-        .map((col) => col.width ?? DEFAULT_COLUMN_WIDTH),
-    ],
-    [columns, fixedColumnsCount, selectable]
-  );
-
-  const itemProps = useMemo(
-    () => ({ context: DataGridContext }),
-    [DataGridContext]
-  );
-
-  const rowTemplate = DataGridRowTemplate;
-
-  return (
-    <DataGridContext.Provider value={contextProps}>
-      <styles.DataGridWrapper {...spaceProps}>
-        <DataGridToolbar context={DataGridContext} />
-        <styles.DataGridContainer
-          ref={scrollableRef}
-          $headerRowHeight={headerRowHeight}
-          $rowHeight={rowHeight}
-          $rowsCount={contextProps.sortedRows.length}
-          $withFooter={hasFooter}
-          className={className}
-          $fixedColumnWidths={fixedColumnWidths}
-        >
-          {resizingColumnKey && (
-            <styles.ResizeBackdrop
-              onMouseMove={moveResizing}
-              onMouseUp={endResizing}
-            />
-          )}
-          <DataGridHeader context={DataGridContext} />
-          <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
-            integrated
-            gridTemplateColumns={gridTemplateColumns}
-            items={sortedRows}
-            itemTemplate={rowTemplate}
-            itemProps={itemProps}
-            rowHeightInPx={rowHeight}
-            onRangeChanged={onVisibleRowsChange}
-          />
-          {hasFooter && <DataGridFooter context={DataGridContext} />}
-        </styles.DataGridContainer>
-      </styles.DataGridWrapper>
-    </DataGridContext.Provider>
-  );
-};
+import * as styles from './styles';
+
+import { Context, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+  DEFAULT_COLUMN_WIDTH,
+  DEFAULT_ROW_HEIGHT,
+  SELECTION_CELL_WIDTH,
+} from './constants';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
+
+import { DataGridFooter } from './DataGridFooter';
+import { DataGridHeader } from './DataGridHeader';
+import { DataGridRowTemplate } from './DataGridRowTemplate';
+import { DataGridToolbar } from './DataGridToolbar';
+import { VirtualScroller } from '../VirtualScroller';
+import { extractSpaceProps } from '../../../helpers/styled/space';
+import { useDataGrid } from './hooks';
+
+export const DataGrid = <R,>({
+  contextOverride,
+  ...props
+}: DataGridProps<R> & {
+  contextOverride?: Partial<DataGridContextProps<R>>;
+  ref?: React.Ref<DataGridRefProps<R>>;
+}) => {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const { className } = props;
+  const spaceProps = extractSpaceProps(props);
+  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
+  const {
+    columns,
+    selectable,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    headerRowHeight = 40,
+    gridTemplateColumns,
+    sortedRows,
+    onVisibleRowsChange,
+    refresh,
+    setSelectedKeys,
+    addRows,
+    fixedColumnsCount,
+    resizingColumnKey,
+    moveResizing,
+    endResizing,
+    footerFunctions,
+  } = contextProps;
+
+  useImperativeHandle(
+    props.ref,
+    () => ({
+      refresh: refresh ?? (() => {}),
+      setSelectedKeys,
+      addRows,
+    }),
+    [addRows, refresh, setSelectedKeys]
+  );
+
+  const hasFooter =
+    footerFunctions && Object.values(footerFunctions).length > 0;
+  const fixedColumnWidths = useMemo(
+    () => [
+      ...(selectable ? [SELECTION_CELL_WIDTH] : []),
+      ...Object.values(columns)
+        .slice(0, fixedColumnsCount ?? 0)
+        .map((col) => col.width ?? DEFAULT_COLUMN_WIDTH),
+    ],
+    [columns, fixedColumnsCount, selectable]
+  );
+
+  const itemProps = useMemo(
+    () => ({ context: DataGridContext }),
+    [DataGridContext]
+  );
+
+  const rowTemplate = DataGridRowTemplate;
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.DataGridWrapper {...spaceProps}>
+        <DataGridToolbar context={DataGridContext} />
+        <styles.DataGridContainer
+          ref={scrollableRef}
+          $headerRowHeight={headerRowHeight}
+          $rowHeight={rowHeight}
+          $rowsCount={contextProps.sortedRows.length}
+          $withFooter={hasFooter}
+          className={className}
+          $fixedColumnWidths={fixedColumnWidths}
+        >
+          {resizingColumnKey && (
+            <styles.ResizeBackdrop
+              onMouseMove={moveResizing}
+              onMouseUp={endResizing}
+            />
+          )}
+          <DataGridHeader context={DataGridContext} />
+          <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+            integrated
+            gridTemplateColumns={gridTemplateColumns}
+            items={sortedRows}
+            itemTemplate={rowTemplate}
+            itemProps={itemProps}
+            rowHeightInPx={rowHeight}
+            onRangeChanged={onVisibleRowsChange}
+          />
+          {hasFooter && <DataGridFooter context={DataGridContext} />}
+        </styles.DataGridContainer>
+      </styles.DataGridWrapper>
+    </DataGridContext.Provider>
+  );
+};