feat: 🎸 [Selecet]Change autoSort prop

✅ Closes: #405
melfore · Apr 3, 2024 · b7808cb · b7808cb
1 parent c0f35a7
commit b7808cb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/Select/index.stories.tsx b/src/components/Select/index.stories.tsx
@@ -112,7 +112,7 @@ export const AutocompleteChange: Story = {
 export const AutoSort: Story = {
   args: {
     ...Primary.args,
-    autoSort: true,
+    autoSort: "asc",
   },
 };
 

diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -44,7 +44,7 @@ export const SUBPARTS_MAP = {
 
 const Select = <T extends SelectDataAllowed>({
   autoComplete = true,
-  autoSort = false,
+  autoSort = undefined,
   customOptionRendering,
   dataCy = DATA_CY_DEFAULT,
   disabled = false,
@@ -157,14 +157,28 @@ const Select = <T extends SelectDataAllowed>({
       });
     }
 
-    if (autoSort) {
+    if (typeof autoSort === "function") {
+      options = options.sort((one: SelectData<T>, another: SelectData<T>) => {
+        return autoSort(one, another);
+      });
+    }
+
+    if (autoSort === "asc") {
       options = options.sort((one: SelectData<T>, another: SelectData<T>) => {
         const oneLabel = getOptionLabel(one);
         const anotherLabel = getOptionLabel(another);
         return oneLabel.localeCompare(anotherLabel);
       });
     }
 
+    if (autoSort === "desc") {
+      options = options.sort((one: SelectData<T>, another: SelectData<T>) => {
+        const oneLabel = getOptionLabel(one);
+        const anotherLabel = getOptionLabel(another);
+        return anotherLabel.localeCompare(oneLabel);
+      });
+    }
+
     return options;
   }, [autoSort, externalOptions, getOptionLabel, groupBy]);
 

diff --git a/src/types/Select.ts b/src/types/Select.ts
@@ -22,7 +22,7 @@ interface SelectBaseProps<T extends SelectDataAllowed> extends SelectPopperProps
   /**
    * Automatically sorts options in alphabetical order (localeCompare)
    */
-  autoSort?: boolean;
+  autoSort?: "asc" | "desc" | ((opt1: T, opt2: T) => number);
   /**
    * Method to allow custom rendering of each option
    */