git.iko.soy/rowtype-yoga/psfp
on 64d8094 help sign in
rowtype-yoga/psfp/client/dce-output/Yoga.Button.Component/index.js
274 lines 16 kB history raw
1// Generated by purs version 0.13.6
2"use strict";
3var Color = require("../Color/index.js");
4var Control_Applicative = require("../Control.Applicative/index.js");
5var Control_Bind = require("../Control.Bind/index.js");
6var Data_Eq = require("../Data.Eq/index.js");
7var Data_Foldable = require("../Data.Foldable/index.js");
8var Data_Interpolate = require("../Data.Interpolate/index.js");
9var Data_Maybe = require("../Data.Maybe/index.js");
10var Data_Monoid = require("../Data.Monoid/index.js");
11var Data_Symbol = require("../Data.Symbol/index.js");
12var JSS = require("../JSS/index.js");
13var React_Basic = require("../React.Basic/index.js");
14var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
15var React_Basic_DOM_Internal = require("../React.Basic.DOM.Internal/index.js");
16var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
17var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
18var Record = require("../Record/index.js");
19var Record_Extra = require("../Record.Extra/index.js");
20var Type_Equality = require("../Type.Equality/index.js");
21var Yoga_Theme = require("../Yoga.Theme/index.js");
22var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
23var PlainButton = (function () {
24 function PlainButton() {
26 };
27 PlainButton.value = new PlainButton();
28 return PlainButton;
29})();
30var HighlightedButton = (function () {
31 function HighlightedButton() {
33 };
34 HighlightedButton.value = new HighlightedButton();
35 return HighlightedButton;
36})();
37var DisabledButton = (function () {
38 function DisabledButton() {
40 };
41 DisabledButton.value = new DisabledButton();
42 return DisabledButton;
43})();
44var linearGradient = function (elems) {
45 return "linear-gradient(" + (Data_Foldable.intercalate(Data_Foldable.foldableArray)(Data_Monoid.monoidString)(",")(elems) + ")");
46};
47var styles = JSS.jssClasses()(function (v) {
48 return {
49 buttonContainer: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
50 return "background";
51 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
52 return "borderRadius";
53 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
54 return "boxSizing";
55 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
56 return "height";
57 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
58 return "margin";
59 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
60 return "minWidth";
61 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
62 return "padding";
63 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))()())({
64 padding: "2px",
65 background: linearGradient([ "145deg", v.highlightColour, v.highlightColourDark ]),
66 borderRadius: "20px",
67 height: "40px",
68 minWidth: "100px",
69 boxSizing: "border-box",
70 margin: "2px"
71 }),
72 "@keyframes gradientBG": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
73 return "0%";
74 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
75 return "backgroundPosition";
76 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
77 return "100%";
78 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
79 return "backgroundPosition";
80 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
81 return "50%";
82 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
83 return "backgroundPosition";
84 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil))))()())({
85 "0%": {
86 backgroundPosition: "0% 50%"
87 },
88 "50%": {
89 backgroundPosition: "100% 50%"
90 },
91 "100%": {
92 backgroundPosition: "0% 50%"
93 }
94 }),
95 btn: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
96 return "&:active";
97 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
98 return "background";
99 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
100 return "boxShadow";
101 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
102 return "&:disabled";
103 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
104 return "background";
105 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
106 return "border";
107 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
108 return "boxShadow";
109 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
110 return "textDecoration";
111 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
112 return "textDecorationColor";
113 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
114 return "&:focus";
115 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
116 return "animation";
117 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
118 return "background";
119 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
120 return "backgroundSize";
121 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
122 return "color";
123 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
124 return "background";
125 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
126 return "border";
127 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
128 return "borderRadius";
129 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
130 return "color";
131 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
132 return "fontFamily";
133 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
134 return "height";
135 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
136 return "letterSpacing";
137 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
138 return "outline";
139 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
140 return "padding";
141 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
142 return "textTransform";
143 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
144 return "width";
145 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
146 background: linearGradient([ "145deg", v.interfaceColourLightest, v.interfaceColourDarkest ]),
147 color: v.highlightColour,
148 borderRadius: "20px",
149 border: "0",
150 width: "100%",
151 height: "36px",
152 fontFamily: v.textFontFamily,
153 padding: "1px 18px 0px 18px",
154 letterSpacing: "0.2em",
155 textTransform: "uppercase",
156 outline: "none",
157 "&:focus": {
158 background: linearGradient([ "145deg", v.interfaceColourDarker, v.highlightColourDark, v.highlightColour ]),
159 color: Data_Maybe.fromMaybe(v.textColour)(Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColour))(function (hlc) {
160 return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColourDark))(function (hlcd) {
161 var bg = (function () {
162 if (v.isLight) {
163 return hlc;
164 };
165 return Color.mix(Color.HSL.value)(hlc)(hlcd)(0.5);
166 })();
167 return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.textColour))(function (tc) {
168 return Control_Applicative.pure(Data_Maybe.applicativeMaybe)(Color.toHexString(Yoga_Theme.increaseContrast(bg)(tc)));
169 });
170 });
171 })),
172 backgroundSize: "400% 400%, 100% 100%",
173 animation: "$gradientBG 3s ease infinite"
174 },
175 "&:active": {
176 boxShadow: Data_Interpolate.i(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpStringFunction(Data_Interpolate.interpString)))))("inset 6px 6px 6px ")(v.backgroundColourDarkest)(", inset -6px -6px 6px ")(v.backgroundColourLightest),
177 background: linearGradient([ "145deg", v.backgroundColourDarker, v.backgroundColourLighter ])
178 },
179 "&:disabled": {
180 boxShadow: "0 0 0 black",
181 background: v.backgroundColour,
182 border: "1px dotted " + v.interfaceColourLightest,
183 textDecoration: "line-through",
184 textDecorationColor: v.red
185 }
186 }),
187 highlightedButton: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
188 return "&:active";
189 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
190 return "background";
191 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
192 return "background";
193 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
194 return "color";
195 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
196 background: (function () {
197 if (v.isLight) {
198 return v.highlightColour;
199 };
200 return linearGradient([ v.highlightColour, v.highlightColourDark ]);
201 })(),
202 "&:active": {
203 background: linearGradient([ "145deg", v.highlightColourDark, v.highlightColour ])
204 },
205 color: Data_Maybe.fromMaybe(v.textColour)(Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColour))(function (hlc) {
206 return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.highlightColourDark))(function (hlcd) {
207 var bg = (function () {
208 if (v.isLight) {
209 return hlc;
210 };
211 return Color.mix(Color.HSL.value)(hlc)(hlcd)(0.5);
212 })();
213 return Control_Bind.bind(Data_Maybe.bindMaybe)(Color.fromHexString(v.textColour))(function (tc) {
214 return Control_Applicative.pure(Data_Maybe.applicativeMaybe)(Color.toHexString(Yoga_Theme.increaseContrast(bg)(tc)));
215 });
216 });
217 }))
218 })
219 };
220});
221var eqButtonType = new Data_Eq.Eq(function (x) {
222 return function (y) {
223 if (x instanceof PlainButton && y instanceof PlainButton) {
224 return true;
225 };
226 if (x instanceof HighlightedButton && y instanceof HighlightedButton) {
227 return true;
228 };
229 if (x instanceof DisabledButton && y instanceof DisabledButton) {
230 return true;
231 };
232 return false;
233 };
234});
235var mkButton = function (dictUnion) {
236 return function (dictLacks) {
237 return function (dictLacks1) {
238 return function (dictLacks2) {
239 return function __do() {
240 var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
241 return "@keyframes gradientBG";
242 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
243 return "btn";
244 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
245 return "buttonContainer";
246 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
247 return "highlightedButton";
248 }))()(Record_Extra.mapRecordNil)()())()())()())()())(styles)();
249 return React_Basic_Hooks.component()()()("Button")(function (v) {
250 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
251 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.div()({
252 className: classes.buttonContainer,
253 children: [ React_Basic.element(React_Basic_DOM_Internal.unsafeCreateDOMComponent("button"))(Record.union()({
254 className: classes.btn + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(Data_Eq.eq(eqButtonType)(v.buttonType)(HighlightedButton.value))(classes.highlightedButton)) + (" " + v.className),
255 disabled: Data_Eq.eq(eqButtonType)(v.buttonType)(DisabledButton.value),
256 children: v.kids
257 })(v.buttonProps)) ]
258 }));
259 });
260 })();
261 };
262 };
263 };
264 };
265};
266module.exports = {
267 PlainButton: PlainButton,
268 HighlightedButton: HighlightedButton,
269 DisabledButton: DisabledButton,
270 styles: styles,
271 mkButton: mkButton,
272 linearGradient: linearGradient,
273 eqButtonType: eqButtonType
274};