Merge pull request #164 from cquiroz/dropdown-text

Upgrade SUIR and add DropdownText

Author: cquiroz

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes
 
+## 0.6.1
+
+* Upgrade react-semanticui to 1.1.0
+* Upgrade to react-common 0.9.6
+* Upgrade to scalajs-react 1.7.4
+
 ## 0.6.0
 
 * Upgrade react-semanticui to 1.0.0

build.sbt

@@ -1,7 +1,7 @@
 val reactJS      = "16.13.1"
 val scalaJsReact = "1.7.4"
 val FUILess      = "2.8.6"
-val reactSUI     = "1.0.0"
+val reactSUI     = "1.1.0"
 val Toasts       = "0.6.5"
 
 parallelExecution in (ThisBuild, Test) := false

facade/src/main/scala/react/semanticui/modules/dropdown/DropdownText.scala

@@ -0,0 +1,76 @@
+package react.semanticui.modules.dropdown
+
+import scala.scalajs.js
+import js.annotation._
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.raw.React
+import japgolly.scalajs.react.vdom.html_<^._
+import japgolly.scalajs.react.JsFnComponent
+import react.semanticui._
+import react.semanticui.raw._
+import react.common._
+import japgolly.scalajs.react.vdom.TagMod
+
+final case class DropdownText(
+  as:                     js.UndefOr[AsC] = js.undefined,
+  className:              js.UndefOr[String] = js.undefined,
+  clazz:                  js.UndefOr[Css] = js.undefined,
+  content:                js.UndefOr[ShorthandS[VdomNode]] = js.undefined,
+  override val modifiers: Seq[TagMod] = Seq.empty
+) extends GenericFnComponentPAC[DropdownText.DropdownTextProps, DropdownText] {
+  override protected def cprops    = DropdownText.props(this)
+  override protected val component = DropdownText.component
+  override def addModifiers(modifiers: Seq[TagMod]) = copy(modifiers = this.modifiers ++ modifiers)
+}
+
+object DropdownText {
+  @js.native
+  @JSImport("semantic-ui-react", "DropdownText")
+  object RawComponent extends js.Function1[js.Any, js.Any] {
+    def apply(i: js.Any): js.Any = js.native
+  }
+
+  @js.native
+  trait DropdownTextProps extends js.Object {
+    @JSBracketAccess
+    def apply(key: String): js.Any = js.native
+
+    @JSBracketAccess
+    def update(key: String, v: js.Any): Unit = js.native
+
+    /** An element type to render as (string or function). */
+    var as: js.UndefOr[AsT] = js.native
+
+    /** Primary content. */
+    var children: js.UndefOr[React.Node] = js.native
+
+    /** Additional classes. */
+    var className: js.UndefOr[String] = js.native
+
+    /** Shorthand for primary content. */
+    var content: js.UndefOr[SemanticShorthandContent] = js.native
+
+  }
+
+  def props(q: DropdownText): DropdownTextProps =
+    rawprops(q.as, q.className, q.clazz, q.content)
+
+  def rawprops(
+    as:        js.UndefOr[AsC] = js.undefined,
+    className: js.UndefOr[String] = js.undefined,
+    clazz:     js.UndefOr[Css] = js.undefined,
+    content:   js.UndefOr[ShorthandS[VdomNode]] = js.undefined
+  ): DropdownTextProps = {
+    val p = as.toJsObject[DropdownTextProps]
+    as.toJs.foreach(v => p.as = v)
+    (className, clazz).toJs.foreach(v => p.className = v)
+    content.toJs.foreach(v => p.content = v)
+    p
+  }
+
+  private val component =
+    JsFnComponent[DropdownTextProps, Children.Varargs](RawComponent)
+
+  def apply(children: TagMod*): DropdownText =
+    new DropdownText(modifiers = children)
+}

facade/src/test/scala/react/semanticui/addons/select/SelectTests.scala

@@ -14,7 +14,7 @@ object SelectTests extends TestSuite {
         select.renderIntoDOM(mountNode)
         val html = mountNode.outerHTML
         assert(
-          html == """<div><div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item"><span class="text">def</span></div></div></div></div>"""
+          html == """<div><div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item"><span class="text">def</span></div></div></div></div>"""
         )
       }
     }

facade/src/test/scala/react/semanticui/collections/form/FormDropdownTests.scala

@@ -12,7 +12,7 @@ object FormDropdownTests extends TestSuite {
       ReactTestUtils.withNewBodyElement { mountNode =>
         dropdown.renderIntoDOM(mountNode)
         assert(
-          mountNode.outerHTML == """<div><div class="field"><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div></div>"""
+          mountNode.outerHTML == """<div><div class="field"><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div></div>"""
         )
       }
     }
@@ -24,7 +24,7 @@ object FormDropdownTests extends TestSuite {
         dropdown.renderIntoDOM(mountNode)
         val html = mountNode.outerHTML
         assert(
-          html == """<div><div class="two wide field"><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div></div>"""
+          html == """<div><div class="two wide field"><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div></div>"""
         )
       }
     }

facade/src/test/scala/react/semanticui/collections/form/FormSelectTests.scala

@@ -15,7 +15,7 @@ object FormSelectTests extends TestSuite {
         select.renderIntoDOM(mountNode)
         val html = mountNode.outerHTML
         assert(
-          html == """<div><div class="two wide field"><div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div></div>"""
+          html == """<div><div class="two wide field"><div role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div></div>"""
         )
       }
     }

facade/src/test/scala/react/semanticui/modules/dropdown/DropdownTests.scala

@@ -10,7 +10,7 @@ object DropdownTests extends TestSuite {
       ReactTestUtils.withNewBodyElement { mountNode =>
         dropdown.renderIntoDOM(mountNode)
         assert(
-          mountNode.outerHTML == """<div><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div>"""
+          mountNode.outerHTML == """<div><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div>"""
         )
       }
     }
@@ -22,7 +22,7 @@ object DropdownTests extends TestSuite {
         dropdown.renderIntoDOM(mountNode)
         val html = mountNode.outerHTML
         assert(
-          html == """<div><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div>"""
+          html == """<div><div role="listbox" aria-expanded="false" class="ui dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div>"""
         )
       }
     }
@@ -41,7 +41,7 @@ object DropdownTests extends TestSuite {
         dropdown.renderIntoDOM(mountNode)
         val html = mountNode.outerHTML
         assert(
-          html == """<div><div role="combobox" aria-expanded="true" class="ui active visible search dropdown"><input aria-autocomplete="list" autocomplete="off" class="search" tabindex="0" type="text" value=""><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div role="listbox" class="visible menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div>"""
+          html == """<div><div role="combobox" aria-expanded="true" class="ui active visible search dropdown"><input aria-autocomplete="list" autocomplete="off" class="search" tabindex="0" type="text" value=""><div aria-atomic="true" aria-live="polite" role="alert" class="divider text"></div><i aria-hidden="true" class="dropdown icon"></i><div role="listbox" class="visible menu transition"><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="true" class="selected item">abc</div><div style="pointer-events: all;" role="option" aria-checked="false" aria-selected="false" class="item"><span class="text">def</span></div></div></div></div>"""
         )
       }
     }
@@ -50,7 +50,7 @@ object DropdownTests extends TestSuite {
       ReactTestUtils.withNewBodyElement { mountNode =>
         dropdown.renderIntoDOM(mountNode)
         assert(
-          mountNode.outerHTML == """<div><div role="listbox" aria-expanded="false" class="ui basic dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite" aria-atomic="true"></div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div>"""
+          mountNode.outerHTML == """<div><div role="listbox" aria-expanded="false" class="ui basic dropdown" tabindex="0"><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"></div></div></div>"""
         )
       }
     }

facade/src/test/scala/react/semanticui/modules/dropdown/DropdownTextTests.scala

@@ -0,0 +1,28 @@
+package react.semanticui.modules.dropdown
+
+import utest._
+import japgolly.scalajs.react.test._
+import japgolly.scalajs.react.vdom.html_<^._
+
+object DropdownTextTests extends TestSuite {
+  val tests = Tests {
+    test("text") {
+      val header = DropdownText()
+      ReactTestUtils.withNewBodyElement { mountNode =>
+        header.renderIntoDOM(mountNode)
+        assert(
+          mountNode.innerHTML == """<div aria-atomic="true" aria-live="polite" role="alert" class="divider"></div>"""
+        )
+      }
+    }
+    test("textContent") {
+      val header = DropdownText("content")
+      ReactTestUtils.withNewBodyElement { mountNode =>
+        header.renderIntoDOM(mountNode)
+        assert(
+          mountNode.innerHTML == """<div aria-atomic="true" aria-live="polite" role="alert" class="divider">content</div>"""
+        )
+      }
+    }
+  }
+}