Refactor - move onSelect logic into a function

seek-oss · Apr 16, 2024 · bf5b4c1 · bf5b4c1
1 parent 0c4bf9f
commit bf5b4c1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.docs.tsx b/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.docs.tsx
@@ -52,7 +52,7 @@ const docs: ComponentDocs = {
           />
         </Stack>
         <Stack space="small">
-          <Heading level="2">Tag Selector with pre-selections</Heading>
+          <Heading level="2">Tag Selector with Custom Tags</Heading>
           <TagSelector
             options={preOptions}
             selectedTags={preSelectedTags}

diff --git a/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx b/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx
@@ -39,20 +39,23 @@ interface TagOptionProps {
   activeOption: string | undefined;
   onSelect: (tag: Tag) => void;
   checked?: boolean;
+  value: string;
 }
 
 const TagOption = ({
   tag,
   activeOption,
   onSelect,
   checked,
+  value,
 }: TagOptionProps) => {
   const checkboxId = `checkbox-${tag.id}`;
 
   const handleClick = (event: React.MouseEvent, clickedTag: Tag) => {
     event.preventDefault();
     if (onSelect) {
-      onSelect(clickedTag);
+      handleOnSelect(clickedTag, value, onSelect);
+      // onSelect(clickedTag);
     }
   };
 
@@ -100,6 +103,17 @@ function ensureCustomTagsNotUsed(options: Tag[], selectedTags: Tag[]) {
   }
 }
 
+function handleOnSelect(tag: Tag, value: string, onSelect: (tag: Tag) => void) {
+  if (tag.description.startsWith('Add "')) {
+    onSelect({
+      description: value,
+      id: `${tag.id}-${value}`,
+    });
+  } else {
+    onSelect(tag);
+  }
+}
+
 export interface Tag {
   description: string;
   id: string;
@@ -158,7 +172,6 @@ export const TagSelector = ({
   function getIndexOfActiveOption() {
     if (!activeOption) return -1;
 
-    // if activeOption is not in dropdownOptions, return -1
     if (!dropdownOptions.find((option) => option.id === activeOption)) {
       return -1;
     }
@@ -167,45 +180,46 @@ export const TagSelector = ({
   }
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    const prevIndex = getIndexOfActiveOption();
+    const currentIndex = getIndexOfActiveOption();
 
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
 
         console.log('activeOption', activeOption); // eslint-disable-line no-console
 
-        if (prevIndex + 1 === dropdownOptions.length) {
+        if (currentIndex + 1 === dropdownOptions.length) {
           setActiveOption(dropdownOptions[0].id);
-        } else if (prevIndex === -1) {
+        } else if (currentIndex === -1) {
           setActiveOption(dropdownOptions[0].id);
         } else {
-          setActiveOption(dropdownOptions[prevIndex + 1].id);
+          setActiveOption(dropdownOptions[currentIndex + 1].id);
         }
 
         break;
       case 'ArrowUp':
         event.preventDefault();
 
-        if (prevIndex === 0) {
+        if (currentIndex === 0) {
           setActiveOption(dropdownOptions[dropdownOptions.length - 1].id);
+        } else if (currentIndex === -1) {
+          setActiveOption(dropdownOptions[0].id);
         } else {
-          setActiveOption(dropdownOptions[prevIndex - 1].id);
+          setActiveOption(dropdownOptions[currentIndex - 1].id);
         }
 
         break;
 
       case 'Enter':
         event.preventDefault();
+        if (currentIndex === -1) return;
+
         if (onSelect) {
-          if (dropdownOptions[prevIndex].description.startsWith('Add "')) {
-            onSelect({
-              description: value,
-              id: `${id}-${value}`,
-            });
-          } else {
-            onSelect(dropdownOptions[prevIndex]);
-          }
+          handleOnSelect(
+            dropdownOptions[getIndexOfActiveOption()],
+            value,
+            onSelect,
+          );
         }
         break;
 
@@ -259,6 +273,7 @@ export const TagSelector = ({
                     (selectedTag) => selectedTag.id === tag.id,
                   ) || false
                 }
+                value={value}
               />
             ))}
           </ul>