Add a value property to the ToggleFilter (#26)

tableflowhq · Sep 26, 2023 · cc8440a · cc8440a
1 parent b8a8652
commit cc8440a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/ToggleFilter/ToggleFilter.stories.tsx b/src/ToggleFilter/ToggleFilter.stories.tsx
@@ -17,9 +17,9 @@ export default {
 export const Default = () => (
   <ToggleFilter 
     options={[
-      { label: 'Option 1', selected: true },
-      { label: 'Option 2', selected: false },
-      { label: 'Option 3', selected: false, color: "#F04438" }
+      { label: 'Option 1', filterValue: 'One', selected: true },
+      { label: 'Option 2', filterValue: 'Two', selected: false },
+      { label: 'Option 3', filterValue: 'Three', selected: false, color: "#F04438" }
     ]}
     onChange={(option) => console.log(option)}
   />
@@ -28,8 +28,8 @@ export const Default = () => (
 export const WithCustomOptions = () => (
   <ToggleFilter 
     options={[
-      { label: 'Custom 1', selected: false },
-      { label: 'Custom 2', selected: true }
+      { label: 'Custom 1', filterValue: 'One', selected: false },
+      { label: 'Custom 2', filterValue: 'Two', selected: true }
     ]}
     onChange={(option) => console.log(option)}
   />

diff --git a/src/ToggleFilter/index.tsx b/src/ToggleFilter/index.tsx
@@ -15,7 +15,7 @@ function ToggleFilter({ options, onChange,  className }: ToggleFilterProps) {
       const handleClick = (option: Option) => {
         setSelectedOption(option.label);
         if (onChange) {
-          onChange(option.label);
+          onChange(option.filterValue);
         }
       };
 

diff --git a/src/ToggleFilter/types/index.ts b/src/ToggleFilter/types/index.ts
@@ -1,5 +1,6 @@
 export interface Option {
     label: string;
+    filterValue: string,
     selected: boolean;
     color?: string;
   }