@bit.rhplus/ag-grid 0.0.63 → 0.0.64

package/index.jsx

@@ -17,7 +17,9 @@ import SelectRenderer from './Renderers/SelectRenderer';
 import ButtonRenderer from './Renderers/ButtonRenderer';
 import CountrySelectRenderer from './Renderers/CountrySelectRenderer';
 import NotificationOptionsInit from "./NotificationOptions";
-import { notification } from "antd";
+import AggregationStatusBar from "./AggregationStatusBar";
+import { notification, Button } from "antd";
+import { CompressOutlined } from '@ant-design/icons';
 import Aggregations, { hashRanges } from "./Aggregations";
 import { useBulkCellEdit, BulkEditButton } from './BulkEdit';
 import {
@@ -53,13 +55,27 @@ const AgGrid = React.forwardRef((props, ref) => {
     newRowFlash = true,
     updatedRowFlash = false,
     onGridReady,
-    enableNotification,
+    // Notification props
+    notificationMode = 'full', // 'full' | 'simple' | 'none'
     notificationOptions: {
       notificationHead = NotificationOptionsInit.head,
       notificationBody = NotificationOptionsInit.body,
       style = NotificationOptionsInit.style,
       placement = NotificationOptionsInit.placement,
     } = {},
+    // Status Bar props (pro simple mode)
+    statusBarMetrics = [
+      'count',
+      'sum',
+      'min',
+      'max',
+      'avg',
+      'median',
+      'range',
+      'geometry',
+      'dateRange'
+    ],
+    statusBarHeight = 36,
     // Bulk Edit props
     enableBulkEdit = false,
     bulkEditOptions = {},
@@ -79,8 +95,15 @@ const AgGrid = React.forwardRef((props, ref) => {
   }, [theme]);
   const [, setIsGridReady] = React.useState(false);
   const [isSelecting, setIsSelecting] = React.useState(false);
+  const [aggregationData, setAggregationData] = React.useState(null); // Pro simple mode status bar
+  const [activeNotificationMode, setActiveNotificationMode] = React.useState(notificationMode); // Aktivní mód (může být dočasně přepsán uživatelem)
   const previousRowDataRef = React.useRef(rowData);
 
+  // Synchronizovat activeNotificationMode s notificationMode prop
+  React.useEffect(() => {
+    setActiveNotificationMode(notificationMode);
+  }, [notificationMode]);
+
   // Bulk Edit hook
   const {
     floatingButton,
@@ -141,19 +164,104 @@ const AgGrid = React.forwardRef((props, ref) => {
   const notificationLastCallRef = React.useRef(0);
   const lastRangeHashRef = React.useRef(null);
 
+  // ✅ Callback pro přepnutí z full na simple mód
+  const handleSwitchToSimple = React.useCallback(() => {
+    const gridId = props.gridName || props.id || 'default';
+    const key = `aggregation-grid-${gridId}`;
+
+    // Zavřít full notifikaci
+    notification.destroy(key);
+
+    // Znovu spočítat a zobrazit simple status bar
+    if (internalRef?.current?.api) {
+      const ranges = internalRef.current.api.getCellRanges();
+      if (ranges && ranges.length > 0 && ranges[0]?.startRow) {
+        const messageInfo = Aggregations(internalRef);
+        if (messageInfo.count > 1) {
+          setAggregationData(messageInfo);
+        }
+      }
+    }
+
+    setActiveNotificationMode('simple');
+  }, [props, internalRef]);
+
+  // ✅ Helper funkce pro vytvoření custom description s tlačítkem pro přepnutí na simple
+  const createNotificationDescription = React.useCallback((messageInfo, showSwitchButton = false) => {
+    const bodyContent = notificationBody(messageInfo);
+
+    if (!showSwitchButton) {
+      return bodyContent;
+    }
+
+    return (
+      <div>
+        {bodyContent}
+        <div style={{ marginTop: '12px', borderTop: '1px solid #f0f0f0', paddingTop: '8px' }}>
+          <Button
+            type="link"
+            size="small"
+            icon={<CompressOutlined />}
+            onClick={handleSwitchToSimple}
+            style={{ padding: 0 }}
+          >
+            Zobrazit kompaktní režim
+          </Button>
+        </div>
+      </div>
+    );
+  }, [notificationBody, handleSwitchToSimple]);
+
+  // ✅ Callback pro přepnutí z simple na full mód
+  const handleSwitchToFull = React.useCallback(() => {
+    if (!aggregationData) return;
+
+    const gridId = props.gridName || props.id || 'default';
+    const key = `aggregation-grid-${gridId}`;
+
+    // Zobrazit full notifikaci s aktuálními daty a tlačítkem pro přepnutí
+    notification.info({
+      key,
+      message: notificationHead(aggregationData),
+      description: createNotificationDescription(aggregationData, true),
+      duration: 0,
+      style,
+      placement,
+    });
+
+    // Skrýt simple status bar
+    setAggregationData(null);
+    setActiveNotificationMode('full');
+  }, [aggregationData, props, notificationHead, createNotificationDescription, style, placement]);
+
   // ✅ OPTIMALIZACE: Helper funkce pro aktualizaci aggregace notifikace s cache check
   // Volá se BĚHEM označování s 100ms throttle pro real-time feedback
   const updateAggregationNotification = React.useCallback((event) => {
+    // Pokud je notificationMode 'none', nedělat nic
+    if (notificationMode === 'none') {
+      return;
+    }
+
     // Lightweight cache check PŘED voláním Aggregations()
     const ranges = event.api.getCellRanges();
     const currentRangeHash = hashRanges(ranges);
 
-    // Žádné ranges nebo jen jedna buňka - zavřít notifikaci
+    // Žádné ranges nebo jen jedna buňka - vyčistit vše
     if (!ranges || ranges.length === 0 || !ranges[0]?.startRow) {
-      const gridId = props.gridName || props.id || 'default';
-      const key = `aggregation-grid-${gridId}`;
       lastRangeHashRef.current = null;
-      notification.destroy(key);
+
+      // V 'full' módu zavřít notifikaci
+      if (activeNotificationMode === 'full') {
+        const gridId = props.gridName || props.id || 'default';
+        const key = `aggregation-grid-${gridId}`;
+        notification.destroy(key);
+      }
+
+      // V 'simple' módu vyčistit aggregationData
+      if (activeNotificationMode === 'simple') {
+        setAggregationData(null);
+      }
+
       return;
     }
 
@@ -165,38 +273,53 @@ const AgGrid = React.forwardRef((props, ref) => {
     // Cache miss - spočítat aggregace
     const messageInfo = Aggregations(internalRef);
 
-    const gridId = props.gridName || props.id || 'default';
-    const key = `aggregation-grid-${gridId}`;
-
     if (messageInfo.count > 1) {
       // Uložit hash pro příští porovnání
       lastRangeHashRef.current = currentRangeHash;
 
+      // Zavolat onAggregationChanged callback pokud existuje
       if (props.onAggregationChanged) {
         props.onAggregationChanged(messageInfo);
       }
 
-      // Dynamický style s pointer-events podle stavu označování
-      const dynamicStyle = {
-        ...style,
-        pointerEvents: isSelecting ? 'none' : 'auto'
-      };
+      // Podle aktivního módu zobrazit buď notifikaci nebo aktualizovat status bar
+      if (activeNotificationMode === 'full') {
+        // FULL mód - zobrazit plovoucí notifikaci s tlačítkem pro přepnutí na simple
+        const gridId = props.gridName || props.id || 'default';
+        const key = `aggregation-grid-${gridId}`;
 
-      // Aktualizace existující notifikace nebo vytvoření nové
-      notification.info({
-        key,
-        message: notificationHead(messageInfo),
-        description: notificationBody(messageInfo),
-        duration: 0,
-        style: dynamicStyle,
-        placement,
-      });
+        const dynamicStyle = {
+          ...style,
+          pointerEvents: isSelecting ? 'none' : 'auto'
+        };
+
+        notification.info({
+          key,
+          message: notificationHead(messageInfo),
+          description: createNotificationDescription(messageInfo, true),
+          duration: 0,
+          style: dynamicStyle,
+          placement,
+        });
+      } else if (activeNotificationMode === 'simple') {
+        // SIMPLE mód - aktualizovat state pro status bar
+        setAggregationData(messageInfo);
+      }
     } else {
-      // Jen jedna buňka - zavřít notifikaci
+      // Jen jedna buňka - zavřít/vyčistit vše
       lastRangeHashRef.current = null;
-      notification.destroy(key);
+
+      if (activeNotificationMode === 'full') {
+        const gridId = props.gridName || props.id || 'default';
+        const key = `aggregation-grid-${gridId}`;
+        notification.destroy(key);
+      }
+
+      if (activeNotificationMode === 'simple') {
+        setAggregationData(null);
+      }
     }
-  }, [internalRef, props, notificationHead, notificationBody, style, placement, isSelecting]);
+  }, [notificationMode, activeNotificationMode, internalRef, props, notificationHead, createNotificationDescription, style, placement, isSelecting]);
 
   // Detekce konce označování pomocí mouseup event
   React.useEffect(() => {
@@ -205,6 +328,16 @@ const AgGrid = React.forwardRef((props, ref) => {
       // takže tady jen ukončíme isSelecting stav
       setTimeout(() => {
         setIsSelecting(false);
+
+        // ✅ FIX: Zkontrolovat jestli jsou stále nějaké ranges, pokud ne - vyčistit status bar
+        if (internalRef?.current?.api && activeNotificationMode === 'simple') {
+          const ranges = internalRef.current.api.getCellRanges();
+          if (!ranges || ranges.length === 0 || !ranges[0]?.startRow) {
+            setAggregationData(null);
+            // Reset na původní notificationMode když jsou všechny buňky odznačeny
+            setActiveNotificationMode(notificationMode);
+          }
+        }
       }, 50);
     };
 
@@ -215,7 +348,7 @@ const AgGrid = React.forwardRef((props, ref) => {
       document.removeEventListener('mouseup', handleMouseUp);
       document.removeEventListener('touchend', handleMouseUp);
     };
-  }, []);
+  }, [notificationMode, activeNotificationMode, internalRef]);
 
   // Helper funkce pro nastavení pointer-events na notifikace
   const setNotificationPointerEvents = React.useCallback((enable) => {
@@ -306,7 +439,7 @@ const AgGrid = React.forwardRef((props, ref) => {
         clearTimeout(notificationThrottleRef.current);
       }
 
-      if (enableNotification) {
+      if (notificationMode === 'full') {
         const gridId = props.gridName || props.id || 'default';
         const key = `aggregation-grid-${gridId}`;
         notification.destroy(key);
@@ -317,7 +450,7 @@ const AgGrid = React.forwardRef((props, ref) => {
         delete window.agGridTransactionCallbacks[queryKey];
       }
     };
-  }, [enableNotification, props.gridName, props.id, queryKey]);
+  }, [notificationMode, props.gridName, props.id, queryKey]);
 
   React.useEffect(() => {
     // VYPNUTO: Cell flash je globálně vypnutý
@@ -408,15 +541,16 @@ const AgGrid = React.forwardRef((props, ref) => {
       // Detekovat začátek označování - nastavit isSelecting na true
       setIsSelecting(true);
 
-      // 1. ✅ OPTIMALIZACE: Zobrazení notifikace BĚHEM označování s THROTTLE (100ms)
-      // Throttle = spustí okamžitě první event, pak každých 100ms během označování
-      // Cache check v updateAggregationNotification zajistí, že se agregace nepočítají znovu pokud se range nezměnil
-      if (enableNotification) {
+      // 1. ✅ OPTIMALIZACE: Zobrazení notifikace BĚHEM označování s THROTTLE
+      // Simple mode: 300ms throttle (méně častá aktualizace, lepší výkon)
+      // Full mode: 100ms throttle (rychlejší feedback, plovoucí notifikace je levná)
+      if (notificationMode !== 'none') {
+        const throttleInterval = notificationMode === 'simple' ? 300 : 100;
         const now = Date.now();
         const timeSinceLastCall = now - notificationLastCallRef.current;
 
-        // První volání NEBO uplynulo 100ms od posledního volání
-        if (timeSinceLastCall >= 100) {
+        // První volání NEBO uplynul throttle interval
+        if (timeSinceLastCall >= throttleInterval) {
           // Okamžité volání
           notificationLastCallRef.current = now;
           if (internalRef?.current) {
@@ -433,7 +567,7 @@ const AgGrid = React.forwardRef((props, ref) => {
             if (internalRef?.current) {
               updateAggregationNotification(event);
             }
-          }, 100 - timeSinceLastCall);
+          }, throttleInterval - timeSinceLastCall);
         }
       }
 
@@ -447,7 +581,7 @@ const AgGrid = React.forwardRef((props, ref) => {
       // 3. Custom onRangeSelectionChanged callback - bez debounce
       if (props.onRangeSelectionChanged) props.onRangeSelectionChanged(event);
     },
-    [enableNotification, enableBulkEdit, handleRangeChange, props.onRangeSelectionChanged, updateAggregationNotification]
+    [notificationMode, enableBulkEdit, handleRangeChange, props.onRangeSelectionChanged, updateAggregationNotification]
   );
 
   const AgGridOnGridReady = (event, options) => {
@@ -627,10 +761,13 @@ const AgGrid = React.forwardRef((props, ref) => {
     onRangeSelectionChanged: RhPlusRangeSelectionChanged,
     context: memoizedContext,
     components,
+    // Explicitně zajistit že enableRangeSelection je propagováno
+    enableRangeSelection: props.enableRangeSelection,
   }), [
     internalRef,
     themeObject,
     props.columnDefs,
+    props.enableRangeSelection,
     memoizedDefaultColDef,
     memoizedOnCellEditingStarted,
     memoizedOnCellDoubleClicked,
@@ -655,9 +792,47 @@ const AgGrid = React.forwardRef((props, ref) => {
     }
   }, [quickFilterText, isApiReady]);
 
+  // Status bar se zobrazuje pouze v simple mode
+  const showStatusBar = notificationMode === 'simple' && aggregationData;
+
+  // ✅ FIX: Rezervovat místo pro status bar pouze když má data
+  // Grid se dynamicky rozšíří/zmenší podle přítomnosti status baru
+  const shouldReserveSpace = showStatusBar;
+  const gridContainerStyle = shouldReserveSpace
+    ? { height: `calc(100% - ${statusBarHeight}px)`, width: '100%', position: 'relative' }
+    : { height: '100%', width: '100%', position: 'relative' };
+
   return (
-    <>
-      <AgGridReact {...allGridProps} />
+    <div style={{ height: '100%', width: '100%', position: 'relative' }}>
+      {/* AG Grid - fixní výška, nikdy se nemění */}
+      <div style={gridContainerStyle}>
+        <AgGridReact {...allGridProps} />
+      </div>
+
+      {/* Aggregation Status Bar - absolutně pozicovaný na spodku */}
+      {shouldReserveSpace && (
+        <div style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: `${statusBarHeight}px`,
+          opacity: showStatusBar ? 1 : 0,
+          visibility: showStatusBar ? 'visible' : 'hidden',
+          pointerEvents: showStatusBar ? 'auto' : 'none',
+          zIndex: 10,
+          // GPU acceleration pro plynulejší zobrazení
+          transform: 'translateZ(0)',
+          willChange: 'opacity'
+        }}>
+          <AggregationStatusBar
+            data={aggregationData || {}}
+            metrics={statusBarMetrics}
+            height={statusBarHeight}
+            onSwitchToFull={handleSwitchToFull}
+          />
+        </div>
+      )}
 
       {/* Bulk Edit Floating Button */}
       {enableBulkEdit && floatingButton.visible && (
@@ -675,7 +850,7 @@ const AgGrid = React.forwardRef((props, ref) => {
           onCancel={handleCancelEdit}
         />
       )}
-    </>
+    </div>
   );
 });
 

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@bit.rhplus/ag-grid",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "homepage": "https://bit.cloud/remote-scope/ag-grid",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "ag-grid",
-    "version": "0.0.63"
+    "version": "0.0.64"
   },
   "dependencies": {
-    "linq": "^4.0.3",
     "moment": "^2.30.1",
+    "@ant-design/icons": "^5.4.0",
+    "antd": "^5.20.6",
     "lodash": "^4.17.21",
     "ag-grid-community": "^33.3.2",
     "ag-grid-react": "^33.3.2",
-    "antd": "^5.20.6",
-    "@ant-design/icons": "^5.4.0",
     "date-holidays": "^3.26.1",
     "dayjs": "^1.11.13",
     "styled-components": "^6.1.19",
     "lucide-react": "^0.503.0",
-    "@bit.rhplus/ui.grid": "0.0.81",
+    "linq": "^4.0.3",
+    "@bit.rhplus/ui.grid": "0.0.82",
     "@bit.rhplus/linq": "0.0.8",
-    "@bit.rhplus/ui2.module-dropdown-list": "0.1.57",
-    "@bit.rhplus/data": "0.0.60"
+    "@bit.rhplus/ui2.module-dropdown-list": "0.1.58",
+    "@bit.rhplus/data": "0.0.61"
   },
   "devDependencies": {
     "@teambit/react.react-env": "1.0.132"