@bit.rhplus/ag-grid 0.0.39 → 0.0.41

package/BulkEdit/useBulkCellEdit.js

@@ -1,348 +1,412 @@
-/* eslint-disable */
-import { useState, useCallback, useEffect, useRef } from 'react';
-import {
-  validateRangeEditable,
-  getLastCellPosition,
-  applyBulkChanges,
-  applyBulkChangesWithApi,
-} from './utils';
-import useData from '@bit.rhplus/data';
-
-/**
- * Hook pro bulk cell edit funkcionalitu v AG Grid
- * @param {Object} gridRef - Reference na AG Grid
- * @param {Object} options - Konfigurace bulk edit
- * @returns {Object} - State a handlery pro bulk edit
- */
-export const useBulkCellEdit = (gridRef, options = {}) => {
-  const {
-    enabled = false,
-    minCells = 2,
-    allowMultiColumn = false,
-    buttonPosition = 'bottom-right',
-    buttonOffset = { x: 5, y: 5 },
-    accessToken = null,
-    onBulkEditStart,
-    onBulkEditComplete,
-  } = options;
-
-  const { fetchDataUIAsync } = useData();
-
-  const [floatingButton, setFloatingButton] = useState({
-    visible: false,
-    position: null,
-    range: null,
-    column: null,
-    cellCount: 0,
-  });
-
-  const [editPopover, setEditPopover] = useState({
-    visible: false,
-    value: '',
-    loading: false,
-    error: null,
-  });
-
-  const scrollListenerRef = useRef(null);
-  const debounceTimeoutRef = useRef(null);
-  const pendingEventRef = useRef(null);
-
-  /**
-   * Handler pro změnu range selection s debounce optimalizací
-   */
-  const handleRangeChange = useCallback(
-    (event) => {
-      // Lightweight pre-checks - okamžitě bez debounce
-      if (!enabled) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      const ranges = event.api.getCellRanges();
-      if (!ranges || ranges.length === 0) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      // Uložit event pro debounced zpracování
-      pendingEventRef.current = event;
-
-      // Debounce logika - čekat až přestane označovat (150ms)
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-
-      debounceTimeoutRef.current = setTimeout(() => {
-        if (pendingEventRef.current) {
-          executeRangeValidation(pendingEventRef.current);
-        }
-      }, 150);
-    },
-    [enabled]
-  );
-
-  /**
-   * Těžké validace a výpočty v debounced callbacku
-   */
-  const executeRangeValidation = useCallback(
-    (event) => {
-      const ranges = event.api.getCellRanges();
-      if (!ranges || ranges.length === 0) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      const range = ranges[0];
-
-      // Kontrola single column
-      if (!allowMultiColumn && range.columns.length !== 1) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      // Výpočet počtu buněk
-      const cellCount =
-        Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
-
-      // Kontrola min počtu buněk
-      if (cellCount < minCells) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      // Těžká validace - editable sloupce
-      if (!validateRangeEditable(range, event.api)) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      // Těžký výpočet - pozice buňky
-      const cellPosition = getLastCellPosition(range, event.api);
-      if (!cellPosition) {
-        setFloatingButton({ visible: false });
-        return;
-      }
-
-      let buttonX, buttonY;
-
-      switch (buttonPosition) {
-        case 'bottom-right':
-          buttonX = cellPosition.right + buttonOffset.x;
-          buttonY = cellPosition.bottom + buttonOffset.y;
-          break;
-        case 'bottom-left':
-          buttonX = cellPosition.left - buttonOffset.x;
-          buttonY = cellPosition.bottom + buttonOffset.y;
-          break;
-        case 'top-right':
-          buttonX = cellPosition.right + buttonOffset.x;
-          buttonY = cellPosition.top - buttonOffset.y;
-          break;
-        case 'top-left':
-          buttonX = cellPosition.left - buttonOffset.x;
-          buttonY = cellPosition.top - buttonOffset.y;
-          break;
-        default:
-          buttonX = cellPosition.right + buttonOffset.x;
-          buttonY = cellPosition.bottom + buttonOffset.y;
-      }
-
-      setFloatingButton({
-        visible: true,
-        position: { x: buttonX, y: buttonY },
-        range,
-        column: range.columns[0],
-        cellCount,
-      });
-    },
-    [minCells, allowMultiColumn, buttonPosition, buttonOffset]
-  );
-
-  /**
-   * Handler pro kliknutí na bulk edit button - otevře popover
-   */
-  const handleOpenPopover = useCallback(() => {
-    if (onBulkEditStart) {
-      onBulkEditStart({
-        range: floatingButton.range,
-        column: floatingButton.column,
-        cellCount: floatingButton.cellCount,
-      });
-    }
-
-    setEditPopover({
-      visible: true,
-      value: '',
-      loading: false,
-      error: null,
-    });
-  }, [floatingButton, onBulkEditStart]);
-
-  /**
-   * Handler pro submit bulk edit změn
-   */
-  const handleSubmitEdit = useCallback(
-    async (newValue) => {
-      if (!gridRef.current || !floatingButton.range) {
-        return;
-      }
-
-      setEditPopover((prev) => ({ ...prev, loading: true, error: null }));
-
-      try {
-        const colDef = floatingButton.column?.getColDef();
-        const bulkEditApi = colDef?.bulkEditApi;
-
-        let result;
-
-        // Pokud je definováno bulkEditApi, použij API volání
-        if (bulkEditApi?.endpoint) {
-          result = await applyBulkChangesWithApi(
-            floatingButton.range,
-            newValue,
-            gridRef.current.api,
-            bulkEditApi,
-            accessToken,
-            fetchDataUIAsync,
-            (result) => {
-              if (onBulkEditComplete) {
-                onBulkEditComplete({
-                  ...result,
-                  range: floatingButton.range,
-                  column: floatingButton.column,
-                  newValue,
-                });
-              }
-            }
-          );
-        } else {
-          // Pokud není API, použij lokální změnu
-          result = applyBulkChanges(
-            floatingButton.range,
-            newValue,
-            gridRef.current.api,
-            (result) => {
-              if (onBulkEditComplete) {
-                onBulkEditComplete({
-                  ...result,
-                  range: floatingButton.range,
-                  column: floatingButton.column,
-                  newValue,
-                });
-              }
-            }
-          );
-        }
-
-        if (result.success) {
-          // Úspěch - zavřít popover a skrýt button
-          setEditPopover({
-            visible: false,
-            value: '',
-            loading: false,
-            error: null,
-          });
-          setFloatingButton({ visible: false });
-        } else {
-          // Chyba - zobrazit error
-          setEditPopover((prev) => ({
-            ...prev,
-            loading: false,
-            error: result.error || result.errors?.[0] || 'Chyba při aplikaci změn',
-          }));
-        }
-      } catch (error) {
-        setEditPopover((prev) => ({
-          ...prev,
-          loading: false,
-          error: error?.message || 'Neznámá chyba',
-        }));
-      }
-    },
-    [gridRef, floatingButton, onBulkEditComplete, accessToken, fetchDataUIAsync]
-  );
-
-  /**
-   * Handler pro zrušení bulk edit
-   */
-  const handleCancelEdit = useCallback(() => {
-    setEditPopover({
-      visible: false,
-      value: '',
-      loading: false,
-      error: null,
-    });
-    setFloatingButton({ visible: false });
-  }, []);
-
-  /**
-   * Handler pro změnu hodnoty v popover inputu
-   */
-  const handleValueChange = useCallback((value) => {
-    setEditPopover((prev) => ({ ...prev, value, error: null }));
-  }, []);
-
-  /**
-   * Scroll listener - skrýt button při scrollování
-   */
-  useEffect(() => {
-    if (!enabled || !gridRef.current) return;
-
-    const gridElement = gridRef.current.api?.gridBodyCtrl?.eBodyViewport;
-    if (!gridElement) return;
-
-    const handleScroll = () => {
-      if (floatingButton.visible) {
-        setFloatingButton({ visible: false });
-      }
-    };
-
-    scrollListenerRef.current = handleScroll;
-    gridElement.addEventListener('scroll', handleScroll);
-
-    return () => {
-      if (gridElement && scrollListenerRef.current) {
-        gridElement.removeEventListener('scroll', scrollListenerRef.current);
-      }
-    };
-  }, [enabled, gridRef, floatingButton.visible]);
-
-  /**
-   * Window resize listener - přepočítat pozici
-   */
-  useEffect(() => {
-    if (!enabled || !floatingButton.visible) return;
-
-    const handleResize = () => {
-      // Při resize okna skryjeme button (user musí znovu označit)
-      setFloatingButton({ visible: false });
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [enabled, floatingButton.visible]);
-
-  /**
-   * Cleanup timeout on unmount
-   */
-  useEffect(() => {
-    return () => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  return {
-    floatingButton,
-    editPopover,
-    handleRangeChange,
-    handleOpenPopover,
-    handleSubmitEdit,
-    handleCancelEdit,
-    handleValueChange,
-  };
-};
+/* eslint-disable */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  validateRangeEditable,
+  getLastCellPosition,
+  applyBulkChanges,
+  applyBulkChangesWithApi,
+} from './utils';
+import useData from '@bit.rhplus/data';
+
+/**
+ * Hook pro bulk cell edit funkcionalitu v AG Grid
+ * @param {Object} gridRef - Reference na AG Grid
+ * @param {Object} options - Konfigurace bulk edit
+ * @returns {Object} - State a handlery pro bulk edit
+ */
+export const useBulkCellEdit = (gridRef, options = {}) => {
+  const {
+    enabled = false,
+    minCells = 2,
+    allowMultiColumn = false,
+    buttonPosition = 'bottom-right',
+    buttonOffset = { x: 5, y: 5 },
+    accessToken = null,
+    onBulkEditStart,
+    onBulkEditComplete,
+  } = options;
+
+  const { fetchDataUIAsync } = useData();
+
+  const [floatingButton, setFloatingButton] = useState({
+    visible: false,
+    position: null,
+    range: null,
+    column: null,
+    cellCount: 0,
+  });
+
+  const [editPopover, setEditPopover] = useState({
+    visible: false,
+    value: '',
+    loading: false,
+    error: null,
+  });
+
+  const scrollListenerRef = useRef(null);
+  const debounceTimeoutRef = useRef(null);
+  const pendingEventRef = useRef(null);
+
+  /**
+   * Helper funkce pro výpočet pozice buttonu s viewport-aware positioning
+   */
+  const calculateButtonPosition = useCallback((cellPosition) => {
+    const BUTTON_SIZE = 32;
+    const POPOVER_WIDTH = 30;
+    const POPOVER_HEIGHT = 30;
+    const VIEWPORT_MARGIN = 10;
+    
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    
+    let buttonX, buttonY;
+    let adjustedPosition = buttonPosition;
+
+    switch (buttonPosition) {
+      case 'bottom-right':
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+        break;
+      case 'bottom-left':
+        buttonX = cellPosition.left - buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+        break;
+      case 'top-right':
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.top - buttonOffset.y;
+        break;
+      case 'top-left':
+        buttonX = cellPosition.left - buttonOffset.x;
+        buttonY = cellPosition.top - buttonOffset.y;
+        break;
+      default:
+        buttonX = cellPosition.right + buttonOffset.x;
+        buttonY = cellPosition.bottom + buttonOffset.y;
+    }
+
+    const buttonRight = buttonX + BUTTON_SIZE;
+    const popoverRight = buttonX + POPOVER_WIDTH;
+    const popoverBottom = buttonY + BUTTON_SIZE + POPOVER_HEIGHT;
+
+    if (popoverRight > viewportWidth - VIEWPORT_MARGIN) {
+      buttonX = cellPosition.left - buttonOffset.x - BUTTON_SIZE;
+      buttonX = Math.max(VIEWPORT_MARGIN, buttonX);
+    }
+
+    if (popoverBottom > viewportHeight - VIEWPORT_MARGIN) {
+      buttonY = cellPosition.top - buttonOffset.y - BUTTON_SIZE;
+      buttonY = Math.max(VIEWPORT_MARGIN, buttonY);
+    }
+
+    buttonX = Math.max(VIEWPORT_MARGIN, Math.min(buttonX, viewportWidth - BUTTON_SIZE - VIEWPORT_MARGIN));
+    buttonY = Math.max(VIEWPORT_MARGIN, Math.min(buttonY, viewportHeight - BUTTON_SIZE - VIEWPORT_MARGIN));
+
+    return { x: buttonX, y: buttonY };
+  }, [buttonPosition, buttonOffset]);
+
+  /**
+   * Handler pro změnu range selection s okamžitou + debounced validací
+   */
+  const handleRangeChange = useCallback(
+    (event) => {
+      // Lightweight pre-checks - okamžitě bez debounce
+      if (!enabled) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const ranges = event.api.getCellRanges();
+      if (!ranges || ranges.length === 0) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const range = ranges[0];
+
+      // ✨ OKAŽITÁ lightweight validace - zobraz button HNED
+      if (allowMultiColumn || range.columns.length === 1) {
+        const cellCount = Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
+        
+        if (cellCount >= minCells) {
+          // Kontrola zda má sloupec bulkEditApi (rychlá kontrola)
+          const column = range.columns[0];
+          const colDef = column?.getColDef();
+          const hasBulkEditApi = colDef?.bulkEditApi || colDef?.bulkEditPopover;
+          
+          // Zobraz button jen pokud má bulkEditApi nebo bulkEditPopover
+          if (hasBulkEditApi) {
+            const cellPosition = getLastCellPosition(range, event.api);
+            if (cellPosition) {
+              setFloatingButton({
+                visible: true,
+                position: calculateButtonPosition(cellPosition),
+                range,
+                column: column,
+                cellCount,
+              });
+            }
+          } else {
+            // Skryj button pokud sloupec nemá bulk edit podporu
+            setFloatingButton({ visible: false });
+          }
+        }
+      }
+
+      // Uložit event pro debounced těžkou validaci (editable check)
+      pendingEventRef.current = event;
+
+      // Debounce logika - těžká validace proběhne na pozadí (50ms)
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+
+      debounceTimeoutRef.current = setTimeout(() => {
+        if (pendingEventRef.current) {
+          executeRangeValidation(pendingEventRef.current);
+        }
+      }, 50);
+    },
+    [enabled, allowMultiColumn, minCells, calculateButtonPosition]
+  );
+
+  /**
+   * Těžké validace a výpočty v debounced callbacku
+   */
+  const executeRangeValidation = useCallback(
+    (event) => {
+      const ranges = event.api.getCellRanges();
+      if (!ranges || ranges.length === 0) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const range = ranges[0];
+
+      // Kontrola single column
+      if (!allowMultiColumn && range.columns.length !== 1) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // Výpočet počtu buněk
+      const cellCount =
+        Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
+
+      // Kontrola min počtu buněk
+      if (cellCount < minCells) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // Těžká validace - editable sloupce
+      if (!validateRangeEditable(range, event.api)) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // Těžký výpočet - pozice buňky
+      const cellPosition = getLastCellPosition(range, event.api);
+      if (!cellPosition) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      setFloatingButton({
+        visible: true,
+        position: calculateButtonPosition(cellPosition),
+        range,
+        column: range.columns[0],
+        cellCount,
+      });
+    },
+    [minCells, allowMultiColumn, buttonPosition, buttonOffset]
+  );
+
+  /**
+   * Handler pro kliknutí na bulk edit button - otevře popover
+   */
+  const handleOpenPopover = useCallback(() => {
+    if (onBulkEditStart) {
+      onBulkEditStart({
+        range: floatingButton.range,
+        column: floatingButton.column,
+        cellCount: floatingButton.cellCount,
+      });
+    }
+
+    setEditPopover({
+      visible: true,
+      value: '',
+      loading: false,
+      error: null,
+    });
+  }, [floatingButton, onBulkEditStart]);
+
+  /**
+   * Handler pro submit bulk edit změn
+   */
+  const handleSubmitEdit = useCallback(
+    async (newValue) => {
+      if (!gridRef.current || !floatingButton.range) {
+        return;
+      }
+
+      setEditPopover((prev) => ({ ...prev, loading: true, error: null }));
+
+      try {
+        const colDef = floatingButton.column?.getColDef();
+        const bulkEditApi = colDef?.bulkEditApi;
+
+        let result;
+
+        // Pokud je definováno bulkEditApi, použij API volání
+        if (bulkEditApi?.endpoint) {
+          result = await applyBulkChangesWithApi(
+            floatingButton.range,
+            newValue,
+            gridRef.current.api,
+            bulkEditApi,
+            accessToken,
+            fetchDataUIAsync,
+            (result) => {
+              if (onBulkEditComplete) {
+                onBulkEditComplete({
+                  ...result,
+                  range: floatingButton.range,
+                  column: floatingButton.column,
+                  newValue,
+                });
+              }
+            }
+          );
+        } else {
+          // Pokud není API, použij lokální změnu
+          result = applyBulkChanges(
+            floatingButton.range,
+            newValue,
+            gridRef.current.api,
+            (result) => {
+              if (onBulkEditComplete) {
+                onBulkEditComplete({
+                  ...result,
+                  range: floatingButton.range,
+                  column: floatingButton.column,
+                  newValue,
+                });
+              }
+            }
+          );
+        }
+
+        if (result.success) {
+          // Úspěch - zavřít popover a skrýt button
+          setEditPopover({
+            visible: false,
+            value: '',
+            loading: false,
+            error: null,
+          });
+          setFloatingButton({ visible: false });
+        } else {
+          // Chyba - zobrazit error
+          setEditPopover((prev) => ({
+            ...prev,
+            loading: false,
+            error: result.error || result.errors?.[0] || 'Chyba při aplikaci změn',
+          }));
+        }
+      } catch (error) {
+        setEditPopover((prev) => ({
+          ...prev,
+          loading: false,
+          error: error?.message || 'Neznámá chyba',
+        }));
+      }
+    },
+    [gridRef, floatingButton, onBulkEditComplete, accessToken, fetchDataUIAsync]
+  );
+
+  /**
+   * Handler pro zrušení bulk edit
+   */
+  const handleCancelEdit = useCallback(() => {
+    setEditPopover({
+      visible: false,
+      value: '',
+      loading: false,
+      error: null,
+    });
+    setFloatingButton({ visible: false });
+  }, []);
+
+  /**
+   * Handler pro změnu hodnoty v popover inputu
+   */
+  const handleValueChange = useCallback((value) => {
+    setEditPopover((prev) => ({ ...prev, value, error: null }));
+  }, []);
+
+  /**
+   * Scroll listener - skrýt button při scrollování
+   */
+  useEffect(() => {
+    if (!enabled || !gridRef.current) return;
+
+    const gridElement = gridRef.current.api?.gridBodyCtrl?.eBodyViewport;
+    if (!gridElement) return;
+
+    const handleScroll = () => {
+      if (floatingButton.visible) {
+        setFloatingButton({ visible: false });
+      }
+    };
+
+    scrollListenerRef.current = handleScroll;
+    gridElement.addEventListener('scroll', handleScroll);
+
+    return () => {
+      if (gridElement && scrollListenerRef.current) {
+        gridElement.removeEventListener('scroll', scrollListenerRef.current);
+      }
+    };
+  }, [enabled, gridRef, floatingButton.visible]);
+
+  /**
+   * Window resize listener - přepočítat pozici
+   */
+  useEffect(() => {
+    if (!enabled || !floatingButton.visible) return;
+
+    const handleResize = () => {
+      // Při resize okna skryjeme button (user musí znovu označit)
+      setFloatingButton({ visible: false });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [enabled, floatingButton.visible]);
+
+  /**
+   * Cleanup timeout on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    floatingButton,
+    editPopover,
+    handleRangeChange,
+    handleOpenPopover,
+    handleSubmitEdit,
+    handleCancelEdit,
+    handleValueChange,
+  };
+};