qbs-react-grid 1.2.2 → 1.2.3

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { ActionProps } from '../commontypes';
 import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
 
 type Props = {
   iconName: string;
@@ -72,25 +73,26 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
     handleClose();
   };
 
-  console.log(menuPositionStyles);
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <ThreeDotIcon />
+        <TooltipComponent title="Actions" enabled={false} ref={menuButtonRef}>
+          <ThreeDotIcon />
+        </TooltipComponent>
       </button>
       {openMenu && (
         <div
-          className=" qbs-card-dropdown rounded absolute right-0 mt-2 w-56 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white"
+          className=" qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white"
           style={menuPositionStyles}
         >
-          <div className="qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-menudropdown dark:bg-[#424242] dark:text-white">
+          <div className="qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-lg shadow-menudropdown dark:bg-[#424242] dark:text-white">
             {actionDropDown?.map(
               item =>
                 !item.hidden && (
                   <a
                     key={item.title}
                     href="#/"
-                    className={'px-2  hover:bg-background '}
+                    className={'px-1  hover:bg-background no-underline whitespace-nowrap '}
                     onClick={e => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -98,12 +100,12 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
                     }}
                   >
                     <div
-                      className={` qbs-card-dropdown-menu-item ${
-                        item.isWarning ? 'text-error-light' : 'text-black dark:text-white'
+                      className={` qbs-card-dropdown-menu-item no-underline ${
+                        item.isWarning ? 'text-error-light' : ' text-black/70  dark:text-white'
                       } text-xxs flex items-center w-full tracking-[0.24px] font-medium `}
                     >
                       {item?.icon && <>{item.icon}</>}
-                      <span className="pl-1.5">{item.title}</span>
+                      <span className="pl-1.5 no-underline text-sm ">{'Edit this column'}</span>
                     </div>
                   </a>
                 )

package/src/qbsTable/utilities/SwitchCardColumns.tsx

@@ -9,14 +9,14 @@ export const CustomTableCell: React.FC<any> = React.memo(
         {link && !path && !hideLink?.(rowData) ? (
           <a
             onClick={() => rowClick?.(rowData)}
-            className={`qbs-table-row-link ${!viewMore ? 'line-clamp-1' : ''}`}
+            className={`qbs-table-row-link no-underline   ${!viewMore ? 'line-clamp-1' : ''}`}
           >
             {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
           </a>
         ) : path && !hideLink?.(rowData) ? (
           <Link
             to={path?.(rowData) ?? ''}
-            className={`qbs-table-row-link ${!viewMore ? 'line-clamp-1' : ''}`}
+            className={`qbs-table-row-link no-underline ${!viewMore ? 'line-clamp-1' : ''}`}
           >
             {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
           </Link>

package/src/qbsTable/utilities/ToolTip.tsx

@@ -7,14 +7,11 @@ const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
   const adjustDropdownPosition = () => {
     if (menuButtonRef.current && tableBodyRef?.current) {
       const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-      const viewportHeight = tableBodyRef?.current?.offsetHeight ?? window.innerHeight;
       const tableRect = tableBodyRef.current.getBoundingClientRect();
-
       // Calculate positions relative to the table
       const spaceAbove = inputBoxRect.top - tableRect.top;
       const spaceBelow = tableRect.bottom - inputBoxRect.bottom;
 
-      console.log(viewportHeight, spaceAbove, spaceBelow);
       if (spaceAbove > spaceBelow) {
         setDropdownPosition('top-position');
       } else {
@@ -32,7 +29,7 @@ const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
       >
         {children}
       </span>
-      <span ref={dropRef} className={`tooltiptext `}>
+      <span ref={dropRef} className={'tooltiptext'}>
         {title}
       </span>
     </div>

package/src/qbsTable/utilities/store.ts

@@ -0,0 +1,61 @@
+export const getGridColsClass = (count: number) => {
+  switch (count) {
+    case 1:
+      return 'grid-cols-1';
+    case 2:
+      return 'grid-cols-2';
+    case 3:
+      return 'grid-cols-3';
+    case 4:
+      return 'grid-cols-4';
+    case 5:
+      return 'grid-cols-5';
+    case 6:
+      return 'grid-cols-6';
+    case 7:
+      return 'grid-cols-7';
+    case 8:
+      return 'grid-cols-8';
+    case 9:
+      return 'grid-cols-9';
+    case 10:
+      return 'grid-cols-10';
+    case 11:
+      return 'grid-cols-11';
+    case 12:
+      return 'grid-cols-12';
+    default:
+      return 'grid-cols-1';
+  }
+};
+
+export const getGridColSpanClass = (count: number) => {
+  switch (count) {
+    case 1:
+      return 'col-span-1';
+    case 2:
+      return 'col-span-2';
+    case 3:
+      return 'col-span-3';
+    case 4:
+      return 'col-span-4';
+    case 5:
+      return 'col-span-5';
+    case 6:
+      return 'col-span--6';
+    case 7:
+      return 'col-span--7';
+    case 8:
+      return 'col-span--8';
+    case 9:
+      return 'col-span--9';
+    case 10:
+      return 'col-span--10';
+    case 11:
+      return 'col-span--11';
+    case 12:
+      return 'col-span--12';
+    default:
+      return 'col-span--1';
+  }
+};