@addev-be/ui 0.11.4 → 0.11.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

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

@@ -3,10 +3,9 @@
 
 import * as styles from './styles';
 
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { DEFAULT_COLUMN_WIDTH } from './constants';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { DataGridHeaderCellProps } from './types';
 import { Dropdown } from '../../layout';
@@ -24,41 +23,14 @@ export const DataGridHeaderCell = <R,>({
   const contextValue = useDataGridContext(context);
   const {
     filters = {},
-    setColumnWidth,
-    saveSettings,
     headerColor,
+    resizingColumnKey,
+    startResizing,
   } = contextValue;
   const filterButtonRef = useRef<HTMLButtonElement | null>(null);
 
   /** RESIZING */
 
-  const [isResizing, setIsResizing] = useState(false);
-  const resizingOffset = useRef(0);
-
-  const onResizeStart = useCallback(
-    (e: MouseEvent) => {
-      resizingOffset.current =
-        e.screenX - (column.width || DEFAULT_COLUMN_WIDTH);
-      setIsResizing(true);
-    },
-    [column.width]
-  );
-
-  const onResizeMove = useCallback(
-    (e: MouseEvent) => {
-      if (isResizing) {
-        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
-        setColumnWidth(columnKey, newWidth);
-      }
-    },
-    [columnKey, isResizing, setColumnWidth]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    setIsResizing(false);
-    saveSettings();
-  }, [saveSettings]);
-
   const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
   const filterDropdown = useMemo(() => {
     if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
@@ -95,6 +67,7 @@ export const DataGridHeaderCell = <R,>({
     setIsFilterDropdownVisible(true);
   }, []);
 
+  const isResizing = resizingColumnKey === columnKey;
   const hasFilters = filters[columnKey]?.values.length > 0;
 
   return (
@@ -119,14 +92,8 @@ export const DataGridHeaderCell = <R,>({
           <styles.DataGridResizeGrip
             className={isResizing ? 'active' : ''}
             $headerColor={headerColor}
-            onMouseDown={onResizeStart}
+            onMouseDown={(e) => startResizing(e, columnKey)}
           />
-          {isResizing && (
-            <styles.ResizeBackdrop
-              onMouseMove={onResizeMove}
-              onMouseUp={onResizeEnd}
-            />
-          )}
         </>
       )}
     </styles.DataGridHeaderCellContainer>

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

@@ -12,6 +12,7 @@ import {
   DataGridSort,
 } from '../types';
 import {
+  MouseEvent,
   createContext,
   useCallback,
   useEffect,
@@ -19,10 +20,10 @@ import {
   useRef,
   useState,
 } from 'react';
+import { merge, pickBy } from 'lodash';
 import { useDataGridCopy, useSortedColumns } from '.';
 
 import { applyFilter } from '../helpers';
-import { merge } from 'lodash';
 import { useDataGridSettings } from './useDataGridSettings';
 
 export const useDataGrid = <R,>(
@@ -69,7 +70,13 @@ export const useDataGrid = <R,>(
 
   // Update columns when settings change
   useEffect(() => {
-    setColumns((prev) => merge({}, prev, settings));
+    setColumns((prev) =>
+      merge(
+        {},
+        prev,
+        pickBy(settings, (_, key) => key in prev)
+      )
+    );
   }, [settings]);
 
   /** ROWS SELECTION **/
@@ -166,6 +173,36 @@ export const useDataGrid = <R,>(
   /** VIRTUAL SCROLLING */
   const scrollableRef = useRef<HTMLDivElement>(null);
 
+  /** RESIZING */
+  const [resizingColumnKey, setResizingColumnKey] = useState<string | null>(
+    null
+  );
+  const resizingOffset = useRef(0);
+
+  const startResizing = useCallback(
+    (e: MouseEvent, columnKey: string) => {
+      resizingOffset.current =
+        e.screenX - (columns[columnKey]?.width || DEFAULT_COLUMN_WIDTH);
+      setResizingColumnKey(columnKey);
+    },
+    [columns]
+  );
+
+  const moveResizing = useCallback(
+    (e: MouseEvent) => {
+      if (resizingColumnKey) {
+        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
+        setColumnWidth(resizingColumnKey, newWidth);
+      }
+    },
+    [resizingColumnKey, setColumnWidth]
+  );
+
+  const endResizing = useCallback(() => {
+    setResizingColumnKey(null);
+    saveSettings();
+  }, [saveSettings]);
+
   /** FOOTERS */
   const [footers, setFooters] = useState<Record<string, string>>(
     props.initialFooters ?? {}
@@ -229,6 +266,10 @@ export const useDataGrid = <R,>(
       setFooters,
       footerFunctions,
       toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
       ...override,
     }),
     [
@@ -246,12 +287,15 @@ export const useDataGrid = <R,>(
       settings,
       setSettings,
       saveSettings,
-      scrollableRef,
       rowKeyGetter,
       gridTemplateColumns,
       footers,
       footerFunctions,
       toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
       override,
     ]
   );
@@ -282,6 +326,10 @@ export const useDataGrid = <R,>(
         footers: {},
         setFooters: () => {},
         toggleSelection: () => {},
+        resizingColumnKey: null,
+        startResizing: () => {},
+        moveResizing: () => {},
+        endResizing: () => {},
       }),
     []
   );

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

@@ -47,6 +47,9 @@ export const DataGridInner = <R,>(
     refresh,
     setSelectedKeys,
     fixedColumnsCount,
+    resizingColumnKey,
+    moveResizing,
+    endResizing,
   } = contextProps;
 
   useImperativeHandle(
@@ -82,6 +85,12 @@ export const DataGridInner = <R,>(
         className={className}
         $fixedColumnWidths={fixedColumnWidths}
       >
+        {resizingColumnKey && (
+          <styles.ResizeBackdrop
+            onMouseMove={moveResizing}
+            onMouseUp={endResizing}
+          />
+        )}
         <DataGridHeader context={DataGridContext} />
         <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
           integrated

package/src/components/data/DataGrid/styles.ts

@@ -1,4 +1,3 @@
-import styled, { css } from 'styled-components';
 import {
   DEFAULT_FOOTER_ROW_HEIGHT,
   DEFAULT_HEADER_ROW_HEIGHT,
@@ -6,6 +5,7 @@ import {
   SELECTION_CELL_WIDTH,
   TOOLBAR_HEIGHT,
 } from './constants';
+import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
@@ -331,5 +331,6 @@ export const ResizeBackdrop = styled.div.attrs({
   bottom: 0;
   background-color: rgba(0, 0, 0, 0);
   cursor: col-resize;
+  z-index: 100;
 `;
 ResizeBackdrop.displayName = 'ResizeBackdrop';

package/src/components/data/DataGrid/types.ts

@@ -130,6 +130,10 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
+  resizingColumnKey: string | null;
+  startResizing: (e: MouseEvent, columnKey: string) => void;
+  moveResizing: (e: MouseEvent) => void;
+  endResizing: () => void;
   toggleSelection: (key: string) => void;
 };
 

package/src/components/data/SqlRequestGrid/types.ts

@@ -44,7 +44,7 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
   orderBy?: OrderByDTO[];
   conditions?: ConditionDTO[];
   parser?: (row: SqlRequestRow<R>) => R;
-  itemProps: P;
+  itemProps: P | ((item: R) => P);
   initialSorts?: Record<string, DataGridSort>;
 };
 

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

@@ -15,7 +15,7 @@ type VirtualScrollerProps<R, P extends object> = {
   gap?: string;
   itemsPerRow?: number;
   tolerance?: number;
-  itemProps: P;
+  itemProps: P | ((item: R) => P);
   onRangeChanged?: (index: number, length: number) => void;
   integrated?: boolean;
 };
@@ -70,14 +70,18 @@ export const VirtualScroller = <R, P extends object>({
           $itemHeight={rowHeightInPx}
           $gap={gap}
         >
-          {visibleItems.map((item, currentIndex) => (
-            <ItemTemplate
-              key={indexWithTolerance + currentIndex}
-              item={item}
-              index={currentIndex}
-              {...itemProps}
-            />
-          ))}
+          {visibleItems.map((item, currentIndex) => {
+            const currentItemProps =
+              typeof itemProps === 'function' ? itemProps(item) : itemProps;
+            return (
+              <ItemTemplate
+                key={indexWithTolerance + currentIndex}
+                item={item}
+                index={currentIndex}
+                {...currentItemProps}
+              />
+            );
+          })}
         </styles.VirtualScrollerItemsContainer>
       </styles.VirtualScrollerFiller>
     </styles.VirtualScrollerContainer>

package/src/providers/AuthenticationProvider/index.tsx

@@ -79,24 +79,27 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
   const sendCheckRecoveryKeyRequest = useCheckRecoveryKeyRequestHandler();
   const sendResetPasswordRequest = useResetPasswordRequestHandler();
 
-  const authenticate = useCallback(() => {
-    if (token && !user) {
-      sendAuthenticateRequest({ token }).then(
-        (response) => {
-          if (response.status === 0 && response.user) {
-            setUser(response.user);
-          } else if (response.status > 0) {
+  const authenticate = useCallback(
+    (force = false) => {
+      if (token && (!user || force)) {
+        sendAuthenticateRequest({ token }).then(
+          (response) => {
+            if (response.status === 0 && response.user) {
+              setUser(response.user);
+            } else if (response.status > 0) {
+              setToken(undefined);
+              setUser(undefined);
+            }
+          },
+          () => {
             setToken(undefined);
             setUser(undefined);
           }
-        },
-        () => {
-          setToken(undefined);
-          setUser(undefined);
-        }
-      );
-    }
-  }, [sendAuthenticateRequest, token, user]);
+        );
+      }
+    },
+    [sendAuthenticateRequest, token, user]
+  );
 
   useEffect(() => {
     if (token) {
@@ -215,7 +218,7 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
       (newStatus) => {
         setWebSocketStatus((previousStatus) => {
           if (!previousStatus && newStatus) {
-            authenticate();
+            authenticate(true);
           }
           return newStatus;
         });