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

Sudhir Kumar's avatar
Sudhir Kumar committed
3 4
import Prelude hiding (div)

5
import Data.Array (fold)
James Laver's avatar
James Laver committed
6
import Data.FunctorWithIndex (mapWithIndex)
7
import Data.Tuple (Tuple(..))
James Laver's avatar
James Laver committed
8 9 10
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
11

James Laver's avatar
James Laver committed
12
type TabsProps = ( tabs :: Array (Tuple String R.Element), selected :: Int )
13

James Laver's avatar
James Laver committed
14 15
tabs :: Record TabsProps -> R.Element
tabs props = R.createElement tabsCpt props []
16

James Laver's avatar
James Laver committed
17 18 19
-- this is actually just the list of tabs, not the tab contents itself
tabsCpt :: R.Component TabsProps
tabsCpt = R.hooksComponent "Tabs" cpt
20
  where
James Laver's avatar
James Laver committed
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
    cpt props _ = do
      (activeTab /\ setActiveTab) <- R.useState' props.selected
      pure $
        H.div { className: "tab-content" }
        [ H.nav {}
          [ H.div { className: "nav nav-tabs" }
            (mapWithIndex (item setActiveTab activeTab) props.tabs) ] ]
    item setActiveTab selected index (name /\ _) =
      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)

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

tab :: Record TabProps -> Array R.Element -> R.Element
tab = R.createElement tabCpt

-- | A tab only shows its contents if it is currently selected
tabCpt :: R.Component TabProps
tabCpt = R.staticComponent "Tab" cpt
44
  where
James Laver's avatar
James Laver committed
45 46 47 48 49
    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 []
50