Form panel styling abstraction.

5 files changed, 68 insertions, 29 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
index f75007c0..ece72189 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
@@ -176,6 +176,30 @@ interface FormControl : Component {
      * Makes the input element blur.
      */
     fun blur()
+
+    /**
+     * Style form control element for vertical form panel.
+     */
+    fun styleForVerticalFormPanel() {
+    }
+
+    /**
+     * Style form control element for horizontal form panel.
+     */
+    fun styleForHorizontalFormPanel() {
+        addCssClass("row")
+        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-form-label")
+        input.addCssClass("col-sm-10")
+        invalidFeedback.addCssClass("offset-sm-2")
+        invalidFeedback.addCssClass("col-sm-10")
+    }
+
+    /**
+     * Style form control element for inline form panel.
+     */
+    fun styleForInlineFormPanel() {
+    }
 }
 
 /**
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 41e8010c..e8fa0a42 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -28,9 +28,6 @@ import kotlinx.serialization.serializer
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
-import pl.treksoft.kvision.form.check.CheckBox
-import pl.treksoft.kvision.form.check.Radio
-import pl.treksoft.kvision.form.check.RadioGroup
 import pl.treksoft.kvision.html.Div
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.types.KFile
@@ -215,31 +212,10 @@ open class FormPanel<K : Any>(
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        if (type == FormType.HORIZONTAL) {
-            if (control is CheckBox || control is Radio) {
-                control.addCssClass("form-group")
-                control.addSurroundingCssClass("row")
-                control.addCssClass("offset-sm-2")
-                control.addCssClass("col-sm-10")
-            } else if (control is RadioGroup) {
-                control.addCssClass("row")
-                control.flabel.addCssClass("col-sm-2")
-                control.flabel.addCssClass("col-form-label")
-                control.container.addCssClass("col-sm-10")
-                control.invalidFeedback.addCssClass("offset-sm-2")
-                control.invalidFeedback.addCssClass("col-sm-10")
-            } else {
-                control.addCssClass("row")
-                control.flabel.addCssClass("col-sm-2")
-                control.flabel.addCssClass("col-form-label")
-                control.input.addCssClass("col-sm-10")
-                control.invalidFeedback.addCssClass("offset-sm-2")
-                control.invalidFeedback.addCssClass("col-sm-10")
-            }
-        } else {
-            if (control is CheckBox || control is Radio) {
-                control.addCssClass("form-group")
-            }
+        when (type) {
+            FormType.INLINE -> control.styleForInlineFormPanel()
+            FormType.HORIZONTAL -> control.styleForHorizontalFormPanel()
+            else -> control.styleForVerticalFormPanel()
         }
         super.add(control)
         form.addInternal(key, control, required, requiredMessage, validatorMessage, validator)
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
index f011b1cb..cb962850 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
@@ -174,6 +174,21 @@ open class CheckBox(
         input.blur()
     }
 
+    override fun styleForHorizontalFormPanel() {
+        addCssClass("form-group")
+        addSurroundingCssClass("row")
+        addCssClass("offset-sm-2")
+        addCssClass("col-sm-10")
+    }
+
+    override fun styleForInlineFormPanel() {
+        addCssClass("form-group")
+    }
+
+    override fun styleForVerticalFormPanel() {
+        addCssClass("form-group")
+    }
+
     companion object {
         internal var counter = 0
 
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
index 7ab509c4..791a15dc 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
@@ -190,6 +190,21 @@ open class Radio(
         input.blur()
     }
 
+    override fun styleForHorizontalFormPanel() {
+        addCssClass("form-group")
+        addSurroundingCssClass("row")
+        addCssClass("offset-sm-2")
+        addCssClass("col-sm-10")
+    }
+
+    override fun styleForInlineFormPanel() {
+        addCssClass("form-group")
+    }
+
+    override fun styleForVerticalFormPanel() {
+        addCssClass("form-group")
+    }
+
     companion object {
         internal var counter = 0
 
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
index b1a0a703..14b426a3 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -107,7 +107,7 @@ open class RadioGroup(
         get() = super.validatorError
         set(value) {
             super.validatorError = value
-            if (value!=null) {
+            if (value != null) {
                 container.addCssClass("is-invalid")
             } else {
                 container.removeCssClass("is-invalid")
@@ -216,6 +216,15 @@ open class RadioGroup(
         container.getChildren().filterIsInstance<Radio>().firstOrNull()?.blur()
     }
 
+    override fun styleForHorizontalFormPanel() {
+        addCssClass("row")
+        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-form-label")
+        container.addCssClass("col-sm-10")
+        invalidFeedback.addCssClass("offset-sm-2")
+        invalidFeedback.addCssClass("col-sm-10")
+    }
+
     companion object {
         internal var counter = 0