/
Link.purs
72 lines (68 loc) · 2.45 KB
/
Link.purs
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
module Lumi.Components2.Link where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Newtype (un)
import Data.Nullable (toNullable)
import Effect (Effect)
import Effect.Uncurried (runEffectFn1)
import Effect.Unsafe (unsafePerformEffect)
import Lumi.Components (LumiComponent, lumiComponent)
import Lumi.Styles (toCSS)
import Lumi.Styles.Link as Styles.Link
import Lumi.Styles.Theme (useTheme)
import React.Basic (JSX)
import React.Basic.DOM (unsafeCreateDOMComponent)
import React.Basic.DOM.Events (altKey, button, ctrlKey, metaKey, preventDefault, shiftKey, stopPropagation)
import React.Basic.Emotion as E
import React.Basic.Events (handler, merge, syntheticEvent)
import React.Basic.Hooks as React
import Web.HTML.History (URL(..))
type LinkProps
= ( href :: URL
, navigate :: Maybe (Effect Unit)
, tabIndex :: Int
, target :: Maybe String
, rel :: Maybe String
, download :: Maybe String
, content :: Array JSX
, className :: String
)
link :: LumiComponent LinkProps
link =
unsafePerformEffect do
let
lumiAnchorElement = E.element (unsafeCreateDOMComponent "a")
defaults =
{ className: ""
, href: URL ""
, navigate: Nothing
, tabIndex: 0
, target: Nothing
, rel: Nothing
, download: Nothing
, content: []
}
lumiComponent "Link" defaults \props@{ className } -> React.do
theme <- useTheme
pure
$ lumiAnchorElement
{ css: toCSS theme props Styles.Link.link
, children: props.content
, className
, href: un URL props.href
, onClick:
handler (merge { button, metaKey, altKey, ctrlKey, shiftKey, syntheticEvent }) \{ button, metaKey, altKey, ctrlKey, shiftKey, syntheticEvent } -> do
case props.navigate, button, metaKey, altKey, ctrlKey, shiftKey of
Just n', Just 0, Just false, Just false, Just false, Just false ->
runEffectFn1
(handler (stopPropagation <<< preventDefault) $ const n')
syntheticEvent
_, _, _, _, _, _ ->
runEffectFn1
(handler stopPropagation mempty)
syntheticEvent
, target: toNullable props.target
, rel: toNullable props.rel
, tabIndex: props.tabIndex
, download: toNullable props.download
}