Tab.purs 2.01 KB
Newer Older
1
module Gargantext.Components.Tab where
2

Sudhir Kumar's avatar
Sudhir Kumar committed
3
import Prelude hiding (div)
James Laver's avatar
James Laver committed
4
import Data.FunctorWithIndex (mapWithIndex)
5
import Data.Tuple (Tuple)
James Laver's avatar
James Laver committed
6 7 8
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
9

10 11
import Gargantext.Utils.Reactix as R2

12
thisModule :: String
13 14
thisModule = "Gargantext.Components.Tab"

15 16
type TabsProps = (
    selected :: Int
Alexandre Delanoë's avatar
Alexandre Delanoë committed
17
  , tabs     :: Array (Tuple String R.Element)
18
  )
19

James Laver's avatar
James Laver committed
20 21
tabs :: Record TabsProps -> R.Element
tabs props = R.createElement tabsCpt props []
22

James Laver's avatar
James Laver committed
23 24
-- this is actually just the list of tabs, not the tab contents itself
tabsCpt :: R.Component TabsProps
25
tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
26
  where
James Laver's avatar
James Laver committed
27 28 29
    cpt props _ = do
      (activeTab /\ setActiveTab) <- R.useState' props.selected
      pure $
30
        H.div {}
James Laver's avatar
James Laver committed
31
        [ H.nav {}
Alexandre Delanoë's avatar
Alexandre Delanoë committed
32 33 34
        [ H.br {}
        , H.div { className: "nav nav-tabs"
                  , title    : "Search result"
35 36
                  } -- [H.text "" ]
               (mapWithIndex (button setActiveTab activeTab) props.tabs) 
Alexandre Delanoë's avatar
Alexandre Delanoë committed
37 38 39 40
          ]
        , H.div { className: "tab-content" }
                $ mapWithIndex (item activeTab) props.tabs
        ]
41
    --{-
42
    button setActiveTab selected index (name /\ _) =
James Laver's avatar
James Laver committed
43 44 45 46 47
      H.a { className, on: { click } } [ H.text name ]
      where
        eq = index == selected
        className = "nav-item nav-link" <> (if eq then " active" else "")
        click e = setActiveTab (const index)
48
    --}
49
    item selected index (_ /\ cpt') = tab { selected, index } [ cpt' ]
James Laver's avatar
James Laver committed
50 51 52 53

-- TODO: document what these are (selection, item indices)
type TabProps = ( selected :: Int, index :: Int )

54
tab :: R2.Component TabProps
James Laver's avatar
James Laver committed
55 56 57 58
tab = R.createElement tabCpt

-- | A tab only shows its contents if it is currently selected
tabCpt :: R.Component TabProps
59
tabCpt = R.staticComponent "G.C.Tab.tab" cpt
60
  where
James Laver's avatar
James Laver committed
61 62 63 64 65
    cpt { selected, index } children = H.div { className } children'
      where
        same = selected == index
        className = "tab-pane" <> (if same then "show active" else "fade")
        children' = if same then children else []
66