wca-designsystem 1.0.67 → 1.0.68

package/package.json

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

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

@@ -1,16 +1,16 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Tabela from './index';
-import { theme } from '../../../styles/theme';
-import Botao from '../../atomos/Botao';
+import React from 'react'
+import { Meta } from '@storybook/react'
+import Tabela from './index'
+import { theme } from '../../../styles/theme'
+import Botao from '../../atomos/Botao'
 
 export default {
   title: 'Components/organismos/Tabela',
   component: Tabela,
-} as Meta;
+} as Meta
 
 const generateData = () => {
-  const data = [];
+  const data = []
 
   for (let i = 1; i <= 3; i++) {
     const children = [
@@ -44,7 +44,7 @@ const generateData = () => {
         exemplo: 'opa',
         exemplo2: 'opa2',
       },
-    ];
+    ]
 
     data.push({
       id: i,
@@ -53,40 +53,38 @@ const generateData = () => {
       exemplo: 'opa',
       exemplo2: 'opa2',
       children,
-    });
+    })
   }
 
-  return data;
-};
+  return data
+}
 
 const footer = {
   id: 0,
   name: 455,
   price: 2,
   exemplo: 4689815.609999999,
-};
-const data = generateData();
+}
+const data = generateData()
 const columns: any = [
-  { key: 'expand', header: 'expand' },
-  { key: 'id', header: 'ID' },
+  { key: 'id', header: 'ID', minWidth: '50px' },
   { key: 'name', header: 'Nome' },
   { key: 'price', header: 'Preço' },
   { key: 'exemplo', header: 'Exemplo' },
   { key: 'acoes', header: 'Ações' },
-];
+]
 
 const Template: any = (args: any) => (
   <>
     <Tabela {...args} />
   </>
-);
+)
 
-export const TabelaProps = Template.bind({});
+export const TabelaProps = Template.bind({})
 
 TabelaProps.args = {
   data: data,
   footer: footer,
-  hasExpand: true,
   hasSelect: false,
   isLoading: false,
   acoesChildren: (row: any): JSX.Element => (
@@ -117,4 +115,4 @@ TabelaProps.args = {
   quantidadeDeRegistros: 10,
   tamanhoPaginacao: 97,
   setSimples: () => console.log('aqui'),
-};
+}

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

@@ -15,7 +15,7 @@ type HeaderOptions = {
 
 type HeaderTabelaProps<T> = {
   data: Array<T>
-  rowSelection?: Array<T>;
+  rowSelection?: Array<T>
   columns: Column<T>[]
   selectAllChecked?: boolean
   setSelectAllChecked?: React.Dispatch<React.SetStateAction<boolean>>
@@ -103,10 +103,9 @@ const HeaderTabela = <T,>({
 
   useEffect(() => {
     if (selectAllChecked && rowSelection?.length === 0) {
-      setSelectAllChecked?.(false);
+      setSelectAllChecked?.(false)
     }
-  }, [rowSelection, selectAllChecked]);
-  
+  }, [rowSelection, selectAllChecked])
   return (
     <S.TabelaHeader color={color}>
       <tr>
@@ -137,7 +136,7 @@ const HeaderTabela = <T,>({
                     : ''
                 }
                 style={{
-                  minWidth: tdMinWidth,
+                  minWidth: header.minWidth ? header.minWidth : tdMinWidth,
                   background: coloredHeader(header.key).background,
                   color: coloredHeader(header.key).color,
                   left: fixedPosition?.some((fixed) => header.key === fixed)

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

@@ -10,6 +10,7 @@ import FooterTabela from './footer'
 export type Column<T> = {
   key: keyof T
   header: string
+  minWidth?: string
   render?: (value: T) => React.ReactNode
   cell?: (row: T) => React.ReactNode
   expand?: (item: T) => React.ReactNode
@@ -110,9 +111,9 @@ const Tabela = <
   setSelectAllChecked,
   tdMinWidth = '260px',
 }: CustomTableProps<T>) => {
-  const dualScrollWrapperRef = useRef<HTMLDivElement>(null);
-  const topScrollRef = useRef<HTMLDivElement>(null);
-  const tableRef = 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(
@@ -127,49 +128,49 @@ const Tabela = <
   )
 
   useEffect(() => {
-    const table = tableRef.current;
-    const topScroll = topScrollRef.current;
-    const dualWrapper = dualScrollWrapperRef.current;
+    const table = tableRef.current
+    const topScroll = topScrollRef.current
+    const dualWrapper = dualScrollWrapperRef.current
 
-    if (!table || !topScroll || !dualWrapper) return;
+    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';
+      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`);
+        const tableWidth = table.firstChild.scrollWidth
+        topScroll.style.setProperty('--table-width', `${tableWidth}px`)
       }
-    };
+    }
 
     const syncScroll = (source: HTMLElement, target: HTMLElement) => {
       if (source.scrollLeft !== target.scrollLeft) {
-        target.scrollLeft = source.scrollLeft;
+        target.scrollLeft = source.scrollLeft
       }
-    };
+    }
 
-    const handleTableScroll = () => syncScroll(table, topScroll);
-    const handleTopScroll = () => syncScroll(topScroll, table);
+    const handleTableScroll = () => syncScroll(table, topScroll)
+    const handleTopScroll = () => syncScroll(topScroll, table)
 
-    const resizeObserver = new ResizeObserver(checkScrollNeeded);
-    resizeObserver.observe(table);
+    const resizeObserver = new ResizeObserver(checkScrollNeeded)
+    resizeObserver.observe(table)
     if (table.firstChild) {
-      resizeObserver.observe(table.firstChild as HTMLElement);
+      resizeObserver.observe(table.firstChild as HTMLElement)
     }
 
-    checkScrollNeeded();
+    checkScrollNeeded()
 
-    table.addEventListener('scroll', handleTableScroll);
-    topScroll.addEventListener('scroll', handleTopScroll);
+    table.addEventListener('scroll', handleTableScroll)
+    topScroll.addEventListener('scroll', handleTopScroll)
 
     return () => {
-      resizeObserver.disconnect();
-      table.removeEventListener('scroll', handleTableScroll);
-      topScroll.removeEventListener('scroll', handleTopScroll);
-    };
-  }, [data]);
+      resizeObserver.disconnect()
+      table.removeEventListener('scroll', handleTableScroll)
+      topScroll.removeEventListener('scroll', handleTopScroll)
+    }
+  }, [data])
 
   return (
     <S.TableWrapper>
@@ -190,10 +191,7 @@ const Tabela = <
       />
 
       <S.DualScrollWrapper ref={dualScrollWrapperRef}>
-        <S.TopScroll
-          ref={topScrollRef}
-          id="table-top-scroll"
-        />
+        <S.TopScroll ref={topScrollRef} id="table-top-scroll" />
       </S.DualScrollWrapper>
 
       <S.TableContainer ref={tableRef} id="table-container">
@@ -276,7 +274,6 @@ const Tabela = <
           />
         )}
       </S.ContentWrapper>
-
     </S.TableWrapper>
   )
 }