feat: add select sorting

Enterprise-CMCS · Nov 17, 2023 · 76ad120 · 76ad120
1 parent 9469391
commit 76ad120
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
@@ -29,7 +29,7 @@ import { format } from "date-fns";
 import { RHFFieldArray } from "./FieldArray";
 import { FieldGroup } from "./FieldGroup";
 import type { RHFSlotProps, RHFComponentMap, FormGroup } from "./types";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 export const RHFSlot = <
   TFieldValues extends FieldValues = FieldValues,
@@ -86,6 +86,17 @@ export const RHFSlot = <
             {rhf === "Select" &&
               (() => {
                 const hops = props as RHFComponentMap["Select"];
+                const opts = useMemo(() => {
+                  if (hops.sort) {
+                    const sorted = hops.options.sort((a, b) =>
+                      a.label.localeCompare(b.label)
+                    );
+                    hops.sort === "descending" && sorted.reverse();
+                    return sorted;
+                  }
+                  return hops.options;
+                }, [hops.options, hops.sort]);
+
                 return (
                   <Select
                     {...hops}
@@ -96,7 +107,7 @@ export const RHFSlot = <
                       <SelectValue {...hops} />
                     </SelectTrigger>
                     <SelectContent className="overflow-auto max-h-60">
-                      {hops.options.map((OPT) => (
+                      {opts.map((OPT) => (
                         <SelectItem key={`OPT-${OPT.value}`} value={OPT.value}>
                           {OPT.label}
                         </SelectItem>

diff --git a/src/services/ui/src/components/RHF/types.ts b/src/services/ui/src/components/RHF/types.ts
@@ -48,7 +48,7 @@ export type RHFComponentMap = {
   };
   Textarea: TextareaProps;
   Switch: SwitchProps;
-  Select: SelectProps;
+  Select: SelectProps & { sort?: "ascending" | "descending" };
   Radio: RadioProps & {
     options: RHFOption[];
   };

diff --git a/src/services/ui/src/pages/form/proto.tsx b/src/services/ui/src/pages/form/proto.tsx
@@ -40,6 +40,7 @@ export const ABP1: Document = {
                   },
                   label: "Eligibility group",
                   props: {
+                    sort: "ascending",
                     className: "min-w-[300px]",
                     options: [
                       {