Skip to content
This repository was archived by the owner on Feb 10, 2023. It is now read-only.

Commit 1b16cae

Browse files
cquirozcquiroz
authored
Merge pull request #112 from cquiroz/gridrow-cols
Add missing columns attribute to GridRow
2 parents 82eddbf + 3b47a95 commit 1b16cae

File tree

4 files changed

+62
-28
lines changed

4 files changed

+62
-28
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes
22

3+
## 0.4.6
4+
5+
* Add columns attribute to GridRow
6+
37
## 0.4.5
48

59
* Update scalajs-react-common

‎facade/src/main/scala/react/semanticui/collections/grid/GridRow.scala

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package react.semanticui.collections.grid
22

33
import scala.scalajs.js
44
import js.annotation._
5+
import js.|
56
import japgolly.scalajs.react._
67
import japgolly.scalajs.react.raw.React
78
import react.common.style._
@@ -11,18 +12,19 @@ import react.semanticui.{ raw => suiraw }
1112
import japgolly.scalajs.react.vdom.TagMod
1213

1314
final case class GridRow(
14-
as: js.UndefOr[AsC] = js.undefined,
15-
centered: js.UndefOr[Boolean] = js.undefined,
16-
className: js.UndefOr[String] = js.undefined,
17-
clazz: js.UndefOr[Css] = js.undefined,
18-
color: js.UndefOr[SemanticColor] = js.undefined,
19-
divided: js.UndefOr[Boolean] = js.undefined,
20-
only: js.UndefOr[GridOnly] = js.undefined,
21-
reversed: js.UndefOr[GridReversed] = js.undefined,
22-
stretched: js.UndefOr[Boolean] = js.undefined,
23-
textAlign: js.UndefOr[SemanticTextAlignment] = js.undefined,
24-
verticalAlign: js.UndefOr[SemanticVerticalAlignment] = js.undefined,
25-
override val modifiers: Seq[TagMod] = Seq.empty
15+
as: js.UndefOr[AsC] = js.undefined,
16+
centered: js.UndefOr[Boolean] = js.undefined,
17+
className: js.UndefOr[String] = js.undefined,
18+
clazz: js.UndefOr[Css] = js.undefined,
19+
color: js.UndefOr[SemanticColor] = js.undefined,
20+
columns: js.UndefOr[SemanticWidth | GridColumns] = js.undefined,
21+
divided: js.UndefOr[Boolean] = js.undefined,
22+
only: js.UndefOr[GridOnly] = js.undefined,
23+
reversed: js.UndefOr[GridReversed] = js.undefined,
24+
stretched: js.UndefOr[Boolean] = js.undefined,
25+
textAlign: js.UndefOr[SemanticTextAlignment] = js.undefined,
26+
verticalAlign: js.UndefOr[SemanticVerticalAlignment] = js.undefined,
27+
override val modifiers: Seq[TagMod] = Seq.empty
2628
) extends GenericFnComponentPAC[GridRow.GridRowProps, GridRow] {
2729
override protected def cprops = GridRow.props(this)
2830
override protected val component = GridRow.component
@@ -60,7 +62,7 @@ object GridRow {
6062
var color: js.UndefOr[suiraw.SemanticCOLORS] = js.native
6163

6264
/** Represents column count per line in Row. */
63-
var columns: js.UndefOr[suiraw.SemanticWIDTHS] = js.native // | 'equal'
65+
var columns: js.UndefOr[String] = js.native // | 'equal'
6466

6567
/** A row can have dividers between its columns. */
6668
var divided: js.UndefOr[Boolean] = js.native
@@ -87,6 +89,7 @@ object GridRow {
8789
q.className,
8890
q.clazz,
8991
q.color,
92+
q.columns,
9093
q.divided,
9194
q.only,
9295
q.reversed,
@@ -95,23 +98,28 @@ object GridRow {
9598
q.verticalAlign)
9699

97100
def rawprops(
98-
as: js.UndefOr[AsC] = js.undefined,
99-
centered: js.UndefOr[Boolean] = js.undefined,
100-
className: js.UndefOr[String] = js.undefined,
101-
clazz: js.UndefOr[Css] = js.undefined,
102-
color: js.UndefOr[SemanticColor] = js.undefined,
103-
divided: js.UndefOr[Boolean] = js.undefined,
104-
only: js.UndefOr[GridOnly] = js.undefined,
105-
reversed: js.UndefOr[GridReversed] = js.undefined,
106-
stretched: js.UndefOr[Boolean] = js.undefined,
107-
textAlign: js.UndefOr[SemanticTextAlignment] = js.undefined,
108-
verticalAlign: js.UndefOr[SemanticVerticalAlignment] = js.undefined
101+
as: js.UndefOr[AsC] = js.undefined,
102+
centered: js.UndefOr[Boolean] = js.undefined,
103+
className: js.UndefOr[String] = js.undefined,
104+
clazz: js.UndefOr[Css] = js.undefined,
105+
color: js.UndefOr[SemanticColor] = js.undefined,
106+
columns: js.UndefOr[SemanticWidth | GridColumns] = js.undefined,
107+
divided: js.UndefOr[Boolean] = js.undefined,
108+
only: js.UndefOr[GridOnly] = js.undefined,
109+
reversed: js.UndefOr[GridReversed] = js.undefined,
110+
stretched: js.UndefOr[Boolean] = js.undefined,
111+
textAlign: js.UndefOr[SemanticTextAlignment] = js.undefined,
112+
verticalAlign: js.UndefOr[SemanticVerticalAlignment] = js.undefined
109113
): GridRowProps = {
110114
val p = as.toJsObject[GridRowProps]
111-
p.as = as.toJs
112-
p.centered = centered
113-
p.className = (className, clazz).toJs
114-
p.color = color.toJs
115+
p.as = as.toJs
116+
p.centered = centered
117+
p.className = (className, clazz).toJs
118+
p.color = color.toJs
119+
p.columns = columns.map((_: Any) match {
120+
case s: GridColumns => s.toJs
121+
case s => s.asInstanceOf[SemanticWidth].toJs
122+
})
115123
p.divided = divided
116124
p.only = only.toJs
117125
p.reversed = reversed.toJs

‎facade/src/main/scala/react/semanticui/collections/grid/package.scala

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,13 @@ package grid {
8282
case object NotDivided extends GridDivided
8383
case object Vertically extends GridDivided
8484
}
85+
86+
sealed trait GridColumns extends Product with Serializable
87+
object GridColumns {
88+
implicit val enum: EnumValue[GridColumns] = EnumValue.toLowerCaseString
89+
90+
case object Equal extends GridColumns
91+
}
8592
}
8693

8794
package object grid

‎facade/src/test/scala/react/semanticui/collections/grid/GridRowTests.scala

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ package react.semanticui.collections.grid
33
import utest._
44
import japgolly.scalajs.react.test._
55
import japgolly.scalajs.react.vdom.html_<^._
6+
import react.semanticui.widths._
67

78
object GridRowTests extends TestSuite {
89
val tests = Tests {
@@ -20,5 +21,19 @@ object GridRowTests extends TestSuite {
2021
assert(mountNode.innerHTML == """<div class="row"><div>abc</div></div>""")
2122
}
2223
}
24+
test("columns") {
25+
val gridRow = GridRow(columns = Three)
26+
ReactTestUtils.withNewBodyElement { mountNode =>
27+
gridRow.renderIntoDOM(mountNode)
28+
assert(mountNode.innerHTML == """<div class="three column row"></div>""")
29+
}
30+
}
31+
test("columns equal") {
32+
val gridRow = GridRow(columns = GridColumns.Equal)
33+
ReactTestUtils.withNewBodyElement { mountNode =>
34+
gridRow.renderIntoDOM(mountNode)
35+
assert(mountNode.innerHTML == """<div class="equal width row"></div>""")
36+
}
37+
}
2338
}
2439
}

0 commit comments

Comments
 (0)