diff options
9 files changed, 449 insertions, 1 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt index 33ef2cb7..897daa60 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt @@ -65,7 +65,14 @@ enum class TAG(internal val tagName: String) { VAR("var"), SAMP("samp"), SPAN("span"), - LI("li") + LI("li"), + + CAPTION("caption"), + THEAD("thead"), + TH("th"), + TBODY("tbody"), + TR("tr"), + TD("td") } /** diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt b/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt new file mode 100644 index 00000000..ea59ed81 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/table/Cell.kt @@ -0,0 +1,50 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.table + +import pl.treksoft.kvision.html.Align +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag + +/** + * HTML table cell component. + * + * @constructor + * @param text text content of the cell + * @param rich determines if [text] can contain HTML code + * @param align text align + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class Cell( + text: String? = null, + rich: Boolean = false, + align: Align? = null, + classes: Set<String> = setOf(), + init: (Cell.() -> Unit)? = null +) : Tag(TAG.TD, text, rich, align, classes) { + + init { + init?.invoke(this) + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Row.cell( + text: String? = null, + rich: Boolean = false, + align: Align? = null, + classes: Set<String> = setOf(), init: (Cell.() -> Unit)? = null + ): Cell { + val cell = Cell(text, rich, align, classes, init) + this.add(cell) + return cell + } + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt b/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt new file mode 100644 index 00000000..26ea24d2 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/table/HeaderCell.kt @@ -0,0 +1,50 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.table + +import pl.treksoft.kvision.html.Align +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag + +/** + * HTML table header cell component. + * + * @constructor + * @param text text content of the cell + * @param rich determines if [text] can contain HTML code + * @param align text align + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class HeaderCell( + text: String? = null, + rich: Boolean = false, + align: Align? = null, + classes: Set<String> = setOf(), + init: (HeaderCell.() -> Unit)? = null +) : Tag(TAG.TH, text, rich, align, classes) { + + init { + init?.invoke(this) + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Row.headerCell( + text: String? = null, + rich: Boolean = false, + align: Align? = null, + classes: Set<String> = setOf(), init: (HeaderCell.() -> Unit)? = null + ): HeaderCell { + val cell = HeaderCell(text, rich, align, classes, init) + this.add(cell) + return cell + } + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Row.kt b/src/main/kotlin/pl/treksoft/kvision/table/Row.kt new file mode 100644 index 00000000..d408f699 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/table/Row.kt @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.table + +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag + +/** + * HTML table row component. + * + * @constructor + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class Row(classes: Set<String> = setOf(), init: (Row.() -> Unit)? = null) : Tag( + TAG.TR, classes = classes +) { + + init { + init?.invoke(this) + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Table.row( + classes: Set<String> = setOf(), init: (Row.() -> Unit)? = null + ): Row { + val row = Row(classes, init) + this.add(row) + return row + } + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/table/Table.kt b/src/main/kotlin/pl/treksoft/kvision/table/Table.kt new file mode 100644 index 00000000..31a0913a --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/table/Table.kt @@ -0,0 +1,174 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.table + +import com.github.snabbdom.VNode +import com.github.snabbdom.h +import pl.treksoft.kvision.core.Component +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringBoolPair +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.utils.snClasses +import pl.treksoft.kvision.utils.snOpt + +/** + * HTML table types. + */ +enum class TableType(internal val type: String) { + STRIPED("table-striped"), + BORDERED("table-bordered"), + HOVER("table-hover"), + CONDENSED("table-condensed") +} + +/** + * HTML table component. + * + * @constructor + * @param headerNames a list of table headers names + * @param types a set of table types + * @param caption table caption + * @param responsive determines if the table is responsive + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class Table( + headerNames: List<String>? = null, + types: Set<TableType> = setOf(), caption: String? = null, responsive: Boolean = false, + classes: Set<String> = setOf(), init: (Table.() -> Unit)? = null +) : SimplePanel(classes + "table") { + + /** + * Table headers names. + */ + var headerNames by refreshOnUpdate(headerNames, { refreshHeaders() }) + /** + * Table types. + */ + var types by refreshOnUpdate(types) + /** + * Table caption. + */ + var caption by refreshOnUpdate(caption) + /** + * Determines if the table is responsive. + */ + var responsive by refreshOnUpdate(responsive) + + private val theadRow = Tag(TAG.TR) + private val thead = Tag(TAG.THEAD).add(theadRow) + private val tbody = Tag(TAG.TBODY) + + init { + refreshHeaders() + @Suppress("LeakingThis") + init?.invoke(this) + } + + private fun refreshHeaders() { + theadRow.removeAll() + headerNames?.forEach { + theadRow.add(HeaderCell(it)) + } + } + + /** + * Adds new header cell to the table. + * @param cell header cell + * @return this table + */ + fun addHeaderCell(cell: HeaderCell): Table { + theadRow.add(cell) + return this + } + + /** + * Removes given header cell from the table. + * @param cell header cell + * @return this table + */ + fun removeHeaderCell(cell: HeaderCell): Table { + theadRow.remove(cell) + return this + } + + /** + * Removes all header cells from table. + * @return this table + */ + fun removeHeaderCells(): Table { + theadRow.removeAll() + return this + } + + override fun render(): VNode { + return if (responsive) { + val opt = snOpt { + `class` = snClasses(listOf("table-responsive" to true)) + } + h("div", opt, arrayOf(render("table", childrenVNodes()))) + } else { + render("table", childrenVNodes()) + } + } + + override fun childrenVNodes(): Array<VNode> { + val captionElement = caption?.let { + Tag(TAG.CAPTION, it) + } + return listOf(captionElement, thead, tbody).mapNotNull { it?.renderVNode() }.toTypedArray() + } + + override fun getSnClass(): List<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + types.forEach { + cl.add(it.type to true) + } + return cl + } + + override fun add(child: Component): SimplePanel { + tbody.add(child) + return this + } + + override fun addAll(children: List<Component>): SimplePanel { + tbody.addAll(children) + return this + } + + override fun remove(child: Component): SimplePanel { + tbody.remove(child) + return this + } + + override fun removeAll(): SimplePanel { + tbody.removeAll() + return this + } + + override fun getChildren(): List<Component> { + return tbody.getChildren() + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.table( + headerNames: List<String>? = null, + types: Set<TableType> = setOf(), caption: String? = null, responsive: Boolean = false, + classes: Set<String> = setOf(), init: (Table.() -> Unit)? = null + ): Table { + val table = + Table(headerNames, types, caption, responsive, classes, init) + this.add(table) + return table + } + } +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/CellSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/CellSpec.kt new file mode 100644 index 00000000..7f39f133 --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/table/CellSpec.kt @@ -0,0 +1,25 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.table + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.table.Cell +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class CellSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test") + val cell = Cell("This is a cell") + root.add(cell) + val element = document.getElementById("test") + assertEqualsHtml("<td>This is a cell</td>", element?.innerHTML, "Should render correct table cell") + } + } + +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/HeaderCellSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/HeaderCellSpec.kt new file mode 100644 index 00000000..ef417fc8 --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/table/HeaderCellSpec.kt @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.table + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.table.HeaderCell +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class HeaderCellSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test") + val cell = HeaderCell("This is a header cell") + root.add(cell) + val element = document.getElementById("test") + assertEqualsHtml( + "<th>This is a header cell</th>", + element?.innerHTML, + "Should render correct table header cell" + ) + } + } + +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/RowSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/RowSpec.kt new file mode 100644 index 00000000..04cd5a2d --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/table/RowSpec.kt @@ -0,0 +1,28 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.table + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.table.Cell.Companion.cell +import pl.treksoft.kvision.table.Row +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class RowSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test") + val row = Row { + cell("A") + } + root.add(row) + val element = document.getElementById("test") + assertEqualsHtml("<tr><td>A</td></tr>", element?.innerHTML, "Should render correct table row") + } + } + +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt new file mode 100644 index 00000000..b544a346 --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt @@ -0,0 +1,46 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.table + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.table.Cell.Companion.cell +import pl.treksoft.kvision.table.Row.Companion.row +import pl.treksoft.kvision.table.Table +import pl.treksoft.kvision.table.TableType +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class TableSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test") + val table = Table(listOf("a", "b")) { + row { + cell("A") + cell("B") + } + } + root.add(table) + val element = document.getElementById("test") + assertEqualsHtml( + "<table class=\"table\"><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>", + element?.innerHTML, + "Should render correct table" + ) + table.caption = "Caption" + table.responsive = true + table.types = setOf(TableType.BORDERED) + val element2 = document.getElementById("test") + assertEqualsHtml( + "<div class=\"table-responsive\"><table class=\"table table-bordered\"><caption>Caption</caption><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></div>", + element2?.innerHTML, + "Should render correct responsive table" + ) + } + } + +} |