Filter dropdown styled

stellar · Jan 29, 2025 · 8fe9aef · 8fe9aef
1 parent 52fa8e7
commit 8fe9aef
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 30 deletions.
diff --git a/src/components/DataTable/index.tsx b/src/components/DataTable/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import {
   Button,
   Card,
@@ -126,8 +126,18 @@ export const DataTable = <T extends AnyObject>({
     setIsUpdating(true);
   };
 
+  const closeFilterDropdown = () => {
+    setVisibleFilters(undefined);
+    // Clear selections that weren't applied
+    setSelectedFilters({ ...appliedFilters });
+  };
+
   const toggleFilterDropdown = (headerId: FilterCols) => {
-    setVisibleFilters(visibleFilters === headerId ? undefined : headerId);
+    if (visibleFilters === headerId) {
+      closeFilterDropdown();
+    } else {
+      setVisibleFilters(headerId);
+    }
   };
 
   const paginateData = (data: DataTableCell[][]): DataTableCell[][] => {
@@ -176,21 +186,19 @@ export const DataTable = <T extends AnyObject>({
         <Dropdown
           addlClassName="DataTable__filterDropdown"
           isDropdownVisible={visibleFilters === headerId}
-          onClose={() => {
-            setVisibleFilters(undefined);
-          }}
+          onClose={closeFilterDropdown}
           triggerDataAttribute="filter"
         >
           <div className="DataTable__filterDropdown__container">
             <div className="DataTable__filterDropdown__title">Filter by</div>
-            <div>
-              {filters.map((f) => {
-                const id = `filter-${headerId}-${f}`;
+            <>
+              {filters.map((f, idx) => {
+                const id = `filter-${headerId}-${f}-${idx}`;
                 let currentFilters = selectedFilters[headerId] || [];
 
                 return (
                   <div key={id} className="DataTable__filterDropdown__filter">
-                    <Label size="sm" htmlFor={id}>
+                    <Label size="lg" htmlFor={id}>
                       {f}
                     </Label>
                     <Checkbox
@@ -215,32 +223,39 @@ export const DataTable = <T extends AnyObject>({
                   </div>
                 );
               })}
-            </div>
-            <div>
+            </>
+            <Box
+              gap="sm"
+              direction="row"
+              align="center"
+              justify="space-between"
+              addlClassName="DataTable__filterDropdown__buttons"
+            >
               <Button
                 size="sm"
-                variant="secondary"
+                variant="error"
                 onClick={() => {
-                  setAppliedFilters(selectedFilters);
+                  setSelectedFilters({ ...selectedFilters, [headerId]: [] });
+                  setAppliedFilters({ ...appliedFilters, [headerId]: [] });
                   setVisibleFilters(undefined);
                 }}
-                disabled={isFilterApplyDisabled(headerId)}
+                disabled={appliedFilters[headerId].length === 0}
               >
-                Apply
+                Clear filter
               </Button>
+
               <Button
                 size="sm"
-                variant="error"
+                variant="secondary"
                 onClick={() => {
-                  setSelectedFilters({ ...selectedFilters, [headerId]: [] });
-                  setAppliedFilters({ ...appliedFilters, [headerId]: [] });
+                  setAppliedFilters(selectedFilters);
                   setVisibleFilters(undefined);
                 }}
-                disabled={appliedFilters[headerId].length === 0}
+                disabled={isFilterApplyDisabled(headerId)}
               >
-                Clear filter
+                Apply
               </Button>
-            </div>
+            </Box>
           </div>
         </Dropdown>
       );
@@ -250,14 +265,14 @@ export const DataTable = <T extends AnyObject>({
   };
 
   const renderFilterBadges = () => {
-    return Object.entries(appliedFilters).map((af) => {
+    return Object.entries(appliedFilters).map((af, afIdx) => {
       const [id, filters] = af;
 
       return (
-        <>
-          {filters.map((f) => (
+        <Fragment key={`badge-${id}-${afIdx}`}>
+          {filters.map((f, fIdx) => (
             <div
-              key={`badge-${id}-${f}`}
+              key={`badge-${id}-${afIdx}-${f}-${fIdx}`}
               className="DataTable__badge Badge Badge--secondary Badge--sm"
             >
               {f}
@@ -278,7 +293,7 @@ export const DataTable = <T extends AnyObject>({
               </div>
             </div>
           ))}
-        </>
+        </Fragment>
       );
     });
   };
@@ -311,8 +326,8 @@ export const DataTable = <T extends AnyObject>({
             >
               <thead>
                 <tr data-style="row" role="row">
-                  {tableHeaders.map((th) => (
-                    <th key={`col-${th.id}`} role="cell">
+                  {tableHeaders.map((th, idx) => (
+                    <th key={`col-${idx}-${th.id}`} role="cell">
                       <div {...getCustomProps(th)}>
                         {th.value}
 

diff --git a/src/components/DataTable/styles.scss b/src/components/DataTable/styles.scss
@@ -140,14 +140,56 @@
     top: 85%;
     left: pxToRem(4px);
 
-    // TODO: style
     &__container {
+      display: flex;
+      flex-direction: column;
+      gap: pxToRem(4px);
     }
 
     &__title {
+      font-size: pxToRem(14px);
+      line-height: pxToRem(20px);
+      font-weight: var(--sds-fw-medium);
+      color: var(--sds-clr-gray-11);
+      padding: pxToRem(6px) pxToRem(8px);
     }
 
     &__filter {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding: pxToRem(6px) pxToRem(8px);
+      background-color: transparent;
+      transition: background-color var(--sds-anim-transition-default);
+      border-radius: pxToRem(4px);
+      cursor: pointer;
+
+      .Label__wrapper {
+        width: 100%;
+      }
+
+      .Label {
+        color: var(--sds-clr-gray-12);
+        width: 100%;
+        cursor: pointer;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--sds-clr-gray-04);
+        }
+      }
+
+      &:has(input[type="checkbox"]:checked) {
+        background-color: var(--sds-clr-gray-04);
+      }
+    }
+
+    &__buttons {
+      .Button {
+        flex: 1;
+      }
     }
   }
 

diff --git a/src/query/external/useSEContracStorage.ts b/src/query/external/useSEContracStorage.ts
@@ -65,7 +65,6 @@ export const useSEContractStorage = ({
           await fetchData(lastRecord?.paging_token);
         }
 
-        // TODO: check max entries for smooth UX
         return allRecords;
       } catch (e: any) {
         throw `Something went wrong. ${e}`;