progress

medusajs · Nov 11, 2024 · d1c4c44 · d1c4c44
1 parent eaf8284
commit d1c4c44
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import { ColumnFilter } from "@tanstack/react-table"
 import * as React from "react"
 
 import { Button } from "@/components/button"
@@ -19,17 +18,6 @@ const DataTableFilterBar = ({
 
   const filterState = instance.getFiltering()
 
-  const getFilterLabel = React.useCallback(
-    (filter: ColumnFilter) => {
-      const filterOptions = instance.getFilters()
-      const filterOption = filterOptions.find(
-        (option) => option.id === filter.id
-      )
-      return filterOption?.label ?? filter.id
-    },
-    [instance]
-  )
-
   const clearFilters = React.useCallback(() => {
     instance.clearFilters()
   }, [instance])
@@ -47,11 +35,7 @@ const DataTableFilterBar = ({
   return (
     <div className="bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap">
       {Object.values(filterState).map((filter) => (
-        <DataTableFilter
-          key={filter.id}
-          filter={filter}
-          label={getFilterLabel(filter)}
-        />
+        <DataTableFilter key={filter.id} filter={filter} />
       ))}
       {filterCount > 0 ? (
         <Button

diff --git a/packages/design-system/ui/src/blocks/data-table/components/data-table-filter.tsx b/packages/design-system/ui/src/blocks/data-table/components/data-table-filter.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { XMark } from "@medusajs/icons"
+import { EllipseMiniSolid, XMark } from "@medusajs/icons"
 import { ColumnFilter } from "@tanstack/react-table"
 import * as React from "react"
 
@@ -154,7 +154,25 @@ type DataTableFilterDateContentProps = {
   options: FilterOption<DateComparisonOperator>[]
 } & Pick<DateFilterProps, "format" | "rangeOptionLabel" | "disableRangeOption">
 
-const CUSTOM_OPTION_VALUE = "custom"
+function getIsCustomOptionSelected(
+  options: FilterOption<DateComparisonOperator>[],
+  value: DateComparisonOperator | undefined
+) {
+  if (!value) {
+    return false
+  }
+
+  const stringifiedValue = JSON.stringify(value)
+  const stringifiedOptions = options.map((option) =>
+    JSON.stringify(option.value)
+  )
+
+  if (stringifiedOptions.includes(stringifiedValue)) {
+    return false
+  }
+
+  return value.$gte || value.$lte
+}
 
 const DataTableFilterDateContent = ({
   filter,
@@ -163,10 +181,12 @@ const DataTableFilterDateContent = ({
   rangeOptionLabel = "Custom",
   disableRangeOption = false,
 }: DataTableFilterDateContentProps) => {
-  const [showCustom, setShowCustom] = React.useState(true)
+  const currentValue = filter.value as DateComparisonOperator | undefined
   const { instance } = useDataTableContext()
 
-  const currentValue = filter.value as DateComparisonOperator | undefined
+  const [showCustom, setShowCustom] = React.useState(
+    getIsCustomOptionSelected(options, currentValue)
+  )
 
   const selectedValue = React.useMemo(() => {
     if (!currentValue) {
@@ -184,6 +204,16 @@ const DataTableFilterDateContent = ({
     [instance, filter]
   )
 
+  const handleSelectCustom = React.useCallback(
+    (event: Event) => {
+      event.preventDefault()
+
+      setShowCustom(true)
+      instance.updateFilter({ ...filter, value: undefined })
+    },
+    [instance, filter]
+  )
+
   const onCustomValueChange = React.useCallback(
     (input: "$gte" | "$lte", value: Date | null) => {
       const newCurrentValue = { ...currentValue }
@@ -225,17 +255,15 @@ const DataTableFilterDateContent = ({
         })}
       </DropdownMenu.RadioGroup>
       {!disableRangeOption && (
-        <DropdownMenu.RadioGroup
-          value={`${showCustom}`}
-          onValueChange={(value) => setShowCustom(value === "true")}
+        <DropdownMenu.Item
+          onSelect={handleSelectCustom}
+          className="flex items-center gap-2"
         >
-          <DropdownMenu.RadioItem
-            value={"true"}
-            onSelect={(e) => e.preventDefault()}
-          >
-            {rangeOptionLabel}
-          </DropdownMenu.RadioItem>
-        </DropdownMenu.RadioGroup>
+          <div className="flex size-[15px] items-center justify-center">
+            {showCustom && <EllipseMiniSolid />}
+          </div>
+          <span>{rangeOptionLabel}</span>
+        </DropdownMenu.Item>
       )}
       {!disableRangeOption && showCustom && (
         <React.Fragment>