wca-designsystem 1.0.62 → 1.0.63

package/package.json

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

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

@@ -32,6 +32,7 @@ const CardInicial = ({
   avisoInfo,
   aviso = false,
 }: CardInicialProps) => {
+
   return (
     <S.CardInicialWrapper >
       <S.CardInicialHeader
@@ -41,8 +42,8 @@ const CardInicial = ({
         }}
       >
 
-       {/*  <Icone width={45} height={45} svg={icone} fill={theme.colors.white} /> */}
-       <Icone svg={icone} fill={theme.colors.white} className="icone" />
+        {/*  <Icone width={45} height={45} svg={icone} fill={theme.colors.white} /> */}
+        <Icone svg={icone} fill={theme.colors.white} className="icone" />
 
       </S.CardInicialHeader>
 

package/src/components/molecules/CardInicial/styles.ts

@@ -3,19 +3,20 @@ import styled, { css } from 'styled-components';
 export const CardInicialWrapper = styled.div`
   ${({ theme }) => css`
     position: relative;
-    width: auto;
-    max-width: 250px;
+    width: 250px;
+    height: 100%; 
     height: 230px;
     border-radius: 8px;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     background-color: ${theme.colors.white};
+    display: flex;
+    flex-direction: column;
   `}
 `;
 
 export const CardInicialHeader = styled.div`
   ${() => css`
-    width: auto;
-    max-width: 320px;
+    width: 100%;
     padding: 10px 0;
     border-radius: 8px 8px 0 0;
     display: flex;
@@ -23,29 +24,24 @@ export const CardInicialHeader = styled.div`
     justify-content: center;
 
     .icone {
-    min-width: 40px;
-    min-height: 40px;
-    max-width: 80px;
-    max-height: 80px;
-    object-fit: contain;;
+      min-width: 40px;
+      min-height: 40px;
+      max-width: 80px;
+      max-height: 80px;
+      object-fit: contain;
     }
-
   `}
-
 `;
 
-
-
 export const CardInicialBody = styled.div`
   ${({ theme }) => css`
-    margin-top: 10px;
+    padding: 10px 12px;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: 8px;
     text-align: center;
-    background-color: ${theme.colors.white};
-    padding: 0 12px;
-  
+    
     h2 {
       font-size: ${theme.sizes.large};
       font-weight: 700;
@@ -57,6 +53,12 @@ export const CardInicialBody = styled.div`
       font-weight: 300;
       color: ${theme.colors.blackSti};
       margin: 0;
+      flex-grow: 1;
+      overflow: hidden; 
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3; 
+      -webkit-box-orient: vertical;
     }
   `}
 `;
@@ -64,9 +66,8 @@ export const CardInicialBody = styled.div`
 export const CardInicialFooter = styled.div`
   ${({ theme }) => css`
     text-align: center;
-    border-radius: 0 8px 8px;
-    background-color: ${theme.colors.white};
-    margin-top: 28px;
+    padding: 12px 0;
+    margin-top: auto;
 
     button {
       width: 160px;
@@ -76,23 +77,17 @@ export const CardInicialFooter = styled.div`
 
 export const CardInicialWarning = styled.div`
   ${() => css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0px;
-    margin-top: auto;
     padding: 4px 0;
 
-    .iconeAviso{
-    width: 10px;
-    height: 10px;
+    .iconeAviso {
+      width: 10px;
+      height: 10px;
     }
-
   `}
 `;
 

package/src/components/molecules/TabelaHeader/styles.ts

@@ -14,6 +14,7 @@ export const HeaderTableContent = styled.div`
     background-color: ${theme.colors.gray['300']};
     width: 100%;
     overflow-y: auto;
+    margin-bottom: 10px;
   `}
 `;
 export const ToogleButton = styled.div`

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

@@ -110,8 +110,10 @@ const Tabela = <
   setSelectAllChecked,
   tdMinWidth = '260px',
 }: CustomTableProps<T>) => {
-  const tableRef = useRef<HTMLDivElement>(null)
-  const topScrollRef = useRef<HTMLDivElement>(null)
+
+  const dualScrollWrapperRef = useRef<HTMLDivElement>(null);
+  const topScrollRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLDivElement>(null);
 
   const [toogleFiltros, setToogleFiltros] = useState(false)
   const [formatedColumns, setFormatedColumns] = useState(
@@ -125,37 +127,50 @@ const Tabela = <
     (column) => column.active === true
   )
 
-  //PROVISORIO
-  // useEffect(() => {
-  //   const table = tableRef.current
-  //   const topScroll = topScrollRef.current
+  useEffect(() => {
+    const table = tableRef.current;
+    const topScroll = topScrollRef.current;
+    const dualWrapper = dualScrollWrapperRef.current;
+
+    if (!table || !topScroll || !dualWrapper) return;
+
+    const checkScrollNeeded = () => {
+      const needsScroll = table.scrollWidth > table.clientWidth;
+      dualWrapper.classList.toggle('has-scroll', needsScroll);
+      topScroll.style.display = needsScroll ? 'block' : 'none';
+
+      if (table.firstChild && table.firstChild instanceof HTMLElement) {
+        const tableWidth = table.firstChild.scrollWidth;
+        topScroll.style.setProperty('--table-width', `${tableWidth}px`);
+      }
+    };
 
-  //   if (!table || !topScroll) return
+    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+      if (source.scrollLeft !== target.scrollLeft) {
+        target.scrollLeft = source.scrollLeft;
+      }
+    };
 
-  //   const syncScroll = (source: HTMLElement, target: HTMLElement) => {
-  //     if (source.scrollLeft !== target.scrollLeft) {
-  //       target.scrollLeft = source.scrollLeft
-  //     }
-  //   }
+    const handleTableScroll = () => syncScroll(table, topScroll);
+    const handleTopScroll = () => syncScroll(topScroll, table);
 
-  //   const handleTableScroll = () =>
-  //     table && topScroll && syncScroll(table, topScroll)
-  //   const handleTopScroll = () =>
-  //     topScroll && table && syncScroll(topScroll, table)
+    const resizeObserver = new ResizeObserver(checkScrollNeeded);
+    resizeObserver.observe(table);
+    if (table.firstChild) {
+      resizeObserver.observe(table.firstChild as HTMLElement);
+    }
 
-  //   table.addEventListener('scroll', handleTableScroll)
-  //   topScroll.addEventListener('scroll', handleTopScroll)
+    checkScrollNeeded();
 
-  //   if (table.firstChild && table.firstChild instanceof HTMLElement) {
-  //     const tableWidth = table.firstChild.scrollWidth
-  //     topScroll.style.setProperty('--table-width', `${tableWidth}px`)
-  //   }
+    table.addEventListener('scroll', handleTableScroll);
+    topScroll.addEventListener('scroll', handleTopScroll);
 
-  //   return () => {
-  //     table.removeEventListener('scroll', handleTableScroll)
-  //     topScroll.removeEventListener('scroll', handleTopScroll)
-  //   }
-  // }, [])
+    return () => {
+      resizeObserver.disconnect();
+      table.removeEventListener('scroll', handleTableScroll);
+      topScroll.removeEventListener('scroll', handleTopScroll);
+    };
+  }, [data]);
 
   return (
     <S.TableWrapper>
@@ -175,9 +190,12 @@ const Tabela = <
         setOrdenarPor={setOrdenarPor}
       />
 
-      {/* <S.DualScrollWrapper>
-        <S.TopScroll ref={topScrollRef} id="top-scroll" />
-      </S.DualScrollWrapper> */}
+      <S.DualScrollWrapper ref={dualScrollWrapperRef}>
+        <S.TopScroll
+          ref={topScrollRef}
+          id="table-top-scroll"
+        />
+      </S.DualScrollWrapper>
 
       <S.TableContainer ref={tableRef} id="table-container">
         <S.StyledTable>
@@ -245,16 +263,19 @@ const Tabela = <
         </S.StyledTable>
       </S.TableContainer>
 
-      {data.length > 0 && !hasInfinitScrool && (
-        <Paginacao
-          color={color}
-          setPagination={setPagination}
-          tabelaPaginacao={tabelaPaginacao}
-          quantidadeRegistros={quantidadeRegistros}
-          tamanhoPaginacao={tamanhoPaginacao}
-          qtdRegistrosPagina={qtdRegistrosPagina}
-        />
-      )}
+      <S.ContentWrapper>
+        {data.length > 0 && !hasInfinitScrool && (
+          <Paginacao
+            color={color}
+            setPagination={setPagination}
+            tabelaPaginacao={tabelaPaginacao}
+            quantidadeRegistros={quantidadeRegistros}
+            tamanhoPaginacao={tamanhoPaginacao}
+            qtdRegistrosPagina={qtdRegistrosPagina}
+          />
+        )}
+      </S.ContentWrapper>
+
     </S.TableWrapper>
   )
 }

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

@@ -13,50 +13,60 @@ export const TableWrapper = styled.div`
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    /* gap: 10px; */
   `}
 `;
 
 export const DualScrollWrapper = styled.div`
+  overflow-x: hidden;
+  overflow-y: hidden;
+  height: 0px; 
   max-width: 1500px;
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  transition: height 0.2s ease;
+  
+
+  &.has-scroll {
+    height: 20px;
+    overflow-x: auto;
+    padding-bottom: 6px;
+  }
+`;
+
+export const ContentWrapper = styled.div`
+  margin-top:1rem;
 `;
 
 export const TopScroll = styled.div`
+  display: none; 
   overflow-x: auto;
-  height: 20px;
-  background: #f5f5f5;
-  border-bottom: none;
-  border-radius: 5px 5px 0 0;
+  max-width: 1500px;
+  width: 100%;
+  height: auto;
+  background: transparent;
   
-  scrollbar-width: initial;
-  scrollbar-color:rgb(160, 160, 160) #f1f1f1;
+  scrollbar-width: auto;
+  scrollbar-color: rgb(160, 160, 160) #f1f1f1;
+
+  &::after {
+    content: '';
+    display: block;
+    width: var(--table-width, 100%);
+    height: 1px;
+  }
 
   &::-webkit-scrollbar {
-    height: 8px;
-    display: none;
+    height: 18px;
   }
 
   &::-webkit-scrollbar-track {
     background: #f1f1f1;
-    border-radius: 4px;
+    border-radius: 6px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 4px;
-    &:hover {
-      background: #555;
-    }
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: var(--table-width, 100%);
-    height: 1px;
+    background-color: rgb(160, 160, 160);
+    border-radius: 6px;
   }
 `;