wca-designsystem 0.0.10 → 0.0.11

package/package.json

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

package/src/components/molecules/Paginacao/Paginacao.test.tsx

@@ -5,11 +5,7 @@ import { render } from "../../../test/render";
 describe("Paginação", () => {
   test("Renderizando corretamente", () => {
     const { getByText } = render(
-      <Paginacao
-        handlePaginationChange={() => console.log("aqui")}
-        setTabelaPaginacaoProps={() => console.log("aqui")}
-        tabelaPaginacao={{ pageIndex: 30, pageSize: 100 }}
-      />
+      <Paginacao tabelaPaginacao={{ pageIndex: 30, pageSize: 100 }} />
     );
 
     expect(getByText("Anterior")).toBeDefined();

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

@@ -1,31 +1,23 @@
-import React from "react";
-import * as S from "./styles";
-import { theme } from "../../../styles/theme";
-import { MRT_PaginationState, MRT_Updater } from "mantine-react-table";
-import SelectCustomizado from "../../atomos/Select";
-import Botao from "../../atomos/Botao";
-import { useSearchParams } from "react-router-dom";
+import React from 'react';
+import * as S from './styles';
+import { theme } from '../../../styles/theme';
+import { useSearchParams } from 'react-router-dom';
+import Botao from '../../atomos/Botao';
+import SelectCustomizado from '../../atomos/Select';
 
 export type PaginacaoProps = {
   tamanhoPaginacao?: number;
+  quantidadeRegistros?: number;
   tabelaPaginacao: {
     pageIndex: number;
     pageSize: number;
   };
-  setTabelaPaginacaoProps: React.Dispatch<
-    React.SetStateAction<{
-      pageIndex: number;
-      pageSize: number;
-    }>
-  >;
-  handlePaginationChange: (updater: MRT_Updater<MRT_PaginationState>) => void;
 };
 
 const Paginacao = ({
-  handlePaginationChange,
   tabelaPaginacao,
   tamanhoPaginacao,
-  setTabelaPaginacaoProps
+  quantidadeRegistros,
 }: PaginacaoProps) => {
   const [, setSearchParams] = useSearchParams();
 
@@ -33,39 +25,33 @@ const Paginacao = ({
     if (tabelaPaginacao.pageIndex + 1 > tabelaPaginacao.pageSize) {
       return;
     }
-    setSearchParams(params => {
-      params.set("page", String(tabelaPaginacao.pageIndex + 1));
+    setSearchParams((params) => {
+      params.set('pagina', String(tabelaPaginacao.pageIndex + 1));
       return params;
     });
-    setTabelaPaginacaoProps({
-      pageIndex: tabelaPaginacao.pageIndex + 1,
-      pageSize: 10
-    });
   }
 
   function previousPage() {
     if (tabelaPaginacao.pageIndex <= 0) {
       return;
     }
-    setSearchParams(params => {
-      params.set("page", String(tabelaPaginacao.pageIndex - 1));
+    setSearchParams((params) => {
+      params.set('pagina', String(tabelaPaginacao.pageIndex - 1));
       return params;
     });
-    setTabelaPaginacaoProps({
-      pageIndex: tabelaPaginacao.pageIndex - 1,
-      pageSize: 10
-    });
   }
 
   function changePage(e: number) {
-    setSearchParams(params => {
-      params.set("page", String(e));
+    setSearchParams((params) => {
+      params.set('pagina', String(e));
       return params;
     });
+  }
 
-    setTabelaPaginacaoProps({
-      pageIndex: e,
-      pageSize: 10
+  function changeLinhas(e: string) {
+    setSearchParams((params) => {
+      params.set('linhas', String(e));
+      return params;
     });
   }
 
@@ -73,19 +59,16 @@ const Paginacao = ({
     <S.PaginacaoWrapper>
       <div className="pagination-header">
         <p>
-          Exibindo {tabelaPaginacao.pageIndex} de {tabelaPaginacao.pageSize}
+          Exibindo{' '}
+          {tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex} de{' '}
+          {quantidadeRegistros}
         </p>
         <div className="select-wrapper">
           <SelectCustomizado
             tipo="round"
-            disabled={tamanhoPaginacao! > tabelaPaginacao.pageIndex}
-            onChange={e =>
-              handlePaginationChange({
-                pageIndex: tabelaPaginacao.pageIndex,
-                pageSize: Number(e)
-              })}
-            defaultValue={"10"}
-            data={["10", "20", "30"]}
+            onChange={(e) => changeLinhas(e!)}
+            defaultValue={'10'}
+            data={['10', '20', '30']}
           />
         </div>
       </div>
@@ -94,14 +77,16 @@ const Paginacao = ({
           data-testid="Anterior"
           className="button-pagination"
           tipo="default"
-          disabled={tabelaPaginacao.pageIndex === 0}
+          disabled={tabelaPaginacao.pageIndex === 1}
           onClick={() => previousPage()}
         >
           Anterior
         </Botao>
         <S.PaginationMantine
-          value={tabelaPaginacao.pageIndex}
-          onChange={e => {
+          value={
+            tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex
+          }
+          onChange={(e) => {
             changePage(e);
           }}
           total={tamanhoPaginacao!}
@@ -110,8 +95,8 @@ const Paginacao = ({
         />
         <Botao
           data-testid="Proximo"
-          tipo={"default"}
-          disabled={tamanhoPaginacao === tabelaPaginacao.pageIndex + 1}
+          tipo={'default'}
+          disabled={tamanhoPaginacao === tabelaPaginacao.pageIndex}
           onClick={() => nextPage()}
           className="button-pagination"
         >

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

@@ -33,7 +33,7 @@ describe('Tabela', () => {
   it('Renderiza corretamente', () => {
     const { getByText } = render(
       <Tabela<any>
-        isLoading={false}
+        loading={false}
         data={[]}
         tituloTabela="Usuário"
         enableExpanding={false}
@@ -51,7 +51,7 @@ describe('Tabela', () => {
     const { getByText } = render(
       <Tabela<any>
         data={[]}
-        isLoading={false}
+        loading={false}
         enableExpanding={false}
         enableRowSelection={false}
         tituloTabela="Usuário"

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react'
 import {
   type MRT_ColumnDef,
   useMantineReactTable,
   MRT_RowData,
-  MRT_PaginationState,
+  
   MRT_ColumnFilterFnsState,
   MRT_ColumnFiltersState,
   MRT_SortingState,
@@ -11,127 +11,128 @@ import {
   MRT_RowSelectionState,
   MRT_Cell,
   MRT_Row,
-  MRT_TableInstance
-} from "mantine-react-table";
-import * as S from "./styles";
-import { useCallback, useMemo, useState } from "react";
-import Paginacao from "../../molecules/Paginacao";
-import TabelaHeader, { SelectDataProps } from "../../molecules/TabelaHeader";
-import { utils, writeFileXLSX } from "xlsx";
-import { Table } from "@mantine/core";
-import SkeletonTable from "./SkeletonTable";
-import HeaderTable from "./HeaderTable";
-import BodyTable from "./BodyTable";
-import FooterTable from "./FooterTable";
-import { MRT_Localization_PT_BR } from "../../../utils/tableLocale";
-import { useSearchParams } from "react-router-dom";
+  MRT_TableInstance,
+} from 'mantine-react-table'
+import * as S from './styles'
+import { useCallback, useMemo, useState } from 'react'
+import { MRT_Localization_PT_BR } from '../../../utils/tableLocale'
+
+import { utils, writeFileXLSX } from 'xlsx'
+import { Table } from '@mantine/core'
+import SkeletonTable from './SkeletonTable'
+import HeaderTable from './HeaderTable'
+import BodyTable from './BodyTable'
+import FooterTable from './FooterTable'
+import { useSearchParams } from 'react-router-dom'
+import Paginacao from '../../molecules/Paginacao'
+import TabelaHeader, { SelectDataProps } from '../../molecules/TabelaHeader'
 
 export interface TabelaProps<T extends MRT_RowData> {
   data: Array<T>
-  columns: MRT_ColumnDef<T>[];
-  isLoading: boolean;
-  tituloTabela?: string;
-  tamanhoPaginacao?: number;
-  enableRowSelection: boolean;
-  handleAdicionar?: (() => void) | undefined;
-  setRowSelection?: React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>;
-  acoes?: ((props: {
-    cell: MRT_Cell<T, unknown>;
-    renderedRowIndex?: number;
-    row: MRT_Row<T>;
-    table: MRT_TableInstance<T>;
-  }) => React.ReactNode) | undefined
-  rowSelection?: MRT_RowSelectionState | undefined;
-  enableExpanding: boolean;
-  fixedPosition?: Array<string>;
-  enableRowActions?: boolean;
-  hasTotalFooter?: boolean;
+  acoes?:
+    | ((props: {
+        cell: MRT_Cell<T, unknown>
+        renderedRowIndex?: number
+        row: MRT_Row<T>
+        table: MRT_TableInstance<T>
+      }) => React.ReactNode)
+    | undefined
+  handleAdicionar?: (() => void) | undefined
+  columns: MRT_ColumnDef<T>[]
+  tituloTabela?: string
+  enableRowSelection: boolean
+  setRowSelection?: React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>
+  rowSelection?: MRT_RowSelectionState | undefined
+  enableExpanding: boolean
+  fixedPosition?: Array<string>
+  enableRowActions?: boolean
+  hasTotalFooter?: boolean
+  tamanhoPaginacao?: number
+  quantidadeRegistros?: number
+  loading?: boolean
 }
 
 function Tabela<T extends MRT_RowData>({
-  data,
   columns,
-  isLoading,
   tituloTabela,
-  tamanhoPaginacao,
   setRowSelection,
-  handleAdicionar,
   enableRowSelection,
-  enableRowActions,
   acoes,
+  tamanhoPaginacao,
+  enableRowActions,
+  quantidadeRegistros,
   hasTotalFooter,
+  loading,
+  handleAdicionar,
+  data,
   enableExpanding,
   rowSelection = {},
-  fixedPosition
+  fixedPosition,
 }: TabelaProps<T>) {
+  const [searchParams] = useSearchParams()
+  const pagina = searchParams.get('pagina') ? Number(searchParams.get('pagina')) : 0
+  const linhas = searchParams.get('linhas')? Number(searchParams.get('linhas')) : 10
+
 
-    const [searchParams, ] = useSearchParams();
 
   const filtrosPelaTabela = useMemo(() => {
     return columns.map((header) => {
       return {
         value: String(header.accessorKey),
-        label: header.header
-      };
-    });
-  }, []);
+        label: header.header,
+      }
+    })
+  }, [])
+
+  const [columnFilters, setColunaFiltros] = useState<MRT_ColumnFiltersState>([])
 
-  const [columnFilters, setColunaFiltros] = useState<MRT_ColumnFiltersState>(
-    []
-  );
   const [columnFilterFns, setFiltrosDeColunaFn] =
     useState<MRT_ColumnFilterFnsState>(
       Object.fromEntries(
-        columns.map(({ accessorKey }) => [accessorKey, "contains"])
+        columns.map(({ accessorKey }) => [accessorKey, 'contains'])
       )
-    );
-
-  const [globalFilter, setGlobalFilter] = useState("");
-  const [sorting, setSorting] = useState<MRT_SortingState>([]);
-
-  const [pagination, setPagination] = useState<MRT_PaginationState>({
-    pageIndex: Number(searchParams.get('page')) || 1,
-    pageSize: 10
-  });
+    )
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [sorting, setSorting] = useState<MRT_SortingState>([])
   const [ordenarPor, setOrdenarPor] = useState<SelectDataProps>({
-    label: "Ordenar por: Maior",
-    value: "Maior"
-  });
-
-  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([]);
-  const [filtrosPor, setFiltrosPor] = useState(filtrosPelaTabela[0] ?? []);
-  const [toogleBuscarColuna, setToogleBuscarColuna] = useState(false);
-
+    label: 'Ordenar por: Maior',
+    value: 'Maior',
+  })
+  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([])
+  const [filtrosPor, setFiltrosPor] = useState(filtrosPelaTabela[0] ?? [])
+  const [toogleBuscarColuna, setToogleBuscarColuna] = useState(false)
 
   const calcStickPosition = useCallback(
     (index: number) => {
       if (enableExpanding) {
-        index = index - 1;
+        index = index - 1
       }
       if (enableRowSelection) {
-        index = index - 1;
+        index = index - 1
       }
-      const expanding = enableExpanding ? 50 : 0;
-      const selection = enableRowSelection ? 50 : 0;
-      const newIndex = index * 200;
-      const total = expanding + selection + newIndex;
+      const expanding = enableExpanding ? 50 : 0
+      const selection = enableRowSelection ? 50 : 0
+      const newIndex = index * 200
+      const total = expanding + selection + newIndex
 
-      return total;
+      return total
     },
     [enableRowSelection]
-  );
+  )
 
   const onFilterColunas = useCallback(
     (id: string, value: unknown) => {
-      setColunaFiltros([{ id, value }]);
+      setColunaFiltros([{ id, value }])
     },
     [columnFilters]
-  );
+  )
+
+  const fetchData = data ?? []
 
 
   const table = useMantineReactTable({
-    data: data,
     columns: columns,
+    data: fetchData,
     enableRowSelection: enableRowSelection,
     onRowSelectionChange: setRowSelection,
     getRowId: (row) => row.id,
@@ -145,8 +146,8 @@ function Tabela<T extends MRT_RowData>({
     enableRowVirtualization: false,
     enableColumnFilters: true,
     enableSorting: true,
-    positionActionsColumn: "last",
-    positionGlobalFilter: "right",
+    positionActionsColumn: 'last',
+    positionGlobalFilter: 'right',
     enableDensityToggle: false,
     enableFullScreenToggle: false,
     enablePinning: true,
@@ -158,17 +159,17 @@ function Tabela<T extends MRT_RowData>({
     onColumnFilterFnsChange: setFiltrosDeColunaFn,
     onColumnFiltersChange: setColunaFiltros,
     initialState: {
-      isLoading: isLoading,
+      isLoading: loading,
       showColumnFilters: false,
       showGlobalFilter: false,
-      pagination: {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize
-      }
+     /*  pagination: {
+        pageIndex: 0,
+        pageSize: 10,
+      }, */
     },
     state: {
-      isLoading,
-      showProgressBars: isLoading,
+      isLoading: loading,
+      showProgressBars: loading,
       columnFilterFns,
       columnFilters,
       rowSelection: enableRowSelection ? rowSelection : {},
@@ -176,80 +177,59 @@ function Tabela<T extends MRT_RowData>({
       globalFilter,
       sorting: sorting,
       pagination: {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize
-      }
+        pageIndex: 0,
+        pageSize: linhas,
+      },
     },
     onColumnOrderChange: setColumnOrder,
     localization: MRT_Localization_PT_BR,
 
     mantineTableBodyCellProps: ({ row }) => ({
-      align: "center",
-      onClick: row.getToggleSelectedHandler()
+      align: 'center',
+      onClick: row.getToggleSelectedHandler(),
     }),
     mantineTableHeadCellProps: {
-      align: "center"
+      align: 'center',
     },
     mantineTableProps: {
       highlightOnHover: true,
-      striped: "odd",
-      bga: "white",
-      fz: "xs"
+      striped: 'odd',
+      bga: 'white',
+      fz: 'xs',
     },
-
-    renderRowActions: acoes && acoes/* ({ row }) => (
-      <S.TabelaAcoes>
-        <IconeBotao
-          tipo="table"
-          onClick={() => console.log("edit", row.original)}
-        >
-          <Icone svg={editar} fill={theme.colors.blue} width={20} height={20} />
-        </IconeBotao>
-        <IconeBotao
-          tipo="table"
-          onClick={() => console.log("delete", row.original)}
-        >
-          <Icone
-            svg={deletar}
-            fill={theme.colors.blue}
-            width={20}
-            height={20}
-          />
-        </IconeBotao>
-      </S.TabelaAcoes>
-    ) */
-  });
+    renderRowActions: acoes,
+  })
 
   const exportarXlsx = useCallback(() => {
-    const ws = utils.json_to_sheet(data);
-    const wb = utils.book_new();
-    utils.book_append_sheet(wb, ws, "Data");
-    writeFileXLSX(wb, "SheetJSReactAoO.xlsx");
-  }, [data]);
+    const ws = utils.json_to_sheet(data)
+    const wb = utils.book_new()
+    utils.book_append_sheet(wb, ws, 'Data')
+    writeFileXLSX(wb, 'SheetJSReactAoO.xlsx')
+  }, [data])
 
   const getValorTotalSelecionados = useMemo(() => {
-    const columnsWithFooter = columns.find((column) => column.footer);
+    const columnsWithFooter = columns.find((column) => column.footer)
     if (columnsWithFooter?.accessorKey) {
-      let total = 0;
+      let total = 0
       data?.forEach((dado: T) => {
         if (rowSelection[dado.id]) {
-          total += dado[columnsWithFooter?.accessorKey!];
+          total += dado[columnsWithFooter?.accessorKey!]
         }
-      });
-      return total;
+      })
+      return total
     }
 
-    return null
-  }, [rowSelection]);
+    return 0
+  }, [rowSelection])
 
   return (
     <S.TabelaWrapper>
       {/* Filtros e titulo */}
       <TabelaHeader<T>
         table={table}
-        handleAdicionar={handleAdicionar}
         toogleBuscarColuna={toogleBuscarColuna}
         setToogleBuscarColuna={setToogleBuscarColuna}
+        handleAdicionar={handleAdicionar}
         setGlobalFilter={setGlobalFilter}
         filtrosPelaTabela={filtrosPelaTabela}
         filtrosPor={filtrosPor}
@@ -260,13 +240,13 @@ function Tabela<T extends MRT_RowData>({
         exportarXlsx={exportarXlsx}
       />
       {/* Tabela com dados */}
-      <S.TabelaContainer style={{ height: hasTotalFooter ? "540px" : "100%" }}>
+      <S.TabelaContainer style={{ height: hasTotalFooter ? '540px' : '100%' }}>
         <Table
           highlightOnHover
           horizontalSpacing="xs"
           striped
-          highlightOnHoverColor={"blue"}
-          fz={"xs"}
+          highlightOnHoverColor={'blue'}
+          fz={'xs'}
         >
           <HeaderTable
             calcStickPosition={calcStickPosition}
@@ -275,7 +255,7 @@ function Tabela<T extends MRT_RowData>({
             table={table}
             toogleBuscarColuna={toogleBuscarColuna}
           />
-          {isLoading ? (
+          {loading ? (
             /* Skeleton */
             <SkeletonTable table={table} />
           ) : (
@@ -292,7 +272,7 @@ function Tabela<T extends MRT_RowData>({
             data={data}
             enableExpanding={enableExpanding}
             enableRowSelection={enableRowSelection}
-            getValorTotalSelecionados={getValorTotalSelecionados!}
+            getValorTotalSelecionados={getValorTotalSelecionados}
             hasTotalFooter={hasTotalFooter}
           />
         </Table>
@@ -300,18 +280,17 @@ function Tabela<T extends MRT_RowData>({
 
       {/* Paginação */}
       <S.TabelaPaginationWrapper>
-        {data.length > 0 && (
-          <Paginacao
-            tamanhoPaginacao={tamanhoPaginacao}
-            handlePaginationChange={(prev) => setPagination(prev)}
-            setTabelaPaginacaoProps={setPagination}
-            tabelaPaginacao={pagination}
-
-          />
-        )}
+        <Paginacao
+          tamanhoPaginacao={tamanhoPaginacao}
+          quantidadeRegistros={quantidadeRegistros}
+          tabelaPaginacao={{
+            pageIndex:  pagina,
+            pageSize:linhas
+          }}
+        />
       </S.TabelaPaginationWrapper>
     </S.TabelaWrapper>
-  );
+  )
 }
 
-export default Tabela;
+export default Tabela