[WIP] [Node Team] Autocomplete Input component

src/Gargantext/Components/Forest/Tree/Node/Action/Share.purs

@@ -11,13 +11,13 @@ import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
 import Gargantext.Components.Forest.Tree.Node.Action.Types as Action
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree (subTreeView, SubTreeParamsIn)
+import Gargantext.Components.InputWithAutocomplete (inputWithAutocomplete')
 import Gargantext.Config.REST (AffRESTError)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, post)
 import Gargantext.Types (ID)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.SimpleJSON as GUSJ
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -59,17 +59,23 @@ shareNode = R.createElement shareNodeCpt
 shareNodeCpt :: R.Component ShareNode
 shareNodeCpt = here.component "shareNode" cpt
   where
-    cpt { dispatch, id } _ = do
-      username' /\ username <- R2.useBox' ""
+    cpt { dispatch } _ = do
+      state <- T.useBox "username"
+      text' /\ text <- R2.useBox' ""
 
       pure $ Tools.panel
-                [ Tools.inviteInputBox { boxAction: shareAction
-                                        , boxName: "Share"
-                                        , dispatch
-                                        , id
-                                        , text: "username"
-                                        , username } []
-                ] (H.div {} [H.text username'])
+                [ inputWithAutocomplete' { boxAction: shareAction
+                                         , dispatch
+                                         , state
+                                         , classes: ""
+                                         , autocompleteSearch
+                                         , onAutocompleteClick
+                                         , text }
+                ] (H.div {} [H.text text'])
+      where
+        -- TODO: This will be fetched from API
+        autocompleteSearch _ = ["test1", "test2", "test3"]
+        onAutocompleteClick _ = pure unit
 ------------------------------------------------------------------------
 publishNode :: R2.Component SubTreeParamsIn
 publishNode = R.createElement publishNodeCpt

src/Gargantext/Components/InputWithAutocomplete.purs

@@ -8,7 +8,9 @@ import DOM.Simple.Event as DE
 import Data.Maybe (Maybe(..), maybe)
 import Data.Nullable (Nullable, null, toMaybe)
 import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
 import FFI.Simple ((..))
+import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -122,7 +124,112 @@ inputWithAutocompleteCpt = here.component "inputWithAutocomplete" cpt
           else
             pure $ false
 
+type Props' =
+  (
+    autocompleteSearch  :: String -> Completions
+  , classes             :: String
+  , onAutocompleteClick :: String -> Effect Unit
+  , dispatch            :: Action -> Aff Unit
+  , boxAction           :: String -> Action
+  , state               :: T.Box String
+  , text                :: T.Box String
+  )
+
+inputWithAutocomplete' :: R2.Leaf Props'
+inputWithAutocomplete' = R2.leaf inputWithAutocompleteCpt'
+inputWithAutocompleteCpt' :: R.Component Props'
+inputWithAutocompleteCpt' = here.component "inputWithAutocomplete" cpt
+  where
+    cpt { autocompleteSearch
+        , classes
+        , onAutocompleteClick
+        , dispatch
+        , boxAction
+        , state
+        , text } _ = do
+      -- States
+      state'        <- T.useLive T.unequal state
+      containerRef  <- R.useRef null
+      inputRef      <- R.useRef null
+      completions   <- T.useBox $ autocompleteSearch state'
+
+      -- Render
+      pure $
+
+        H.div
+        { className: "input-with-autocomplete " <> classes
+        , ref: containerRef
+        }
+        [
+          completionsCpt { completions, onAutocompleteClick, state } []
+        , H.input { type: "text"
+                  , ref: inputRef
+                  , className: "form-control"
+                  , value: state'
+                  , on: { focus: onFocus completions state'
+                        , input: onInput completions
+                        , change: onInput completions
+                        , keyUp: onInputKeyUp inputRef
+                        , blur: onBlur completions containerRef
+                        }
+                  }
+        ]
 
+      -- Helpers
+      where
+        -- (!) `onBlur` DOM.Event is triggered before any `onClick` DOM.Event
+        --     So when a completion is being clicked, the UX will be broken
+        --
+        --        ↳ As a solution we chose to check if the click is made from
+        --          the autocompletion list
+        onBlur :: forall event.
+             T.Box Completions
+          -> R.Ref (Nullable DOM.Element)
+          -> event
+          -> Effect Unit
+        onBlur completions containerRef event =
+
+          if isInnerEvent
+          then
+            pure $ (event .. "preventDefault")
+          else
+            T.write_ [] completions
+
+          where
+            mContains = do
+              a <- toMaybe $ R.readRef containerRef
+              b <- toMaybe (event .. "relatedTarget")
+              Just (contains a b)
+
+            isInnerEvent = maybe false identity mContains
+
+
+        onFocus :: forall event. T.Box Completions -> String -> event -> Effect Unit
+        onFocus completions st _ = T.write_ (autocompleteSearch st) completions
+
+        onInput :: forall event. T.Box Completions -> event -> Effect Unit
+        onInput completions e = do
+          let val = R.unsafeEventValue e
+          T.write_ val state
+          T.write_ (autocompleteSearch val) completions
+
+        onInputKeyUp :: R.Ref (Nullable DOM.Element) -> DE.KeyboardEvent -> Effect Boolean
+        onInputKeyUp inputRef e = do
+          if DE.key e == "Enter" then do
+            R2.preventDefault e
+            R2.stopPropagation e
+            let val = R.unsafeEventValue e
+            let mInput = toMaybe $ R.readRef inputRef
+            T.write_ val state
+            launchAff_ $ dispatch (boxAction val)
+            T.write_ ("Invited " <> val <> " to the team") text
+            case mInput of
+              Nothing -> pure false
+              Just input -> do
+                R2.blur input
+                pure false
+          else
+            pure $ false
 
 ---------------------------------------------------------