/
OneColumnWithHeader.purs
98 lines (89 loc) · 3.23 KB
/
OneColumnWithHeader.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
module Lumi.Components.Layouts.OneColumnWithHeader where
import Prelude
import Data.Maybe (Maybe(..))
import Lumi.Components.Text (h2, text)
import React.Basic (Component, JSX, createComponent, element, fragment, makeStateless)
import React.Basic.DOM (unsafeCreateDOMComponent)
import React.Basic.DOM as R
component :: Component LayoutProps
component = createComponent "OneColumnWithHeader"
type LayoutProps =
{ titleContent :: JSX
, additionalHeaderContent :: JSX
, actionContent :: JSX
, mainContent :: JSX
, sidebarContent :: Maybe JSX
}
layout :: LayoutProps -> JSX
layout = makeStateless component render
where
render { titleContent, additionalHeaderContent, actionContent, mainContent, sidebarContent } =
lumiLayout
{ children:
[ lumiLayoutViewHead
{ children:
[ text $ h2
{ children = [titleContent]
, style = R.css
{ paddingBottom: "0"
, fontWeight: "normal"
, marginRight: "12px"
, flex: "none"
}
}
, R.span
{ style: R.css
{ overflow: "visible"
, flex: "1 1 70%"
, wordWrap: "break-word"
, padding: "0"
}
, children: [additionalHeaderContent]
}
, R.div
{ style: R.css { flex: "1 1 10px" }
}
, R.div
{ style: R.css { flex: "none" }
, children: [actionContent]
}
]
}
, lumiLayoutViewBody
{ className: "view-body view-scroll"
, children: case sidebarContent of
Nothing ->
[ mainContent ]
Just sbc ->
[ R.div
{ className: "row row-justify-between row-no-padding"
, children:
[ R.div { className: "column view-scroll", children: [ mainContent]}
, sidebarLayout { content: sbc }
]
}
]
}
]
}
lumiLayout = element (unsafeCreateDOMComponent "lumi-layout")
lumiLayoutViewHead = element (unsafeCreateDOMComponent "lumi-layout-view-head")
lumiLayoutViewBody = element (unsafeCreateDOMComponent "lumi-layout-view-body")
sidebarLayoutComponent :: Component SidebarLayoutProps
sidebarLayoutComponent = createComponent "Sidebar"
type SidebarLayoutProps =
{ content :: JSX
}
sidebarLayout :: SidebarLayoutProps -> JSX
sidebarLayout = makeStateless sidebarLayoutComponent render where
render { content } =
fragment $
[ R.div
{ style: R.css { "flex": "0 0 30%" }
, className: "column bl view-scroll"
, maxLength: 400
, children: [
R.div { className: "ppa", children: [ content ]}
]
}
]