@bit.rhplus/ag-grid 0.0.50 → 0.0.51

package/BulkEdit/BulkEditSelect.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import React, { useRef, useEffect } from 'react';
 import { Select, Button, Space } from 'antd';
+import * as LucideIcons from 'lucide-react';
 
 const BulkEditSelect = ({
   value,
@@ -13,6 +14,7 @@ const BulkEditSelect = ({
   allowClear = true,
   fieldLabel = 'value',
   fieldValue = 'id',
+  fieldIcon = null,
   showSearch = false,
 }) => {
   const selectRef = useRef(null);
@@ -47,13 +49,27 @@ const BulkEditSelect = ({
           disabled={loading}
           allowClear={allowClear}
           showSearch={showSearch}
-          filterOption={showSearch ? (input, option) =>
-            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-          : false}
-          options={options.map(item => ({
-            label: item[fieldLabel],
-            value: item[fieldValue]
-          }))}
+          filterOption={showSearch ? (input, option) => {
+            // Najdi původní item podle value pro filtrování
+            const originalItem = options.find(item => item[fieldValue] === option.value);
+            const searchText = originalItem?.[fieldLabel] || '';
+            return searchText.toLowerCase().includes(input.toLowerCase());
+          } : false}
+          options={options.map(item => {
+            const iconName = fieldIcon ? item[fieldIcon] : null;
+            const LucideIcon = iconName ? LucideIcons[iconName] : null;
+
+            return {
+              label: (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  {LucideIcon && <LucideIcon size={16} />}
+                  <span>{item[fieldLabel]}</span>
+                </div>
+              ),
+              value: item[fieldValue],
+              searchText: item[fieldLabel] // Pro lepší filtrování
+            };
+          })}
           onKeyDown={handleKeyDown}
           onClick={(e) => e.stopPropagation()}
           getPopupContainer={(trigger) => trigger.parentNode}

package/BulkEdit/utils.js

@@ -453,17 +453,22 @@ export const applyBulkChangesWithApi = async (
       } else if (bulkEditApi.lookup) {
         // Lookup pattern - najít objekt v lookupData a aktualizovat rows
         let selectedItem = null;
-        
+
         // Pokud je newValue prázdné ("" nebo null), nastavit selectedItem na null
         if (newValue !== "" && newValue !== null && newValue !== undefined) {
-          selectedItem = bulkEditApi.lookup.data.find(item => item.id === newValue);
-          
-          if (!selectedItem) {
+          const foundItem = bulkEditApi.lookup.data.find(item => item.id === newValue);
+
+          if (!foundItem) {
             console.warn(`⚠️ ${bulkEditApi.lookup.objectField} nenalezen pro ID:`, newValue);
+          } else {
+            // ✅ Vytvoř deep copy objektu včetně všech nested properties (např. icon)
+            // Tím zajistíme, že AG Grid detekuje změnu a IconRenderer dostane nová data
+            selectedItem = JSON.parse(JSON.stringify(foundItem));
           }
         }
-        
+
         // Aktualizovat rows - i když je selectedItem null (= clear hodnoty)
+        // ✅ Vytvoř nový objekt row s novým nested objektem (např. accountingType)
         updatedData = rows.map(row => {
           if (ids.includes(row.id)) {
             return {
@@ -502,8 +507,50 @@ export const applyBulkChangesWithApi = async (
       // Aplikovat změny do gridu
       if (updatedData && updatedData.length > 0) {
         gridApi.applyTransaction({ update: updatedData });
+
+        // ✅ DŮLEŽITÉ: Force refresh buněk po update transaction
+        // AG Grid nemusí detekovat změny v nested objektech (např. accountingType)
+        // refreshCells zajistí, že cell renderery dostanou nová data
+        const updatedNodes = [];
+        ids.forEach(id => {
+          let node = gridApi.getRowNode(id);
+          if (!node) {
+            gridApi.forEachNode(n => {
+              if (n.data?.id === id) {
+                node = n;
+              }
+            });
+          }
+          if (node) {
+            updatedNodes.push(node);
+            console.log('🔄 Bulk Edit - Updated node data:', {
+              id: node.data?.id,
+              field: field,
+              objectField: bulkEditApi.lookup?.objectField,
+              objectValue: node.data?.[bulkEditApi.lookup?.objectField],
+              column: column.getColId()
+            });
+          }
+        });
+
+        if (updatedNodes.length > 0) {
+          console.log('🔄 Bulk Edit - Refreshing cells:', {
+            nodesCount: updatedNodes.length,
+            column: column?.getColId(),
+            refreshingAllCells: true
+          });
+
+          // ✅ KLÍČOVÉ: Refresh VŠECH buněk v řádku, ne jen editovaného sloupce
+          // Důvod: Pokud se změní nested objekt (např. accountingType.icon),
+          // musíme refreshnout všechny sloupce které z něj čtou (včetně iconField)
+          gridApi.refreshCells({
+            rowNodes: updatedNodes,
+            // columns: [column.getColId()],  // ← Odstraněno - refresh všech sloupců
+            force: true
+          });
+        }
       }
-      
+
       // Flash efekt
       setTimeout(() => {
         const updatedNodes = [];
@@ -522,7 +569,7 @@ export const applyBulkChangesWithApi = async (
             updatedNodes.push(node);
           }
         });
-        
+
         if (updatedNodes.length > 0 && column) {
           gridApi.flashCells({
             rowNodes: updatedNodes,

package/Renderers/BooleanRenderer.jsx

@@ -1,13 +1,36 @@
+/* eslint-disable */
 import * as React from 'react';
 import { CircleHelp, Check, X } from 'lucide-react';
 
-export default function BooleanRenderer(props) {
-  const { data, value, colDef: { booleanRendererParams = {} } = {} } = props;
+// Memoized Icon component
+const Icon = React.memo(({ innerValue, size, colorTrue, colorFalse, visibleTrue, visibleFalse, defaultIcon, defaultIconColor, iconStyle }) => {
+  if (
+    innerValue === undefined ||
+    (!visibleFalse && !innerValue) ||
+    (!visibleTrue && innerValue)
+  ) {
+    if (defaultIcon)
+      return <CircleHelp size={size} color={defaultIconColor} style={iconStyle} />;
+    return <div />;
+  }
+
+  if (innerValue)
+    return <Check size={size} color={colorTrue} style={iconStyle} />;
+  return <X size={size} color={colorFalse} style={iconStyle} />;
+});
+
+Icon.displayName = 'BooleanIcon';
 
-  // Remove or comment out console statement to fix eslint warning
-  // console.log("🚀 ~ BooleanRenderer ~ value:", props, value);
+// Icon style constant
+const ICON_STYLE = {
+  display: 'inline-block',
+  height: '100%',
+};
+
+function BooleanRenderer(props) {
+  const { data, value, colDef: { booleanRendererParams = {} } = {} } = props;
 
-  if (!booleanRendererParams) return null; // Return null instead of undefined to match React's expected output
+  if (!booleanRendererParams) return null;
 
   const {
     cellAlign,
@@ -22,50 +45,42 @@ export default function BooleanRenderer(props) {
     colorFalse = 'red',
   } = booleanRendererParams;
 
-  const visibleResult = visibleGetter ? visibleGetter(data) : true;
-
-  const Icon = ({ innerValue, ...restProps }) => {
-    if (
-      innerValue === undefined ||
-      (!visibleFalse && !innerValue) ||
-      (!visibleTrue && innerValue)
-    ) {
-      if (defaultIcon)
-        return <CircleHelp size={size} color={defaultIconColor} />;
-      return <div />;
-    }
-
-    if (innerValue)
-      return <Check size={size} color={colorTrue} {...restProps} />;
-    return <X size={size} color={colorFalse} {...restProps} />;
-  };
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleResult;
-  };
+  }, [data, showOnGroup, visibleResult]);
 
-  if (!showCondition()) return null; // Return null instead of false to fix eslint error
+  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 ?? 'center',
-        alignItems: 'center',
-        height: '100%',
-      }}
-    >
+    <span style={containerStyle}>
       <Icon
-        style={{
-          display: 'inline-block',
-          height: '100%',
-        }}
+        style={ICON_STYLE}
         innerValue={value}
+        size={size}
+        colorTrue={colorTrue}
+        colorFalse={colorFalse}
         visibleTrue={visibleTrue}
         visibleFalse={visibleFalse}
+        defaultIcon={defaultIcon}
+        defaultIconColor={defaultIconColor}
+        iconStyle={ICON_STYLE}
       />
     </span>
   );
 }
+
+export default React.memo(BooleanRenderer);

package/Renderers/ButtonRenderer.jsx

@@ -1,38 +1,52 @@
-import React, { useState } from 'react';
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
 import Button from 'antd/es/button';
 
-const defaultStyle = {
+const DEFAULT_STYLE = {
   fontSize: '12px'
-}
+};
 
-const LargeButton = ({ button, onClick, props }) => {
+const SPAN_STYLE = { flexGrow: 1 };
+const LARGE_CONTAINER_STYLE = { display: 'flex', gap: '8px', width: '100%' };
+const SMALL_CONTAINER_STYLE = { display: 'flex', gap: '8px' };
+
+const LargeButton = React.memo(({ button, onClick, props }) => {
   const { id, label, largeLabel, style, className, icon } = button;
   const largeLabelValue = largeLabel instanceof Function ? largeLabel(props) : largeLabel;
   const labelValue = label instanceof Function ? label(props) : label;
+  const buttonStyle = useMemo(() => ({...DEFAULT_STYLE, ...style}), [style]);
+
+  const handleClick = useCallback((e) => onClick(e, id), [onClick, id]);
+
   return (
     <Button
       key={id}
       type="primary"
       size="small"
-      onClick={(e) => onClick(e, id)}
-      style={{...defaultStyle, ...style}}
+      onClick={handleClick}
+      style={buttonStyle}
       className={className}
       icon={icon}
     >
       {largeLabelValue || labelValue}
     </Button>
   );
-};
+});
+
+LargeButton.displayName = 'LargeButton';
 
-const SmallButton = ({ button, onClick, props }) => {
+const SmallButton = React.memo(({ button, onClick, props }) => {
   const { id, label, style, className, icon } = button;
   const labelValue = label instanceof Function ? label(props) : label;
+
+  const handleClick = useCallback((e) => onClick(e, id), [onClick, id]);
+
   return (
     <Button
       key={id}
       type="primary"
       size="small"
-      onClick={(e) => onClick(e, id)}
+      onClick={handleClick}
       style={style}
       className={className}
       icon={icon}
@@ -40,9 +54,11 @@ const SmallButton = ({ button, onClick, props }) => {
       {labelValue}
     </Button>
   );
-};
+});
+
+SmallButton.displayName = 'SmallButton';
 
-const ButtonRenderer = (props) => {
+function ButtonRenderer(props) {
   const [hovered, setHovered] = useState(false);
   const { value, colDef: { buttonRendererParams = {} } = {} } = props;
 
@@ -50,56 +66,57 @@ const ButtonRenderer = (props) => {
 
   const { visibleGetter, buttons = [] } = buttonRendererParams;
 
-  const onMouseEnter = () => {
+  const onMouseEnter = useCallback(() => {
     setHovered(true);
-  };
+  }, []);
 
-  const onMouseLeave = () => {
+  const onMouseLeave = useCallback(() => {
     setHovered(false);
-  };
+  }, []);
 
-  const onClick = (e, id) => {
+  const onClick = useCallback((e, id) => {
     e.preventDefault();
     const { context: { componentParent: { onButtonClick } = {} } = {} } = props || {};
     if (onButtonClick) onButtonClick(props, id);
-  };
+  }, [props]);
 
   const isEmptyValue = value === null || value === '' || value === undefined;
 
-  const visible = visibleGetter(props);
+  const visible = useMemo(() => visibleGetter(props), [visibleGetter, props]);
+
+  const containerStyle = useMemo(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: isEmptyValue ? 'center' : 'space-between',
+    height: '100%',
+    width: '100%',
+  }), [isEmptyValue]);
 
   return (
     <div
       className="custom-cell-renderer"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: isEmptyValue ? 'center' : 'space-between',
-        height: '100%',
-        width: '100%',
-      }}
+      style={containerStyle}
     >
-      {!isEmptyValue && <span style={{ flexGrow: 1 }}>{value}</span>}
-      {visible && (
-        hovered && buttons.length > 0 && (
-          isEmptyValue ? (
-            <div style={{ display: 'flex', gap: '8px', width: '100%' }}>
-              {buttons.map((button, index) => (
-                <LargeButton key={index} button={button} onClick={onClick} props={props} />
-              ))}
-            </div>
-          ) : (
-            <div style={{ display: 'flex', gap: '8px' }}>
-              {buttons.map((button, index) => (
-                <SmallButton key={index} button={button} onClick={onClick} props={props} />
-              ))}
-            </div>
-          )
-        ))}
+      {!isEmptyValue && <span style={SPAN_STYLE}>{value}</span>}
+      {visible && hovered && buttons.length > 0 && (
+        isEmptyValue ? (
+          <div style={LARGE_CONTAINER_STYLE}>
+            {buttons.map((button, index) => (
+              <LargeButton key={index} button={button} onClick={onClick} props={props} />
+            ))}
+          </div>
+        ) : (
+          <div style={SMALL_CONTAINER_STYLE}>
+            {buttons.map((button, index) => (
+              <SmallButton key={index} button={button} onClick={onClick} props={props} />
+            ))}
+          </div>
+        )
+      )}
     </div>
   );
-};
+}
 
-export default ButtonRenderer;
+export default React.memo(ButtonRenderer);

package/Renderers/CheckboxRenderer.jsx

@@ -1,35 +1,43 @@
 import * as React from 'react';
 
-export default function CheckboxRenderer(props) {
+// Style constant
+const CONTAINER_STYLE = { textAlign: "center" };
+
+function CheckboxRenderer(props) {
   const {
     value,
     data,
     column: { colDef: { cellTypeParams: { showOnGroup, condition } = {} } = {} } = {},
   } = props;
 
-  const onChange = e => {
+  const onChange = React.useCallback((e) => {
     e.preventDefault();
     const {context: { componentParent: {onCheckboxChange} = {}} = {}} = props || {};
     if (onCheckboxChange)
       onCheckboxChange(props);
-  }
+  }, [props]);
 
-  const visibleCondition = condition ? condition(data) : true;
+  const visibleCondition = React.useMemo(() =>
+    condition ? condition(data) : true,
+    [condition, data]
+  );
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleCondition;
-  };
+  }, [data, showOnGroup, visibleCondition]);
 
-  if (!showCondition()) return <div />;
+  if (!showCondition) return <div />;
 
   if (value === undefined) {
     return <div />
   }
 
   return (
-    <div style={{ textAlign: "center" }}>
+    <div style={CONTAINER_STYLE}>
       <input type="checkbox" checked={value} onChange={onChange} />
     </div>
   );
 }
+
+export default React.memo(CheckboxRenderer);

package/Renderers/CountrySelectRenderer.jsx

@@ -1,37 +1,44 @@
 import * as React from 'react';
 
-export default function SimpleCountryCellRenderer(params) {
+// Style constants
+const SPAN_STYLE = { marginLeft: 10, marginRight: 10 };
+const IMG_STYLE = { marginTop: -5 };
+
+function SimpleCountryCellRenderer(params) {
   const {
     value = {},
     data,
     column: {
       colDef: {
-        cellTypeParams: { showOnGroup, condition },
-      },
+        cellTypeParams: { showOnGroup, condition } = {},
+      } = {},
     } = {},
   } = params;
   const {id, name, code} = value;
 
   const visibleCondition = condition ? condition(data) : true;
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleCondition;
-  };
+  }, [data, showOnGroup, visibleCondition]);
 
-  if (!showCondition()) return <div />;
-  if (!id || !code) return <div />;
+  const imageUrl = React.useMemo(() => {
+    if (!code) return "";
+    return `https://rhplus.blob.core.windows.net/countries/${code.toUpperCase()}.png`;
+  }, [code]);
 
-  let imageUrl = "";
-  if (code)
-    imageUrl = `https://rhplus.blob.core.windows.net/countries/${code.toUpperCase()}.png`;
+  if (!showCondition) return <div />;
+  if (!id || !code) return <div />;
 
   return (
     <div>
-      <span style={{ marginLeft: 10, marginRight: 10 }}>
-        <img alt="img" style={{ marginTop: -5 }} src={imageUrl} />
+      <span style={SPAN_STYLE}>
+        <img alt="img" style={IMG_STYLE} src={imageUrl} />
       </span>
       {name}
     </div>
   );
 }
+
+export default React.memo(SimpleCountryCellRenderer);