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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
module Gargantext.Components.TileMenu
( tileMenu
) where
import Gargantext.Prelude
import Data.Array (snoc)
import Data.Maybe (Maybe(..))
import Data.Nullable (null)
import Data.UUID as UUID
import Effect (Effect)
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Hooks.LinkHandler (useLinkHandler)
import Gargantext.Routes (AppRoute, Tile)
import Gargantext.Utils.Popover as Popover
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.TileMenu"
type Props =
( boxes :: Boxes
, currentTile :: Maybe (Unit -> Effect AppRoute)
, xTile :: Maybe (Unit -> Effect AppRoute)
, yTile :: Maybe (Unit -> Effect AppRoute)
)
tileMenu :: R2.Component Props
tileMenu = R.createElement tileMenuCpt
tileMenuCpt :: R.Component Props
tileMenuCpt = here.component "tileMenu" cpt where
cpt props@{ boxes } children = do
-- Hooks
{ goToRoute } <- useLinkHandler
-- States
popoverRef <- R.useRef null
-- Helpers
let
newTile :: T.Box (Array (Record Tile)) -> AppRoute -> Effect Unit
newTile list route = do
id <- UUID.genUUID
tile <- pure { id, route }
T.modify_ (\arr -> snoc arr tile) list
currentTileCbk :: (Unit -> Effect AppRoute) -> Effect Unit
currentTileCbk thunk = thunk unit >>= goToRoute
addTileCbk ::
(Unit -> Effect AppRoute)
-> T.Box (Array (Record Tile))
-> Effect Unit
addTileCbk thunk list = thunk unit >>= newTile list
-- Render
pure $
H.div { className: "tile-menu" }
[
Popover.popover
{ arrow : false
, open : false
, onClose : const $ pure unit
, onOpen : const $ pure unit
, ref : popoverRef
}
[
R.fragment children
,
H.div { className: "tile-menu__popover" }
[
H.ul {}
[
-- Current Tile
case props.currentTile of
Nothing -> mempty
Just thunk ->
H.li { className: "tile-menu__item"}
[
H.button
{ className: "btn btn-link"
, on: { click: const do
currentTileCbk thunk
Popover.setOpen popoverRef false
}
}
[
H.i { className: "fa fa-share" } []
,
H.text "open on current tile"
]
]
,
-- Add vertical tile
case props.yTile of
Nothing -> mempty
Just thunk ->
H.li { className: "tile-menu__item" }
[
H.button
{ className: "btn btn-link"
, on: { click: const do
addTileCbk thunk boxes.tileAxisYList
Popover.setOpen popoverRef false
}
}
[
H.i { className: "fa fa-caret-square-o-right" } []
,
H.text "open from a new tile"
]
]
,
-- Add horizontal tile
case props.xTile of
Nothing -> mempty
Just thunk ->
H.li { className: "tile-menu__item" }
[
H.button
{ className: "btn btn-link"
, on: { click: const do
addTileCbk thunk boxes.tileAxisXList
Popover.setOpen popoverRef false
}
}
[
H.i { className: "fa fa-caret-square-o-down" } []
,
H.text "open from a new tile"
]
]
]
]
]
]