Updated StatusPopup, WithAutoHide to the latest react features

scommons · Aug 12, 2019 · 5d67bfb · 5d67bfb
1 parent c70e2c9
commit 5d67bfb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 41 deletions.
diff --git a/ui/src/main/scala/scommons/client/ui/popup/StatusPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/StatusPopup.scala
@@ -1,18 +1,15 @@
 package scommons.client.ui.popup
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.VirtualDOM._
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 
 case class StatusPopupProps(text: String,
                             show: Boolean,
                             onHide: () => Unit)
 
-object StatusPopup extends UiComponent[StatusPopupProps] {
+object StatusPopup extends FunctionComponent[StatusPopupProps] {
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { self =>
-    val props = self.props.wrapped
+  protected def render(compProps: Props): ReactElement = {
+    val props = compProps.wrapped
 
     <(Popup())(^.wrapped := PopupProps(
       show = props.show,

diff --git a/ui/src/main/scala/scommons/client/ui/popup/WithAutoHide.scala b/ui/src/main/scala/scommons/client/ui/popup/WithAutoHide.scala
@@ -1,24 +1,21 @@
 package scommons.client.ui.popup
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.VirtualDOM._
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
 import org.scalajs.dom
 import org.scalajs.dom.Event
 import org.scalajs.dom.raw.HTMLElement
-import scommons.react.UiComponent
+import scommons.react._
 
 import scala.scalajs.js
 
 case class WithAutoHideProps(onHide: () => Unit)
 
-object WithAutoHide extends UiComponent[WithAutoHideProps] {
+object WithAutoHide extends ClassComponent[WithAutoHideProps] {
 
   private case class WithAutoHideState(setAutoHideDiv: HTMLElement => Unit,
                                        getAutoHideDiv: () => HTMLElement,
                                        autoHideHandle: Option[js.Function1[Event, Unit]] = None)
 
-  protected def create(): ReactClass = React.createClass[PropsType, WithAutoHideState](
+  protected def create(): ReactClass = createClass[WithAutoHideState](
     getInitialState = { _ =>
       var autoHideDiv: HTMLElement = null
 

diff --git a/ui/src/test/scala/scommons/client/ui/popup/WithAutoHideSpec.scala b/ui/src/test/scala/scommons/client/ui/popup/WithAutoHideSpec.scala
@@ -4,7 +4,7 @@ import org.scalajs.dom.raw.{EventTarget, HTMLElement}
 import org.scalajs.dom.{KeyboardEvent, MouseEvent, document}
 import scommons.client.ui.popup.WithAutoHideSpec.DomEventMock
 import scommons.react.test.TestSpec
-import scommons.react.test.dom.raw.TestReactDOM._
+import scommons.react.test.dom.raw.TestReactDOM.unmountComponentAtNode
 import scommons.react.test.dom.util.TestDOMUtils
 
 import scala.scalajs.js.annotation.JSExportAll
@@ -14,65 +14,57 @@ class WithAutoHideSpec extends TestSpec with TestDOMUtils {
   it should "call onHide when triggered outside content element on mouseUp" in {
     //given
     val onHide = mockFunction[Unit]
-    val comp = renderIntoDocument(
-      <(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content")
-    )
+    domRender(<(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content"))
 
     //then
     onHide.expects()
 
     //when
-    document.dispatchEvent(createDomEvent[MouseEvent]("mouseup"))
+    fireDomEvent(document.dispatchEvent(createDomEvent[MouseEvent]("mouseup")))
 
     //cleanup
-    unmountComponentAtNode(findDOMNode(comp).parentNode) shouldBe true
+    unmountComponentAtNode(domContainer) shouldBe true
   }
 
   it should "not call onHide when unmounted on mouseUp" in {
     //given
     val onHide = mockFunction[Unit]
-    val comp = renderIntoDocument(
-      <(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content")
-    )
-    unmountComponentAtNode(findDOMNode(comp).parentNode) shouldBe true
+    domRender(<(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content"))
+    unmountComponentAtNode(domContainer) shouldBe true
 
     //then
     onHide.expects().never()
 
     //when
-    document.dispatchEvent(createDomEvent[MouseEvent]("mouseup"))
+    fireDomEvent(document.dispatchEvent(createDomEvent[MouseEvent]("mouseup")))
   }
 
   it should "call onHide when triggered outside content element on keyDown" in {
     //given
     val onHide = mockFunction[Unit]
-    val comp = renderIntoDocument(
-      <(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content")
-    )
+    domRender(<(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content"))
 
     //then
     onHide.expects()
 
     //when
-    document.dispatchEvent(createDomEvent[KeyboardEvent]("keydown"))
+    fireDomEvent(document.dispatchEvent(createDomEvent[KeyboardEvent]("keydown")))
 
     //cleanup
-    unmountComponentAtNode(findDOMNode(comp).parentNode) shouldBe true
+    unmountComponentAtNode(domContainer) shouldBe true
   }
 
   it should "not call onHide when unmounted on keyDown" in {
     //given
     val onHide = mockFunction[Unit]
-    val comp = renderIntoDocument(
-      <(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content")
-    )
-    unmountComponentAtNode(findDOMNode(comp).parentNode) shouldBe true
+    domRender(<(WithAutoHide())(^.wrapped := WithAutoHideProps(onHide))("test content"))
+    unmountComponentAtNode(domContainer) shouldBe true
 
     //then
     onHide.expects().never()
 
     //when
-    document.dispatchEvent(createDomEvent[KeyboardEvent]("keydown"))
+    fireDomEvent(document.dispatchEvent(createDomEvent[KeyboardEvent]("keydown")))
   }
 
   it should "fail if autoHideDiv is null" in {
@@ -124,22 +116,21 @@ class WithAutoHideSpec extends TestSpec with TestDOMUtils {
   it should "render the component" in {
     //given
     val content = "test content"
-    val component = <(WithAutoHide())(^.wrapped := WithAutoHideProps(() => ()))(
-      <.p()(content)
-    )
 
     //when
-    val result = renderIntoDocument(component)
+    domRender(<(WithAutoHide())(^.wrapped := WithAutoHideProps(() => ()))(
+      <.p()(content)
+    ))
 
     //then
-    assertDOMElement(findReactElement(result),
+    assertDOMElement(domContainer, <.div()(
       <.div()(
         <.p()(content)
       )
-    )
+    ))
 
     //cleanup
-    unmountComponentAtNode(findDOMNode(result).parentNode) shouldBe true
+    unmountComponentAtNode(domContainer) shouldBe true
   }
 }