Wizard: add support of react js to the js template

2020-01-22 16:29:17 +03:00
parent 351a037bcd
commit d330652eee
12 changed files with 255 additions and 21 deletions
@@ -0,0 +1,17 @@
+import kotlinx.css.*
+import styled.StyleSheet
+
+object WelcomeStyles : StyleSheet("WelcomeStyles", isStatic = true) {
+    val textContainer by css {
+        padding(5.px)
+
+        backgroundColor = rgb(8, 97, 22)
+        color = rgb(56, 246, 137)
+    }
+
+    val textInput by css {
+        margin(vertical = 5.px)
+
+        fontSize = 14.px
+    }
+} 
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JS Client</title>
+</head>
+<body>
+<script src="${moduleName}.js"></script>
+<div id="root"></div>
+</body>
+</html>
@@ -0,0 +1,15 @@
+import react.dom.render
+import kotlin.browser.document
+import kotlin.browser.window
+
+fun main() {
+    window.onload = {
+        render(document.getElementById("root")) {
+            child(Welcome::class) {
+                attrs {
+                    name = "Kotlin/JS"
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,59 @@
+import kotlinx.html.InputType
+import kotlinx.html.js.onChangeFunction
+import org.w3c.dom.HTMLInputElement
+import react.RBuilder
+import react.RComponent
+import react.RProps
+import react.RState
+#if($useStyledComponents)
+import styled.css
+import styled.styledDiv
+import styled.styledInput
+#else
+import react.dom.div
+import react.dom.input
+#end
+
+interface WelcomeProps : RProps {
+    var name: String
+}
+
+data class WelcomeState(val name: String) : RState
+
+class Welcome(props: WelcomeProps) : RComponent<WelcomeProps, WelcomeState>(props) {
+
+    init {
+        state = WelcomeState(props.name)
+    }
+
+    override fun RBuilder.render() {
+#if($useStyledComponents)
+       styledDiv {
+            css {
+                +WelcomeStyles.textContainer
+            }
+#else
+        div {
+#end
+            +"Hello, ${state.name}"
+        }
+#if($useStyledComponents)
+        styledInput {
+            css {
+                +WelcomeStyles.textInput
+            }
+#else
+        input {
+#end
+            attrs {
+                type = InputType.text
+                value = state.name
+                onChangeFunction = { event ->
+                    setState(
+                        WelcomeState(name = (event.target as HTMLInputElement).value)
+                    )
+                }
+            }
+        }
+    }
+}