@bit.rhplus/ui.grid 0.0.94 → 0.0.95

package/ColumnBuilder.jsx

@@ -12,139 +12,6 @@ import { CircleHelp, Check, X } from 'lucide-react';
 // Globální cache pro názvy zemí (sdílená napříč všemi instancemi ColumnBuilder)
 const COUNTRY_NAMES_CACHE = {};
 
-/**
- * Custom React hook pro zpracování interakcí s link buňkou v AG Grid.
- * Obsluhuje hover efekty, kliky a přepínání overview módu.
- * @param {Object} params - AG Grid parametry buňky
- * @param {Function} onClick - Callback funkce při kliku na link
- * @param {Object|Function} linkStyle - CSS styl pro link nebo funkce vracející styl
- * @param {Object|Function} hoverStyle - CSS styl pro hover stav nebo funkce vracející styl
- * @param {boolean} overviewToggle - Příznak zda aktivovat overview toggle funkčnost
- * @returns {Object} Objekt s handlry a styly pro link buňku
- */
-const useLinkCellRenderer = (
-  params,
-  onClick,
-  linkStyle,
-  hoverStyle,
-  overviewToggle
-) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  const handleMouseEnter = React.useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = React.useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const handleClick = React.useCallback(
-    (event) => {
-      event.stopPropagation();
-
-      if (overviewToggle && params.api) {
-        params.api.dispatchEvent({
-          type: 'overviewToggle',
-          data: params.data,
-          params,
-        });
-      }
-
-      if (onClick) {
-        onClick(params);
-      }
-    },
-    [onClick, overviewToggle, params]
-  );
-
-  // Přesunuto do useMemo, aby se vytvořilo pouze jednou
-  const defaultLinkStyle = React.useMemo(
-    () => ({
-      color: '#1a73e8',
-      textDecoration: 'none',
-      cursor: 'pointer',
-    }),
-    []
-  );
-
-  // Přesunuto do useMemo, aby se vytvořilo pouze jednou
-  const defaultHoverStyle = React.useMemo(
-    () => ({
-      textDecoration: 'underline',
-    }),
-    []
-  );
-
-  const computedLinkStyle = React.useMemo(
-    () => ({
-      ...defaultLinkStyle,
-      ...(typeof linkStyle === 'function'
-        ? linkStyle(params)
-        : linkStyle || {}),
-    }),
-    [linkStyle, params, defaultLinkStyle]
-  );
-
-  const computedHoverStyle = React.useMemo(
-    () => ({
-      ...defaultLinkStyle,
-      ...computedLinkStyle,
-      ...defaultHoverStyle,
-      ...(typeof hoverStyle === 'function'
-        ? hoverStyle(params)
-        : hoverStyle || {}),
-    }),
-    [computedLinkStyle, hoverStyle, params, defaultLinkStyle, defaultHoverStyle]
-  );
-
-  return {
-    isHovered,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleClick,
-    computedLinkStyle,
-    computedHoverStyle,
-  };
-};
-
-/**
- * Custom React hook pro zpracování interakcí s object buňkou v AG Grid.
- * Poskytuje funkcionalitu pro editovatelné objekty s hover efekty a edit tlačítkem.
- * @param {Object} params - AG Grid parametry buňky
- * @param {boolean} editable - Příznak zda je buňka editovatelná
- * @param {Function} onEditClick - Callback funkce při kliku na edit tlačítko
- * @returns {Object} Objekt s handlry pro object buňku
- */
-const useObjectCellRenderer = (params, editable, onEditClick) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  const handleMouseEnter = React.useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = React.useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const handleEditClick = React.useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (onEditClick) {
-        onEditClick(params);
-      }
-    },
-    [onEditClick, params]
-  );
-
-  return {
-    isHovered,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleEditClick,
-  };
-};
-
 /**
  * Custom React hook pro detekci hover stavu řádku v AG Grid.
  * Používá MutationObserver pro sledování CSS tříd řádků a detekci hover stavu.
@@ -453,73 +320,55 @@ class ColumnBuilder {
    * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
    * @returns {ColumnBuilder} Instance pro chaining
    */
+  /**
+   * Přidá sloupec s odkazem (link) - Používá extrahovaný LinkRenderer.
+   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+   * @param {Object} config - Konfigurace link sloupce
+   * @param {string} [config.cellAlign='left'] - Horizontální zarovnání obsahu ('left', 'center', 'right')
+   * @param {Function} [config.onClick] - Callback funkce při kliku na link
+   * @param {Object|Function} [config.linkStyle] - CSS styl pro link nebo funkce vracející styl
+   * @param {Object|Function} [config.hoverStyle] - CSS styl pro hover stav nebo funkce vracející styl
+   * @param {boolean} [config.overviewToggle=false] - Příznak zda aktivovat overview toggle funkčnost
+   * @param {boolean} [config.editable=false] - Editovatelnost buňky
+   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost linku
+   * @param {boolean} [config.showOnGroup=false] - Zobrazit link i v group řádcích
+   * @param {Object} config.restProps - Další AG-Grid colDef parametry
+   * @returns {ColumnBuilder} Instance pro fluent API
+   */
   addLinkColumn({
+    cellAlign = 'left',
     onClick,
     linkStyle,
     hoverStyle,
-    cellAlign = 'left',
-    editable,
     overviewToggle = false,
+    editable = false,
+    visibleGetter,
+    showOnGroup = false,
+    contentTooltip,
+    tooltipField,
+    tooltipInteraction,
+    tooltipShowDelay,
     color,
     bgColor,
     colorField,
     bgColorField,
     ...restProps
   }) {
-    // Vytvořím komponentu pro cell renderer, která používá hook
-    const LinkCellRenderer = React.memo((params) => {
-      const {
-        isHovered,
-        handleMouseEnter,
-        handleMouseLeave,
-        handleClick,
-        computedLinkStyle,
-        computedHoverStyle,
-      } = useLinkCellRenderer(
-        params,
+    this.#addPreparedColumn({
+      cellAlign,
+      cellRenderer: 'linkRenderer',
+      cellRendererParams: {
         onClick,
         linkStyle,
         hoverStyle,
-        overviewToggle
-      );
-
-      return (
-        <div
-          className="link-cell-container"
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <span
-            onClick={handleClick}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            style={isHovered ? computedHoverStyle : computedLinkStyle}
-            role="button"
-            tabIndex={0}
-            onKeyPress={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                handleClick(event);
-              }
-            }}
-          >
-            {params.value}
-          </span>
-        </div>
-      );
-    });
-
-    // Používáme funkci, která vrátí React komponentu
-    const cellRenderer = (params) => {
-      return <LinkCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      cellAlign,
-      cellRenderer,
+        overviewToggle,
+        visibleGetter,
+        showOnGroup,
+      },
+      contentTooltip,
+      tooltipField,
+      tooltipInteraction,
+      tooltipShowDelay,
       editable: this.#resolveEditable(editable),
       overviewToggle,
       color,
@@ -585,73 +434,47 @@ class ColumnBuilder {
    * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
    * @returns {ColumnBuilder} Instance pro chaining
    */
+  /**
+   * Přidá sloupec pro zobrazení objektů - Používá extrahovaný ObjectRenderer.
+   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+   * @param {Object} config - Konfigurace object sloupce
+   * @param {boolean} [config.editable=false] - Příznak zda je buňka editovatelná s edit tlačítkem
+   * @param {Function} [config.onEditClick] - Callback funkce při kliku na edit tlačítko
+   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost objektu
+   * @param {boolean} [config.showOnGroup=false] - Zobrazit objekt i v group řádcích
+   * @param {string|Function} [config.displayField] - Název pole nebo funkce pro získání zobrazované hodnoty
+   * @param {Object} config.restProps - Další AG-Grid colDef parametry
+   * @returns {ColumnBuilder} Instance pro fluent API
+   */
   addObjectColumn({
+    editable = false,
+    onEditClick,
+    visibleGetter,
+    showOnGroup = false,
+    displayField,
     contentTooltip,
     tooltipField,
     tooltipInteraction,
-    tooltipShowDelay = 100,
-    editable,
-    onEditClick,
+    tooltipShowDelay,
     color,
     bgColor,
     colorField,
     bgColorField,
     ...restProps
   }) {
-    // Vytvořím komponentu pro cell renderer, která používá hook
-    const ObjectCellRenderer = React.memo((params) => {
-      const { isHovered, handleMouseEnter, handleMouseLeave, handleEditClick } =
-        useObjectCellRenderer(params, editable, onEditClick);
-
-      return (
-        <div
-          className="object-cell-container"
-          style={{
-            position: 'relative',
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <div style={{ flexGrow: 1 }}>{params.value}</div>
-          {isHovered && editable && (
-            <button
-              className="edit-object-button"
-              style={{
-                position: 'absolute',
-                right: '4px',
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-                padding: '4px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              onClick={handleEditClick}
-              title="Upravit"
-            >
-              <span style={{ fontSize: '16px' }}>⋮</span>
-            </button>
-          )}
-        </div>
-      );
-    });
-
-    // Používáme funkci, která vrátí React komponentu
-    const cellRenderer = (params) => {
-      return <ObjectCellRenderer {...params} />;
-    };
-
     this.#addPreparedColumn({
+      cellRenderer: 'objectRenderer',
+      cellRendererParams: {
+        editable,
+        onEditClick,
+        visibleGetter,
+        showOnGroup,
+        displayField,
+      },
       contentTooltip,
       tooltipField,
       tooltipInteraction,
       tooltipShowDelay,
-      cellRenderer,
       editable: this.#resolveEditable(editable),
       color,
       bgColor,
@@ -886,22 +709,70 @@ class ColumnBuilder {
     bgColorField,
     ...restProps
   }) {
+    // Memoizovaná CountryFlag sub-komponenta s lazy loading a error handling
+    const CountryFlag = React.memo(({ code, size }) => {
+      const [hasError, setHasError] = React.useState(false);
+
+      const flagUrl = React.useMemo(() => {
+        if (!code) return null;
+        return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
+      }, [code]);
+
+      const handleError = React.useCallback(() => {
+        setHasError(true);
+      }, []);
+
+      React.useEffect(() => {
+        setHasError(false);
+      }, [flagUrl]);
+
+      const flagStyle = React.useMemo(() => ({
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: '50%',
+        objectFit: 'cover',
+        flexShrink: 0,
+      }), [size]);
+
+      if (hasError || !flagUrl) return null;
+
+      return (
+        <img
+          src={flagUrl}
+          alt={`${code} flag`}
+          style={flagStyle}
+          loading="lazy"
+          onError={handleError}
+        />
+      );
+    });
+
+    CountryFlag.displayName = 'CountryFlag';
+
     const CountryCellRenderer = React.memo((params) => {
       const [countryName, setCountryName] = React.useState(null);
       const [isLoading, setIsLoading] = React.useState(false);
 
       // Získání kódu země
-      const code = countryCodeField 
-        ? getValueByPath(params.data, countryCodeField)
-        : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
-
-      if (!code) return null;
+      const code = React.useMemo(() => {
+        return countryCodeField
+          ? getValueByPath(params.data, countryCodeField)
+          : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
+      }, [params.data, params.value]);
+
+      const upperCode = React.useMemo(() =>
+        code ? code.toUpperCase() : null,
+        [code]
+      );
 
-      const upperCode = code.toUpperCase();
-      const cacheKey = `${upperCode}_${language}`;
+      const cacheKey = React.useMemo(() =>
+        upperCode ? `${upperCode}_${language}` : null,
+        [upperCode, language]
+      );
 
       // Načtení názvu země z REST Countries API
       React.useEffect(() => {
+        if (!upperCode || !cacheKey) return;
         if (displayType !== 'name') return;
         if (getCountryName) return;
 
@@ -912,16 +783,16 @@ class ColumnBuilder {
         }
 
         setIsLoading(true);
-        
-        // REST Countries API: https://restcountries.com/v3.1/alpha/{code}
+
+        // REST Countries API
         fetch(`https://restcountries.com/v3.1/alpha/${upperCode}`)
           .then(response => response.json())
           .then(data => {
             if (data && data[0]) {
               // Získání překladu podle jazyka
               const translations = data[0].translations;
-              let name = data[0].name.common; // fallback na anglický název
-              
+              let name = data[0].name.common;
+
               if (language === 'cs' && translations?.ces) {
                 name = translations.ces.common;
               } else if (language === 'cze' && translations?.cze) {
@@ -929,79 +800,78 @@ class ColumnBuilder {
               } else if (translations && translations[language]) {
                 name = translations[language].common;
               }
-              
-              
+
               // Uložení do cache
               COUNTRY_NAMES_CACHE[cacheKey] = name;
               setCountryName(name);
             }
           })
-          .catch((error) => {
-            console.error('Error fetching country:', error);
+          .catch(() => {
             // V případě chyby použijeme kód země
             setCountryName(upperCode);
           })
           .finally(() => {
             setIsLoading(false);
           });
-      }, [upperCode, cacheKey, displayType, getCountryName, params.value, language]);
-      
-      // Získání názvu země
-      let displayText = upperCode;
-      if (displayType === 'name') {
-        if (getCountryName) {
-          displayText = getCountryName(code, params);
-        } else if (countryName) {
-          displayText = countryName;
-        } else if (isLoading) {
-          displayText = '...';
-        } else if (params.value) {
-          displayText = params.value;
-        }
-      }
+      }, [upperCode, cacheKey, displayType, getCountryName]);
 
-      // URL veřejného API pro vlajky (flagcdn.com)
-      const flagUrl = `https://flagcdn.com/w40/${upperCode.toLowerCase()}.png`;
+      // Memoizovaný displayText
+      const displayText = React.useMemo(() => {
+        if (!upperCode) return '';
 
-      const flagStyle = {
-        width: `${flagSize}px`,
-        height: `${flagSize}px`,
-        borderRadius: '50%',
-        objectFit: 'cover',
-        flexShrink: 0,
-      };
+        if (displayType === 'name') {
+          if (getCountryName) {
+            return getCountryName(code, params);
+          }
+          if (countryName) {
+            return countryName;
+          }
+          if (isLoading) {
+            return '...';
+          }
+          if (params.value) {
+            return params.value;
+          }
+        }
 
-      const containerStyle = {
+        return upperCode;
+      }, [upperCode, displayType, getCountryName, code, params, countryName, isLoading]);
+
+      // Memoizovaný containerStyle
+      const containerStyle = React.useMemo(() => ({
         display: 'flex',
         alignItems: 'center',
-        justifyContent: cellAlign === 'center' ? 'center' : cellAlign === 'right' ? 'flex-end' : 'flex-start',
+        justifyContent:
+          cellAlign === 'center' ? 'center' :
+          cellAlign === 'right' ? 'flex-end' :
+          'flex-start',
         width: '100%',
         height: '100%',
         gap: `${textGap}px`,
         flexDirection: flagPosition === 'right' ? 'row-reverse' : 'row',
-      };
+      }), [cellAlign, textGap, flagPosition]);
+
+      if (!code) return null;
 
       return (
         <div style={containerStyle}>
-          <img 
-            src={flagUrl} 
-            alt={`${upperCode} flag`}
-            style={flagStyle}
-            onError={(e) => {
-              e.target.style.display = 'none';
-            }}
-          />
+          <CountryFlag code={upperCode} size={flagSize} />
           <span>{displayText}</span>
         </div>
       );
     });
 
+    CountryCellRenderer.displayName = 'CountryCellRenderer';
+
     const cellRenderer = (params) => {
       return <CountryCellRenderer {...params} />;
     };
 
     this.#addPreparedColumn({
       cellRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
       color,
       bgColor,
       colorField,
@@ -1051,58 +921,76 @@ class ColumnBuilder {
     bgColorField,
     ...restProps
   }) {
-    // Create a React component for boolean cell renderer
-    const BooleanCellRenderer = React.memo((params) => {
-      const { data, value } = params;
-
-      const visibleResult = visibleGetter ? visibleGetter(data) : true;
+    // Konstanty mimo komponentu pro lepší výkon
+    const ICON_STYLE = {
+      display: 'inline-block',
+      height: '100%',
+    };
 
-      const Icon = ({ innerValue, ...iconProps }) => {
-        if (innerValue === undefined || innerValue === null) {
-          if (defaultIcon)
-            return <CircleHelp size={size} color={defaultIconColor} {...iconProps} />;
+    // Memoizovaná Icon sub-komponenta
+    const Icon = React.memo(({ innerValue, size, colorTrue, colorFalse, visibleTrue, visibleFalse, defaultIcon, defaultIconColor }) => {
+      if (innerValue === undefined || innerValue === null) {
+        if (defaultIcon) {
+          return <CircleHelp size={size} color={defaultIconColor} style={ICON_STYLE} />;
         }
+        return null;
+      }
 
-        if ((!visibleFalse && !innerValue) ||
-          (!visibleTrue && (innerValue))) {
-          return <div />
-        }
+      if ((!visibleFalse && !innerValue) || (!visibleTrue && innerValue)) {
+        return null;
+      }
 
-        if (innerValue)
-          return <Check size={size} color={colorTrue} {...iconProps} />;
-        return <X size={size} color={colorFalse} {...iconProps} />;
-      };
+      if (innerValue) {
+        return <Check size={size} color={colorTrue} style={ICON_STYLE} />;
+      }
+
+      return <X size={size} color={colorFalse} style={ICON_STYLE} />;
+    });
 
-      const showCondition = () => {
+    Icon.displayName = 'BooleanIcon';
+
+    // Create a React component for boolean cell renderer
+    const BooleanCellRenderer = React.memo((params) => {
+      const { data, value } = params;
+
+      const visibleResult = React.useMemo(() =>
+        visibleGetter ? visibleGetter(data) : true,
+        [data]
+      );
+
+      const showCondition = React.useMemo(() => {
         const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
         return !newItem && (showOnGroup || !!data) && visibleResult;
-      };
+      }, [data, visibleResult]);
 
-      if (!showCondition()) return null;
+      const containerStyle = React.useMemo(() => ({
+        width: '100%',
+        display: 'flex',
+        justifyContent: cellAlign ?? 'center',
+        alignItems: 'center',
+        height: '100%',
+      }), [cellAlign]);
+
+      if (!showCondition) return null;
 
       return (
-        <span
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: cellAlign,
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
+        <span style={containerStyle}>
           <Icon
-            style={{
-              display: 'inline-block',
-              height: '100%',
-            }}
             innerValue={value}
+            size={size}
+            colorTrue={colorTrue}
+            colorFalse={colorFalse}
             visibleTrue={visibleTrue}
             visibleFalse={visibleFalse}
+            defaultIcon={defaultIcon}
+            defaultIconColor={defaultIconColor}
           />
         </span>
       );
     });
 
+    BooleanCellRenderer.displayName = 'BooleanCellRenderer';
+
     // Use the function that returns React component
     const cellRenderer = (params) => {
       return <BooleanCellRenderer {...params} />;
@@ -1110,6 +998,9 @@ class ColumnBuilder {
 
     this.#addPreparedColumn({
       cellRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
       editable: this.#resolveEditable(editable),
       color,
       bgColor,
@@ -1530,6 +1421,9 @@ class ColumnBuilder {
       filter: false,
       resizable: false,
       cellRenderer: ActionDropdownRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
       cellClass: 'action-button-cell-observer',
       ...restProps,
     });