qbs-react-grid 1.2.0 → 1.2.2

package/src/qbsTable/utilities/CardComponent.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { QbsColumnProps } from '../commontypes';
+import CardMenuDropdown from './CardMenuDropdown';
+import { CustomTableCell } from './SwitchCardColumns';
+import { handleCellFormat } from './handleFormatCell';
+import { ArrowUpIcon } from './icons';
+
+type Props = {
+  columns: QbsColumnProps[];
+  data: any;
+  tableBodyRef: any;
+  actionProps?: any;
+  index?: number;
+  handleMenuActions?: () => void;
+};
+
+const CardComponent: React.FC<Props> = ({
+  columns,
+  data,
+  tableBodyRef,
+  actionProps,
+  index,
+  handleMenuActions
+}) => {
+  const [viewMore, setViewMore] = useState(false);
+  const initialDisplayCount = 5;
+
+  const toggleViewMore = () => {
+    setViewMore(!viewMore);
+  };
+
+  const displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
+
+  return (
+    <div className="grid grid-cols-5 p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container">
+      {displayedColumns.map((col: QbsColumnProps, index: number) => (
+        <div key={index} className="grid col-span-1 place-content-start text-sm qbs-card-column">
+          <p className=" text-grey ">{col.title}</p>
+          {col.customCell || col.link ? (
+            <span
+              className={`qbs-card-column-content mt-1 font-semibold ${
+                !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 font-semibold 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 && (
+            <button
+              onClick={toggleViewMore}
+              className=" qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
+            >
+              <ArrowUpIcon className={`${viewMore ? 'rotate-180' : ''} `} />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardComponent;

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
+
+import { ActionProps } from '../commontypes';
+import { ThreeDotIcon } from './icons';
+
+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();
+  };
+
+  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 />
+      </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"
+          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">
+            {actionDropDown?.map(
+              item =>
+                !item.hidden && (
+                  <a
+                    key={item.title}
+                    href="#/"
+                    className={'px-2  hover:bg-background '}
+                    onClick={e => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleMenuItemClick(item);
+                    }}
+                  >
+                    <div
+                      className={` qbs-card-dropdown-menu-item ${
+                        item.isWarning ? 'text-error-light' : 'text-black 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>
+                    </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 ${!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' : ''}`}
+          >
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+          </Link>
+        ) : (
+          <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
+        )}
+      </>
+    );
+  }
+);

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