@bit.rhplus/ag-grid 0.0.49 → 0.0.51

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);