wca-designsystem 0.0.55 → 0.0.56

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/organismos/Tabela/SkeletonTable.tsx

@@ -14,11 +14,11 @@ function SkeletonTable<T extends { id: number | string }>({
 }: SkeletonTableProps<T>) {
   return (
     <S.TabelaBody>
-      {columns?.map(row => {
+      {data?.map(row => {
         return (
-          <tr key={row.header}>
-            {data.map(cell => (
-              <td key={cell.id}>
+          <tr key={row.id}>
+            {columns.map(cell => (
+              <td key={cell.header}>
                 <Skeleton height={19} radius="xl" animate={true} />
               </td>
             ))}

package/src/components/organismos/Tabela/Tabela.stories.tsx

@@ -9,156 +9,41 @@ export default {
   component: Tabela,
 } as Meta;
 
-const data: any[] = [
-  {
-    id: 1,
-    name: 'Produto 1',
-    price: '$10',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
-      {
-        id: '1-1',
-        name: 'Task 1',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-        children: [
-          {
-            id: '1-10',
-            name: 'Task 10',
-            price: '$10',
-            exemplo: 'opa',
-            exemplo2: 'opa2',
-          },
-        ],
-      },
-      {
-        id: '1-2',
-        name: 'Task 2',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: 'Produto 2',
-    price: '$15',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
-      {
-        id: '2-1',
-        name: 'Task 1',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-      {
-        id: '2-2',
-        name: 'Task 2',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-    ],
-  },
-  {
-    id: 3,
-    name: 'Produto 3',
-    price: '$20',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
-      {
-        id: '3-1',
-        name: 'Task 1',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-      {
-        id: '3-2',
-        name: 'Task 2',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-    ],
-  },
-  {
-    id: 4,
-    name: 'Produto 3',
-    price: '$20',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
-      {
-        id: '4-1',
-        name: 'Task 1',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-      {
-        id: '4-2',
-        name: 'Task 2',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-    ],
-  },
-  {
-    id: 5,
-    name: 'Produto 3',
-    price: '$20',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
-      {
-        id: '5-1',
-        name: 'Task 1',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-      {
-        id: '5-2',
-        name: 'Task 2',
-        price: '$10',
-        exemplo: 'opa',
-        exemplo2: 'opa2',
-      },
-    ],
-  },
-  {
-    id: 6,
-    name: 'Produto 3',
-    price: '$20',
-    exemplo: 'opa',
-    exemplo2: 'opa2',
-    children: [
+const generateData = () => {
+  const data = [];
+
+  for (let i = 1; i <= 101; i++) {
+    const children = [
       {
-        id: '6-1',
-        name: 'Task 1',
+        id: `${i}-1`,
+        name: `Task ${i}-1`,
         price: '$10',
         exemplo: 'opa',
         exemplo2: 'opa2',
       },
       {
-        id: '6-2',
-        name: 'Task 2',
+        id: `${i}-2`,
+        name: `Task ${i}-2`,
         price: '$10',
         exemplo: 'opa',
         exemplo2: 'opa2',
       },
-    ],
-  },
-];
+    ];
 
+    data.push({
+      id: i,
+      name: `Produto ${i}`,
+      price: '$20',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+      children,
+    });
+  }
+
+  return data;
+};
+
+const data = generateData();
 const columns: any = [
   {
     key: 'expand',
@@ -190,6 +75,7 @@ TabelaProps.args = {
   columns: columns,
   color: theme.colors.blue,
   hasFiltersButtons: true,
+
   ordenarPor: {
     label: 'Ordenar por: Maior',
     value: 'Maior',
@@ -201,6 +87,9 @@ TabelaProps.args = {
   rowSelection: [],
   setRowSelection: () => console.log('selecionou'),
   setFiltrosPor: () => console.log('aqui'),
+  fetchMoreData: () => console.log('fetchMoreData'),
+  hasInfinitScrool: true,
+  hasMoreData: true,
   setGlobalFilter: () => console.log('aqui'),
   setPagination: () => console.log('aqui'),
   quantidadeDeRegistros: 10,

package/src/components/organismos/Tabela/body.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
@@ -18,6 +18,9 @@ export interface BodyTableProps<
   hasSelect?: boolean;
   rowSelection?: Array<T>;
   setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
+  hasInfinitScrool?: boolean;
+  hasMoreData?: boolean;
+  fetchMoreData?: () => void;
 }
 
 function BodyTable<T extends { id: string | number; children: Array<T> }>(
@@ -29,10 +32,15 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     acoesChildren,
     hasSelect,
     rowSelection,
+    fetchMoreData,
+    hasMoreData,
+    hasInfinitScrool,
     setRowSelection,
     color,
   } = props;
 
+  const tableBodyRef = useRef<HTMLTableSectionElement | null>(null);
+
   const [expandedRows, setExpandedRows] = useState<Set<number | string>>(
     new Set()
   );
@@ -62,6 +70,30 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     });
   }, []);
 
+  useEffect(() => {
+    if (!fetchMoreData || !hasInfinitScrool || !tableBodyRef.current) return;
+
+    const handleScroll = () => {
+      debugger;
+      const element = tableBodyRef.current;
+      if (element) {
+        const atBottom =
+          element.scrollHeight - element.scrollTop === element.clientHeight;
+        if (atBottom) {
+          debugger;
+          fetchMoreData(); // Dispara a função ao atingir o final do scroll
+        }
+      }
+    };
+
+    const currentRef = tableBodyRef.current;
+    currentRef?.addEventListener('scroll', handleScroll);
+
+    return () => {
+      currentRef?.removeEventListener('scroll', handleScroll);
+    };
+  }, [fetchMoreData, hasInfinitScrool]);
+
   function renderRows(
     item: T,
     columns: Column<T>[],
@@ -79,7 +111,6 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
 
     return [
       <tr key={`row-${item.id}`}>
-        {/* Checkbox para seleção */}
         {hasSelect && (
           <td className="select">
             <Checkbox
@@ -96,8 +127,6 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
             />
           </td>
         )}
-
-        {/* Colunas dinâmicas */}
         {columns.map((column, colIndex) => {
           if (column.key === 'expand') {
             return (
@@ -137,12 +166,10 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
             );
           }
 
-          // Verifica se existe a prop 'cell'
           if (column.cell) {
             return <td key={`cell-${colIndex}`}>{column.cell(item)}</td>;
           }
 
-          // Render padrão
           return column.render ? (
             <td
               key={`column-${colIndex}`}
@@ -168,8 +195,6 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
           );
         })}
       </tr>,
-
-      // Renderiza os filhos recursivamente, caso existam
       ...(expandedRows.has(item.id)
         ? item.children.flatMap(child =>
             renderRows(
@@ -186,11 +211,12 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
         : []),
     ];
   }
+
   return (
     <S.TabelaBody
+      ref={tableBodyRef}
       color={color}
       hasselect={hasSelect ? 'true' : 'false'}
-      // style={{ left: hasSelect ? '52px' : '17px' }}
     >
       {data.flatMap(item =>
         renderRows(
@@ -204,6 +230,13 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
           color
         )
       )}
+      {hasInfinitScrool && hasMoreData && (
+        <tr>
+          <td colSpan={columns.length + (hasSelect ? 1 : 0)}>
+            <div className="load-more" style={{ height: '1px' }} />
+          </td>
+        </tr>
+      )}
     </S.TabelaBody>
   );
 }

package/src/components/organismos/Tabela/index.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import BodyTable from './body';
 import HeaderTabela from './header';
 import Paginacao from './pagination';
 import SkeletonTable from './SkeletonTable';
 import * as S from './styles';
-import { useState } from 'react';
 import TabelaHeader from '../../molecules/TabelaHeader';
 
-// Tipo genérico para as colunas
 export type Column<T> = {
   key: keyof T;
   header: string;
@@ -63,6 +61,8 @@ export type CustomTableProps<
   };
   quantidadeRegistros?: number | undefined;
   tamanhoPaginacao?: number | undefined;
+  fetchMoreData?: (() => void) | undefined;
+  hasInfinitScrool?: boolean;
 };
 
 const Tabela = <T extends { id: string | number; children: Array<T> }>({
@@ -85,6 +85,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
   setGlobalFilter,
   hasOrder,
   headerSelection,
+  fetchMoreData,
   setOrdenarPor,
   setSimples,
   handleAdicionar,
@@ -92,22 +93,52 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
   quantidadeRegistros,
   tamanhoPaginacao,
   fixedPosition,
+  hasInfinitScrool,
 }: CustomTableProps<T>) => {
   const [toogleFiltros, setToogleFiltros] = useState(false);
-
   const [formatedColumns, setFormatedColumns] = useState(
-    columns.map(column => {
-      return {
-        ...column,
-        active: true,
-      };
-    })
+    columns.map(column => ({
+      ...column,
+      active: true,
+    }))
   );
 
+  const [tamScroll, setTamScroll] = useState<number>(0);
   const columnsToShow = formatedColumns.filter(
     column => column.active === true
   );
 
+  const topScrollRef = useRef<HTMLDivElement>(null);
+  const bottomScrollRef = useRef<HTMLDivElement>(null);
+
+  // Sincroniza o scroll horizontal entre os dois scrollbars
+  useEffect(() => {
+    const topScroll = topScrollRef.current;
+    const bottomScroll = bottomScrollRef.current;
+
+    if (topScroll && bottomScroll) {
+      const syncScroll = (source: HTMLDivElement, target: HTMLDivElement) => {
+        target.scrollLeft = source.scrollLeft;
+      };
+
+      setTamScroll(bottomScroll.scrollWidth);
+      const onTopScroll = () =>
+        topScroll && bottomScroll && syncScroll(topScroll, bottomScroll);
+      const onBottomScroll = () =>
+        topScroll && bottomScroll && syncScroll(bottomScroll, topScroll);
+
+      topScroll.addEventListener('scroll', onTopScroll);
+      bottomScroll.addEventListener('scroll', onBottomScroll);
+
+      return () => {
+        topScroll.removeEventListener('scroll', onTopScroll);
+        bottomScroll.removeEventListener('scroll', onBottomScroll);
+      };
+    }
+
+    return;
+  }, []);
+
   return (
     <S.TableWrapper>
       <TabelaHeader
@@ -125,7 +156,11 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
         ordenarPor={ordenarPor}
         setOrdenarPor={setOrdenarPor}
       />
-      <S.TableContainer>
+      {/* Scroll horizontal no topo */}
+      <S.ScrollWrapper ref={topScrollRef}>
+        <S.FakeTable columnswidth={tamScroll} />
+      </S.ScrollWrapper>
+      <S.TableContainer ref={bottomScrollRef}>
         <S.StyledTable>
           {data?.length == 0 ? (
             <></>
@@ -156,7 +191,10 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
               ) : (
                 <BodyTable
                   color={color}
+                  fetchMoreData={fetchMoreData}
+                  hasInfinitScrool={hasInfinitScrool}
                   hasSelect={hasSelect}
+                  hasMoreData={quantidadeRegistros !== data.length}
                   rowSelection={rowSelection}
                   setRowSelection={setRowSelection}
                   acoesChildren={acoesChildren}

package/src/components/organismos/Tabela/pagination.tsx

@@ -70,7 +70,7 @@ const Paginacao = ({
           <SelectCustomizado
             tipo="round"
             onChange={e => changeLinhas(e!)}
-            defaultValue={'10'}
+            defaultValue={tabelaPaginacao.pageSize.toString() ?? '10'}
             data={['10', '20', '30']}
             comboboxProps={{
               position: 'bottom',

package/src/components/organismos/Tabela/styles.ts

@@ -12,6 +12,9 @@ export const TableWrapper = styled.div`
   ${() => css`
     max-width: 1500px;
     overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   `}
 `;
 
@@ -231,3 +234,14 @@ export const PaginationButtons = styled.div<ColorsProp>`
     }
   `}
 `;
+
+export const ScrollWrapper = styled.div`
+  overflow-x: auto;
+  width: 100%;
+  margin-bottom: -15px;
+`;
+
+export const FakeTable = styled.div<{ columnswidth: number }>`
+  width: ${({ columnswidth }) => columnswidth}px;
+  height: 1px; /* Apenas para criar a barra de rolagem */
+`;