norma-library 0.6.2 → 0.6.4

package/src/components/UncontrolledTable/index.tsx

@@ -1,221 +1,222 @@
-import React, { useState, useMemo, useRef } 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';
-import useClickOutside from '../../hooks/useClickOutside';
-
-const UncontrolledTable = (props: UncontrolledTableProps) => {
-  const {
-    data,
-    columns,
-    onClick,
-    onMouseOver,
-    onMouseOut,
-    showTotalResults,
-    showSettings,
-    onChangePage,
-    pagination,
-    totalPages,
-    showClearFields,
-    onClearFieldsClick,
-    onFilterClick,
-    onSortClick,
-    customTotalResults,
-    labels,
-    tableClassName,
-    stickyHeader,
-  } = 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);
-  const filterRef = useRef<HTMLDivElement>(null);
-
-  useClickOutside(filterRef, () => setOpenFilterDialog(''));
-
-  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.Table className={tableClassName || ''}>
-        <S.Thead $sticky={stickyHeader}>
-          {table.getHeaderGroups().map((headerGroup: any) => (
-            <S.TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header: any) => (
-                <S.Th key={header.id}>
-                  <S.ColumnContent
-                    onClick={() => {
-                      if (!header?.column?.columnDef?.disableMenu)
-                        setOpenFilterDialog(header.column.columnDef.accessorKey);
-                    }}
-                  >
-                    <S.TextColumn>
-                      {!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">
-                          <path d="m7 10 5 5 5-5z" />
-                        </svg>
-                      </S.IconFilterDialog>
-                    )}
-                  </S.ColumnContent>
-                  {openFilterDialog === header.column.columnDef.accessorKey && (
-                    <S.FilterDialog ref={filterRef}>
-                      <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"
-                              />
-                            </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>
-                  )}
-                </S.Th>
-              ))}
-            </S.TableRow>
-          ))}
-        </S.Thead>
-        <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
-      </S.Table>
-      {pagination && (
-        <Pagination
-          pagination={pagination}
-          count={totalPages}
-          onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
-        />
-      )}
-    </S.Container>
-  );
-};
-
-export default UncontrolledTable;
+import React, { useState, useMemo, useRef } 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';
+import useClickOutside from '../../hooks/useClickOutside';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    onChangePage,
+    pagination,
+    totalPages,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+    customTotalResults,
+    labels,
+    tableClassName,
+    stickyHeader,
+  } = 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);
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(filterRef, () => setOpenFilterDialog(''));
+
+  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()}
+        customIcons={props.customIcons}
+      />
+      <S.Table className={tableClassName || ''}>
+        <S.Thead $sticky={stickyHeader}>
+          {table.getHeaderGroups().map((headerGroup: any) => (
+            <S.TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header: any) => (
+                <S.Th key={header.id}>
+                  <S.ColumnContent
+                    onClick={() => {
+                      if (!header?.column?.columnDef?.disableMenu)
+                        setOpenFilterDialog(header.column.columnDef.accessorKey);
+                    }}
+                  >
+                    <S.TextColumn>
+                      {!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">
+                          <path d="m7 10 5 5 5-5z" />
+                        </svg>
+                      </S.IconFilterDialog>
+                    )}
+                  </S.ColumnContent>
+                  {openFilterDialog === header.column.columnDef.accessorKey && (
+                    <S.FilterDialog ref={filterRef}>
+                      <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"
+                              />
+                            </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>
+                  )}
+                </S.Th>
+              ))}
+            </S.TableRow>
+          ))}
+        </S.Thead>
+        <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+      </S.Table>
+      {pagination && (
+        <Pagination
+          pagination={pagination}
+          count={totalPages}
+          onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
+        />
+      )}
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;

package/src/components/UncontrolledTable/interface.ts

@@ -1,43 +1,44 @@
-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;
-  stickyHeader?: boolean;
-}
-
-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;
+  stickyHeader?: boolean;
+  customIcons?: React.ReactNode[]; 
+}
+
+export interface ColumnsTable {
+  header: string;
+  accessorKey: string;
+  type: string;
+  enableColumnFilter: boolean;
+  filterFn: string;
+  nofilter?: boolean;
+}