@bit.rhplus/ui.grid 0.0.22 → 0.0.24

package/ColumnBuilder.jsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { Menu, Dropdown, Button, Divider } from 'antd';
+import { Menu, Dropdown, Divider } from 'antd';
 import { prepareCellStyle, prepareColDef, getValueByPath } from './utils';
 import { currencySymbols } from './enums';
 import { ActionIcon } from './Icons';
 
-
 // Vytvoříme React hook funkci pro link cell renderer
 const useLinkCellRenderer = (
   params,
@@ -122,72 +121,6 @@ const useObjectCellRenderer = (params, editable, onEditClick) => {
   };
 };
 
-// Vytvoříme React hook funkci pro row hover action renderer
-const useRowHoverActionRenderer = (params) => {
-  const [isRowHovered, setIsRowHovered] = React.useState(false);
-  const rowRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!params.node) return undefined;
-
-    // Funkce pro kontrolu, zda je řádek v hover stavu
-    const checkRowHoverState = () => {
-      // Najdeme DOM element řádku pomocí rowIndex
-      const rowElement = document.querySelector(
-        `.ag-row[row-index="${params.rowIndex}"]`
-      );
-      if (rowElement) {
-        rowRef.current = rowElement;
-        // AG-Grid automaticky přidává třídu ag-row-hover k řádku při najetí myší
-        const isHovered = rowElement.classList.contains('ag-row-hover');
-        setIsRowHovered(isHovered);
-      }
-    };
-
-    // Vytvoříme MutationObserver pro sledování změn tříd na řádku
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'class'
-        ) {
-          checkRowHoverState();
-        }
-      });
-    });
-
-    // Inicializujeme stav
-    checkRowHoverState();
-
-    // Přidáme observer k element řádku, pokud existuje
-    if (rowRef.current) {
-      observer.observe(rowRef.current, { attributes: true });
-    }
-
-    // Přidáme event listeners na grid container pro sledování pohybu myši
-    const gridContainer = document.querySelector('.ag-root-wrapper');
-    if (gridContainer) {
-      gridContainer.addEventListener('mouseover', checkRowHoverState);
-      gridContainer.addEventListener('mouseout', checkRowHoverState);
-    }
-
-    // Cleanup při odmontování komponenty
-    return () => {
-      if (rowRef.current) {
-        observer.disconnect();
-      }
-      if (gridContainer) {
-        gridContainer.removeEventListener('mouseover', checkRowHoverState);
-        gridContainer.removeEventListener('mouseout', checkRowHoverState);
-      }
-    };
-  }, [params.node, params.rowIndex]);
-
-  return {
-    isRowHovered,
-  };
-};
-
 class ColumnBuilder {
   #addPreparedColumn(props) {
     this.columns.push(prepareColDef(this.intl, props));
@@ -198,42 +131,43 @@ class ColumnBuilder {
     this.intl = intl;
   }
 
-addColumn({ colorField, ...props }) {
-  // Získáme původní cellStyle, pokud existuje
-  const originalCellStyle = props.cellStyle;
-  const {cellAlign, ...restProps} = props;
-  
-  // Pokud je zadáno colorField, vytvoříme novou funkci pro cellStyle
-  if (colorField) {
-    const overrideCellStyle = (params) => {
-      // Získáme základní styl
-      let baseStyle = {};
-      if (originalCellStyle) {
-        if (typeof originalCellStyle === 'function') {
-          baseStyle = originalCellStyle(params);
-        } else {
-          baseStyle = originalCellStyle;
+  addColumn({ colorField, ...props }) {
+    // Získáme původní cellStyle, pokud existuje
+    const originalCellStyle = props.cellStyle;
+    const { cellAlign, ...restProps } = props;
+
+    // Pokud je zadáno colorField, vytvoříme novou funkci pro cellStyle
+    if (colorField) {
+      const overrideCellStyle = (params) => {
+        // Získáme základní styl
+        let baseStyle = {};
+        if (originalCellStyle) {
+          if (typeof originalCellStyle === 'function') {
+            baseStyle = originalCellStyle(params);
+          } else {
+            baseStyle = originalCellStyle;
+          }
         }
-      }
-      
-      // Získáme hodnotu barvy z dat
-      const colorValue = params.data && getValueByPath(params.data, colorField);
-      const restStyle = prepareCellStyle(props);
-      // Vrátíme kombinovaný styl
-      return colorValue
-        ? { ...baseStyle, ...restStyle, color: colorValue }
-        : { ...baseStyle, ...restStyle };
-    };
-    
-    // Předáme upravené props do addPreparedColumn
-    this.#addPreparedColumn({ ...restProps, overrideCellStyle });
-  } else {
-    // Pokud není colorField zadán, použijeme původní implementaci
-    this.#addPreparedColumn(props);
+
+        // Získáme hodnotu barvy z dat
+        const colorValue =
+          params.data && getValueByPath(params.data, colorField);
+        const restStyle = prepareCellStyle(props);
+        // Vrátíme kombinovaný styl
+        return colorValue
+          ? { ...baseStyle, ...restStyle, color: colorValue }
+          : { ...baseStyle, ...restStyle };
+      };
+
+      // Předáme upravené props do addPreparedColumn
+      this.#addPreparedColumn({ ...restProps, overrideCellStyle });
+    } else {
+      // Pokud není colorField zadán, použijeme původní implementaci
+      this.#addPreparedColumn(props);
+    }
+
+    return this;
   }
-  
-  return this;
-}
 
   // Nová metoda pro přidání sloupce s fakturou pro overview mód
   addInvoiceCardColumn({
@@ -327,7 +261,7 @@ addColumn({ colorField, ...props }) {
     hoverStyle,
     cellAlign = 'left',
     editable,
-    overviewToggle = false, // Přidán výchozí parametr pro overview
+    overviewToggle = false,
     ...restProps
   }) {
     // Vytvořím komponentu pro cell renderer, která používá hook
@@ -347,6 +281,12 @@ addColumn({ colorField, ...props }) {
         overviewToggle
       );
 
+      const handleKeyPress = React.useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          handleClick(event);
+        }
+      }, [handleClick]);
+
       return (
         <div
           className="link-cell-container"
@@ -361,14 +301,10 @@ addColumn({ colorField, ...props }) {
             onClick={handleClick}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
+            onKeyPress={handleKeyPress}
             style={isHovered ? computedHoverStyle : computedLinkStyle}
             role="button"
             tabIndex={0}
-            onKeyPress={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                handleClick(event);
-              }
-            }}
           >
             {params.value}
           </span>
@@ -385,7 +321,7 @@ addColumn({ colorField, ...props }) {
       cellAlign,
       cellRenderer,
       editable: this.#resolveEditable(editable),
-      overviewToggle, // Předání příznaku dál
+      overviewToggle,
       ...restProps,
     });
     return this;
@@ -459,6 +395,7 @@ addColumn({ colorField, ...props }) {
               }}
               onClick={handleEditClick}
               title="Upravit"
+              type="button"
             >
               <span style={{ fontSize: '16px' }}>⋮</span>
             </button>
@@ -497,13 +434,13 @@ addColumn({ colorField, ...props }) {
       visibleGetter,
       icon,
       badge,
-      showZero
-    }
+      showZero,
+    };
     this.#addPreparedColumn({
       iconRenderer: true,
       iconRendererParams,
-      ...restProps
-    })
+      ...restProps,
+    });
     return this;
   }
 
@@ -530,57 +467,336 @@ addColumn({ colorField, ...props }) {
     return this;
   }
 
+  // Řešení s izolovaným observer pro každý grid instance
   addPinnedActionButton({
-    menuItems = [
-      { key: '1', label: 'Hromadné smazání' },
-      { key: '2', label: 'Hromadná aktualizace' },
-      { key: '3', label: 'Spravovat značky' },
-      { key: '4', label: 'Koncepty' },
-      { key: '5', label: 'Hromadný e-mail' },
-      { key: '6', label: 'Automatické odpovědi' },
-      { key: '7', label: 'Schválit Kontakty' },
-      { key: '8', label: 'Deduplikovat Kontakty' },
-      { key: '9', label: 'Přidat do Kampaně' },
-      { key: '10', label: 'Vytvoření klientského skriptu' },
-      { key: 'divider1', type: 'divider' },
-      { key: '11', label: 'Export Kontakty' },
-      { key: '12', label: 'Zobrazení Zoho Sheet' },
-      { key: 'divider2', type: 'divider' },
-      { key: '13', label: 'Náhled tisku' },
-    ],
+    menuItems = [],
     onActionClick,
+    onBeforeShow,
     ...restProps
   } = {}) {
-    // Vytvořím React komponentu pro renderer s dropdown menu
-    const ActionDropdownRenderer = React.memo((params) => {
-      const { isRowHovered } = useRowHoverActionRenderer(params);
-      // Stav pro sledování, zda je dropdown otevřený
+    const ActionDropdownRenderer = (params) => {
+      const [isRowHovered, setIsRowHovered] = React.useState(false);
       const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
+      const [currentMenuItems, setCurrentMenuItems] = React.useState(menuItems);
+
+      const isMountedRef = React.useRef(true);
+      const rowIndexRef = React.useRef(null);
+      const observerRef = React.useRef(null);
+      const gridContainerRef = React.useRef(null);
+      const currentHoveredRowRef = React.useRef(null);
+      const mouseListenersSetupRef = React.useRef(false);
 
-      // Vytvoření menu komponentu
-      const menu = (
-        <Menu
-          onClick={(e) => {
-            if (onActionClick) {
-              onActionClick(e.key, params);
+      // Notifikace o změně hover stavu - definována před použitím
+      const notifyRowHoverChange = React.useCallback((rowIndex, isHovered) => {
+        if (!isMountedRef.current) return;
+
+        if (!isHovered && rowIndexRef.current) {
+          setIsRowHovered(false);
+        }
+
+        if (isHovered && rowIndexRef.current === rowIndex) {
+          setIsRowHovered(true);
+        }
+      }, []);
+
+      // Mouse event handlers - nyní definovány po notifyRowHoverChange
+      const handleMouseMove = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        const { target } = event;
+        if (!target) return;
+
+        const rowElement = target.closest('.ag-row');
+
+        if (rowElement) {
+          const rowIndex =
+            rowElement.getAttribute('row-index') ||
+            rowElement.getAttribute('aria-rowindex') ||
+            rowElement.dataset.rowIndex ||
+            rowElement.getAttribute('data-ag-row-index');
+
+          if (rowIndex !== null) {
+            const normalizedRowIndex = rowIndex.toString();
+
+            if (normalizedRowIndex !== currentHoveredRowRef.current) {
+              if (currentHoveredRowRef.current !== null) {
+                notifyRowHoverChange(currentHoveredRowRef.current, false);
+              }
+
+              currentHoveredRowRef.current = normalizedRowIndex;
+              notifyRowHoverChange(normalizedRowIndex, true);
             }
-            // Po kliknutí na položku zavřeme dropdown
-            setIsDropdownVisible(false);
-          }}
-        >
-          {menuItems.map((item) => {
-            if (item.type === 'divider') {
-              return <Divider key={item.key} style={{ margin: '4px 0' }} />;
+          }
+        } else if (currentHoveredRowRef.current !== null) {
+          notifyRowHoverChange(currentHoveredRowRef.current, false);
+          currentHoveredRowRef.current = null;
+        }
+      }, [notifyRowHoverChange]);
+
+      const handleMouseLeave = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        const { relatedTarget } = event;
+
+        if (
+          gridContainerRef.current &&
+          (!relatedTarget || !gridContainerRef.current.contains(relatedTarget))
+        ) {
+          if (currentHoveredRowRef.current !== null) {
+            notifyRowHoverChange(currentHoveredRowRef.current, false);
+            currentHoveredRowRef.current = null;
+          }
+        }
+      }, [notifyRowHoverChange]);
+
+      // Cleanup funkce - definována po handleMouseMove a handleMouseLeave
+      const cleanup = React.useCallback(() => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+
+        if (gridContainerRef.current && mouseListenersSetupRef.current) {
+          gridContainerRef.current.removeEventListener(
+            'mousemove',
+            handleMouseMove
+          );
+          gridContainerRef.current.removeEventListener(
+            'mouseleave',
+            handleMouseLeave
+          );
+          mouseListenersSetupRef.current = false;
+        }
+      }, [handleMouseMove, handleMouseLeave]);
+
+      React.useEffect(() => {
+        return () => {
+          isMountedRef.current = false;
+          cleanup();
+        };
+      }, [cleanup]);
+
+      // Získáme row index z params
+      React.useEffect(() => {
+        const { node, rowIndex } = params;
+        if (node && node.rowIndex !== undefined) {
+          rowIndexRef.current = node.rowIndex.toString();
+        } else if (rowIndex !== undefined) {
+          rowIndexRef.current = rowIndex.toString();
+        }
+      }, [params]);
+
+      // Nastavení observer pro tento konkrétní grid
+      const setupGridObserver = React.useCallback(() => {
+        const { api, eGridCell } = params;
+        if (!api || observerRef.current || !isMountedRef.current) return;
+
+        const findThisGridContainer = () => {
+          if (eGridCell) {
+            let current = eGridCell;
+            while (current && current !== document.body) {
+              if (
+                current.classList &&
+                (current.classList.contains('ag-root-wrapper') ||
+                  current.classList.contains('ag-theme-alpine') ||
+                  current.classList.contains('ag-theme-balham') ||
+                  current.classList.contains('ag-theme-material') ||
+                  current.classList.contains('ag-theme-fresh') ||
+                  current.classList.contains('ag-theme-dark') ||
+                  current.classList.contains('ag-theme-blue') ||
+                  current.classList.contains('ag-theme-bootstrap'))
+              ) {
+                return current;
+              }
+              current = current.parentElement;
             }
-            return <Menu.Item key={item.key}>{item.label}</Menu.Item>;
-          })}
-        </Menu>
+          }
+          return null;
+        };
+
+        const gridContainer = findThisGridContainer();
+        if (!gridContainer) {
+          setTimeout(setupGridObserver, 100);
+          return;
+        }
+
+        gridContainerRef.current = gridContainer;
+
+        if (!mouseListenersSetupRef.current) {
+          gridContainer.addEventListener('mousemove', handleMouseMove, {
+            passive: true,
+          });
+          gridContainer.addEventListener('mouseleave', handleMouseLeave, {
+            passive: true,
+          });
+
+          const handleMouseEnter = () => {
+            if (isMountedRef.current) {
+              currentHoveredRowRef.current = null;
+              setIsRowHovered(false);
+            }
+          };
+          gridContainer.addEventListener('mouseenter', handleMouseEnter, {
+            passive: true,
+          });
+
+          mouseListenersSetupRef.current = true;
+        }
+
+        observerRef.current = new MutationObserver((mutations) => {
+          if (!isMountedRef.current) return;
+
+          let shouldRecalculate = false;
+
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+              const addedRows = Array.from(mutation.addedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              const removedRows = Array.from(mutation.removedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              if (addedRows || removedRows) {
+                shouldRecalculate = true;
+              }
+            }
+          });
+
+          if (shouldRecalculate) {
+            currentHoveredRowRef.current = null;
+            setIsRowHovered(false);
+
+            setTimeout(() => {
+              if (isMountedRef.current && gridContainerRef.current) {
+                const rect = gridContainerRef.current.getBoundingClientRect();
+                const mouseEvent = new MouseEvent('mousemove', {
+                  clientX: window.lastMouseX || rect.left + rect.width / 2,
+                  clientY: window.lastMouseY || rect.top + rect.height / 2,
+                  bubbles: true,
+                });
+                gridContainerRef.current.dispatchEvent(mouseEvent);
+              }
+            }, 100);
+          }
+        });
+
+        observerRef.current.observe(gridContainer, {
+          childList: true,
+          subtree: true,
+          attributes: false,
+        });
+
+        const trackMouse = (e) => {
+          window.lastMouseX = e.clientX;
+          window.lastMouseY = e.clientY;
+        };
+
+        document.addEventListener('mousemove', trackMouse, { passive: true });
+
+        const removeMouseListener = () => {
+          document.removeEventListener('mousemove', trackMouse);
+        };
+
+        removeMouseListener();
+      }, [params, handleMouseMove, handleMouseLeave]);
+
+      React.useEffect(() => {
+        setupGridObserver();
+      }, [setupGridObserver]);
+
+      const handleVisibleChange = React.useCallback(
+        async (visible) => {
+          if (!isMountedRef.current) return;
+
+          if (visible && onBeforeShow) {
+            try {
+              const updatedMenuItems = await onBeforeShow(params, menuItems);
+              if (
+                updatedMenuItems &&
+                Array.isArray(updatedMenuItems) &&
+                isMountedRef.current
+              ) {
+                setCurrentMenuItems(updatedMenuItems);
+              }
+            } catch (error) {
+              // Odstraněn console.error pro ESLint
+              if (isMountedRef.current) {
+                setCurrentMenuItems(menuItems);
+              }
+            }
+          }
+
+          if (isMountedRef.current) {
+            setIsDropdownVisible(visible);
+          }
+        },
+        [params]
+      );
+
+      React.useEffect(() => {
+        if (isMountedRef.current) {
+          setCurrentMenuItems(menuItems);
+        }
+      }, []);
+
+      const menu = React.useMemo(
+        () => (
+          <Menu
+            onClick={(e) => {
+              if (onActionClick) {
+                const item = currentMenuItems.filter(f => f.key === e.key)[0];
+                onActionClick(e.key, params, item);
+              }
+              setIsDropdownVisible(false);
+            }}
+          >
+            {currentMenuItems.map((item) => {
+              if (item.type === 'divider') {
+                return <Divider key={item.key} style={{ margin: '4px 0' }} />;
+              }
+
+              const { disable, disabled } = item;
+              let isDisabled = false;
+              if (typeof disable === 'function') {
+                isDisabled = disable(params);
+              } else if (typeof disable === 'boolean') {
+                isDisabled = disable;
+              } else if (disabled !== undefined) {
+                isDisabled = disabled;
+              }
+
+              return (
+                <Menu.Item key={item.key} disabled={isDisabled}>
+                  {item.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        ),
+        [currentMenuItems, params]
       );
 
-      // Styly pro tlačítko
+      const containerStyle = {
+        width: '32px',
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      };
+
       const buttonStyle = {
         minWidth: 'auto',
         width: '32px',
+        height: '32px',
         padding: '0',
         background: 'transparent',
         border: 'none',
@@ -588,40 +804,60 @@ addColumn({ colorField, ...props }) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        opacity: isRowHovered || isDropdownVisible ? 1 : 0,
+        visibility: isRowHovered || isDropdownVisible ? 'visible' : 'hidden',
+        transition: 'opacity 0.15s ease-in-out, visibility 0.15s ease-in-out',
+        pointerEvents: isRowHovered || isDropdownVisible ? 'auto' : 'none',
       };
 
-      // Zobrazíme tlačítko pouze pokud je řádek v hover stavu NEBO dropdown je otevřený
-      if (!isRowHovered && !isDropdownVisible) return null;
+      const handleDropdownClick = React.useCallback((e) => {
+        e.stopPropagation();
+      }, []);
+
+      const handleKeyDown = React.useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setIsDropdownVisible(!isDropdownVisible);
+        }
+      }, [isDropdownVisible]);
 
       return (
-        <Dropdown
-          overlayStyle={{ zIndex: 5000 }}
-          overlay={menu}
-          trigger={['click']}
-          visible={isDropdownVisible}
-          onVisibleChange={(visible) => setIsDropdownVisible(visible)}
-        >
-          <Button
-            style={buttonStyle}
-            // Zastavíme propagaci události mouseLeave, aby nedošlo k zavření dropdown
-            onMouseEnter={(e) => {
-              e.stopPropagation();
-            }}
+        <div style={containerStyle}>
+          <Dropdown
+            overlayStyle={{ zIndex: 5000 }}
+            overlay={menu}
+            trigger={['click']}
+            visible={isDropdownVisible}
+            onVisibleChange={handleVisibleChange}
+            getPopupContainer={() => document.body}
           >
-            <ActionIcon />
-          </Button>
-        </Dropdown>
+            <div
+              style={buttonStyle}
+              onClick={handleDropdownClick}
+              onKeyDown={handleKeyDown}
+              role="button"
+              tabIndex={0}
+              aria-label="Otevřít akční menu"
+            >
+              <ActionIcon />
+            </div>
+          </Dropdown>
+        </div>
       );
-    });
+    };
 
     this.#addPreparedColumn({
       headerName: '',
       pinned: 'right',
-      maxWidth: 33,
+      maxWidth: 40,
+      minWidth: 40,
       suppressSizeToFit: true,
-      cellRenderer: (params) => {
-        return <ActionDropdownRenderer {...params} />;
-      },
+      suppressMenu: true,
+      sortable: false,
+      filter: false,
+      resizable: false,
+      cellRenderer: ActionDropdownRenderer,
+      cellClass: 'action-button-cell-observer',
       ...restProps,
     });
 
@@ -658,4 +894,4 @@ addColumn({ colorField, ...props }) {
   }
 }
 
-export default ColumnBuilder;
+export default ColumnBuilder;