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
module Gargantext.Components.Bootstrap.Tooltip
( tooltip
, TooltipBindingProps, tooltipBind, tooltipBind'
, tooltipContainer
) where
import Gargantext.Prelude
import ConvertableOptions as CO
import Data.UUID as UUID
import Gargantext.Components.Bootstrap.Types (TooltipEffect(..), TooltipPosition(..), Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Record as Record
import Record.Extra as RX
import Type.Proxy (Proxy(..))
foreign import reactTooltipCpt :: R.Component Props
type Props =
( id :: String
| Options
)
type Options =
( effect :: TooltipEffect
, variant :: Variant
, delayHide :: Int
, delayShow :: Int
, className :: String
, position :: TooltipPosition
)
options :: Record Options
options =
{ effect : SolidEffect
, variant : Dark
, delayHide : 0
, delayShow : 0
, className : ""
, position : AutomaticPosition
}
-- | Adapter Component for React Tooltip
-- |
-- |
-- | @XXX: tooltip position not working
-- | @link https://github.com/wwayne/react-tooltip/issues/747
-- |
-- |
-- | https://github.com/wwayne/react-tooltip
tooltip :: forall provided.
CO.Defaults (Record Options) (Record provided) (Record Props)
=> Record provided
-> Array R.Element
-> R.Element
tooltip props = R.rawCreateElement reactTooltipCpt props''
where
props' = CO.defaults options props
props'' = props'
# Record.set
(Proxy :: Proxy "effect")
(show props'.effect)
>>> Record.set
(Proxy :: Proxy "variant")
(show props'.variant)
>>> Record.rename
(Proxy :: Proxy "variant")
(Proxy :: Proxy "type")
>>> Record.set
(Proxy :: Proxy "position")
(show props'.position)
>>> Record.rename
(Proxy :: Proxy "position")
(Proxy :: Proxy "place")
-------------------------------------------------------------
type TooltipBindingProps =
( "data-tip" :: Boolean
, "data-for" :: String
)
-- | Bind a Component props to an existing <tooltip>
tooltipBind :: String -> Record TooltipBindingProps
tooltipBind =
{ "data-for": _
, "data-tip": true
}
-- | Derived empty state
tooltipBind' :: Record TooltipBindingProps
tooltipBind' =
{ "data-for": ""
, "data-tip": false
}
-------------------------------------------------------------
type ContainerProps =
( defaultSlot :: R.Element
, tooltipSlot :: R.Element
| Options
)
tooltipContainer :: forall r. R2.OptLeaf Options ContainerProps r
tooltipContainer = R2.optLeaf tooltipContainerCpt options
tooltipContainerCpt :: R.Memo ContainerProps
tooltipContainerCpt = R.memo' $ R.hooksComponent "tooltipContainer" cpt where
cpt props@{ tooltipSlot
, defaultSlot
} _
= R.unsafeHooksEffect (UUID.genUUID >>= pure <<< UUID.toString)
>>= \uuid -> do
-- Computed
let
tooltipProps = Record.merge
(RX.pick props :: Record Options)
{ id: uuid }
pure $
R2.fragmentWithKey uuid
[
tooltip
tooltipProps
[ tooltipSlot ]
,
H.span
(tooltipBind uuid)
[ defaultSlot ]
]