qbs-react-grid 1.0.46 → 1.0.48

package/src/qbsTable/QbsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
 import Cell from '../Cell';
 import Column from '../Column';
@@ -14,6 +14,7 @@ import debounce from './utilities/debounce';
 import { SettingsIcon } from './utilities/icons';
 
 import '../../dist/css/qbs-react-grid.css';
+import { deepEqual } from './utilities/deepEqual';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
@@ -67,6 +68,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
   const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
+  const prevColumns = useRef<any | null>();
 
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
@@ -93,10 +95,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
-      let updatedKeys = [...keys];
-      if (checkedKeys) {
-        updatedKeys = [...checkedKeys, ...updatedKeys];
-      }
+      let updatedKeys = [...checkedKeys, ...keys];
       setCheckedKeys(updatedKeys);
       handleChecked(updatedKeys);
     },
@@ -146,9 +145,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
     setColumns(columns);
   }, []);
 
-  useEffect(() => {
-    handleColumnToggle?.(columns);
-  }, [columns]);
+  // useEffect(() => {
+  // }, [columns]);
 
   const handleClear = ([]) => {
     setCheckedKeys([]);
@@ -173,9 +171,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
     checkedKeys: checkedKeys,
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
-    onSelect: handleClear
+    onSelect: handleClear,
+    handleColumnToggle: handleColumnToggle
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
+
   useEffect(() => {
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
@@ -236,6 +236,23 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
     return largestCellLength;
   }
+  const handleColumnsResizable = useCallback(() => {
+    const filteredColumns = columns?.filter(item => item.isVisible);
+    const length = filteredColumns?.length ?? 0;
+    const lastVisibleColumn = filteredColumns[length - 1];
+    const reColumns = columns?.map(item =>
+      item?.field === lastVisibleColumn?.field ? { ...item, resizable: false } : item
+    );
+    setColumns(reColumns);
+  }, [columns]);
+
+  useEffect(() => {
+    if (!deepEqual(columns, prevColumns.current)) {
+      handleColumnsResizable();
+    }
+    prevColumns.current = columns;
+  }, [columns, handleColumnsResizable]);
+
   const columnsRendered: React.ReactElement[] = useMemo(
     () =>
       (columns ?? []).map(

package/src/qbsTable/Toolbar.tsx

@@ -42,7 +42,15 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
     },
     [asyncSearch, handleSearch, handleSearchValue]
   );
-
+  const handleHide = (actions: any) => {
+    if (actions.hidden) {
+      return false;
+    } else if (actions.customHide == '>2') {
+      return checkedKeys && checkedKeys?.length >= 2 ? true : false;
+    } else {
+      return true;
+    }
+  };
   return (
     <div className="qbs-table-toolbar-container">
       <div className={`qbs-table-toolbar ${className}`}>
@@ -75,7 +83,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
               </button>
               {selectedRowActions?.map((actions, index: number) => (
                 <>
-                  {!actions.hidden && (
+                  {handleHide(actions) && (
                     <button
                       key={index.toString()}
                       className="btn"

package/src/qbsTable/commontypes.ts

@@ -93,6 +93,7 @@ export interface QbsTableProps {
     action: (checked: (number | string)[]) => void;
     disabled?: boolean;
     hidden?: boolean;
+    customHide?: string;
   }[];
   selectedRows?: (number | string)[];
   classes?: { [key: string]: any };
@@ -121,10 +122,12 @@ export interface QbsTableToolbarProps {
   checkedKeys?: (number | string)[];
   tableHeaderActions?: ReactElement | ReactNode;
   onSelect?: (keys: any[]) => void;
+  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
     disabled?: boolean;
     hidden?: boolean;
+    customHide?:string
   }[];
 }

package/src/qbsTable/utilities/deepEqual.ts

@@ -0,0 +1,37 @@
+export function deepEqual(value1: any, value2: any): boolean {
+  if (value1 === value2) {
+    return true;
+  }
+  if (typeof value1 !== typeof value2) {
+    return false;
+  }
+  if (value1 === null || value2 === null) {
+    return value1 === value2;
+  }
+  if (typeof value1 === 'object' && typeof value2 === 'object') {
+    if (Array.isArray(value1) && Array.isArray(value2)) {
+      if (value1.length !== value2.length) {
+        return false;
+      }
+      for (let i = 0; i < value1.length; i++) {
+        if (!deepEqual(value1[i], value2[i])) {
+          return false;
+        }
+      }
+      return true;
+    } else if (!Array.isArray(value1) && !Array.isArray(value2)) {
+      const keys1 = Object.keys(value1);
+      const keys2 = Object.keys(value2);
+      if (keys1.length !== keys2.length) {
+        return false;
+      }
+      for (const key of keys1) {
+        if (!keys2.includes(key) || !deepEqual(value1[key], value2[key])) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+  return false;
+}