qbs-react-grid 1.2.1 → 1.2.3

package/src/qbsTable/commontypes.ts

@@ -9,6 +9,7 @@ export interface ColumnBase {
   field: string;
   sortable?: boolean;
   resizable?: boolean;
+  colSpan?: number;
   fixed?: boolean;
   align?: 'left' | 'right' | 'center';
   colWidth?: number;
@@ -46,6 +47,9 @@ export interface ActionProps {
   toolTip?: string;
   hidden?: boolean;
   hide?: (data: any, index?: number) => boolean;
+  isWarning?: boolean;
+  label?: string;
+  iconName?: string;
 }
 
 export interface QbsTableProps {
@@ -119,6 +123,10 @@ export interface QbsTableProps {
   renderEmpty?: (info: React.ReactNode) => React.ReactNode;
   emptySubTitle?: string;
   emptyTitle?: string;
+  enableTableToggle?: boolean;
+  tableView?: boolean;
+  cardColumLimit?: number;
+  childDetailHeading?: string;
 }
 
 export interface QbsTableToolbarProps {
@@ -144,6 +152,10 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
+  tableView?: boolean;
+  enableTableToggle?: boolean;
+  tableViewToggle?: boolean;
+  setTableViewToggle?: (value: boolean) => void;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;

package/src/qbsTable/utilities/CardComponent.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef } from 'react';
+import { QbsColumnProps } from '../commontypes';
+import CardMenuDropdown from './CardMenuDropdown';
+import { CustomTableCell } from './SwitchCardColumns';
+import { handleCellFormat } from './handleFormatCell';
+import { ArrowUpIcon } from './icons';
+import { getGridColsClass, getGridColSpanClass } from './store';
+import TooltipComponent from './ToolTip';
+
+type Props = {
+  columns: QbsColumnProps[];
+  data: any;
+  tableBodyRef: any;
+  actionProps?: any;
+  index?: number;
+  handleMenuActions?: () => void;
+  cardColumLimit?: number;
+  childDetailHeading?: string;
+};
+
+const CardComponent: React.FC<Props> = ({
+  columns,
+  data,
+  tableBodyRef,
+  actionProps,
+  index,
+  cardColumLimit = 5,
+  handleMenuActions,
+  childDetailHeading = ''
+}) => {
+  const [viewMore, setViewMore] = useState(false);
+  const initialDisplayCount = cardColumLimit;
+
+  const toggleViewMore = () => {
+    setViewMore(!viewMore);
+  };
+  const useCardRef = useRef<HTMLDivElement>(null);
+  const displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
+
+  return (
+    <div
+      ref={useCardRef}
+      className="p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+    >
+      <div className={`grid ${getGridColsClass(initialDisplayCount)} qbs-card-columns`}>
+        {displayedColumns.map((col: QbsColumnProps, index: number) => (
+          <div
+            key={index}
+            className={`grid ${getGridColSpanClass(
+              col.colSpan ?? 1
+            )} place-content-start text-sm qbs-card-column   ${
+              index === initialDisplayCount - 1 ? 'mr-4' : ''
+            } `}
+          >
+            <p className=" text-grey ">{col.title}</p>
+            {col.customCell || col.link ? (
+              <span className={`qbs-card-column-content mt-1   ${!viewMore ? 'line-clamp-1' : ''}`}>
+                <CustomTableCell
+                  dataKey={col.field}
+                  rowData={data}
+                  type={col.type}
+                  path={col.getPath}
+                  link={col.link}
+                  viewMore={viewMore}
+                  rowClick={col.rowClick}
+                  renderCell={col.renderCell}
+                />
+              </span>
+            ) : (
+              <p
+                className={`mt-1  qbs-card-column-content ${!viewMore ? 'line-clamp-1' : ''}`}
+                key={index}
+              >
+                {handleCellFormat(data[col.field], col.type as string)}
+              </p>
+            )}
+          </div>
+        ))}
+
+        <div
+          className={`qbs-card-column-action absolute  text-blue-500 mt-2 right-2 ${
+            columns.length > initialDisplayCount ? 'top-2' : 'top-4'
+          }  text-xs`}
+        >
+          <div
+            className={`flex  qbs-card-column-action-container
+               flex-col   items-center gap-y-2
+          `}
+          >
+            <div className="  text-blue-500 qbs-card-column-action-menu ">
+              <CardMenuDropdown
+                tableBodyRef={tableBodyRef}
+                actionDropDown={actionProps}
+                rowData={data}
+                iconName="more"
+                rowIndex={index}
+                handleMenuActions={handleMenuActions}
+              />
+            </div>
+
+            {columns.length > initialDisplayCount && (
+              <TooltipComponent
+                tableBodyRef={useCardRef}
+                title={viewMore ? ' View Less' : 'View More'}
+                enabled={false}
+              >
+                <button
+                  onClick={toggleViewMore}
+                  className=" qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
+                >
+                  <ArrowUpIcon className={`${viewMore ? 'rotate-180' : ''} `} />
+                </button>
+              </TooltipComponent>
+            )}
+          </div>
+        </div>
+      </div>
+      {viewMore && data?.childDetail && (
+        <div className="mt-4 p-3 border-t border-grey qbs-card-child-detail-container">
+          {childDetailHeading && (
+            <p className=" text-lg qbs-card-child-detail-head font-semibold ">
+              {childDetailHeading}
+            </p>
+          )}
+          {data?.childDetail}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardComponent;

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
+
+import { ActionProps } from '../commontypes';
+import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
+
+type Props = {
+  iconName: string;
+  actionDropDown: ActionProps[];
+  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
+  rowData?: any;
+  dataTheme?: string;
+  tableBodyRef: React.RefObject<HTMLDivElement>;
+  rowIndex?: number;
+};
+
+const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowData }) => {
+  const [openMenu, setOpenMenu] = useState(false);
+  const [menuPositionStyles, setMenuPositionStyles] = useState<{
+    top?: string;
+    bottom?: string;
+    right?: string;
+  }>({});
+  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
+  const menuRef = 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 toggleMenu = () => {
+    setOpenMenu(prevState => {
+      if (!prevState && menuButtonRef.current) {
+        const buttonRect = menuButtonRef.current.getBoundingClientRect();
+        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',
+            right: '10px'
+          });
+        } else {
+          setMenuPositionStyles({
+            top: `${buttonRect.height}px`,
+            right: '10px'
+          });
+        }
+      }
+      return !prevState;
+    });
+  };
+
+  const handleClose = () => {
+    setOpenMenu(false);
+  };
+
+  const handleMenuItemClick = (item: ActionProps) => {
+    item.action?.(item);
+    handleMenuActions?.(item, rowData);
+    handleClose();
+  };
+
+  return (
+    <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
+      <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
+        <TooltipComponent title="Actions" enabled={false} ref={menuButtonRef}>
+          <ThreeDotIcon />
+        </TooltipComponent>
+      </button>
+      {openMenu && (
+        <div
+          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-lg shadow-menudropdown dark:bg-[#424242] dark:text-white">
+            {actionDropDown?.map(
+              item =>
+                !item.hidden && (
+                  <a
+                    key={item.title}
+                    href="#/"
+                    className={'px-1  hover:bg-background no-underline whitespace-nowrap '}
+                    onClick={e => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleMenuItemClick(item);
+                    }}
+                  >
+                    <div
+                      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 no-underline text-sm ">{'Edit this column'}</span>
+                    </div>
+                  </a>
+                )
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardMenuDropdown;

package/src/qbsTable/utilities/SwitchCardColumns.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { handleCellFormat } from './handleFormatCell';
+
+export const CustomTableCell: React.FC<any> = React.memo(
+  ({ rowData, renderCell, hideLink, dataKey, rowClick, type, path, link, viewMore }) => {
+    return (
+      <>
+        {link && !path && !hideLink?.(rowData) ? (
+          <a
+            onClick={() => rowClick?.(rowData)}
+            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 no-underline ${!viewMore ? 'line-clamp-1' : ''}`}
+          >
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+          </Link>
+        ) : (
+          <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
+        )}
+      </>
+    );
+  }
+);

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/icons.tsx

@@ -36,3 +36,54 @@ export const SettingsIcon: React.FC<any> = () => {
     </svg>
   );
 };
+
+export const ArrowUpIcon: React.FC<any> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="3"
+      stroke="currentColor"
+      className={`${className} w-4 h-4`}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    </svg>
+  );
+};
+export const TableIcon: React.FC<any> = ({ className }: any) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={`${className} w-6 h-6`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
+      />
+    </svg>
+  );
+};
+export const CardIcon: React.FC<any> = ({ className }: any) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={`${className} w-6 h-6`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+      />
+    </svg>
+  );
+};

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';
+  }
+};