wca-designsystem 0.0.67 → 0.0.69

package/package.json

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

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

@@ -46,8 +46,8 @@ const generateData = () => {
 const data = generateData();
 const columns: any = [
   {
-    key: 'expand',
-    header: 'expand',
+    key: 'select',
+    header: 'select',
   },
   { key: 'id', header: 'ID' },
   { key: 'name', header: 'Nome' },
@@ -66,7 +66,8 @@ export const TabelaProps = Template.bind({});
 
 TabelaProps.args = {
   data: data,
-  hasExpand: true,
+  hasExpand: false,
+  hasSelect: true,
   acoesChildren: (row: any): JSX.Element => (
     <>
       <Botao onClick={() => console.log(row)} tipo={'table'} children={'▶'} />

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

@@ -31,7 +31,6 @@ function BodyTable<T extends { id: string | number; children?: Array<T> }>(
     acoesChildren,
     hasSelect,
     rowSelection,
-
     hasMoreData,
     hasInfinitScrool,
     setRowSelection,
@@ -86,22 +85,6 @@ function BodyTable<T extends { id: string | number; children?: Array<T> }>(
 
     return [
       <tr key={`row-${item.id}`}>
-        {hasSelect && (
-          <td className="select">
-            <Checkbox
-              size="md"
-              color={color}
-              type="checkbox"
-              checked={rowSelection?.some(selected => selected.id === item.id)}
-              onChange={() => {
-                handleRowSelect(
-                  item,
-                  rowSelection!.some(selected => selected.id === item.id)
-                );
-              }}
-            />
-          </td>
-        )}
         {columns.map((column, colIndex) => {
           if (column.key === 'expand') {
             return (
@@ -133,6 +116,26 @@ function BodyTable<T extends { id: string | number; children?: Array<T> }>(
             );
           }
 
+          if (column.key === 'select') {
+            return (
+              <td className="select" key={`select-${colIndex}`}>
+                <Checkbox
+                  size="md"
+                  color={color}
+                  type="checkbox"
+                  checked={rowSelection?.some(
+                    selected => selected.id === item.id
+                  )}
+                  onChange={() => {
+                    handleRowSelect(
+                      item,
+                      rowSelection!.some(selected => selected.id === item.id)
+                    );
+                  }}
+                />
+              </td>
+            );
+          }
           if (column.key === 'acoes' && acoesChildren) {
             return (
               <td key={`acoes-${colIndex}`} className="acoes">

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

@@ -82,8 +82,10 @@ const HeaderTabela = <T,>({
         {hasExpand && <></>}
         {hasSelect && <></>}
         {columns.map((header, index) => {
-          if (header.key === 'expand' || header.key === 'select')
+          if (header.key === 'expand')
             return <th key={index} className="expand"></th>;
+          if (header.key === 'select')
+            return <th key={index} className="select"></th>;
           if (header.key !== 'acoes') {
             return (
               <th

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

@@ -12,6 +12,7 @@ export type PaginacaoProps = {
   tamanhoPaginacao?: number;
   color?: string;
   quantidadeRegistros?: number;
+  qtdRegistrosPagina?: number;
   setPagination: React.Dispatch<React.SetStateAction<PaginationProps>>;
   tabelaPaginacao: {
     pageIndex: number;
@@ -25,6 +26,7 @@ const Paginacao = ({
   tamanhoPaginacao,
   setPagination,
   quantidadeRegistros,
+  qtdRegistrosPagina,
 }: PaginacaoProps) => {
   function nextPage() {
     if (tabelaPaginacao.pageIndex + 1 > tabelaPaginacao.pageSize) {
@@ -64,7 +66,7 @@ const Paginacao = ({
     <S.PaginacaoWrapper color={color}>
       <div className="pagination-header">
         <p>
-          Exibindo {tabelaPaginacao.pageIndex} de {quantidadeRegistros}
+          Exibindo {qtdRegistrosPagina} de {quantidadeRegistros}
         </p>
         <div className="select-wrapper">
           <SelectCustomizado

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

@@ -101,14 +101,19 @@ export const TabelaHeader = styled.thead<ColorsProp>`
 
 export const TabelaBody = styled.tbody<ColorsProp>`
   ${({ theme, color }) => css`
-   overflow-x: auto;
-  overflow-y: auto; /* Habilita o scroll vertical */
-  max-height: 500px; /*
+    overflow-x: auto;
+    overflow-y: auto; /* Habilita o scroll vertical */
+    max-height: 500px;
 
     .select {
       background-color: ${color};
-      position: absolute;
-      /* left: 17px; */
+      position: relative;
+      width: 50px;
+      min-height: 53px;
+      background-color: ${color};
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .expand {