From 822ce8ad4355c3673c0c2debc3df7abb64da5386 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sun, 24 Mar 2019 03:23:38 +0100 Subject: Experimental updatable redux content. --- .../pl/treksoft/kvision/redux/StateBinding.kt | 49 ++++++++++++++++++---- .../pl/treksoft/kvision/redux/StateBindingSpec.kt | 31 +++++++++++++- 2 files changed, 71 insertions(+), 9 deletions(-) (limited to 'kvision-modules') diff --git a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt index 55fcdb34..383e734e 100644 --- a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt @@ -36,30 +36,42 @@ import redux.RAction * @param container a container * @param factory a function which re-creates the view based on the given state */ -class StateBinding( +class StateBinding( store: ReduxStore, private val container: CONT, - private val factory: (CONT.(S) -> Unit) + private val factory: (CONT.(S) -> CONTENT) ) : Widget(setOf()) { init { - container.add(this) - container.factory(store.getState()) + update(store.getState()) store.subscribe { update(it) } } + private var updateState: ((S, CONTENT) -> Unit)? = null + private var content: CONTENT? = null + /** * Updates view from the current state. */ @Suppress("ComplexMethod") fun update(state: S) { singleRender { - container.removeAll() - container.add(this) - container.factory(state) + if (updateState == null || content == null) { + container.removeAll() + container.add(this) + content = container.factory(state) + } else { + content?.let { + updateState?.invoke(state, it) + } + } } } + private fun setUpdateState(updateState: (S, CONTENT) -> Unit) { + this.updateState = updateState + } + companion object { /** * DSL builder extension function. @@ -69,8 +81,29 @@ class StateBinding( fun CONT.stateBinding( store: ReduxStore, factory: (CONT.(S) -> Unit) - ): StateBinding { + ): StateBinding { return StateBinding(store, this, factory) } + + /** + * DSL builder extension function for updateable redux content. + * + * It takes the same parameters as the constructor of the built component. + */ + fun CONT.stateUpdate( + store: ReduxStore, + factory: (CONT.(S) -> CONTENT) + ): Updateable { + return Updateable(StateBinding(store, this, factory)::setUpdateState) + } + } +} + +/** + * A helper class for updateable redux content. + */ +class Updateable(private val setUpdateState: ((S, CONTENT) -> Unit) -> Unit) { + infix fun updateWith(updateState: (S, CONTENT) -> Unit) { + setUpdateState(updateState) } } diff --git a/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt index 1da16e55..0271a956 100644 --- a/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt +++ b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt @@ -26,6 +26,7 @@ import pl.treksoft.kvision.html.Div.Companion.div import pl.treksoft.kvision.panel.Root import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.redux.StateBinding.Companion.stateBinding +import pl.treksoft.kvision.redux.StateBinding.Companion.stateUpdate import pl.treksoft.kvision.redux.createReduxStore import redux.RAction import test.pl.treksoft.kvision.DomSpec @@ -77,4 +78,32 @@ class StateBindingSpec : DomSpec { } } -} \ No newline at end of file + @Test + fun stateUpdate() { + run { + val root = Root("test", true) + val store = createReduxStore(::stateReducer, State(10)) + + val container = SimplePanel() + container.stateUpdate(store) { state -> + div("${state.counter}") + } updateWith { state, d -> + d.content = "${state.counter}" + } + root.add(container) + val element = document.getElementById("test") + assertEqualsHtml( + "
10
", + element?.innerHTML, + "Should render initial state of the container" + ) + store.dispatch(StateAction.Inc) + assertEqualsHtml( + "
11
", + element?.innerHTML, + "Should render changed state of the container" + ) + } + } + +} -- cgit