wca-designsystem 0.0.64 → 0.0.66

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.64",
+  "version": "0.0.66",
   "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

@@ -73,7 +73,9 @@ const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
             { value: 'Menor', label: 'Ordenar por: Crescente' },
           ]}
           onChange={(_value, option) => setOrdenarPor!(option)}
-          value={ordenarPor ? ordenarPor.value : null}
+          allowDeselect={false}
+          value={ordenarPor ? ordenarPor.value : 'Maior'}
+          clearable={false}
           placeholder={`Ordenar por ${ordenarPor}`}
           color={color}
           maw={200}

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

@@ -75,7 +75,6 @@ TabelaProps.args = {
   columns: columns,
   color: theme.colors.blue,
   hasFiltersButtons: true,
-
   ordenarPor: {
     label: 'Ordenar por: Maior',
     value: 'Maior',
@@ -90,6 +89,7 @@ TabelaProps.args = {
   fetchMoreData: () => console.log('fetchMoreData'),
   hasInfinitScrool: true,
   hasMoreData: true,
+  hasOrder: true,
   setGlobalFilter: () => console.log('aqui'),
   setPagination: () => console.log('aqui'),
   quantidadeDeRegistros: 10,

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

@@ -70,29 +70,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>[],

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>[];
@@ -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 ? (
             <></>

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

@@ -101,18 +101,20 @@ 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};
       position: absolute;
-      left: 17px;
+      /* left: 17px; */
     }
 
     .expand {
       position: relative;
       width: 50px;
+      min-height: 53px;
       background-color: ${color};
       display: flex;
       align-items: center;