New grid component (old renamed to ResponsiveGridPanel). Flex, HPanel, VPanel and DockPanel components. Cache for components attributes.

1 files changed, 157 insertions, 0 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
new file mode 100644
index 00000000..781f8dcd
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
@@ -0,0 +1,157 @@
+package pl.treksoft.kvision.panel
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.core.WidgetWrapper
+import pl.treksoft.kvision.snabbdom.StringPair
+
+enum class FLEXDIR(val dir: String) {
+    ROW("row"),
+    ROWREV("row-reverse"),
+    COLUMN("column"),
+    COLUMNREV("column-reverse")
+}
+
+enum class FLEXWRAP(val wrap: String) {
+    NOWRAP("nowrap"),
+    WRAP("wrap"),
+    WRAPREV("wrap-reverse")
+}
+
+enum class FLEXJUSTIFY(val justify: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    SPACEBETWEEN("space-between"),
+    SPACEAROUND("space-around"),
+    SPACEEVENLY("space-evenly")
+}
+
+enum class FLEXALIGNITEMS(val alignItems: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    BASELINE("baseline"),
+    STRETCH("stretch")
+}
+
+enum class FLEXALIGNCONTENT(val alignContent: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    SPACEBETWEEN("space-between"),
+    SPACEAROUND("space-around"),
+    STRETCH("stretch")
+}
+
+open class FlexPanel(direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify: FLEXJUSTIFY? = null,
+                     alignItems: FLEXALIGNITEMS? = null, alignContent: FLEXALIGNCONTENT? = null,
+                     classes: Set<String> = setOf()) : Container(classes) {
+    var direction = direction
+        set(value) {
+            field = value
+            refresh()
+        }
+    var wrap = wrap
+        set(value) {
+            field = value
+            refresh()
+        }
+    var justify = justify
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignItems = alignItems
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignContent = alignContent
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    @Suppress("LongParameterList")
+    fun add(child: Widget, order: Int? = null, grow: Int? = null, shrink: Int? = null,
+            basis: Int? = null, alignSelf: FLEXALIGNITEMS? = null, classes: Set<String> = setOf()): Container {
+        return addInternal(FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes))
+    }
+
+    override fun add(child: Widget): Container {
+        return add(child, null)
+    }
+
+    override fun addAll(children: List<Widget>): Container {
+        children.forEach { add(it, null) }
+        return this
+    }
+
+    override fun remove(child: Widget): Container {
+        children.find { (it as FlexWrapper).delegate == child }?.let {
+            super.remove(it)
+            it.dispose()
+        }
+        return this
+    }
+
+    override fun removeAll(): Container {
+        children.map {
+            it.clearParent()
+            it.dispose()
+        }
+        children.clear()
+        refresh()
+        return this
+    }
+
+    override fun getSnStyle(): List<StringPair> {
+        val snstyle = super.getSnStyle().toMutableList()
+        snstyle.add("display" to "flex")
+        direction?.let {
+            snstyle.add("flex-direction" to it.dir)
+        }
+        wrap?.let {
+            snstyle.add("flex-wrap" to it.wrap)
+        }
+        justify?.let {
+            snstyle.add("justify-content" to it.justify)
+        }
+        alignItems?.let {
+            snstyle.add("align-items" to it.alignItems)
+        }
+        alignContent?.let {
+            snstyle.add("align-content" to it.alignContent)
+        }
+        println("abc")
+        return snstyle
+    }
+}
+
+class FlexWrapper(delegate: Widget, private val order: Int? = null, private val grow: Int? = null,
+                  private val shrink: Int? = null, private val basis: Int? = null,
+                  private val alignSelf: FLEXALIGNITEMS? = null,
+                  classes: Set<String> = setOf()) : WidgetWrapper(delegate, classes) {
+
+    override fun getSnStyle(): List<StringPair> {
+        val snstyle = super.getSnStyle().toMutableList()
+        order?.let {
+            snstyle.add("order" to "$it")
+        }
+        grow?.let {
+            snstyle.add("flex-grow" to "$it")
+        }
+        shrink?.let {
+            snstyle.add("flex-shrink" to "$it")
+        }
+        basis?.let {
+            snstyle.add("flex-basis" to "$it%")
+        }
+        alignSelf?.let {
+            snstyle.add("align-self" to it.alignItems)
+        }
+        return snstyle
+    }
+
+}