Support child nodes of dropdown component

1 files changed, 131 insertions, 28 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index 57890a81..f2784e5a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -4,6 +4,7 @@ import com.github.snabbdom.VNode
 import org.w3c.dom.CustomEvent
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
+import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.html.BUTTONSIZE
 import pl.treksoft.kvision.html.BUTTONSTYLE
 import pl.treksoft.kvision.html.Button
@@ -12,6 +13,7 @@ import pl.treksoft.kvision.html.Link
 import pl.treksoft.kvision.html.ListTag
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.snabbdom.StringBoolPair
 import pl.treksoft.kvision.snabbdom.StringPair
 import pl.treksoft.kvision.snabbdom.obj
 
@@ -21,42 +23,72 @@ enum class DD(val POS: String) {
     SEPARATOR("DD#SEPARATOR")
 }
 
-open class DropDown(text: String, elements: List<StringPair>, icon: String? = null,
+open class DropDown(text: String, elements: List<StringPair>? = null, icon: String? = null,
                     style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, size: BUTTONSIZE? = null,
                     block: Boolean = false, disabled: Boolean = false, image: ResString? = null,
                     dropup: Boolean = false, classes: Set<String> = setOf()) : Container(classes) {
+    var text
+        get() = button.text
+        set(value) {
+            button.text = value
+        }
+    var elements = elements
+        set(value) {
+            field = elements
+            setChildrenFromElements()
+        }
+    var icon
+        get() = button.icon
+        set(value) {
+            button.icon = value
+        }
+    var style
+        get() = button.style
+        set(value) {
+            button.style = value
+        }
+    var size
+        get() = button.size
+        set(value) {
+            button.size = value
+        }
+    var block
+        get() = button.block
+        set(value) {
+            button.block = value
+        }
+    var disabled
+        get() = button.disabled
+        set(value) {
+            button.disabled = value
+        }
+    var image
+        get() = button.image
+        set(value) {
+            button.image = value
+        }
+    var dropup = dropup
+        set(value) {
+            field = value
+            refresh()
+        }
+
     val idc = "kv_dropdown_" + counter
     val button: DropDownButton = DropDownButton(idc, text, icon, style, size, block,
             disabled, image, setOf("dropdown"))
     val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu"))
 
     init {
-        this.addCssClass(if (dropup) "dropup" else "dropdown")
-        val children = elements.map {
-            when (it.second) {
-                DD.HEADER.POS -> Tag(TAG.LI, it.first, classes = setOf("dropdown-header"))
-                DD.SEPARATOR.POS -> {
-                    val tag = Tag(TAG.LI, it.first, classes = setOf("divider"))
-                    tag.role = "separator"
-                    tag
-                }
-                DD.DISABLED.POS -> {
-                    val tag = Tag(TAG.LI, classes = setOf("disabled"))
-                    tag.add(Link(it.first, "#"))
-                    tag
-                }
-                else -> Link(it.first, it.second)
-            }
-        }
         button.setEventListener {
             click = {
-                list.getElementJQueryD().dropdown("toggle")
+                toggle()
             }
         }
 
-        list.addAll(children)
-        this.add(button)
-        this.add(list)
+        list.hide()
+        setChildrenFromElements()
+        this.addInternal(button)
+        this.addInternal(list)
         counter++
     }
 
@@ -64,27 +96,74 @@ open class DropDown(text: String, elements: List<StringPair>, icon: String? = nu
         var counter = 0
     }
 
+    override fun add(child: Widget) {
+        list.add(child)
+    }
+
+    override fun addAll(children: List<Widget>) {
+        list.addAll(children)
+    }
+
+    private fun setChildrenFromElements() {
+        val elems = elements
+        if (elems != null) {
+            val c = elems.map {
+                when (it.second) {
+                    DD.HEADER.POS -> Tag(TAG.LI, it.first, classes = setOf("dropdown-header"))
+                    DD.SEPARATOR.POS -> {
+                        val tag = Tag(TAG.LI, it.first, classes = setOf("divider"))
+                        tag.role = "separator"
+                        tag
+                    }
+                    DD.DISABLED.POS -> {
+                        val tag = Tag(TAG.LI, classes = setOf("disabled"))
+                        tag.add(Link(it.first, "#"))
+                        tag
+                    }
+                    else -> Link(it.first, it.second)
+                }
+            }
+            list.addAll(c)
+        } else {
+            list.removeAll()
+        }
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
     override fun afterInsert(node: VNode) {
         this.getElementJQuery()?.on("show.bs.dropdown", { _, _ ->
             val event = CustomEvent("showBsDropdown", obj({ detail = button }))
-            this.getElement()?.dispatchEvent(event) as Any
+            this.getElement()?.dispatchEvent(event)
         })
         this.getElementJQuery()?.on("shown.bs.dropdown", { _, _ ->
             val event = CustomEvent("shownBsDropdown", obj({ detail = button }))
-            this.getElement()?.dispatchEvent(event) as Any
+            this.getElement()?.dispatchEvent(event)
         })
         this.getElementJQuery()?.on("hide.bs.dropdown", { _, _ ->
             val event = CustomEvent("hideBsDropdown", obj({ detail = button }))
-            this.getElement()?.dispatchEvent(event) as Any
+            this.getElement()?.dispatchEvent(event)
         })
         this.getElementJQuery()?.on("hidden.bs.dropdown", { _, _ ->
+            list.visible = false
             val event = CustomEvent("hiddenBsDropdown", obj({ detail = button }))
-            this.getElement()?.dispatchEvent(event) as Any
+            this.getElement()?.dispatchEvent(event)
         })
     }
 
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (dropup)
+            cl.add("dropup" to true)
+        else
+            cl.add("dropdown" to true)
+        return cl
+    }
+
     open fun toggle() {
-        list.getElementJQueryD().dropdown("toggle")
+        if (list.visible)
+            list.hide()
+        else
+            list.show()
     }
 }
 
@@ -103,9 +182,33 @@ open class DropDownButton(id: String, text: String, icon: String? = null, style:
     }
 }
 
-open class DropDownListTag(val ariaId: String, classes: Set<String> = setOf()) : ListTag(LIST.UL, null,
+open class DropDownListTag(private val ariaId: String, classes: Set<String> = setOf()) : ListTag(LIST.UL, null,
         false, classes) {
+
     override fun getSnAttrs(): List<StringPair> {
         return super.getSnAttrs() + listOf("aria-labelledby" to ariaId)
     }
+
+    override fun hide() {
+        if (visible) hideInternal()
+        super.hide()
+    }
+
+    override fun afterInsert(node: VNode) {
+        if (visible) showInternal()
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    private fun showInternal() {
+        if (getElementJQueryD()?.`is`(":hidden")) {
+            getElementJQueryD()?.dropdown("toggle")
+        }
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    private fun hideInternal() {
+        if (!getElementJQueryD()?.`is`(":hidden")) {
+            getElementJQueryD()?.dropdown("toggle")
+        }
+    }
 }