-
Notifications
You must be signed in to change notification settings - Fork 28
/
SimpleButton.re
65 lines (57 loc) · 1.71 KB
/
SimpleButton.re
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
open Revery;
open Revery.UI;
open Revery.UI.Components;
module Constants = {
let boxShadowActiveTransparency = 0.0;
let boxShadowHoverTransparency = 0.3;
let boxShadowNotHoveredTransparency = 0.15;
};
module Styles = {
open Style;
let button = boxShadowTransparency => [
backgroundColor(Color.hex(Theme.darkBlue)),
boxShadow(
~yOffset=6.,
~xOffset=0.,
~blurRadius=16.,
~color=Color.rgba(0., 0., 0., boxShadowTransparency),
~spreadRadius=12.,
),
paddingHorizontal(24),
paddingVertical(12),
borderRadius(10.),
];
let buttonText = [color(Colors.white)];
};
let%component make = (~text, ~onClick, ()) => {
let%hook (boxShadowTransparency, setBoxShadowTransparency) =
Hooks.state(Constants.boxShadowNotHoveredTransparency);
let%hook transitionedBoxShadowTransparency =
Hooks.transition(
~name="transitionedBoxShadowTransparency",
~duration=Time.ms(150),
boxShadowTransparency,
);
let updateShadowTransparency = (_event, ~newOpacity) => {
setBoxShadowTransparency(_prevTransparency => newOpacity);
};
<View
onMouseUp={updateShadowTransparency(
~newOpacity=Constants.boxShadowHoverTransparency,
)}
onMouseDown={updateShadowTransparency(
~newOpacity=Constants.boxShadowActiveTransparency,
)}
onMouseEnter={updateShadowTransparency(
~newOpacity=Constants.boxShadowHoverTransparency,
)}
onMouseLeave={updateShadowTransparency(
~newOpacity=Constants.boxShadowNotHoveredTransparency,
)}>
<Clickable onClick>
<View style={Styles.button(transitionedBoxShadowTransparency)}>
<Text fontSize=16. style=Styles.buttonText text />
</View>
</Clickable>
</View>;
};