/
Slat.purs
102 lines (94 loc) · 2.81 KB
/
Slat.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
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
module Lumi.Components2.Slat
( SlatProps
, SlatInteraction
, slat
, _interactive
, _interactiveBackground
, module Styles.Slat
) where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Newtype (un)
import Effect (Effect)
import Effect.Unsafe (unsafePerformEffect)
import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier)
import Lumi.Styles (styleModifier, styleModifier_, toCSS)
import Lumi.Styles.Slat (_interactive, slat) as Styles.Slat.Hidden
import Lumi.Styles.Slat hiding (_interactive, slat) as Styles.Slat
import Lumi.Styles.Theme (LumiTheme(..), useTheme)
import React.Basic.DOM as R
import React.Basic.DOM.Events (capture_)
import React.Basic.Emotion as E
import React.Basic.Hooks (JSX)
import React.Basic.Hooks as React
import Web.HTML.History (URL(..))
type SlatProps
= ( content :: Array JSX
, interaction :: Maybe SlatInteraction
)
type SlatInteraction
= { onClick :: Effect Unit
, tabIndex :: Int
, href :: Maybe URL
}
slat :: LumiComponent SlatProps
slat =
unsafePerformEffect do
lumiComponent "Slat" defaults \props@{ className } -> React.do
theme <- useTheme
pure case props.interaction of
Nothing ->
E.element R.div'
{ css: toCSS theme props slatStyle
, children: props.content
, className
}
Just interaction@{ href: Nothing } ->
E.element R.button'
{ css: toCSS theme props slatStyleInteractive
, children: props.content
, onClick: capture_ interaction.onClick
, tabIndex: interaction.tabIndex
, className
}
Just interaction@{ href: Just href } ->
E.element R.a'
{ css: toCSS theme props slatStyleInteractive
, children: props.content
, onClick: capture_ interaction.onClick
, tabIndex: interaction.tabIndex
, href: un URL href
, className
}
where
defaults =
{ content: []
, interaction: Nothing
}
slatStyle =
Styles.Slat.Hidden.slat
>>> styleModifier_ (E.css { appearance: E.none })
slatStyleInteractive =
slatStyle
>>> Styles.Slat.Hidden._interactive
_interactive :: SlatInteraction -> PropsModifier SlatProps
_interactive interaction =
propsModifier
_
{ interaction = Just interaction
}
_interactiveBackground :: SlatInteraction -> PropsModifier SlatProps
_interactiveBackground interaction =
propsModifier
_
{ interaction = Just interaction
}
>>> styleModifier \(LumiTheme theme) ->
E.css
{ "&:hover":
E.nested
$ E.css
{ backgroundColor: E.color theme.colors.primary4
, borderColor: E.color theme.colors.black4
}
}