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

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

10 11
import Gargantext.Prelude

12 13
import Gargantext.Utils.Reactix as R2

James Laver's avatar
James Laver committed
14 15
here :: R2.Here
here = R2.here "Gargantext.Components.Tab"
16

17
type TabsProps = (
18 19
    activeTab  :: T.Box Int
  , tabs       :: Array (Tuple String R.Element)
20
  )
21

James Laver's avatar
James Laver committed
22
tabs :: R2.Leaf TabsProps
23
tabs = R2.leafComponent tabsCpt
James Laver's avatar
James Laver committed
24 25
-- this is actually just the list of tabs, not the tab contents itself
tabsCpt :: R.Component TabsProps
James Laver's avatar
James Laver committed
26
tabsCpt = here.component "tabs" cpt where
27 28
  cpt { activeTab
      , tabs: tabs' } _ = do
29 30
    activeTab' <- T.useLive T.unequal activeTab

James Laver's avatar
James Laver committed
31 32
    pure $ H.div {}
      [ H.nav {}
Alexandre Delanoë's avatar
Alexandre Delanoë committed
33
        [ H.br {}
James Laver's avatar
James Laver committed
34
        , H.div { className: "nav nav-tabs", title: "Search result" }
35
          (mapWithIndex (button activeTab activeTab') tabs')
Alexandre Delanoë's avatar
Alexandre Delanoë committed
36
        ]
James Laver's avatar
James Laver committed
37
      , H.div { className: "tab-content" }
38
        (mapWithIndex (item activeTab') tabs')
James Laver's avatar
James Laver committed
39
      ]
40
  button activeTab selected index (name /\ _) =
James Laver's avatar
James Laver committed
41 42 43
    H.a { className, on: { click } } [ H.text name ] where
      eq = index == selected
      className = "nav-item nav-link" <> (if eq then " active" else "")
44
      click _ = T.write_ index activeTab
James Laver's avatar
James Laver committed
45
  item selected index (_ /\ cpt') = tab { selected, index } [ cpt' ]
James Laver's avatar
James Laver committed
46 47 48 49

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

50
tab :: R2.Component TabProps
James Laver's avatar
James Laver committed
51 52 53
tab = R.createElement tabCpt
-- | A tab only shows its contents if it is currently selected
tabCpt :: R.Component TabProps
54
tabCpt = here.component "tab" cpt
55
  where
56
    cpt { selected, index } children = pure $ H.div { className } children'
James Laver's avatar
James Laver committed
57 58 59 60
      where
        same = selected == index
        className = "tab-pane" <> (if same then "show active" else "fade")
        children' = if same then children else []
61