chore: wip

steelbrain · Jun 15, 2021 · dcd0389 · dcd0389
1 parent f51f8f7
commit dcd0389
Showing 1 changed file with 8 additions and 20 deletions.
diff --git a/lib/elements/list.tsx b/lib/elements/list.tsx
@@ -1,4 +1,4 @@
-import { createComputed, createSignal, For } from "solid-js"
+import { createComputed, createSignal, createSelector, For } from "solid-js"
 import { scrollIntoViewIfNeeded } from "atom-ide-base/src-commons-ui/scrollIntoView"
 
 import { $class } from "../helpers"
@@ -11,29 +11,17 @@ export interface Props {
 }
 
 export default function ListElement(props: Props) {
-  // current active HTMLELement
-  const [getActiveElment, setActiveElement] = createSignal<HTMLElement | undefined>(undefined)
   // current active index
   const [getActiveIndex, setActiveIndex] = createSignal(-1)
-
-  /** remove selected class from the previous active element */
-  function unselectPrevious() {
-    const previousActive = getActiveElment()
-    if (previousActive !== undefined) {
-      previousActive.classList.remove("selected")
-    }
-  }
+  // current active id
+  const isSelected = createSelector(getActiveIndex);
 
   function handleSelection(active: HTMLElement, suggestion: ListItem, index: number) {
-     unselectPrevious()
-    // add selected class for the current selected element
-    active.classList.add("selected")
-    // scroll into it
+    // scroll into  for the current selected element
     scrollIntoViewIfNeeded(active, false)
     // call its associated callback
     props.selectCallback(suggestion)
     // store it in the signal
-    setActiveElement(active)
     setActiveIndex(index)
   }
 
@@ -59,8 +47,7 @@ export default function ListElement(props: Props) {
       index = suggestionsCount + index
     }
 
-    // get the list of elements
-    // handleSelection(, props.suggestions[index], index)
+    setActiveIndex(index)
   }
 
   createComputed(() => {
@@ -77,10 +64,11 @@ export default function ListElement(props: Props) {
       <ol className="list-group">
         <For each={props.suggestions}>
           {(suggestion, getIndex) => {
+            const index = getIndex()
             let liRef: HTMLLIElement | undefined
             return (
-              <li ref={liRef}>
-                <span className={suggestion[$class]} onClick={() => {handleSelection(liRef!, suggestion, getIndex())}}>
+              <li ref={liRef} class={isSelected(index) ? "selected": ""}>
+                <span className={suggestion[$class]} onClick={() => {handleSelection(liRef!, suggestion, index)}}>
                   {suggestion.title}
                 </span>
               </li>