Refactoring styled component

Form controls: input, password, checkbox

7 files changed, 446 insertions, 0 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt
new file mode 100644
index 00000000..2d7b3276
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt
@@ -0,0 +1,110 @@
+package pl.treksoft.kvision.form
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.SnOn
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+
+enum class CHECKBOXSTYLE(val className: String) {
+    DEFAULT("checkbox-default"),
+    PRIMARY("checkbox-primary"),
+    SUCCESS("checkbox-success"),
+    INFO("checkbox-info"),
+    WARNING("checkbox-warning"),
+    DANGER("checkbox-danger"),
+}
+
+open class CheckBox(value: Boolean = false, name: String? = null, style: CHECKBOXSTYLE? = null,
+                    circled: Boolean = false, inline: Boolean = false, disabled: Boolean = false,
+                    label: String? = null, rich: Boolean = false) : Container(setOf("checkbox")), BoolFormField {
+
+    override var value
+        get() = input.value
+        set(value) {
+            input.value = value
+        }
+    var startValue
+        get() = input.startValue
+        set(value) {
+            input.startValue = value
+        }
+    var name
+        get() = input.name
+        set(value) {
+            input.name = value
+        }
+    override var disabled
+        get() = input.disabled
+        set(value) {
+            input.disabled = value
+        }
+    var label
+        get() = flabel.text
+        set(value) {
+            flabel.text = value
+        }
+    var rich
+        get() = flabel.rich
+        set(value) {
+            flabel.rich = value
+        }
+    var style = style
+        set(value) {
+            field = value
+            refresh()
+        }
+    var circled = circled
+        set(value) {
+            field = value
+            refresh()
+        }
+    var inline = inline
+        set(value) {
+            field = value
+            refresh()
+        }
+    override var size
+        get() = input.size
+        set(value) {
+            input.size = value
+        }
+
+    private val idc = "kv_form_checkbox_" + counter
+    val input: CheckBoxInput = CheckBoxInput(value, name, disabled, idc, setOf("styled"))
+    val flabel: FieldLabel = FieldLabel(idc, label, rich)
+
+    init {
+        this.addInternal(input)
+        this.addInternal(flabel)
+        counter++
+    }
+
+    companion object {
+        var counter = 0
+    }
+
+    @Suppress("UNCHECKED_CAST")
+    override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
+        input.setEventListener<T>(block)
+        return this
+    }
+
+    override fun setEventListener(block: SnOn<Widget>.() -> Unit): Widget {
+        input.setEventListener(block)
+        return this
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        style?.let {
+            cl.add(it.className to true)
+        }
+        if (circled) {
+            cl.add("checkbox-circle" to true)
+        }
+        if (inline) {
+            cl.add("checkbox-inline" to true)
+        }
+        return cl
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt
new file mode 100644
index 00000000..1893668b
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt
@@ -0,0 +1,78 @@
+package pl.treksoft.kvision.form
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+
+open class CheckBoxInput(override var value: Boolean = false,
+                         name: String? = null, disabled: Boolean = false, id: String? = null,
+                         classes: Set<String> = setOf()) : Widget(classes), BoolFormField {
+
+    init {
+        this.id = id
+    }
+
+    @Suppress("LeakingThis")
+    var startValue: Boolean = value
+        set(value) {
+            field = value
+            this.value = value
+            refresh()
+        }
+    var name: String? = name
+        set(value) {
+            field = value
+            refresh()
+        }
+    override var disabled: Boolean = disabled
+        set(value) {
+            field = value
+            refresh()
+        }
+    override var size: INPUTSIZE? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        return kvh("input")
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        size?.let {
+            cl.add(it.className to true)
+        }
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        sn.add("type" to "checkbox")
+        if (startValue) {
+            sn.add("checked" to "checked")
+        }
+        name?.let {
+            sn.add("name" to it)
+        }
+        if (disabled) {
+            sn.add("disabled" to "disabled")
+        }
+        return sn
+    }
+
+    override fun afterInsert(node: VNode) {
+        this.getElementJQuery()?.on("change", { _, _ ->
+            val v = getElementJQuery()?.prop("checked") as Boolean?
+            value = (v == true)
+            true
+        })
+        this.getElementJQuery()?.on("click", { _, _ ->
+            val v = getElementJQuery()?.prop("checked") as Boolean?
+            value = (v == true)
+            true
+        })
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
new file mode 100644
index 00000000..92b014d4
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
@@ -0,0 +1,14 @@
+package pl.treksoft.kvision.form
+
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.snabbdom.StringPair
+
+open class FieldLabel(private val forId: String, text: String? = null, rich: Boolean = false) : Tag(TAG.LABEL,
+        text, rich) {
+
+    override fun getSnAttrs(): List<StringPair> {
+        return super.getSnAttrs() + ("for" to forId)
+    }
+
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt
new file mode 100644
index 00000000..dd7ae745
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt
@@ -0,0 +1,27 @@
+package pl.treksoft.kvision.form
+
+enum class INPUTSIZE(val className: String) {
+    LARGE("input-lg"),
+    SMALL("input-sm")
+}
+
+interface FormField {
+    var disabled: Boolean
+    var size: INPUTSIZE?
+    fun getValueAsString(): String?
+}
+
+interface StringFormField : FormField {
+    var value: String?
+    override fun getValueAsString(): String? = value
+}
+
+interface NumberFormField : FormField {
+    var value: Number?
+    override fun getValueAsString(): String? = value?.toString()
+}
+
+interface BoolFormField : FormField {
+    var value: Boolean
+    override fun getValueAsString(): String? = value.toString()
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Password.kt b/src/main/kotlin/pl/treksoft/kvision/form/Password.kt
new file mode 100644
index 00000000..86a862cd
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/Password.kt
@@ -0,0 +1,6 @@
+package pl.treksoft.kvision.form
+
+open class Password(placeholder: String? = null, value: String? = null,
+                    name: String? = null, maxlength: Int? = null, label: String? = null, rich: Boolean = false,
+                    disabled: Boolean = false) : Text(TEXTINPUTTYPE.PASSWORD, placeholder, value, name, maxlength,
+        label, rich, disabled)
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Text.kt b/src/main/kotlin/pl/treksoft/kvision/form/Text.kt
new file mode 100644
index 00000000..0980099f
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/Text.kt
@@ -0,0 +1,75 @@
+package pl.treksoft.kvision.form
+
+import pl.treksoft.kvision.core.Container
+
+
+open class Text(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, placeholder: String? = null, value: String? = null,
+                name: String? = null, maxlength: Int? = null, label: String? = null, rich: Boolean = false,
+                disabled: Boolean = false) : Container(setOf("form-group")), StringFormField {
+
+    override var value
+        get() = input.value
+        set(value) {
+            input.value = value
+        }
+    var startValue
+        get() = input.startValue
+        set(value) {
+            input.startValue = value
+        }
+    var type
+        get() = input.type
+        set(value) {
+            input.type = value
+        }
+    var placeholder
+        get() = input.placeholder
+        set(value) {
+            input.placeholder = value
+        }
+    var name
+        get() = input.name
+        set(value) {
+            input.name = value
+        }
+    var maxlength
+        get() = input.maxlength
+        set(value) {
+            input.maxlength = value
+        }
+    override var disabled
+        get() = input.disabled
+        set(value) {
+            input.disabled = value
+        }
+    var label
+        get() = flabel.text
+        set(value) {
+            flabel.text = value
+        }
+    var rich
+        get() = flabel.rich
+        set(value) {
+            flabel.rich = value
+        }
+    override var size
+        get() = input.size
+        set(value) {
+            input.size = value
+        }
+
+    private val idc = "kv_form_text_" + counter
+    internal val input: TextInput = TextInput(type, placeholder, value, name, maxlength, disabled, idc)
+    internal val flabel: FieldLabel = FieldLabel(idc, label, rich)
+
+    init {
+        this.addInternal(flabel)
+        this.addInternal(input)
+        counter++
+    }
+
+    companion object {
+        var counter = 0
+    }
+
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt
new file mode 100644
index 00000000..a87cb164
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt
@@ -0,0 +1,136 @@
+package pl.treksoft.kvision.form
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+
+enum class TEXTINPUTTYPE(val type: String) {
+    TEXT("text"),
+    PASSWORD("password")
+}
+
+class TextInput(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, placeholder: String? = null,
+                override var value: String? = null, name: String? = null, maxlength: Int? = null,
+                disabled: Boolean = false, id: String? = null,
+                classes: Set<String> = setOf()) : Widget(classes + "form-control"), StringFormField {
+    init {
+        this.id = id
+    }
+
+    @Suppress("LeakingThis")
+    var startValue: String? = value
+        set(value) {
+            field = value
+            this.value = value
+            refresh()
+        }
+    var type: TEXTINPUTTYPE = type
+        set(value) {
+            field = value
+            refresh()
+        }
+    var placeholder: String? = placeholder
+        set(value) {
+            field = value
+            refresh()
+        }
+    var name: String? = name
+        set(value) {
+            field = value
+            refresh()
+        }
+    var maxlength: Int? = maxlength
+        set(value) {
+            field = value
+            refresh()
+        }
+    override var disabled: Boolean = disabled
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    var autocomplete: Boolean? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+    var autofocus: Boolean? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+    var readonly: Boolean? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+    override var size: INPUTSIZE? = null
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun render(): VNode {
+        return kvh("input")
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        size?.let {
+            cl.add(it.className to true)
+        }
+        return cl
+    }
+
+    @Suppress("ComplexMethod")
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        sn.add("type" to type.type)
+        placeholder?.let {
+            sn.add("placeholder" to it)
+        }
+        startValue?.let {
+            sn.add("value" to it)
+        }
+        name?.let {
+            sn.add("name" to it)
+        }
+        autocomplete?.let {
+            if (it) {
+                sn.add("autocomplete" to "on")
+            } else {
+                sn.add("autocomplete" to "off")
+            }
+        }
+        autofocus?.let {
+            if (it) {
+                sn.add("autofocus" to "autofocus")
+            }
+        }
+        maxlength?.let {
+            sn.add("maxlength" to ("" + it))
+        }
+        readonly?.let {
+            if (it) {
+                sn.add("readonly" to "readonly")
+            }
+        }
+        if (disabled) {
+            sn.add("disabled" to "disabled")
+        }
+        return sn
+    }
+
+    override fun afterInsert(node: VNode) {
+        this.getElementJQuery()?.on("input", { _, _ ->
+            val v = getElementJQuery()?.`val`() as String?
+            if (v != null && v.isNotEmpty()) {
+                value = v
+            } else {
+                value = null
+            }
+        })
+    }
+}