git.iko.soy/rowtype-yoga/psfp
on 88d4be0 help sign in
rowtype-yoga/psfp/client/dce-output/Container.Header/index.js
184 lines 11 kB history raw
1// Generated by purs version 0.13.6
2"use strict";
3var Control_Applicative = require("../Control.Applicative/index.js");
4var Control_Bind = require("../Control.Bind/index.js");
5var Data_Eq = require("../Data.Eq/index.js");
6var Data_Function = require("../Data.Function/index.js");
7var Data_Functor = require("../Data.Functor/index.js");
8var Data_Int = require("../Data.Int/index.js");
9var Data_Maybe = require("../Data.Maybe/index.js");
10var Data_Monoid = require("../Data.Monoid/index.js");
11var Data_Newtype = require("../Data.Newtype/index.js");
12var Data_Nullable = require("../Data.Nullable/index.js");
13var Data_Symbol = require("../Data.Symbol/index.js");
14var Data_Tuple = require("../Data.Tuple/index.js");
15var Data_Unit = require("../Data.Unit/index.js");
16var Effect = require("../Effect/index.js");
17var Effect_Class = require("../Effect.Class/index.js");
18var Effect_Class_Console = require("../Effect.Class.Console/index.js");
19var JSS = require("../JSS/index.js");
20var React_Basic = require("../React.Basic/index.js");
21var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
22var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
23var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
24var Record_Extra = require("../Record.Extra/index.js");
25var Type_Equality = require("../Type.Equality/index.js");
26var Web_Event_EventTarget = require("../Web.Event.EventTarget/index.js");
27var Web_HTML = require("../Web.HTML/index.js");
28var Web_HTML_HTMLElement = require("../Web.HTML.HTMLElement/index.js");
29var Web_HTML_Window = require("../Web.HTML.Window/index.js");
30var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
31var Yoga_Scroll_Listener = require("../Yoga.Scroll.Listener/index.js");
32var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
33var Yoga_Typography_Header = require("../Yoga.Typography.Header/index.js");
34var UseShouldBeSticky = function (x) {
35 return x;
36};
37var ntUseShouldBeSticky = new Data_Newtype.Newtype(function (n) {
38 return n;
39}, UseShouldBeSticky);
40var makeListener = function (setSticky) {
41 return function (element) {
42 return function __do() {
43 var nodeStartPos = Web_HTML_HTMLElement.offsetTop(element)();
44 return Web_Event_EventTarget.eventListener(Data_Function["const"](function __do() {
45 var yPos = Data_Functor.mapFlipped(Effect.functorEffect)(Control_Bind.bind(Effect.bindEffect)(Web_HTML.window)(Web_HTML_Window.scrollY))(Data_Int.toNumber)();
46 return setSticky(nodeStartPos < yPos)();
47 }))();
48 };
49 };
50};
51var useShouldBeSticky = React_Basic_Hooks_Internal.coerceHook(ntUseShouldBeSticky)(React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useRef(Data_Nullable["null"]))(function (nodeRef) {
52 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useState(false))(function (v) {
53 var setSticky = function ($64) {
54 return v.value1(Data_Function["const"]($64));
55 };
56 return React_Basic_Hooks_Internal.discard(React_Basic_Hooks_Internal.ixBindRender)(React_Basic_Hooks.useLayoutEffect(Data_Eq.eqUnit)(Data_Unit.unit)(function __do() {
57 var maybeNode = React_Basic_Hooks.readRefMaybe(nodeRef)();
58 var v1 = Control_Bind.bind(Data_Maybe.bindMaybe)(maybeNode)(Web_HTML_HTMLElement.fromNode);
59 if (v1 instanceof Data_Maybe.Nothing) {
60 return Control_Bind.discard(Control_Bind.discardUnit)(Effect.bindEffect)(Effect_Class_Console.log(Effect_Class.monadEffectEffect)("Could not register listener because there was no node"))(function ($dollar__unused) {
61 return Control_Applicative.pure(Effect.applicativeEffect)(Control_Applicative.pure(Effect.applicativeEffect)(Data_Unit.unit));
62 })();
63 };
64 if (v1 instanceof Data_Maybe.Just) {
65 var listener = makeListener(setSticky)(v1.value0)();
66 return Yoga_Scroll_Listener.registerListener(listener)();
67 };
68 throw new Error("Failed pattern match at Container.Header (line 85, column 7 - line 91, column 43): " + [ v1.constructor.name ]);
69 }))(function ($dollar__unused) {
70 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(new Data_Tuple.Tuple(v.value0, nodeRef));
71 });
72 });
73}));
74var mkHeader = function __do() {
75 var h = Yoga_Typography_Header.mkH();
76 var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
77 return "header";
78 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
79 return "logo";
80 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
81 return "sticky";
82 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
83 return "title";
84 }))()(Record_Extra.mapRecordNil)()())()())()())()())(JSS.jssClasses()(function (v) {
85 return {
86 header: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
87 return "alignItems";
88 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
89 return "backgroundColor";
90 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
91 return "borderBottom";
92 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
93 return "display";
94 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
95 return "fontFamily";
96 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
97 return "gridArea";
98 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
99 return "height";
100 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
101 return "justifyContent";
102 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
103 return "paddingBottom";
104 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
105 return "paddingTop";
106 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
107 return "width";
108 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))))))()())({
109 backgroundColor: v.interfaceColour,
110 borderBottom: "0",
111 fontFamily: v.headingFontFamily,
112 gridArea: "header",
113 display: "flex",
114 alignItems: "center",
115 justifyContent: "flex-end",
116 width: "100%",
117 height: "80px",
118 paddingTop: "10px",
119 paddingBottom: "10px"
120 }),
121 sticky: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
122 return "position";
123 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
124 return "top";
125 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
126 return "zIndex";
127 }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil))))()())({
128 position: "fixed",
129 top: "0",
130 zIndex: 10
131 }),
132 title: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
133 return "paddingRight";
134 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
135 paddingRight: "30px"
136 }),
137 logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
138 return "fill";
139 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
140 return "height";
141 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
142 return "marginRight";
143 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
144 return "marginTop";
145 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
146 return "padding";
147 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
148 return "width";
149 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
150 width: "70px",
151 height: "70px",
152 padding: "5px",
153 marginTop: "9px",
154 marginRight: "7px",
155 fill: v.textColour
156 })
157 };
158 }))();
159 return React_Basic_Hooks.component()()()("Header")(function (v) {
160 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
161 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useShouldBeSticky)(function (v1) {
162 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.header()({
163 ref: v1.value1,
164 className: classes.header + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(v1.value0)(classes.sticky)),
165 children: [ React_Basic.element(h)({
166 level: Yoga_Typography_Header.H2.value,
167 text: "Rowtype Yoga",
168 className: new Data_Maybe.Just(classes.title)
169 }), React_Basic_DOM_Generated.div()({
170 children: [ React_Basic.element(Yoga_SVG_Icon.trianglelogoIcon())({}) ],
171 className: classes.logo
172 }) ]
173 }));
174 });
175 });
176 })();
177};
178module.exports = {
179 mkHeader: mkHeader,
180 UseShouldBeSticky: UseShouldBeSticky,
181 useShouldBeSticky: useShouldBeSticky,
182 makeListener: makeListener,
183 ntUseShouldBeSticky: ntUseShouldBeSticky
184};