wca-designsystem 1.0.39 → 1.0.41

package/package.json

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

package/src/assets/imagens/icons/SetaAbaixoALt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,10L12,15L17,10H7Z" /></svg>

package/src/components/modules/ConchaAplicacao/index.tsx

@@ -64,7 +64,7 @@ export function ConchaAplicacao({
         />
       </S.NavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>
-        <Container size={1500} fluid>
+        <Container size={1500}>
           <Cabecalho
             icone={icone}
             info={info}

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

@@ -12,7 +12,7 @@ export default {
 const generateData = () => {
   const data = [];
 
-  for (let i = 1; i <= 5; i++) {
+  for (let i = 1; i <= 3; i++) {
     const children = [
       {
         id: `${i}-1`,
@@ -20,6 +20,22 @@ const generateData = () => {
         price: '$10',
         exemplo: 'opa',
         exemplo2: 'opa2',
+        children: [
+          {
+            id: `${i}-1-1`,
+            name: `Task ${i}-2`,
+            price: '$10',
+            exemplo: 'opa',
+            exemplo2: 'opa2',
+          },
+          {
+            id: `${i}-1-2`,
+            name: `Task ${i}-2`,
+            price: '$10',
+            exemplo: 'opa',
+            exemplo2: 'opa2',
+          },
+        ],
       },
       {
         id: `${i}-2`,
@@ -51,6 +67,7 @@ const footer = {
 };
 const data = generateData();
 const columns: any = [
+  { key: 'expand', header: 'expand' },
   { key: 'id', header: 'ID' },
   { key: 'name', header: 'Nome' },
   { key: 'price', header: 'Preço' },
@@ -69,7 +86,7 @@ export const TabelaProps = Template.bind({});
 TabelaProps.args = {
   data: data,
   footer: footer,
-  hasExpand: false,
+  hasExpand: true,
   hasSelect: false,
   isLoading: false,
   acoesChildren: (row: any): JSX.Element => (
@@ -89,6 +106,7 @@ TabelaProps.args = {
     pageSize: 10,
   },
   rowSelection: [],
+  tdMinWidth: '200px',
   setRowSelection: () => console.log('selecionou'),
   setFiltrosPor: () => console.log('aqui'),
   fetchMoreData: () => console.log('fetchMoreData'),

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

@@ -3,7 +3,7 @@ import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
 import { theme } from '../../../styles/theme';
-import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixo.svg';
+import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixoALt.svg';
 import Icone from '../../atomos/Icone';
 
 export interface BodyTableProps<
@@ -80,7 +80,8 @@ function BodyTable<
     setRowSelection?:
       | React.Dispatch<React.SetStateAction<Array<T>>>
       | undefined,
-    color?: string
+    color?: string,
+    nivel: number = 0
   ): JSX.Element[] {
     const isSelected = rowSelection?.some(row => row.id === item.id);
     const hasChildren = item.children && item.children.length > 0;
@@ -114,18 +115,19 @@ function BodyTable<
                 style={{
                   cursor: hasChildren ? 'pointer' : 'not-allowed',
                   opacity: hasChildren ? 1 : 0.5,
+                  marginLeft: 25 * nivel,
                 }}
               >
                 <Icone
                   svg={SetaBaixo}
-                  fill={theme.colors.white}
+                  fill={color}
                   style={{
                     transform: expandedRows.has(item.id)
                       ? 'rotate(-180deg)'
                       : hasChildren
                       ? 'rotate(0deg)'
                       : 'rotate(-90deg)',
-                    color: theme.colors.white,
+                    color: color,
                     transition: 'ease-in 0.2s',
                   }}
                 />
@@ -201,7 +203,8 @@ function BodyTable<
               acoesChildren,
               rowSelection,
               setRowSelection,
-              color
+              color,
+              nivel + 1
             )
           )
         : []),

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

@@ -19,7 +19,12 @@ const FooterTabela = <T,>({
     <tfoot style={{ background: color }}>
       <S.FooterRow>
         {columns.map((column, index) => (
-          <S.FooterCell key={index} tdMinWidth={tdMinWidth} color={color}>
+          <S.FooterCell
+            className={column.key == 'expand' ? 'expand' : ''}
+            key={index}
+            tdMinWidth={tdMinWidth}
+            color={color}
+          >
             {footer[column.key] ?? '-'}
           </S.FooterCell>
         ))}

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

@@ -110,6 +110,10 @@ const Tabela = <
   setSelectAllChecked,
   tdMinWidth = '260px',
 }: CustomTableProps<T>) => {
+
+  const tableRef = useRef<HTMLDivElement>(null);
+  const topScrollRef = useRef<HTMLDivElement>(null);
+
   const [toogleFiltros, setToogleFiltros] = useState(false);
   const [formatedColumns, setFormatedColumns] = useState(
     columns.map(column => ({
@@ -122,32 +126,34 @@ const Tabela = <
     column => column.active === true
   );
 
-  const topScrollRef = useRef<HTMLDivElement>(null);
-  const tabelaRef = useRef<HTMLTableElement>(null);
-  const TableContainerRef = useRef<HTMLDivElement>(null);
-
-  // Sincroniza o scroll horizontal entre os dois scrollbars
   useEffect(() => {
-    if (!fetchMoreData || !TableContainerRef.current) return;
-
-    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 table = tableRef.current;
+    const topScroll = topScrollRef.current;
+
+    if (!table || !topScroll) return;
+
+    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+      if (source.scrollLeft !== target.scrollLeft) {
+        target.scrollLeft = source.scrollLeft;
       }
     };
 
-    const currentRef = TableContainerRef.current;
-    currentRef.addEventListener('scroll', handleScroll);
+    const handleTableScroll = () => table && topScroll && syncScroll(table, topScroll);
+    const handleTopScroll = () => topScroll && table && syncScroll(topScroll, table);
+
+    table.addEventListener('scroll', handleTableScroll);
+    topScroll.addEventListener('scroll', handleTopScroll);
+
+    if (table.firstChild && table.firstChild instanceof HTMLElement) {
+      const tableWidth = table.firstChild.scrollWidth;
+      topScroll.style.setProperty('--table-width', `${tableWidth}px`);
+    }
 
     return () => {
-      currentRef.removeEventListener('scroll', handleScroll);
+      table.removeEventListener('scroll', handleTableScroll);
+      topScroll.removeEventListener('scroll', handleTopScroll);
     };
-  }, [fetchMoreData]);
+  }, []);
 
   return (
     <S.TableWrapper>
@@ -166,10 +172,15 @@ const Tabela = <
         ordenarPor={ordenarPor}
         setOrdenarPor={setOrdenarPor}
       />
-      {/* Scroll horizontal no topo */}
-      <S.TableContainer ref={TableContainerRef}>
-        <S.ScrollWrapper ref={topScrollRef}></S.ScrollWrapper>
-        <S.StyledTable ref={tabelaRef}>
+      <S.DualScrollWrapper>
+        <S.TopScroll ref={topScrollRef} id="top-scroll" />
+      </S.DualScrollWrapper>
+
+      <S.TableContainer
+        ref={tableRef}
+        id="table-container"
+      >
+        <S.StyledTable>
           {data?.length == 0 ? (
             <></>
           ) : (

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

@@ -17,13 +17,69 @@ export const TableWrapper = styled.div`
   `}
 `;
 
+export const DualScrollWrapper = styled.div`
+  max-width: 1500px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TopScroll = styled.div`
+  overflow-x: auto;
+  height: 20px;
+  background: #f5f5f5;
+  border-bottom: none;
+  border-radius: 5px 5px 0 0;
+  
+  scrollbar-width: initial;
+  scrollbar-color:rgb(160, 160, 160) #f1f1f1;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+    &:hover {
+      background: #555;
+    }
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: var(--table-width, 100%);
+    height: 1px;
+  }
+`;
+
 export const TableContainer = styled.div`
   overflow-x: auto;
   max-height: 500px;
   border-radius: 5px;
   font-family: 'Open Sans', sans-serif;
   max-width: 1500px;
-  width: 100%;
+  width: 100;
+
+  scrollbar-width: initial;
+  scrollbar-color:rgb(160, 160, 160) #f1f1f1;
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+  }
+
+
+  &::-webkit-scrollbar-corner {
+    background: #f1f1f1;
+  }
 `;
 
 export const StyledTable = styled.table`
@@ -139,12 +195,14 @@ export const TabelaBody = styled.tbody<ColorsProp>`
 
     .expand {
       position: relative;
-      width: 50px;
-      min-height: 53px;
-      background-color: ${color};
+      width: 30px;
+      min-height: 25px;
+      border-radius: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
+      border: unset;
+      padding-left: 5px;
     }
 
     tr {
@@ -259,8 +317,10 @@ export const PaginationButtons = styled.div<ColorsProp>`
 export const ScrollWrapper = styled.div`
   position: relative;
   z-index: 10;
-  overflow-x: visible;
+  overflow-x: auto;
   width: 100%;
+  background: red;
+  border: 10px solid blue;
 `;
 
 export const FakeTable = styled.div`
@@ -281,4 +341,9 @@ export const FooterCell = styled.td<{ tdMinWidth: string; color?: string }>`
   min-width: ${({ tdMinWidth }) => tdMinWidth};
   padding: 5px;
   border-top: 1px solid ${({ theme }) => theme.colors.gray[500]};
+
+  &.expand {
+    min-width: 50px;
+    max-width: 100%;
+  }
 `;