@popsure/dirty-swan 0.54.2 → 0.54.4

package/src/lib/components/table/components/TableSection/TableSection.tsx

@@ -3,7 +3,12 @@ import classNames from 'classnames';
 import styles from './TableSection.module.scss';
 import { TableCell, TableCellProps } from '../TableCell/TableCell';
 import { ReactNode, useCallback } from 'react';
-import { ModalData, ModalFunction, TableCellRowData } from '../../types';
+import {
+  isBaseCell,
+  ModalData,
+  ModalFunction,
+  TableCellRowData,
+} from '../../types';
 
 export interface TableSectionProps {
   className?: string;
@@ -24,22 +29,32 @@ const TableSection = ({
 }: TableSectionProps) => {
   const headerRow = tableCellRows?.[0];
 
-  const getColumnContentByKey = useCallback(
-    (key: number) => tableCellRows?.[0]?.[key]?.content || '',
-    [tableCellRows]
-  );
+  const getModalTitleFromColumnHeader = (cellIndex: number) => {
+    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];
+    let titleFromColumn;
+
+    switch (firstCellInColumn.type) {
+      case 'BUTTON':
+        titleFromColumn = firstCellInColumn.buttonCaption;
+        break;
+      case 'CTA':
+        titleFromColumn = firstCellInColumn.title;
+        break;
+      case undefined:
+        titleFromColumn = firstCellInColumn.text || '';
+        break;
+    }
+
+    return titleFromColumn;
+  };
 
-  const handleOpenModal = ({
-    cellIndex,
-    body,
-    title,
-  }: ModalData & {
-    cellIndex: number;
-  }) =>
-    openModal?.({
-      body,
-      title: title || getColumnContentByKey(cellIndex),
-    });
+  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {
+    const firstCellInRow = currentRow?.[0];
+    const titleFromRow =
+      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
+
+    return titleFromRow;
+  };
 
   return (
     <table
@@ -51,23 +66,28 @@ const TableSection = ({
       {headerRow && (
         <thead className={hideHeader ? 'sr-only' : ''}>
           <tr>
-            {headerRow.map((tableCellProps, cellIndex) => {
+            {headerRow.map((tableCellData, cellIndex) => {
               const isFirstCellInRow = cellIndex === 0;
+
               return (
                 <TableCell
                   key={cellIndex}
                   isHeader
                   isFirstCellInRow={isFirstCellInRow}
                   isTopLeftCell={isFirstCellInRow}
-                  align={isFirstCellInRow ? 'left' : 'center'}
-                  openModal={(body) =>
-                    handleOpenModal({
-                      cellIndex,
-                      body,
-                      title: tableCellProps?.content,
-                    })
-                  }
-                  {...tableCellProps}
+                  {...tableCellData}
+                  {...(isBaseCell(tableCellData)
+                    ? {
+                        openModal: (body: ReactNode) =>
+                          openModal?.({
+                            body,
+                            title:
+                              tableCellData.text ||
+                              getModalTitleFromColumnHeader(cellIndex),
+                          }),
+                        align: isFirstCellInRow ? 'left' : 'center',
+                      }
+                    : {})}
                 />
               );
             })}
@@ -82,28 +102,34 @@ const TableSection = ({
           return (
             rowIndex > 0 && (
               <tr key={rowIndex} className={styles.tr}>
-                {row.map((tableCellProps, cellIndex) => {
+                {row.map((tableCellData, cellIndex) => {
                   const key = `${rowIndex}-${cellIndex}`;
                   const isFirstCellInRow = cellIndex === 0;
 
-                  const onCelInfoClick = (body: ReactNode) =>
-                    handleOpenModal({
-                      cellIndex,
-                      body,
-                      title: isFirstCellInRow
-                        ? tableCellProps.content
-                        : undefined,
-                    });
-
                   return (
                     <TableCell
-                      align={
-                        isFirstCellInRow && !isSingleCell ? 'left' : 'center'
-                      }
                       isFirstCellInRow={isFirstCellInRow}
-                      openModal={onCelInfoClick}
                       key={key}
-                      {...tableCellProps}
+                      {...tableCellData}
+                      {...(isBaseCell(tableCellData)
+                        ? {
+                            openModal: (body: ReactNode) => {
+                              const titleFromRow =
+                                getModalTitleFromRowHeader(row);
+                              const titleFromColumnOrRow =
+                                getModalTitleFromColumnHeader(cellIndex) ||
+                                getModalTitleFromRowHeader(row);
+
+                              return openModal?.({
+                                body,
+                                title: isFirstCellInRow
+                                  ? titleFromRow
+                                  : titleFromColumnOrRow,
+                              });
+                            },
+                            align: isFirstCellInRow ? 'left' : 'center',
+                          }
+                        : {})}
                     />
                   );
                 })}

package/src/lib/components/table/types.ts

@@ -1,5 +1,19 @@
 import { ReactNode } from 'react';
-import type { TableCellProps } from './components/TableCell/TableCell';
+import { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';
+import { CTACellProps } from './components/TableCell/CTACell/CTACell';
+import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
+
+type BaseCellData = BaseCellProps & { type?: undefined; cellId?: string };
+type CTACellData = CTACellProps & { type: 'CTA'; cellId?: string };
+type ButtonCellData = ButtonCellProps & { type: 'BUTTON'; cellId?: string };
+
+export type TableCellData = BaseCellData | CTACellData | ButtonCellData;
+
+export const isBaseCell = (
+  tableCellData: TableCellData
+): tableCellData is BaseCellData => {
+  return !tableCellData.type;
+};
 
 export type TableSectionType = {
   title?: string;
@@ -11,7 +25,7 @@ export type ModalData = {
   body?: ReactNode;
 };
 
-export type TableCellRowData = TableCellProps[];
+export type TableCellRowData = TableCellData[];
 
 export type TableSectionData = {
   section?: TableSectionType;

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx

@@ -11,7 +11,6 @@ const defaultContainerRef = {
 } as unknown as RefObject<HTMLElement>;
 
 describe('useTableNavigation', () => {
-  const columnsLength = 4;
   let onSelectionChanged = jest.fn();
   let containerRef = defaultContainerRef;
 
@@ -25,7 +24,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: false,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );
@@ -44,7 +42,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: true,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );
@@ -67,7 +64,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: true,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts

@@ -8,7 +8,6 @@ interface UseTableNavigationReturn {
 
 interface UseTableNavigationProps {
   containerRef: React.RefObject<HTMLElement>,
-  columnsLength: number,
   enabled?: boolean,
   onSelectionChanged?: (index: number) => void
 }
@@ -16,22 +15,18 @@ interface UseTableNavigationProps {
 export const useTableNavigation = ({
   enabled,
   containerRef,
-  columnsLength,
   onSelectionChanged
 }: UseTableNavigationProps): UseTableNavigationReturn => {
-  const [activeSection, setActiveSection] = useState(1);
-  const [isIncrease, setIsIncrease] = useState<boolean>();
+  const [activeSection, setActiveSection] = useState(0);
 
   const handleScrollToSection = (increase?: boolean) => {
     if (!enabled) {
       return;
     }
 
-    setActiveSection((prevSection) => {
-      setIsIncrease(!!increase);
-
-      return prevSection + (increase ? 1 : -1);
-    });
+    setActiveSection((prevSection) => 
+      prevSection + (increase ? 1 : -1)
+    );
   };
 
   const handleTableScroll = useCallback(() => {
@@ -39,14 +34,12 @@ export const useTableNavigation = ({
       return;
     }
 
-    const scrollLeft = containerRef.current.scrollLeft;
     const containerWidth = containerRef.current.getBoundingClientRect().width;
-    const cellWidth = containerWidth / (columnsLength  - 1);
-    const newValue = Math.floor(scrollLeft / cellWidth * 0.8) + 1;
+    const scrollLeft = containerRef.current.scrollLeft;
+    const cellWidth = containerWidth / 2;
 
-    setIsIncrease(newValue > activeSection);
-    setActiveSection(newValue);
-   }, [activeSection, columnsLength, containerRef, enabled]);
+    setActiveSection(Math.floor(scrollLeft / cellWidth));
+   }, [activeSection, containerRef, enabled]);
 
   const debouncedTableScroll = debounce(handleTableScroll, 150);
 
@@ -61,26 +54,26 @@ export const useTableNavigation = ({
   }, [enabled]);
 
   useEffect(() => {
-    if (!enabled || typeof isIncrease === 'undefined') {
+    if (!enabled) {
       return
     }
 
-    onSelectionChanged?.(activeSection);
+    onSelectionChanged?.(activeSection + 1);
 
     if (containerRef.current) {
       const containerWidth = containerRef.current.getBoundingClientRect().width;
-      const cellWidth = containerWidth / columnsLength;
+      const cellWidth = containerWidth / 2;
 
       containerRef.current.scroll({
         top: 0,
-        left: (cellWidth * activeSection) * (isIncrease ? 1.2 : 0.8),
+        left: cellWidth * activeSection,
         behavior: 'smooth',
       });
     }
   }, [enabled, activeSection]);
 
   return {
-    activeSection,
+    activeSection: activeSection + 1,
     navigateTable: handleScrollToSection,
   }
 }

package/dist/esm/useTableNavigation-8e50b121.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableNavigation-8e50b121.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  columnsLength: number,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  columnsLength,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(1);\n  const [isIncrease, setIsIncrease] = useState<boolean>();\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => {\n      setIsIncrease(!!increase);\n\n      return prevSection + (increase ? 1 : -1);\n    });\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const scrollLeft = containerRef.current.scrollLeft;\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const cellWidth = containerWidth / (columnsLength  - 1);\n    const newValue = Math.floor(scrollLeft / cellWidth * 0.8) + 1;\n\n    setIsIncrease(newValue > activeSection);\n    setActiveSection(newValue);\n   }, [activeSection, columnsLength, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled || typeof isIncrease === 'undefined') {\n      return\n    }\n\n    onSelectionChanged?.(activeSection);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / columnsLength;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: (cellWidth * activeSection) * (isIncrease ? 1.2 : 0.8),\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection,\n    navigateTable: handleScrollToSection,\n  }\n}"],"names":["debounce"],"mappings":";;;IAea,kBAAkB,GAAG,UAAC,EAKT;QAJxB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,kBAAkB,wBAAA;IAEZ,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAChD,IAAA,KAA8B,QAAQ,EAAW,EAAhD,UAAU,QAAA,EAAE,aAAa,QAAuB,CAAC;IAExD,IAAM,qBAAqB,GAAG,UAAC,QAAkB;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,gBAAgB,CAAC,UAAC,WAAW;YAC3B,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAE1B,OAAO,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ,CAAC;IAEF,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC,OAAO;SACR;QAED,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;QACnD,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,IAAM,SAAS,GAAG,cAAc,IAAI,aAAa,GAAI,CAAC,CAAC,CAAC;QACxD,IAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QAE9D,aAAa,CAAC,QAAQ,GAAG,aAAa,CAAC,CAAC;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;KAC3B,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,IAAM,oBAAoB,GAAGA,eAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;YAC1D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;KACpE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,IAAI,OAAO,UAAU,KAAK,WAAW,EAAE;YACjD,OAAM;SACP;QAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,aAAa,CAAC,CAAC;QAEpC,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1E,IAAM,SAAS,GAAG,cAAc,GAAG,aAAa,CAAC;YAEjD,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC,SAAS,GAAG,aAAa,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;gBAC5D,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO;QACL,aAAa,eAAA;QACb,aAAa,EAAE,qBAAqB;KACrC,CAAA;AACH;;;;"}