Adding some demos to React Split Pane Component

Author: atooni

demo/images/reactSplitPane.png

@@ -0,0 +1,43 @@
+package demo.components.reactsplitpane
+
+import chandu0101.macros.tojs.GhPagesMacros
+import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane
+import demo.components.CodeExample
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+
+object ReactSplitPaneSimpleHorizontal {
+
+  val code = GhPagesMacros.exampleSource
+
+  // EXAMPLE:START
+
+  class Backend(t: BackendScope[_, _]) {
+
+    def render() = {
+
+      <.div(
+        CodeExample(code, "Simple Vertical Split")(
+          <.div(
+            ^.width := "95%",
+            ^.height := "400px",
+            ^.border := "1px solid",
+            ^.margin := "auto",
+            ^.position := "relative",
+            ReactSplitPane(
+              split = "horizontal"
+            )(<.div("first"), <.div("second"))
+          )
+        )
+      )
+    }
+  }
+
+  val component = ScalaComponent.builder[Unit]("ReactSplitPaneDemo")
+    .renderBackend[Backend]
+    .build
+
+  // EXAMPLE:END
+
+  def apply() = component()
+}

demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneSimpleHorizontal.scala

@@ -0,0 +1,45 @@
+package demo.components.reactsplitpane
+
+import chandu0101.macros.tojs.GhPagesMacros
+import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane
+import demo.components.CodeExample
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+
+object ReactSplitPaneSimpleNested {
+
+  val code = GhPagesMacros.exampleSource
+
+  // EXAMPLE:START
+
+  class Backend(t: BackendScope[_, _]) {
+
+    def render() = {
+
+      val vert = ReactSplitPane()(<.div("second"), <.div("third"))
+
+      <.div(
+        CodeExample(code, "Simple Nested")(
+          <.div(
+            ^.width := "95%",
+            ^.height := "400px",
+            ^.border := "1px solid",
+            ^.margin := "auto",
+            ^.position := "relative",
+            ReactSplitPane(
+              split = "horizontal"
+            )(<.div("first"), vert)
+          )
+        )
+      )
+    }
+  }
+
+  val component = ScalaComponent.builder[Unit]("ReactSplitPaneDemo")
+    .renderBackend[Backend]
+    .build
+
+  // EXAMPLE:END
+
+  def apply() = component()
+}

demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneSimpleNested.scala

@@ -1,6 +1,6 @@
 package demo.routes
 
-import demo.components.reactsplitpane.{ReactSplitPaneInfo, ReactSplitPaneSimpleVertical}
+import demo.components.reactsplitpane._
 import demo.pages.ReactSplitPanePage
 import japgolly.scalajs.react.extra.router.RouterConfigDsl
 import japgolly.scalajs.react.vdom.html_<^._
@@ -11,7 +11,11 @@ object ReactSplitPaneRouteModule {
 
   case object SimpleVertical extends LeftRoute("Simple Vertical", "simplevertical", () => ReactSplitPaneSimpleVertical())
 
-  val menu: List[LeftRoute] = List(Info, SimpleVertical)
+  case object SimpleHorizontal extends LeftRoute("Simple Horizontal", "simplehorizontal", () => ReactSplitPaneSimpleHorizontal())
+
+  case object SimpleNested extends LeftRoute("Simple Nested", "simplenested", () => ReactSplitPaneSimpleNested())
+
+  val menu: List[LeftRoute] = List(Info, SimpleVertical, SimpleHorizontal, SimpleNested)
 
   val routes = RouterConfigDsl[LeftRoute].buildRule { dsl =>
     import dsl._