wca-designsystem 0.0.93 → 0.0.95

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch } from '@mantine/core';
+import { Checkbox, Switch } from '@mantine/core';
 import * as S from './styles';
 import { Column } from '.';
 import buscar from '../../../assets/imagens/icons/Busca.svg';
@@ -14,7 +14,10 @@ type HeaderOptions = {
 };
 
 type HeaderTabelaProps<T> = {
+  data: Array<T>;
   columns: Column<T>[];
+  rowSelection?: Array<T>;
+  setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
   fixedPosition: Array<String>;
   calcStickPosition?: (index: number) => number;
   headerSelection?: Array<String>;
@@ -34,6 +37,9 @@ type HeaderTabelaProps<T> = {
   >;
 };
 const HeaderTabela = <T,>({
+  data,
+  rowSelection,
+  setRowSelection,
   columns,
   fixedPosition,
   color,
@@ -67,6 +73,17 @@ const HeaderTabela = <T,>({
     [headerSelection]
   );
 
+  const handleSelectAll = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        setRowSelection!(data); // Seleciona todos os dados
+      } else {
+        setRowSelection!([]); // Desmarca todos
+      }
+    },
+    [data, setRowSelection]
+  );
+
   const renderHeaderOptions = useCallback((header: string | number | symbol):
     | string
     | undefined => {
@@ -80,12 +97,21 @@ const HeaderTabela = <T,>({
     <S.TabelaHeader color={color}>
       <tr>
         {hasExpand && <></>}
-        {hasSelect && <></>}
+        {hasSelect && (
+          <td className="select select-all" key={`select-all`}>
+            <Checkbox
+              size="md"
+              color={color}
+              type="checkbox"
+              checked={rowSelection?.length === data.length}
+              onChange={e => handleSelectAll(e.target.checked)}
+            />
+          </td>
+        )}
         {columns.map((header, index) => {
           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 === 'select') return <></>;
           if (header.key !== 'acoes') {
             return (
               <th

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

@@ -164,6 +164,9 @@ const Tabela = <
             <></>
           ) : (
             <HeaderTabela
+              data={data}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
               hasExpand={hasExpand}
               headerSelection={headerSelection}
               toogleFiltros={toogleFiltros}

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

@@ -75,6 +75,17 @@ export const TabelaHeader = styled.thead<ColorsProp>`
       font-weight: bold;
     }
 
+    .select-all {
+      z-index: 10;
+      background-color: ${color};
+      border: none;
+      min-height: 53px;
+      background-color: ${color};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     th.expand {
       width: 50px;
       min-width: 100%;