From 801222a7aad01738e6c29035938d5f9cc8354061 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Mon, 11 May 2020 16:25:21 +0200 Subject: New kvision-react module, with support for using React components in KVision apps --- .../kotlin/pl/treksoft/kvision/KVManagerReact.kt | 34 +++++++ .../main/kotlin/pl/treksoft/kvision/react/React.kt | 113 +++++++++++++++++++++ .../pl/treksoft/kvision/react/ReactComponent.kt | 58 +++++++++++ 3 files changed, 205 insertions(+) create mode 100644 kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt create mode 100644 kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt create mode 100644 kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt (limited to 'kvision-modules/kvision-react/src/main/kotlin/pl') diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt new file mode 100644 index 00000000..88768d8e --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt @@ -0,0 +1,34 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package pl.treksoft.kvision + +internal val kVManagerReactInit = KVManagerReact.init() + +/** + * Internal singleton object which initializes and configures KVision React module. + */ +internal object KVManagerReact { + + internal val reactDom = require("react-dom") + + internal fun init() {} +} diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt new file mode 100644 index 00000000..7424159f --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt @@ -0,0 +1,113 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +package pl.treksoft.kvision.react + +import com.github.snabbdom.VNode +import org.w3c.dom.HTMLElement +import pl.treksoft.kvision.KVManagerReact +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.utils.set +import react.RBuilder +import react.dom.render as ReactRender + +/** + * React component for KVision with support for state holder. + * @param S state type + * @param classes a set of CSS class names + * @param builder a builder function for external react components with support for the state holder. + */ +class React( + state: S, + classes: Set = setOf(), + private val builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit +) : Widget(classes) { + + var state = state + set(value) { + field = value + refreshFunction?.invoke() + } + + private var refreshFunction: (() -> Unit)? = null + + @Suppress("UnsafeCastFromDynamic") + internal constructor( + classes: Set = setOf(), + builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit + ) : this(js("{}"), classes, builder) + + override fun afterInsert(node: VNode) { + ReactRender(node.elm as HTMLElement) { + reactComponent { + this.renderFunction = { rBuilder, refresh -> + refreshFunction = refresh + rBuilder.builder({ state }) { changeState: (S) -> S -> + state = changeState(state) + refresh() + } + } + } + } + } + + override fun afterDestroy() { + vnode?.elm?.let { + KVManagerReact.reactDom.unmountComponentAtNode(it) + } + } +} + +/** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ +fun Container.react( + state: S, + classes: Set? = null, + className: String? = null, + builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit +): React { + val react = React(state, classes ?: className.set, builder) + this.add(react) + return react +} + +/** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ +fun Container.react( + classes: Set? = null, + className: String? = null, + builder: RBuilder.() -> Unit +): React { + val fullBuilder = fun RBuilder.(_: () -> dynamic, _: ((dynamic) -> dynamic) -> Unit) { + this.builder() + } + val react = React(classes ?: className.set, fullBuilder) + this.add(react) + return react +} diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt new file mode 100644 index 00000000..a350468e --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt @@ -0,0 +1,58 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +package pl.treksoft.kvision.react + +import react.RBuilder +import react.RComponent +import react.RProps +import react.RState +import react.ReactElement +import react.setState + +/** + * @suppress Internal interface for properties + */ +external interface ReactComponentProps : RProps { + var renderFunction: (rBuilder: RBuilder, refresh: () -> Unit) -> Unit +} + +/** + * Internal React component wrapper + */ +internal class ReactComponent : RComponent() { + override fun RBuilder.render() { + props.renderFunction(this) { + setState { + } + } + } +} + +/** + * Internal React component builder function + */ +internal fun RBuilder.reactComponent(handler: ReactComponentProps.() -> Unit): ReactElement { + return child(ReactComponent::class) { + this.attrs(handler) + } +} -- cgit