norma-library 0.5.129 → 0.5.131

package/src/components/UncontrolledTable/index.tsx

@@ -1,226 +1,226 @@
-import React, { useState, useMemo } from 'react';
-import * as S from './styles';
-import {
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-  ColumnFiltersState,
-  TableOptions,
-} from '@tanstack/react-table';
-
-import { Pagination, Header, TBody } from './components';
-import { UncontrolledTableProps } from './interface';
-
-const UncontrolledTable = (props: UncontrolledTableProps) => {
-  const {
-    data,
-    columns,
-    onClick,
-    onMouseOver,
-    onMouseOut,
-    showTotalResults,
-    showSettings,
-    onChangePage,
-    pagination,
-    totalPages,
-    showClearFields,
-    onClearFieldsClick,
-    onFilterClick,
-    onSortClick,
-    customTotalResults,
-    labels,
-    tableClassName,
-  } = props;
-
-  const [openFilterDialog, setOpenFilterDialog] = useState('');
-  const [sorting, setSorting] = useState<any>([]);
-  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([]);
-  const [globalFilters, setGlobalFilters] = useState<any>([]);
-  const [orderSmallest, setOrderSmallest] = useState(false);
-  const [orderLargest, setOrderLargest] = useState(false);
-
-  const reactTableConfig = useMemo(() => {
-    const config: TableOptions<unknown> = {
-      columns: columns as any,
-      data,
-      state: {
-        sorting: sorting,
-        columnFilters: filterByColumn,
-        pagination: pagination,
-      },
-      rowCount: totalPages,
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setFilterByColumn,
-      manualPagination: true,
-    };
-
-    return config;
-  }, [data, sorting, filterByColumn, columns, pagination]);
-
-  const table = useReactTable(reactTableConfig);
-
-  return (
-    <S.Container>
-      <Header
-        table={table}
-        globalFilters={globalFilters}
-        orderSmallest={orderSmallest}
-        orderLargest={orderLargest}
-        showTotalResults={showTotalResults}
-        showSettings={showSettings}
-        setGlobalFilters={setGlobalFilters}
-        setOrderLargest={setOrderLargest}
-        setOrderSmallest={setOrderSmallest}
-        showClearFiels={showClearFields}
-        customTotalResults={customTotalResults}
-        clearLabel={labels?.clearFilter}
-        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
-      />
-      <S.Content>
-        <S.Table className={tableClassName || ''}>
-          <thead>
-            {table.getHeaderGroups().map((headerGroup: any) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header: any) => (
-                  <th key={header.id}>
-                    <div>
-                      <S.ColumnContent
-                        onClick={() => {
-                          if (!header?.column?.columnDef?.disableMenu)
-                            setOpenFilterDialog(header.column.columnDef.accessorKey);
-                        }}
-                      >
-                        <S.TextColumn $alone={header?.column?.columnDef?.disableMenu}>
-                          {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
-                        </S.TextColumn>
-                        {!header?.column?.columnDef?.disableMenu && (
-                          <S.IconFilterDialog>
-                            <svg
-                              fill="#666"
-                              focusable="false"
-                              aria-hidden="true"
-                              viewBox="0 0 24 24"
-                              data-testid="ArrowDropDownIcon"
-                            >
-                              <path d="m7 10 5 5 5-5z"></path>
-                            </svg>
-                          </S.IconFilterDialog>
-                        )}
-                      </S.ColumnContent>
-                      {openFilterDialog === header.column.columnDef.accessorKey && (
-                        <>
-                          <S.backgroundDialog onClick={() => setOpenFilterDialog('')}></S.backgroundDialog>
-                          <S.FilterDialog>
-                            <S.ListFilterDialog>
-                              <S.OptionFilterDialog
-                                style={{
-                                  background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
-                                }}
-                                onClick={() => {
-                                  onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
-                                  setOpenFilterDialog('');
-                                }}
-                              >
-                                <div className="icon">
-                                  <svg
-                                    fill="#666"
-                                    stroke="currentColor"
-                                    strokeWidth="1.5"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    aria-hidden="true"
-                                    width="20"
-                                    height="20"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                                    ></path>
-                                  </svg>
-                                </div>
-                                <p>{labels?.orderAsc || 'Menor primeiro'}</p>
-                              </S.OptionFilterDialog>
-                              <S.OptionFilterDialog
-                                style={{
-                                  background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
-                                }}
-                                onClick={() => {
-                                  onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
-                                  setOpenFilterDialog('');
-                                }}
-                              >
-                                <div className="icon rotate">
-                                  <svg
-                                    fill="#666"
-                                    stroke="currentColor"
-                                    strokeWidth="1.5"
-                                    viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    aria-hidden="true"
-                                    width="20"
-                                    height="20"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                                    ></path>
-                                  </svg>
-                                </div>
-                                <p>{labels?.orderDesc || 'Maior primeiro'}</p>
-                              </S.OptionFilterDialog>
-                              {!header?.column?.columnDef?.nofilter && (
-                                <S.OptionFilterDialog
-                                  onClick={() => {
-                                    onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
-                                    setOpenFilterDialog('');
-                                  }}
-                                >
-                                  <div className="icon">
-                                    <svg
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="1.5"
-                                      viewBox="0 0 24 24"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                      aria-hidden="true"
-                                      width="16"
-                                      height="16"
-                                    >
-                                      <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
-                                      ></path>
-                                    </svg>
-                                  </div>
-                                  <p>{labels?.filter || 'Filtrar por'}</p>
-                                </S.OptionFilterDialog>
-                              )}
-                            </S.ListFilterDialog>
-                          </S.FilterDialog>
-                        </>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
-        </S.Table>
-      </S.Content>
-      <Pagination
-        pagination={pagination}
-        count={totalPages}
-        onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
-      />
-    </S.Container>
-  );
-};
-
-export default UncontrolledTable;
+import React, { useState, useMemo } from 'react';
+import * as S from './styles';
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  ColumnFiltersState,
+  TableOptions,
+} from '@tanstack/react-table';
+
+import { Pagination, Header, TBody } from './components';
+import { UncontrolledTableProps } from './interface';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    onChangePage,
+    pagination,
+    totalPages,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+    customTotalResults,
+    labels,
+    tableClassName,
+  } = props;
+
+  const [openFilterDialog, setOpenFilterDialog] = useState('');
+  const [sorting, setSorting] = useState<any>([]);
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([]);
+  const [globalFilters, setGlobalFilters] = useState<any>([]);
+  const [orderSmallest, setOrderSmallest] = useState(false);
+  const [orderLargest, setOrderLargest] = useState(false);
+
+  const reactTableConfig = useMemo(() => {
+    const config: TableOptions<unknown> = {
+      columns: columns as any,
+      data,
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+        pagination: pagination,
+      },
+      rowCount: totalPages,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+      manualPagination: true,
+    };
+
+    return config;
+  }, [data, sorting, filterByColumn, columns, pagination]);
+
+  const table = useReactTable(reactTableConfig);
+
+  return (
+    <S.Container>
+      <Header
+        table={table}
+        globalFilters={globalFilters}
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        showTotalResults={showTotalResults}
+        showSettings={showSettings}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+        showClearFiels={showClearFields}
+        customTotalResults={customTotalResults}
+        clearLabel={labels?.clearFilter}
+        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
+      />
+      <S.Content>
+        <S.Table className={tableClassName || ''}>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header.id}>
+                    <div>
+                      <S.ColumnContent
+                        onClick={() => {
+                          if (!header?.column?.columnDef?.disableMenu)
+                            setOpenFilterDialog(header.column.columnDef.accessorKey);
+                        }}
+                      >
+                        <S.TextColumn $alone={header?.column?.columnDef?.disableMenu}>
+                          {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                        </S.TextColumn>
+                        {!header?.column?.columnDef?.disableMenu && (
+                          <S.IconFilterDialog>
+                            <svg
+                              fill="#666"
+                              focusable="false"
+                              aria-hidden="true"
+                              viewBox="0 0 24 24"
+                              data-testid="ArrowDropDownIcon"
+                            >
+                              <path d="m7 10 5 5 5-5z"></path>
+                            </svg>
+                          </S.IconFilterDialog>
+                        )}
+                      </S.ColumnContent>
+                      {openFilterDialog === header.column.columnDef.accessorKey && (
+                        <>
+                          <S.backgroundDialog onClick={() => setOpenFilterDialog('')}></S.backgroundDialog>
+                          <S.FilterDialog>
+                            <S.ListFilterDialog>
+                              <S.OptionFilterDialog
+                                style={{
+                                  background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
+                                }}
+                                onClick={() => {
+                                  onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
+                                  setOpenFilterDialog('');
+                                }}
+                              >
+                                <div className="icon">
+                                  <svg
+                                    fill="#666"
+                                    stroke="currentColor"
+                                    strokeWidth="1.5"
+                                    viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    aria-hidden="true"
+                                    width="20"
+                                    height="20"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                                    ></path>
+                                  </svg>
+                                </div>
+                                <p>{labels?.orderAsc || 'Menor primeiro'}</p>
+                              </S.OptionFilterDialog>
+                              <S.OptionFilterDialog
+                                style={{
+                                  background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
+                                }}
+                                onClick={() => {
+                                  onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
+                                  setOpenFilterDialog('');
+                                }}
+                              >
+                                <div className="icon rotate">
+                                  <svg
+                                    fill="#666"
+                                    stroke="currentColor"
+                                    strokeWidth="1.5"
+                                    viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    aria-hidden="true"
+                                    width="20"
+                                    height="20"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                                    ></path>
+                                  </svg>
+                                </div>
+                                <p>{labels?.orderDesc || 'Maior primeiro'}</p>
+                              </S.OptionFilterDialog>
+                              {!header?.column?.columnDef?.nofilter && (
+                                <S.OptionFilterDialog
+                                  onClick={() => {
+                                    onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                                    setOpenFilterDialog('');
+                                  }}
+                                >
+                                  <div className="icon">
+                                    <svg
+                                      fill="none"
+                                      stroke="currentColor"
+                                      strokeWidth="1.5"
+                                      viewBox="0 0 24 24"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      aria-hidden="true"
+                                      width="16"
+                                      height="16"
+                                    >
+                                      <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                      ></path>
+                                    </svg>
+                                  </div>
+                                  <p>{labels?.filter || 'Filtrar por'}</p>
+                                </S.OptionFilterDialog>
+                              )}
+                            </S.ListFilterDialog>
+                          </S.FilterDialog>
+                        </>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+        </S.Table>
+      </S.Content>
+      <Pagination
+        pagination={pagination}
+        count={totalPages}
+        onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
+      />
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;

package/src/components/UncontrolledTable/interface.ts

@@ -1,42 +1,42 @@
-import { ColumnDef } from '@tanstack/react-table';
-
-type Labels = {
-  orderAsc: string;
-  orderDesc: string;
-  filter: string;
-  clearFilter: string;
-};
-
-interface Pagination {
-  pageIndex: number;
-  pageSize: number;
-}
-
-export interface UncontrolledTableProps {
-  data: any;
-  columns: ColumnDef<ColumnsTable>[];
-  onClick: any;
-  onMouseOver: any;
-  onMouseOut: any;
-  showTotalResults: boolean;
-  showSettings: boolean;
-  pagination: Pagination;
-  totalPages: number;
-  showClearFields?: boolean;
-  customTotalResults?: string;
-  onChangePage: (pagination: Pagination) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
-  labels?: Labels;
-  tableClassName?: string;
-}
-
-export interface ColumnsTable {
-  header: string;
-  accessorKey: string;
-  type: string;
-  enableColumnFilter: boolean;
-  filterFn: string;
-  nofilter?: boolean;
-}
+import { ColumnDef } from '@tanstack/react-table';
+
+type Labels = {
+  orderAsc: string;
+  orderDesc: string;
+  filter: string;
+  clearFilter: string;
+};
+
+interface Pagination {
+  pageIndex: number;
+  pageSize: number;
+}
+
+export interface UncontrolledTableProps {
+  data: any;
+  columns: ColumnDef<ColumnsTable>[];
+  onClick: any;
+  onMouseOver: any;
+  onMouseOut: any;
+  showTotalResults: boolean;
+  showSettings: boolean;
+  pagination: Pagination;
+  totalPages: number;
+  showClearFields?: boolean;
+  customTotalResults?: string;
+  onChangePage: (pagination: Pagination) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
+  labels?: Labels;
+  tableClassName?: string;
+}
+
+export interface ColumnsTable {
+  header: string;
+  accessorKey: string;
+  type: string;
+  enableColumnFilter: boolean;
+  filterFn: string;
+  nofilter?: boolean;
+}