wca-designsystem 0.0.65 → 0.0.67

package/package.json

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

package/src/components/molecules/CardDestaque/index.tsx

@@ -27,6 +27,7 @@ export type CardDestaqueProps = {
   colorTitulo?: string;
   liberaDownload?: boolean;
   liberaUpload?: boolean;
+  color?: string;
 };
 
 function CardDestaque({
@@ -39,6 +40,7 @@ function CardDestaque({
   verLogProcesso,
   qtdLinhas,
   ultimaExec,
+  color,
   colorTitulo,
   liberaDownload,
   liberaUpload,
@@ -78,7 +80,7 @@ function CardDestaque({
             disabled={!liberaDownload}
             tipo="table"
             toolTipInfo="Download"
-            color={theme.colors.gray['300']}
+            color={liberaDownload ? color : theme.colors.gray['300']}
             onClick={onClickDownload!}
           >
             <Icone
@@ -93,7 +95,7 @@ function CardDestaque({
           <IconeBotao
             toolTipInfo="Upload"
             tipo="table"
-            color={theme.colors.gray['300']}
+            color={liberaUpload ? color : theme.colors.gray['300']}
             onClick={onClickUpload!}
             disabled={!liberaUpload}
           >

package/src/components/molecules/TabelaHeader/index.tsx

@@ -14,7 +14,7 @@ import plus from '../../../assets/imagens/icons/Mais.svg';
 import { Menu, Switch } from '@mantine/core';
 
 export type TabelaHeaderProps<
-  T extends { id: string | number; children: Array<T> }
+  T extends { id: string | number; children?: Array<T> }
 > = {
   globalFilter: string;
   setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
@@ -30,7 +30,7 @@ export type TabelaHeaderProps<
   columns: Column<T>[];
   setFormatedColumns: React.Dispatch<React.SetStateAction<Column<T>[]>>;
 };
-const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
+const TabelaHeader = <T extends { id: string | number; children?: Array<T> }>({
   globalFilter,
   setGlobalFilter,
   setToogleFiltros,
@@ -73,6 +73,7 @@ const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
             { value: 'Menor', label: 'Ordenar por: Crescente' },
           ]}
           onChange={(_value, option) => setOrdenarPor!(option)}
+          allowDeselect={false}
           value={ordenarPor ? ordenarPor.value : 'Maior'}
           clearable={false}
           placeholder={`Ordenar por ${ordenarPor}`}

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
@@ -7,7 +7,7 @@ import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixo.svg';
 import Icone from '../../atomos/Icone';
 
 export interface BodyTableProps<
-  T extends { id: string | number; children: Array<T> }
+  T extends { id: string | number; children?: Array<T> }
 > {
   data: Array<T>;
   columns: Column<T>[];
@@ -20,10 +20,9 @@ export interface BodyTableProps<
   setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
   hasInfinitScrool?: boolean;
   hasMoreData?: boolean;
-  fetchMoreData?: () => void;
 }
 
-function BodyTable<T extends { id: string | number; children: Array<T> }>(
+function BodyTable<T extends { id: string | number; children?: Array<T> }>(
   props: BodyTableProps<T>
 ) {
   const {
@@ -32,7 +31,7 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     acoesChildren,
     hasSelect,
     rowSelection,
-    fetchMoreData,
+
     hasMoreData,
     hasInfinitScrool,
     setRowSelection,
@@ -70,29 +69,6 @@ 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) {
-          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>[],
@@ -195,7 +171,7 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
         })}
       </tr>,
       ...(expandedRows.has(item.id)
-        ? item.children.flatMap(child =>
+        ? item?.children!.flatMap(child =>
             renderRows(
               child,
               columns,

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

@@ -21,7 +21,7 @@ export type SelectDataProps = {
 };
 
 export type CustomTableProps<
-  T extends { id: string | number; children: Array<T> }
+  T extends { id: string | number; children?: Array<T> }
 > = {
   data: T[];
   columns: Column<T>[];
@@ -65,7 +65,7 @@ export type CustomTableProps<
   hasInfinitScrool?: boolean;
 };
 
-const Tabela = <T extends { id: string | number; children: Array<T> }>({
+const Tabela = <T extends { id: string | number; children?: Array<T> }>({
   data,
   columns,
   setPagination,
@@ -103,43 +103,37 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
     }))
   );
 
-  const [tamScroll, setTamScroll] = useState<number>(0);
   const columnsToShow = formatedColumns.filter(
     column => column.active === true
   );
 
   const topScrollRef = useRef<HTMLDivElement>(null);
-  const bottomScrollRef = useRef<HTMLDivElement>(null);
   const tabelaRef = useRef<HTMLTableElement>(null);
+  const TableContainerRef = useRef<HTMLDivElement>(null);
 
   // Sincroniza o scroll horizontal entre os dois scrollbars
   useEffect(() => {
-    const topScroll = topScrollRef.current;
-    const bottomScroll = bottomScrollRef.current;
-    const tabela = tabelaRef.current;
+    if (!fetchMoreData || !hasInfinitScrool || !TableContainerRef.current)
+      return;
 
-    if (topScroll && bottomScroll) {
-      const onTopScroll = () => {
-        bottomScroll.scrollLeft = topScroll.scrollLeft;
-      };
+    const handleScroll = () => {
+      const element = TableContainerRef.current;
+      if (element) {
+        const atBottom =
+          element.scrollHeight - element.scrollTop <= element.clientHeight + 10; // Margem de erro
+        if (atBottom) {
+          fetchMoreData(); // Dispara a função ao atingir o final do scroll
+        }
+      }
+    };
 
-      const onBottomScroll = () => {
-        topScroll.scrollLeft = bottomScroll.scrollLeft;
-      };
-      topScroll.addEventListener('scroll', onTopScroll);
-      bottomScroll.addEventListener('scroll', onBottomScroll);
+    const currentRef = TableContainerRef.current;
+    currentRef.addEventListener('scroll', handleScroll);
 
-      // Atualiza o tamanho do scroll
-      if (tabela) setTamScroll(tabela.scrollWidth);
-
-      return () => {
-        topScroll.removeEventListener('scroll', onTopScroll);
-        bottomScroll.removeEventListener('scroll', onBottomScroll);
-      };
-    }
-
-    return;
-  }, []);
+    return () => {
+      currentRef.removeEventListener('scroll', handleScroll);
+    };
+  }, [fetchMoreData, hasInfinitScrool]);
 
   return (
     <S.TableWrapper>
@@ -159,10 +153,8 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
         setOrdenarPor={setOrdenarPor}
       />
       {/* Scroll horizontal no topo */}
-      <S.ScrollWrapper ref={topScrollRef}>
-        <S.FakeTable style={{ width: `${tamScroll}px` }} />
-      </S.ScrollWrapper>
-      <S.TableContainer ref={bottomScrollRef}>
+      <S.ScrollWrapper ref={topScrollRef}></S.ScrollWrapper>
+      <S.TableContainer ref={TableContainerRef}>
         <S.StyledTable ref={tabelaRef}>
           {data?.length == 0 ? (
             <></>
@@ -193,7 +185,6 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
               ) : (
                 <BodyTable
                   color={color}
-                  fetchMoreData={fetchMoreData}
                   hasInfinitScrool={hasInfinitScrool}
                   hasSelect={hasSelect}
                   hasMoreData={quantidadeRegistros !== data.length}

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

@@ -76,7 +76,7 @@ export const TabelaHeader = styled.thead<ColorsProp>`
 
     th.expand {
       width: 50px;
-      min-width: 50px;
+      min-width: 100%;
     }
 
     .sticky {
@@ -101,8 +101,9 @@ export const TabelaHeader = styled.thead<ColorsProp>`
 
 export const TabelaBody = styled.tbody<ColorsProp>`
   ${({ theme, color }) => css`
-    min-height: 100vh; /* Garante altura mínima igual à altura da viewport */
-    width: 100%;
+   overflow-x: auto;
+  overflow-y: auto; /* Habilita o scroll vertical */
+  max-height: 500px; /*
 
     .select {
       background-color: ${color};
@@ -113,6 +114,7 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     .expand {
       position: relative;
       width: 50px;
+      min-height: 53px;
       background-color: ${color};
       display: flex;
       align-items: center;