/
Loader.purs
54 lines (47 loc) · 1.39 KB
/
Loader.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
module Lumi.Components.Loader where
import Prelude
import Color (cssStringHSLA)
import Data.Nullable (Nullable)
import JSS (JSS, jss)
import Lumi.Components.Color (colors)
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
type LoaderProps
= { style :: CSS
, testId :: Nullable String
}
component :: Component LoaderProps
component = createComponent "Loader"
loader :: LoaderProps -> JSX
loader = makeStateless component $ loaderElement <<< mapProps
where
loaderElement = element (unsafeCreateDOMComponent "lumi-loader")
mapProps props =
{ style: props.style
, "data-testid": props.testId
}
styles :: JSS
styles =
jss
{ "@global":
{ "lumi-loader": spinnerMixin { radius: "38px", borderWidth: "5px" }
, "@keyframes spin":
{ from: { transform: "rotate(0deg)" }
, to: { transform: "rotate(360deg)" }
}
}
}
spinnerMixin :: { radius :: String, borderWidth :: String } -> JSS
spinnerMixin { radius, borderWidth } =
jss
{ boxSizing: "border-box"
, content: "\"\""
, display: "inline-block"
, height: radius
, width: radius
, border: [ borderWidth, "solid", cssStringHSLA colors.black1 ]
, borderTopColor: cssStringHSLA colors.black4
, borderRadius: "50%"
, animation: "spin 1s infinite linear"
, animationName: "spin"
}