Tab.purs 2.07 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 18
type TabsProps =
  ( activeTab  :: T.Box Int
19
  , tabs       :: Array (Tuple String R.Element)
20
  | TabsOptions
21
  )
22

23 24 25 26 27 28 29 30 31 32 33
type TabsOptions =
  ( className :: String
  )

tabsOptions :: Record TabsOptions
tabsOptions =
  { className: ""
  }

tabs :: forall r. R2.OptLeaf TabsOptions TabsProps r
tabs = R2.optLeaf tabsCpt tabsOptions
James Laver's avatar
James Laver committed
34 35
-- this is actually just the list of tabs, not the tab contents itself
tabsCpt :: R.Component TabsProps
James Laver's avatar
James Laver committed
36
tabsCpt = here.component "tabs" cpt where
37 38 39
  cpt props@{ activeTab
            , tabs: tabs'
            } _ = do
40 41
    activeTab' <- T.useLive T.unequal activeTab

42
    pure $ H.div { className: props.className }
James Laver's avatar
James Laver committed
43
      [ H.nav {}
Alexandre Delanoë's avatar
Alexandre Delanoë committed
44
        [ H.br {}
James Laver's avatar
James Laver committed
45
        , H.div { className: "nav nav-tabs", title: "Search result" }
46
          (mapWithIndex (button activeTab activeTab') tabs')
Alexandre Delanoë's avatar
Alexandre Delanoë committed
47
        ]
James Laver's avatar
James Laver committed
48
      , H.div { className: "tab-content" }
49
        (mapWithIndex (item activeTab') tabs')
James Laver's avatar
James Laver committed
50
      ]
51
  button activeTab selected index (name /\ _) =
James Laver's avatar
James Laver committed
52 53 54
    H.a { className, on: { click } } [ H.text name ] where
      eq = index == selected
      className = "nav-item nav-link" <> (if eq then " active" else "")
55
      click _ = T.write_ index activeTab
James Laver's avatar
James Laver committed
56
  item selected index (_ /\ cpt') = tab { selected, index } [ cpt' ]
James Laver's avatar
James Laver committed
57 58 59 60

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

61
tab :: R2.Component TabProps
James Laver's avatar
James Laver committed
62 63 64
tab = R.createElement tabCpt
-- | A tab only shows its contents if it is currently selected
tabCpt :: R.Component TabProps
65
tabCpt = here.component "tab" cpt
66
  where
67
    cpt { selected, index } children = pure $ H.div { className } children'
James Laver's avatar
James Laver committed
68 69 70 71
      where
        same = selected == index
        className = "tab-pane" <> (if same then "show active" else "fade")
        children' = if same then children else []