wca-designsystem 0.0.66 → 0.0.68

package/package.json

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

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

@@ -14,7 +14,7 @@ import plus from '../../../assets/imagens/icons/Mais.svg';
 import { Menu, Switch } from '@mantine/core';
 
 export type TabelaHeaderProps<
-  T extends { id: string | number; children: Array<T> }
+  T extends { id: string | number; children?: Array<T> }
 > = {
   globalFilter: string;
   setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
@@ -30,7 +30,7 @@ export type TabelaHeaderProps<
   columns: Column<T>[];
   setFormatedColumns: React.Dispatch<React.SetStateAction<Column<T>[]>>;
 };
-const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
+const TabelaHeader = <T extends { id: string | number; children?: Array<T> }>({
   globalFilter,
   setGlobalFilter,
   setToogleFiltros,

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
@@ -7,7 +7,7 @@ import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixo.svg';
 import Icone from '../../atomos/Icone';
 
 export interface BodyTableProps<
-  T extends { id: string | number; children: Array<T> }
+  T extends { id: string | number; children?: Array<T> }
 > {
   data: Array<T>;
   columns: Column<T>[];
@@ -20,10 +20,9 @@ export interface BodyTableProps<
   setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
   hasInfinitScrool?: boolean;
   hasMoreData?: boolean;
-  fetchMoreData?: () => void;
 }
 
-function BodyTable<T extends { id: string | number; children: Array<T> }>(
+function BodyTable<T extends { id: string | number; children?: Array<T> }>(
   props: BodyTableProps<T>
 ) {
   const {
@@ -32,7 +31,6 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     acoesChildren,
     hasSelect,
     rowSelection,
-    fetchMoreData,
     hasMoreData,
     hasInfinitScrool,
     setRowSelection,
@@ -87,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 (
@@ -134,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">
@@ -172,7 +174,7 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
         })}
       </tr>,
       ...(expandedRows.has(item.id)
-        ? item.children.flatMap(child =>
+        ? item?.children!.flatMap(child =>
             renderRows(
               child,
               columns,

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/index.tsx

@@ -65,7 +65,7 @@ export type CustomTableProps<
   hasInfinitScrool?: boolean;
 };
 
-const Tabela = <T extends { id: string | number; children: Array<T> }>({
+const Tabela = <T extends { id: string | number; children?: Array<T> }>({
   data,
   columns,
   setPagination,
@@ -185,7 +185,6 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
               ) : (
                 <BodyTable
                   color={color}
-                  fetchMoreData={fetchMoreData}
                   hasInfinitScrool={hasInfinitScrool}
                   hasSelect={hasSelect}
                   hasMoreData={quantidadeRegistros !== data.length}

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

@@ -76,7 +76,7 @@ export const TabelaHeader = styled.thead<ColorsProp>`
 
     th.expand {
       width: 50px;
-      min-width: 50px;
+      min-width: 100%;
     }
 
     .sticky {
@@ -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 {