TopBar.purs 3.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
module Gargantext.Components.PhyloExplorer.TopBar
  ( topBar
  ) where

import Gargantext.Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
arturo's avatar
arturo committed
11
import Gargantext.Components.PhyloExplorer.Store as PhyloStore
12
import Gargantext.Components.PhyloExplorer.Types (Term(..), Source(..))
arturo's avatar
arturo committed
13
import Gargantext.Types (SidePanelState(..), toggleSidePanelState)
14 15 16 17 18 19 20 21
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import Reactix (nothing)
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T

type Props =
arturo's avatar
arturo committed
22
  ( sourceCallback      :: String -> Effect Unit
23 24 25 26 27 28 29 30 31 32 33 34
  , searchCallback      :: String -> Effect Unit
  , resultCallback      :: Maybe Term -> Effect Unit
  )

here :: R2.Here
here = R2.here "Gargantext.Components.PhyloExplorer.TopBar"

topBar :: R2.Leaf Props
topBar = R2.leaf component

component :: R.Component Props
component = here.component "main" cpt where
arturo's avatar
arturo committed
35
  cpt { sourceCallback
36 37 38
      , searchCallback
      , resultCallback
      } _ = do
arturo's avatar
arturo committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52
    -- | States
    -- |
    store@
      { toolBarDisplayed
      , sideBarDisplayed
      } <- PhyloStore.use

    toolBar'  <- R2.useLive' toolBarDisplayed
    sideBar'  <- R2.useLive' sideBarDisplayed

    source    <- R2.useLive' store.source
    sources   <- R2.useLive' store.sources
    search    <- R2.useLive' store.search
    result    <- R2.useLive' store.result
53

arturo's avatar
arturo committed
54 55
    -- | Render
    --
56 57 58 59 60 61 62 63
    pure $

      H.div
      { className: "phylo-topbar" }
      [
        -- Toolbar toggle
        B.button
        { className: "phylo-topbar__toolbar"
arturo's avatar
arturo committed
64
        , callback: \_ -> T.modify_ (not) toolBarDisplayed
65 66 67 68 69 70 71 72 73
        , variant: toolBar' ?
            ButtonVariant Light $
            OutlinedButtonVariant Light
        }
        [ H.text $ toolBar' ? "Hide toolbar" $ "Show toolbar" ]
      ,
        -- Sidebar toggle
        B.button
        { className: "phylo-topbar__sidebar"
arturo's avatar
arturo committed
74
        , callback: \_ -> T.modify_ (toggleSidePanelState) sideBarDisplayed
arturo's avatar
arturo committed
75
        , variant: sideBar' == Opened ?
76 77 78
            ButtonVariant Light $
            OutlinedButtonVariant Light
        }
arturo's avatar
arturo committed
79
        [ H.text $ sideBar' == Opened ? "Hide sidebar" $ "Show sidebar" ]
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
      ,
        -- Source
        H.div
        { className: "phylo-topbar__source"}
        [
          B.formSelect
          { value: source
          , callback: sourceCallback
          } $
          [
            H.option
            { value: ""
            , disabled: true
            }
            [ H.text "Select a source" ]
          ]
          <>
            flip map sources

              \(Source { id, label }) ->
                H.option
                { value: id }
                [ H.text label ]

        ]
      ,
        -- Search (wrapped in its form for the "enter" keyboard event submit)
        H.form
        { className: "phylo-topbar__autocomplete"
        }
        [
          B.formInput
          { className: "phylo-topbar__suggestion"
          , status: Idled
          , value: case result of
              Nothing               -> ""
              Just (Term { label }) -> label
          -- (?) noop: see below button
          , callback: const nothing
          }
        ,
          B.formInput
          { className: "phylo-topbar__search"
          , value: search
          , callback: searchCallback
          , placeholder: "Find a term"
          }
        ,
          B.button
          { callback: \_ -> resultCallback result
          , type: "submit"
          , className: "phylo-topbar__submit"
          }
          [ H.text "" ]
        ]
      ]