norma-library 0.5.10 → 0.5.12

package/src/components/UncontrolledTable/index.tsx

@@ -1,300 +1,307 @@
-import React, { useState, useMemo } from 'react';
-import * as S from './styles';
-import {
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-  getFilteredRowModel,
-  ColumnFiltersState,
-  getPaginationRowModel,
-} from '@tanstack/react-table';
-
-import { format, isAfter, isBefore } from 'date-fns';
-import { Pagination, Header, TBody } from './components';
-import { UncontrolledTableProps } from './interface';
-
-const UncontrolledTable = (props: UncontrolledTableProps) => {
-  const {
-    data,
-    columns,
-    onClick,
-    onMouseOver,
-    onMouseOut,
-    showTotalResults,
-    showSettings,
-    rowCount,
-    onChangePage,
-    pagination,
-    showClearFields,
-    onClearFieldsClick,
-    onFilterClick,
-    onSortClick,
-  } = 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 customFilterText = (row: any, value: string) => {
-    const itensFinded = globalFilters.map((item: any) => {
-      if (item.type === 'Horario Igual a') {
-        return item.value === row.original[item.acessor];
-      }
-      if (item.type === 'Horario maior que') {
-        const date = new Date();
-        const rowDate = new Date();
-        const hourSplited = item?.value?.split(':');
-        const rowDateSplited = row.original[item.acessor].split(':');
-
-        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
-        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
-
-        return isAfter(rowDate, date);
-      }
-      if (item.type === 'Horario menor que') {
-        const date = new Date();
-        const rowDate = new Date();
-        const hourSplited = item?.value?.split(':');
-        const rowDateSplited = row.original[item.acessor].split(':');
-
-        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
-        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
-
-        return isBefore(rowDate, date);
-      }
-      if (item.type === 'Data Igual a') {
-        const dateSplited = item?.value?.split('-');
-        return (
-          row.original[item.acessor] ===
-          format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0, 0), 'dd/MM/yyyy')
-        );
-      }
-      if (item.type === 'Data maior que') {
-        const dateSplited = item?.value?.split('-');
-        const rowDateSplited = row.original[item.acessor].split('/');
-        return isAfter(
-          new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
-          new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
-        );
-      }
-      if (item.type === 'Data menor que') {
-        const dateSplited = item?.value?.split('-');
-        const rowDateSplited = row.original[item.acessor].split('/');
-        return isBefore(
-          new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
-          new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
-        );
-      }
-      if (item.type === 'Igual a' && typeof value === 'number') {
-        return row.original[item.acessor] === item.value;
-      }
-      if (item.type === 'Igual a') {
-        return row.original[item.acessor] === item.value;
-      }
-      if (item.type === 'Contém') {
-        return !!row.original[item.acessor].includes(item.value);
-      }
-      if (item.type === 'Não é igual a') {
-        return row.original[item.acessor] !== item.value;
-      }
-      if (item.type === 'Maior que') {
-        return row.original[item.acessor] > item.value;
-      }
-      if (item.type === 'Menor que') {
-        return row.original[item.acessor] < item.value;
-      }
-    });
-
-    const result = itensFinded.every((item: any) => item);
-    return result;
-  };
-
-  const reactTableConfig = useMemo(() => {
-    const config: any = {
-      data,
-      columns,
-      filterFns: {
-        customFilterText: customFilterText,
-      },
-      state: {
-        sorting: sorting,
-        columnFilters: filterByColumn,
-      },
-      rowCount: rowCount || 10,
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setFilterByColumn,
-    };
-    config.rowCount = rowCount || 10;
-
-    if (!pagination) {
-      config.getPaginationRowModel = getPaginationRowModel();
-    } else {
-      config.state.pagination = pagination;
-      config.manualPagination = true;
-      config.pageCount = pagination.totalPages;
-    }
-    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}
-        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
-      />
-      <S.Content>
-        <S.Table>
-          <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>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>Maior primeiro</p>
-                              </S.OptionFilterDialog>
-                              {!header?.column?.columnDef?.nofilter && (
-                                <S.OptionFilterDialog
-                                  onClick={() => onFilterClick && onFilterClick(header.column.columnDef.accessorKey)}
-                                >
-                                  <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>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 table={table} onChangePage={onChangePage} />
-    </S.Container>
-  );
-};
-
-export default UncontrolledTable;
+import React, { useState, useMemo } from 'react';
+import * as S from './styles';
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  ColumnFiltersState,
+  getPaginationRowModel,
+} from '@tanstack/react-table';
+
+import { format, isAfter, isBefore } from 'date-fns';
+import { Pagination, Header, TBody } from './components';
+import { UncontrolledTableProps } from './interface';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    rowCount,
+    onChangePage,
+    pagination,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+    customTotalResults,
+    labels,
+  } = 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 customFilterText = (row: any, value: string) => {
+    const itensFinded = globalFilters.map((item: any) => {
+      if (item.type === 'Horario Igual a') {
+        return item.value === row.original[item.acessor];
+      }
+      if (item.type === 'Horario maior que') {
+        const date = new Date();
+        const rowDate = new Date();
+        const hourSplited = item?.value?.split(':');
+        const rowDateSplited = row.original[item.acessor].split(':');
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
+
+        return isAfter(rowDate, date);
+      }
+      if (item.type === 'Horario menor que') {
+        const date = new Date();
+        const rowDate = new Date();
+        const hourSplited = item?.value?.split(':');
+        const rowDateSplited = row.original[item.acessor].split(':');
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
+
+        return isBefore(rowDate, date);
+      }
+      if (item.type === 'Data Igual a') {
+        const dateSplited = item?.value?.split('-');
+        return (
+          row.original[item.acessor] ===
+          format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0, 0), 'dd/MM/yyyy')
+        );
+      }
+      if (item.type === 'Data maior que') {
+        const dateSplited = item?.value?.split('-');
+        const rowDateSplited = row.original[item.acessor].split('/');
+        return isAfter(
+          new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
+          new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
+        );
+      }
+      if (item.type === 'Data menor que') {
+        const dateSplited = item?.value?.split('-');
+        const rowDateSplited = row.original[item.acessor].split('/');
+        return isBefore(
+          new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
+          new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
+        );
+      }
+      if (item.type === 'Igual a' && typeof value === 'number') {
+        return row.original[item.acessor] === item.value;
+      }
+      if (item.type === 'Igual a') {
+        return row.original[item.acessor] === item.value;
+      }
+      if (item.type === 'Contém') {
+        return !!row.original[item.acessor].includes(item.value);
+      }
+      if (item.type === 'Não é igual a') {
+        return row.original[item.acessor] !== item.value;
+      }
+      if (item.type === 'Maior que') {
+        return row.original[item.acessor] > item.value;
+      }
+      if (item.type === 'Menor que') {
+        return row.original[item.acessor] < item.value;
+      }
+    });
+
+    const result = itensFinded.every((item: any) => item);
+    return result;
+  };
+
+  const reactTableConfig = useMemo(() => {
+    const config: any = {
+      data,
+      columns,
+      filterFns: {
+        customFilterText: customFilterText,
+      },
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+      },
+      rowCount: rowCount || 10,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+    };
+    config.rowCount = rowCount || 10;
+
+    if (!pagination) {
+      config.getPaginationRowModel = getPaginationRowModel();
+    } else {
+      config.state.pagination = pagination;
+      config.manualPagination = true;
+      config.pageCount = pagination.totalPages;
+    }
+    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>
+          <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 table={table} onChangePage={onChangePage} />
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;