Merge pull request #63 from bleu-fi/joao/click-765-refatorar-bibliote…

…ca-de-teses-e-adicionar-menu-com Refactor datatable toolbar
bleu · Apr 18, 2024 · 8cb26b6 · 8cb26b6
2 parents 6d178b4 + 1bd5c5a
commit 8cb26b6
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 73 deletions.
diff --git a/src/components/DataTable/DataTableFilters.tsx b/src/components/DataTable/DataTableFilters.tsx
@@ -0,0 +1,68 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import React, { useEffect, useRef } from "react";
+
+import { Trans } from "react-i18next";
+import { Button } from "#/components/ui";
+
+import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
+import { useTableContext } from "./TableContext";
+
+export function DataTableFilters() {
+  // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
+  const { table, filters } = useTableContext();
+
+  if (!table || !filters) {
+    return null;
+  }
+
+  const isFiltered =
+    table.getState().columnFilters.filter((filter) => filter.value.length > 0)
+      .length > 0;
+
+  const initialFilterSet = useRef(false);
+
+  useEffect(() => {
+    if (filters && !initialFilterSet.current) {
+      filters.map((filter) => {
+        const column = table.getColumn(filter.value);
+        if (column) {
+          column.setFilterValue(
+            filter.options
+              .filter((option) => option.defaultSelected)
+              .map((option) => option.value)
+          );
+        }
+        return null;
+      });
+      initialFilterSet.current = true;
+    }
+  }, [filters, table]);
+
+  return (
+    <div className="flex flex-1 items-start space-x-2">
+      <div className="flex flex-wrap gap-1">
+        {filters.map(
+          (filter) =>
+            table.getColumn(filter.value) && (
+              <DataTableFacetedFilter
+                key={filter.title}
+                column={table.getColumn(filter.value)}
+                title={filter.title}
+                options={filter.options}
+              />
+            )
+        )}
+      </div>
+      {isFiltered && (
+        <Button
+          variant="ghost"
+          onClick={() => table.resetColumnFilters()}
+          className="h-8 px-2 lg:px-3"
+        >
+          <Trans>Reset</Trans>
+          <Cross2Icon className="ml-2 h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/DataTable/DataTableSearch.tsx b/src/components/DataTable/DataTableSearch.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+import { Input } from "#/components/ui";
+
+import { useTableContext } from "./TableContext";
+
+export function DataTableSearch({ searchKey = "name" }) {
+  // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
+  const { table, searchKey: TableSeachKey } = useTableContext();
+
+  const search = TableSeachKey || searchKey;
+
+  const { t } = useTranslation();
+
+  return (
+    <Input
+      placeholder={t("Search")}
+      value={table.getColumn(search)?.getFilterValue() ?? ""}
+      onChange={(event) =>
+        table.getColumn(search)?.setFilterValue(event.target.value)
+      }
+      className="h-8 w-[150px] lg:w-[250px] dark:border-2"
+    />
+  );
+}
diff --git a/src/components/DataTable/DataTableToolbar.tsx b/src/components/DataTable/DataTableToolbar.tsx
@@ -1,86 +1,19 @@
-import { Cross2Icon } from "@radix-ui/react-icons";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 
-import { Trans, useTranslation } from "react-i18next";
-import { Button, Input } from "#/components/ui";
-
-import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
 import { DataTableViewOptions } from "./DataTableViewOptions";
-import { useTableContext } from "./TableContext";
+import { DataTableSearch } from "./DataTableSearch";
+import { DataTableFilters } from "./DataTableFilters";
 
 export function DataTableToolbar({
   action,
   showViewOptions = true,
   searchKey = "name",
 }) {
-  // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
-  const { table, filters, searchKey: TableSeachKey } = useTableContext();
-
-  const search = TableSeachKey || searchKey;
-
-  if (!table || !filters) {
-    return null;
-  }
-
-  const isFiltered =
-    table.getState().columnFilters.filter((filter) => filter.value.length > 0)
-      .length > 0;
-
-  const initialFilterSet = useRef(false);
-
-  useEffect(() => {
-    if (filters && !initialFilterSet.current) {
-      filters.map((filter) => {
-        const column = table.getColumn(filter.value);
-        if (column) {
-          column.setFilterValue(
-            filter.options
-              .filter((option) => option.defaultSelected)
-              .map((option) => option.value)
-          );
-        }
-        return null;
-      });
-      initialFilterSet.current = true;
-    }
-  }, [filters, table]);
-
-  const { t } = useTranslation();
-
   return (
     <div className="flex items-start justify-between">
       <div className="flex flex-1 items-start space-x-2">
-        <Input
-          placeholder={t("Search")}
-          value={table.getColumn(search)?.getFilterValue() ?? ""}
-          onChange={(event) =>
-            table.getColumn(search)?.setFilterValue(event.target.value)
-          }
-          className="h-8 w-[150px] lg:w-[250px] dark:border-2"
-        />
-        <div className="flex flex-wrap gap-1">
-          {filters.map(
-            (filter) =>
-              table.getColumn(filter.value) && (
-                <DataTableFacetedFilter
-                  key={filter.title}
-                  column={table.getColumn(filter.value)}
-                  title={filter.title}
-                  options={filter.options}
-                />
-              )
-          )}
-        </div>
-        {isFiltered && (
-          <Button
-            variant="ghost"
-            onClick={() => table.resetColumnFilters()}
-            className="h-8 px-2 lg:px-3"
-          >
-            <Trans>Reset</Trans>
-            <Cross2Icon className="ml-2 h-4 w-4" />
-          </Button>
-        )}
+        <DataTableSearch searchKey={searchKey} />
+        <DataTableFilters />
       </div>
       <div className="flex items-center space-x-2">
         {action}

diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts
@@ -10,3 +10,5 @@ export * from "./TableContext";
 export * from "./useSWRDataTable";
 export * from "./useTableState";
 export * from "./DataTable";
+export * from "./DataTableSearch";
+export * from "./DataTableFilters";
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
@@ -7,7 +7,7 @@
   "Clear filters": "Limpar filtros",
   "Items per page": "Itens por página",
   "Page {{currentPage}} of": "Página {{currentPage}} de",
-  "Search": "Buscar...",
+  "Search": "Pesquise por palavra chave...",
   "Reset": "Remover",
   "View": "Visualizar",
   "Toggle columns": "Alternar colunas",