Skip to content

Commit 7669467

Browse files
oyvindbergoyvindberg
authored
Merge pull request #91 from woq-blended/master
Adding Wrapper and demos for React Split Pane Component
2 parents 1c93e02 + bec8b7f commit 7669467

File tree

17 files changed

+377
-4550
lines changed

17 files changed

+377
-4550
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ assets/
3232
node_modules/
3333
/core/docs
3434
.DS_Store
35+
yarn.lock

‎core/src/main/scala/chandu0101/scalajs/react/components/reactsplitpane/ReactSplitPane.scala‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
package chandu0101.scalajs.react.components.reactsplitpane
2+
3+
import chandu0101.macros.tojs.JSMacro
4+
import japgolly.scalajs.react._
5+
import japgolly.scalajs.react.vdom.VdomElement
6+
import japgolly.scalajs.react.vdom.html_<^._
7+
8+
import scala.scalajs.js
9+
import scalacss.internal.mutable.StyleSheet
10+
11+
import scalacss.DevDefaults._
12+
13+
object ReactSplitPane {
14+
15+
16+
class Style extends StyleSheet.Inline {
17+
18+
import dsl._
19+
20+
val Resizer = style("Resizer") (
21+
22+
backgroundColor(black),
23+
opacity(0.2),
24+
zIndex(1),
25+
boxSizing.borderBox,
26+
backgroundClip.paddingBox,
27+
28+
&.hover(
29+
transition := "all 2s ease"
30+
)
31+
32+
)
33+
34+
val ResizerVertical = style("Resizer.vertical") (
35+
width(11.px),
36+
marginTop(0.px),
37+
marginBottom(0.px),
38+
marginLeft(-5.px),
39+
marginRight(-5.px),
40+
borderLeft(5.px, solid, c"rgba(0,0,0,0)"),
41+
borderRight(5.px, solid, transparent),
42+
cursor.colResize,
43+
44+
&.hover(
45+
borderLeft(5.px, solid, c"rgba(0, 0, 0, 0.5)"),
46+
borderRight(5.px, solid, c"rgba(0, 0, 0, 0.5)")
47+
)
48+
)
49+
50+
val ResizerHorizontal = style("Resizer.horizontal") (
51+
height(11.px),
52+
marginTop(-5.px),
53+
marginBottom(-5.px),
54+
marginLeft(0.px),
55+
marginRight(0.px),
56+
borderTop(5.px, solid, c"rgba(0,0,0,0)"),
57+
borderBottom(5.px, solid, transparent),
58+
cursor.rowResize,
59+
60+
&.hover(
61+
borderTop(5.px, solid, c"rgba(0, 0, 0, 0.5)"),
62+
borderBottom(5.px, solid, c"rgba(0, 0, 0, 0.5)")
63+
)
64+
)
65+
66+
val ResizerDisabled = style("Resizer.disabled") (
67+
cursor.notAllowed,
68+
69+
&.hover(
70+
border.transparent
71+
)
72+
)
73+
74+
val SplitPaneContent = style("splitPaneContent") (
75+
width(100.%%),
76+
height(100.%%),
77+
position.absolute,
78+
left(0.px),
79+
top(0.px)
80+
)
81+
}
82+
83+
object DefaultStyle extends Style
84+
}
85+
86+
87+
case class ReactSplitPane(
88+
// Specify whether resizing is allowed
89+
allowResize: js.UndefOr[Boolean] = true,
90+
91+
className: js.UndefOr[String] = js.undefined,
92+
93+
primary: js.UndefOr[String] = js.undefined,
94+
95+
minSize : js.UndefOr[Double] = js.undefined,
96+
97+
maxSize : js.UndefOr[Double] = js.undefined,
98+
99+
defaultSize : js.UndefOr[Double] = js.undefined,
100+
101+
size : js.UndefOr[Double] = js.undefined,
102+
103+
split : js.UndefOr[String] = js.undefined,
104+
105+
onDragStarted : js.UndefOr[Callback] = js.undefined,
106+
107+
onDragFinished : js.UndefOr[Callback] = js.undefined,
108+
109+
onChange : js.UndefOr[Double => Callback] = js.undefined,
110+
111+
onResizerClick : js.UndefOr[Callback] = js.undefined,
112+
113+
onResizerDoubleClick : js.UndefOr[Callback] = js.undefined,
114+
115+
style : js.UndefOr[js.Object] = js.undefined,
116+
117+
resizerStyle : js.UndefOr[js.Object] = js.undefined,
118+
119+
paneStyle : js.UndefOr[js.Object] = js.undefined,
120+
121+
pane1Style : js.UndefOr[js.Object] = js.undefined,
122+
123+
pane2Style : js.UndefOr[js.Object] = js.undefined,
124+
125+
resizerClassName : js.UndefOr[String] = ReactSplitPane.DefaultStyle.Resizer.htmlClass,
126+
127+
step : js.UndefOr[Double] = js.undefined
128+
129+
) {
130+
def apply(first: VdomElement, second: VdomElement): JsComponent.Unmounted[_, _] = {
131+
132+
val props = JSMacro[ReactSplitPane](this)
133+
val component = JsComponent[js.Object, Children.Varargs, Null](js.Dynamic.global.ReactSplitPane)
134+
135+
component(props)(
136+
<.div(
137+
^.cls := "splitPaneContent",
138+
first
139+
),
140+
<.div(
141+
^.cls := "splitPaneContent",
142+
second
143+
)
144+
)
145+
}
146+
}

‎demo/bundles/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ window.reactInfiniteImage = require("../images/reactInfinite.png");
2222
window.reactGeomIconImage = require("../images/reactGeomIcon.png");
2323
window.spinnerImage = require("../images/spinner.png");
2424
window.reactPopoverImage = require("../images/reactPopover.png");
25-
window.reactDraggableImage = require("../images/reactDraggable.png");
25+
window.reactDraggableImage = require("../images/reactDraggable.png");
26+
window.reactSplitPaneImage = require("../images/reactSplitPane.png");

‎demo/bundles/react-split-pane.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var ReactSplitPane = require('react-split-pane');
2+
3+
window.ReactSplitPane = ReactSplitPane;

‎demo/images/reactSplitPane.png‎

3.14 KB
Loading

‎demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"react-select": "^1.0.0-rc.3",
4444
"react-slick": "^0.14.6",
4545
"react-spinner": "^0.2.3",
46+
"react-split-pane" : "0.1.66",
4647
"react-tagsinput": "^3.15.1",
4748
"react-tap-event-plugin": "^2.0.1",
4849
"semantic-ui-react": "^0.65.0",

‎demo/src/main/scala/demo/AppCSS.scala‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package demo
22

33
import chandu0101.scalajs.react.components._
4+
import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane
45
import demo.components._
56
import demo.components.materialui._
67
import demo.components.{InfoTemplate, LeftNav, LeftNavPage, ScalaCSSTutorial}
@@ -26,7 +27,8 @@ object AppCSS {
2627
InfoTemplate.Style,
2728
ReactInfiniteDemo.styles,
2829
ReactDraggable.Style,
29-
MuiTabsDemo.Style
30+
MuiTabsDemo.Style,
31+
ReactSplitPane.DefaultStyle
3032
)
3133

3234
GlobalRegistry.addToDocumentOnRegistration()

‎demo/src/main/scala/demo/components/reactsplitpane/ReactSplitPaneInfo.scala‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
package demo.components.reactsplitpane
2+
3+
import japgolly.scalajs.react._
4+
import japgolly.scalajs.react.vdom.html_<^._
5+
6+
object ReactSplitPaneInfo {
7+
8+
val component = ScalaComponent.builder[Unit]("ReactSplitPaneInfo")
9+
.render( P => {
10+
<.div(^.cls := "full-width-section")(
11+
<.h3("React Split Pane :"),
12+
<.p("Wrapper for the react-split-pane component (0.1.66)"),
13+
<.a(
14+
^.href := "https://github.com/tomkp/react-split-pane",
15+
"react-split-pane on GitHub"
16+
)
17+
)
18+
})
19+
.build
20+
21+
def apply() = component()
22+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package demo.components.reactsplitpane
2+
3+
import chandu0101.macros.tojs.GhPagesMacros
4+
import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane
5+
import demo.components.CodeExample
6+
import japgolly.scalajs.react._
7+
import japgolly.scalajs.react.vdom.html_<^._
8+
9+
object ReactSplitPaneSimpleHorizontal {
10+
11+
val code = GhPagesMacros.exampleSource
12+
13+
// EXAMPLE:START
14+
15+
class Backend(t: BackendScope[_, _]) {
16+
17+
def render() = {
18+
19+
<.div(
20+
CodeExample(code, "Simple Vertical Split")(
21+
<.div(
22+
^.width := "95%",
23+
^.height := "400px",
24+
^.border := "1px solid",
25+
^.margin := "auto",
26+
^.position := "relative",
27+
ReactSplitPane(
28+
split = "horizontal"
29+
)(<.div("first"), <.div("second"))
30+
)
31+
)
32+
)
33+
}
34+
}
35+
36+
val component = ScalaComponent.builder[Unit]("ReactSplitPaneDemo")
37+
.renderBackend[Backend]
38+
.build
39+
40+
// EXAMPLE:END
41+
42+
def apply() = component()
43+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package demo.components.reactsplitpane
2+
3+
import chandu0101.macros.tojs.GhPagesMacros
4+
import chandu0101.scalajs.react.components.reactsplitpane.ReactSplitPane
5+
import demo.components.CodeExample
6+
import japgolly.scalajs.react._
7+
import japgolly.scalajs.react.vdom.html_<^._
8+
9+
object ReactSplitPaneSimpleNested {
10+
11+
val code = GhPagesMacros.exampleSource
12+
13+
// EXAMPLE:START
14+
15+
class Backend(t: BackendScope[_, _]) {
16+
17+
def render() = {
18+
19+
val vert = ReactSplitPane()(<.div("second"), <.div("third"))
20+
21+
<.div(
22+
CodeExample(code, "Simple Nested")(
23+
<.div(
24+
^.width := "95%",
25+
^.height := "400px",
26+
^.border := "1px solid",
27+
^.margin := "auto",
28+
^.position := "relative",
29+
ReactSplitPane(
30+
split = "horizontal"
31+
)(<.div("first"), vert)
32+
)
33+
)
34+
)
35+
}
36+
}
37+
38+
val component = ScalaComponent.builder[Unit]("ReactSplitPaneDemo")
39+
.renderBackend[Backend]
40+
.build
41+
42+
// EXAMPLE:END
43+
44+
def apply() = component()
45+
}

0 commit comments

Comments
 (0)