Switched to FunctionComponent in all the examples

scommons · Apr 29, 2019 · 5baa395 · 5baa395
1 parent 787ad31
commit 5baa395
Show file tree

Hide file tree

Showing 13 changed files with 196 additions and 187 deletions.
diff --git a/core/src/main/scala/scommons/reactnative/package.scala b/core/src/main/scala/scommons/reactnative/package.scala
@@ -1,6 +1,5 @@
 package scommons
 
-import io.github.shogowada.scalajs.reactjs.VirtualDOM
 import io.github.shogowada.scalajs.reactjs.VirtualDOM.VirtualDOMElements.ReactClassElementSpec
 import io.github.shogowada.scalajs.reactjs.VirtualDOM._
 import io.github.shogowada.statictags._
@@ -56,7 +55,4 @@ package object reactnative {
     lazy val onChangeText = OnChangeTextEventAttribute("onChangeText")
     lazy val onPress = OnPressEventAttribute("onPress")
   }
-
-  lazy val < : VirtualDOM.VirtualDOMElements = VirtualDOM.<
-  lazy val ^ : VirtualDOM.VirtualDOMAttributes = VirtualDOM.^
 }
diff --git a/showcase/src/main/scala/scommons/reactnative/showcase/ShowcaseApp.scala b/showcase/src/main/scala/scommons/reactnative/showcase/ShowcaseApp.scala
@@ -1,21 +1,19 @@
 package scommons.reactnative.showcase
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 import scommons.reactnative._
 import scommons.reactnative.showcase.style._
 
 import scala.scalajs.js
 import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}
 
 @JSExportTopLevel(name = "ShowcaseApp")
-object ShowcaseApp extends UiComponent[Unit] {
+object ShowcaseApp extends FunctionComponent[Unit] {
 
   @JSExport("apply")
   override def apply(): ReactClass = super.apply()
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { _ =>
+  protected def render(props: Props): ReactElement = {
     <.View(^.rnStyle := styles.container)(
       <.ScrollView(
         ^.rnStyle := styles.content,

diff --git a/showcase/src/main/scala/scommons/reactnative/showcase/style/BorderRadiusDemo.scala b/showcase/src/main/scala/scommons/reactnative/showcase/style/BorderRadiusDemo.scala
@@ -1,57 +1,61 @@
 package scommons.reactnative.showcase.style
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 import scommons.reactnative._
 
 import scala.scalajs.js
 
-object BorderRadiusDemo extends UiComponent[Unit] {
+object BorderRadiusDemo extends FunctionComponent[Unit] {
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { _ =>
+  protected def render(props: Props): ReactElement = {
     <.View(^.rnStyle := styles.container)(
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderRadius = 20
       })(
-        <(CenteredText)()("Example 1:\n4 Rounded Corners")
+        <(CenteredText())()("Example 1:\n4 Rounded Corners")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderTopRightRadius = 60
         override val borderBottomRightRadius = 60
       })(
-        <(CenteredText)()("Example 2:\nD Shape")
+        <(CenteredText())()("Example 2:\nD Shape")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderTopLeftRadius = 30
         override val borderBottomRightRadius = 30
       })(
-        <(CenteredText)()("Example 3:\nLeaf Shape")
+        <(CenteredText())()("Example 3:\nLeaf Shape")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderRadius = 60
       })(
-        <(CenteredText)()("Example 4:\nCircle")
+        <(CenteredText())()("Example 4:\nCircle")
       )
     )
   }
 
-  private[style] val Example: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.View(^.rnStyle := js.Array(
-      styles.example,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val Example = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.View(^.rnStyle := js.Array(
+        styles.example,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
-  private[style] val CenteredText: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.Text(^.rnStyle := js.Array(
-      styles.centeredText,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val CenteredText = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.Text(^.rnStyle := js.Array(
+        styles.centeredText,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
   private[style] lazy val styles = StyleSheet.create(Styles)

diff --git a/showcase/src/main/scala/scommons/reactnative/showcase/style/BorderStyleDemo.scala b/showcase/src/main/scala/scommons/reactnative/showcase/style/BorderStyleDemo.scala
@@ -1,39 +1,37 @@
 package scommons.reactnative.showcase.style
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 import scommons.reactnative._
 
 import scala.scalajs.js
 
-object BorderStyleDemo extends UiComponent[Unit] {
+object BorderStyleDemo extends FunctionComponent[Unit] {
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { _ =>
+  protected def render(props: Props): ReactElement = {
     <.View(^.rnStyle := styles.container)(
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderWidth = 1
       })(
         <.Text()("borderWidth: 1")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderWidth = 3
         override val borderLeftWidth = 0
       })(
         <.Text()("borderWidth: 3, borderLeftWidth: 0")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderWidth = 3
         override val borderLeftColor = "red"
       })(
         <.Text()("borderWidth: 3, borderLeftColor: 'red'")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderLeftWidth = 3
       })(
         <.Text()("borderLeftWidth: 3")
       ),
-      <(Example)(^.rnStyle := new Style {
+      <(Example())(^.rnStyle := new Style {
         override val borderWidth = 1
         override val borderStyle = "dashed"
       })(
@@ -42,13 +40,16 @@ object BorderStyleDemo extends UiComponent[Unit] {
     )
   }
 
-  private[style] val Example: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.View(^.rnStyle := js.Array(
-      styles.example,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val Example = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.View(^.rnStyle := js.Array(
+        styles.example,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
   private[style] lazy val styles = StyleSheet.create(Styles)

diff --git a/showcase/src/main/scala/scommons/reactnative/showcase/style/MarginStyleDemo.scala b/showcase/src/main/scala/scommons/reactnative/showcase/style/MarginStyleDemo.scala
@@ -1,63 +1,67 @@
 package scommons.reactnative.showcase.style
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 import scommons.reactnative._
 
 import scala.scalajs.js
 
-object MarginStyleDemo extends UiComponent[Unit] {
+object MarginStyleDemo extends FunctionComponent[Unit] {
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { _ =>
+  protected def render(props: Props): ReactElement = {
     <.View(^.rnStyle := styles.container)(
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)()(
-          <(CenteredText)()("A")
+        <(Example())()(
+          <(CenteredText())()("A")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val marginTop = 50
         })(
-          <(CenteredText)()("B")
+          <(CenteredText())()("B")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val marginTop = 50
           override val marginLeft = 10
         })(
-          <(CenteredText)()("C")
+          <(CenteredText())()("C")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val marginLeft = -10
           override val marginTop = -10
         })(
-          <(CenteredText)()("D")
+          <(CenteredText())()("D")
         )
       )
     )
   }
 
-  private[style] val Example: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.View(^.rnStyle := js.Array(
-      styles.example,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val Example = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.View(^.rnStyle := js.Array(
+        styles.example,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
-  private[style] val CenteredText: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.Text(^.rnStyle := js.Array(
-      styles.centeredText,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val CenteredText = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.Text(^.rnStyle := js.Array(
+        styles.centeredText,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
   private[style] lazy val styles = StyleSheet.create(Styles)

diff --git a/showcase/src/main/scala/scommons/reactnative/showcase/style/PaddingStyleDemo.scala b/showcase/src/main/scala/scommons/reactnative/showcase/style/PaddingStyleDemo.scala
@@ -1,63 +1,67 @@
 package scommons.reactnative.showcase.style
 
-import io.github.shogowada.scalajs.reactjs.React
-import io.github.shogowada.scalajs.reactjs.classes.ReactClass
-import scommons.react.UiComponent
+import scommons.react._
 import scommons.reactnative._
 
 import scala.scalajs.js
 
-object PaddingStyleDemo extends UiComponent[Unit] {
+object PaddingStyleDemo extends FunctionComponent[Unit] {
 
-  protected def create(): ReactClass = React.createClass[PropsType, Unit] { _ =>
+  protected def render(props: Props): ReactElement = {
     <.View(^.rnStyle := styles.container)(
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)()(
-          <(CenteredText)()("A")
+        <(Example())()(
+          <(CenteredText())()("A")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val paddingTop = 50
         })(
-          <(CenteredText)()("B")
+          <(CenteredText())()("B")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val paddingTop = 50
           override val paddingLeft = 10
         })(
-          <(CenteredText)()("C")
+          <(CenteredText())()("C")
         )
       ),
       <.View(^.rnStyle := styles.exampleContainer)(
-        <(Example)(^.rnStyle := new Style {
+        <(Example())(^.rnStyle := new Style {
           override val paddingLeft = -10
           override val paddingTop = -10
         })(
-          <(CenteredText)()("D")
+          <(CenteredText())()("D")
         )
       )
     )
   }
 
-  private[style] val Example: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.View(^.rnStyle := js.Array(
-      styles.example,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val Example = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.View(^.rnStyle := js.Array(
+        styles.example,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
-  private[style] val CenteredText: ReactClass = React.createClass[PropsType, Unit] { self =>
-    <.Text(^.rnStyle := js.Array(
-      styles.centeredText,
-      self.props.native.style.asInstanceOf[Style]
-    ))(
-      self.props.children
-    )
+  private[style] val CenteredText = new FunctionComponent[Unit] {
+
+    protected def render(props: Props): ReactElement = {
+      <.Text(^.rnStyle := js.Array(
+        styles.centeredText,
+        props.native.style.asInstanceOf[Style]
+      ))(
+        props.children
+      )
+    }
   }
 
   private[style] lazy val styles = StyleSheet.create(Styles)