1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
module Gargantext.Components.Tab where
import Prelude hiding (div)
import Data.Array (fold)
import Data.Lens (Lens', Prism', over, view)
import Data.List (List, mapWithIndex, toUnfoldable)
import Data.Tuple (Tuple(..))
import React (ReactElement)
import React.DOM (a, div, nav, text)
import React.DOM.Props (className, onClick)
import Thermite ( PerformAction, Render, Spec
, _render, modifyState, focus
, simpleSpec, withState)
type State = { activeTab :: Int }
data Action = ChangeTab Int
tabs :: forall state props action.
Lens' state State -> Prism' action Action
-> List (Tuple String (Spec state props action))
-> Spec state props action
tabs l p ls = withState \st ->
let {activeTab} = view l st in
fold
[ focus l p $ simpleSpec performAction (render activeTab ls)
, wrapper $ fold $ mapWithIndex ( tab activeTab) ls
]
where
performAction :: forall props.
PerformAction State props Action
performAction (ChangeTab activeTab) _ _ =
void $ modifyState $ const {activeTab}
wrapper = over _render \render d p s c ->
[div [className "tab-content"] $ render d p s c]
tab :: forall state props action.
Int -> Int -> Tuple String (Spec state props action)
-> Spec state props action
tab sid iid (Tuple name spec) = over _render tabRender spec
where
tabRender renderer d p s c =
[ div [ className $ "tab-pane " <>
if sid ==iid
then " show active"
else " fade"] $
if sid == iid
then renderer d p s c
else []
]
render :: forall state props action.
Int -> List (Tuple String (Spec state props action))
-> Render State props Action
render at ls d p s c =
[ nav []
[ div [className "nav nav-tabs"]
$ toUnfoldable $ mapWithIndex (item at) ls
]
]
where
item :: forall a. Int -> Int -> (Tuple String a) -> ReactElement
item sid iid (Tuple name _) =
a [className $ "nav-item nav-link" <>
if sid == iid
then " active"
else "", onClick \e -> d $ ChangeTab iid] [text name]