qbs-react-grid 2.0.7 → 2.0.9

package/src/qbsTable/TableCardList.tsx

@@ -81,7 +81,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   renderEmpty,
   autoHeight,
   emptySubTitle,
-  emptyTitle
+  emptyTitle,
+  dropType = 'horizontal'
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -260,7 +261,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   const handleExpanded = useCallback(
     (rowData: any) => {
-      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -612,6 +612,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <ActionCell
                 tableBodyRef={tableBodyRef}
                 actionProps={actionProps}
+                dropType={dropType}
                 className={`${classes.cellClass} ${classes.actionCellClass}`}
                 handleMenuActions={handleMenuActions}
                 dataTheme={dataTheme}

package/src/qbsTable/commontypes.ts

@@ -140,7 +140,8 @@ export interface QbsTableProps {
   fullWidthView?: boolean;
   setTableFullView?: (value: boolean) => void;
   setRowViewToggle?: (value: boolean) => void;
-}
+  dropType?: 'horizondal' | 'vertical'
+} 
 
 export interface QbsTableToolbarProps {
   title?: string;

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import React from 'react';
-
+import React, { useEffect, useRef, useState } from 'react';
 import { ActionProps } from '../commontypes';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
@@ -46,7 +44,6 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
         const dropdownHeight = 200; // Adjust this if your dropdown height varies
         const spaceBelow = window.innerHeight - buttonRect.bottom;
         const spaceAbove = buttonRect.top;
-        console.log(spaceAbove, spaceBelow, dropdownHeight);
         if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
           setMenuPositionStyles({
             bottom: '30px',

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ActionProps } from '../commontypes';
+import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
+
+type Props = {
+  actionDropDown: ActionProps[];
+  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
+  rowData?: any;
+  dataTheme?: string;
+  tableBodyRef: React.RefObject<HTMLDivElement>;
+  rowIndex?: number;
+};
+
+const VerticalMenuDropdown: React.FC<Props> = ({
+  actionDropDown,
+  handleMenuActions,
+  rowData,
+  tableBodyRef,
+  rowIndex
+}) => {
+  const [openMenu, setOpenMenu] = useState(false);
+  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const dropRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpenMenu(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  const handleMenuItemClick = (slug: ActionProps) => {
+    handleMenuActions?.(slug, rowData);
+    slug.action?.(rowData);
+    setOpenMenu(false);
+  };
+
+  const handleShowHideMenu = () => {
+    return (
+      actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex))?.length ?? 0
+    );
+  };
+
+  const toggleMenu = () => {
+    setTimeout(() => {
+      setOpenMenu(prev => !prev);
+    }, 200);
+  };
+
+  return (
+    <div className="relative inline-block text-left vertical-menu-dropdown-wrapper" ref={menuRef}>
+      {handleShowHideMenu() > 0 && (
+        <button
+          className="vertical-menu-trigger-button p-2 rounded hover:bg-gray-100 transition-colors"
+          onClick={toggleMenu}
+          ref={menuButtonRef}
+        >
+          <ThreeDotIcon />
+        </button>
+      )}
+
+      {openMenu && (
+        <div
+          className="absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none vertical-menu-dropdown-content"
+          ref={dropRef}
+        >
+          <div className="py-1">
+            {actionDropDown?.map(item =>
+              !item?.hidden && !item?.hide?.(rowData, rowIndex) ? (
+                <div
+                  key={item.title}
+                  className="vertical-menu-item px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer flex items-center gap-2 transition-colors"
+                  onClick={e => {
+                    e.preventDefault();
+                    item.action?.(item);
+                    handleMenuItemClick(item);
+                  }}
+                >
+                  <TooltipComponent title={item.toolTip} tableBodyRef={tableBodyRef}>
+                    <div className="vertical-menu-icon-title flex items-center gap-2">
+                      <span className="vertical-menu-icon">{item.icon}</span>
+                      <span className="vertical-menu-title">{item.title}</span>
+                    </div>
+                  </TooltipComponent>
+                </div>
+              ) : null
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VerticalMenuDropdown;

package/src/utils/useScrollListener.ts

@@ -189,13 +189,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
       setScrollX(x);
       setScrollY(y);
-      console.log(
-        scrollY.current,
-        contentHeight.current,
-        nextScrollY,
-        minScrollY.current,
-        'scrolllistner'
-      );
+
       if (
         typeof handleInfiniteScroll === 'function' &&
         deltaY !== 0 &&
@@ -355,7 +349,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
-      console.log('handleTouchEnd');
       isTouching.current = false;
       const touchDuration = new Date().getTime() - momentumStartTime.current;
       const absDeltaY = Math.abs(scrollY.current - momentumStartY.current);