Skip to content

Commit 5b06423

Browse files
espinhogrespinhogr
committed
Added sider
1 parent 5e52580 commit 5b06423

File tree

6 files changed

+137
-10
lines changed

6 files changed

+137
-10
lines changed

‎web_client/src/main/resources/MainPage.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
.app-title {
22
color: #0F0;
33
}
4-
5-
.main-layout {
6-
height: 100vh;
7-
}

‎web_client/src/main/scala/antd/Button.scala‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@ object AntButton extends js.Object {
1515
val Button: js.Object = js.native
1616
}
1717

18-
case class Delay(delay: Int)
18+
@js.native
19+
trait Delay extends js.Object {
20+
val delay: Int = js.native
21+
}
22+
object Delay {
23+
def apply(delay: Int) = js.Dynamic.literal(delay = delay).asInstanceOf[Delay]
24+
}
25+
1926

2027
@react object Button extends ExternalComponent {
2128
case class Props(disabled: Boolean = false,

‎web_client/src/main/scala/antd/Layout.scala‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import slinky.core.facade.ReactElement
77
import scala.scalajs.js
88
import scala.scalajs.js.UndefOr
99
import scala.scalajs.js.annotation.JSImport
10+
import scala.scalajs.js.|
1011

1112
@JSImport("antd", JSImport.Default)
1213
@js.native
@@ -19,6 +20,7 @@ trait AntLayoutObj extends js.Object {
1920
val Header: js.Object = js.native
2021
val Footer: js.Object = js.native
2122
val Content: js.Object = js.native
23+
val Sider: js.Object = js.native
2224
}
2325

2426
@react object Layout extends ExternalComponent {
@@ -52,3 +54,21 @@ trait AntLayoutObj extends js.Object {
5254

5355
override val component = AntLayout.Layout.Content
5456
}
57+
58+
@react object LayoutSider extends ExternalComponent {
59+
case class Props(breakpoint: UndefOr[String] = js.undefined,
60+
className: UndefOr[String] = js.undefined,
61+
collapsed: UndefOr[Boolean] = js.undefined,
62+
collapsedWidth: Int = 80,
63+
collapsible: Boolean = false,
64+
defaultCollapsed: Boolean = false,
65+
reverseArrow: Boolean = false,
66+
style: UndefOr[js.Object] = js.undefined,
67+
theme: String = "dark",
68+
trigger: UndefOr[String | ReactElement] = js.undefined,
69+
width: Int | String = 200,
70+
onCollapse: UndefOr[js.Function2[js.Object, js.Object, js.Any]] = js.undefined,
71+
onBreakpoint: UndefOr[js.Function1[js.Object, js.Any]] = js.undefined)
72+
73+
override val component = AntLayout.Layout.Sider
74+
}

‎web_client/src/main/scala/antd/Menu.scala‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
package antd
2+
3+
import slinky.core.ExternalComponent
4+
import slinky.core.annotations.react
5+
import slinky.core.facade.ReactElement
6+
7+
import scala.scalajs.js
8+
import scala.scalajs.js.UndefOr
9+
import scala.scalajs.js.annotation.JSImport
10+
import scala.scalajs.js.|
11+
12+
@JSImport("antd", JSImport.Default)
13+
@js.native
14+
object AntMenu extends js.Object {
15+
val Menu: AntMenuObject = js.native
16+
}
17+
18+
@js.native
19+
trait AntMenuObject extends js.Object {
20+
val Item: js.Object = js.native
21+
val SubMenu: js.Object = js.native
22+
val ItemGroup: js.Object = js.native
23+
val Divider: js.Object = js.native
24+
}
25+
26+
@react object Menu extends ExternalComponent {
27+
case class Props(defaultOpenKeys: UndefOr[js.Array[String]] = js.undefined,
28+
defaultSelectedKeys: UndefOr[js.Array[String]] = js.undefined,
29+
forceSubMenuRender: Boolean = false,
30+
inlineCollapsed: UndefOr[Boolean] = js.undefined,
31+
inlineIndent: Int = 24,
32+
mode: String = "vertical",
33+
multiple: Boolean = false,
34+
openKeys: UndefOr[js.Array[String]] = js.undefined,
35+
selectable: Boolean = true,
36+
selectedKeys: UndefOr[js.Array[String]] = js.undefined,
37+
style: UndefOr[js.Object] = js.undefined,
38+
subMenuCloseDelay: Double = 0.1,
39+
subMenuOpenDelay: Double = 0.0,
40+
theme: String = "light",
41+
onClick: UndefOr[js.Function3[js.Object, js.Object, js.Object, js.Any]] = js.undefined,
42+
onDeselect: UndefOr[js.Function3[js.Object, js.Object, js.Object, js.Any]] = js.undefined,
43+
onOpenChange: UndefOr[js.Function1[js.Array[String], js.Any]] = js.undefined,
44+
onSelect: UndefOr[js.Function3[js.Object, js.Object, js.Object, js.Any]] = js.undefined)
45+
46+
override val component = AntMenu.Menu
47+
}
48+
49+
@react object MenuItem extends ExternalComponent {
50+
case class Props(disabled: Boolean = false,
51+
key: UndefOr[String] = js.undefined,
52+
title: UndefOr[String] = js.undefined)
53+
54+
override val component = AntMenu.Menu.Item
55+
}
56+
57+
@react object SubMenu extends ExternalComponent {
58+
case class Props(disabled: Boolean = false,
59+
key: UndefOr[String] = js.undefined,
60+
title: UndefOr[String] = js.undefined,
61+
onTitleClick: UndefOr[js.Function2[js.Object, js.Object, js.Any]] = js.undefined)
62+
63+
override val component = AntMenu.Menu.SubMenu
64+
}
65+
66+
@react object ItemGroup extends ExternalComponent {
67+
case class Props(title: UndefOr[String | ReactElement] = js.undefined)
68+
69+
override val component = AntMenu.Menu.ItemGroup
70+
}
71+
72+
@react object Divider extends ExternalComponent {
73+
type Props = Unit
74+
75+
override val component = AntMenu.Menu.Divider
76+
}

‎web_client/src/main/scala/com/mypackage/MainPage.scala‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ package com.mypackage
33
import antd.Layout
44
import antd.LayoutFooter
55
import antd.LayoutHeader
6+
import antd.LayoutSider
7+
import antd.Menu
8+
import antd.MenuItem
69
import reactrouter.BrowserRouter
710
import reactrouter.Route
811
import slinky.core.ReactComponentClass._
@@ -11,6 +14,7 @@ import slinky.core.annotations.react
1114
import slinky.core.facade.ReactElement
1215
import slinky.web.html._
1316
import product.Products
17+
import reactrouter.NavLink
1418
import util.Version
1519

1620
import scala.scalajs.js
@@ -37,16 +41,35 @@ object MainPageCSS extends js.Object
3741

3842
private def renderContent() = {
3943
val testComponent: js.Function0[ReactElement] = () => h1("Test")
44+
4045
BrowserRouter(BrowserRouter.Props())(
41-
Route(Route.Props(path = "/", exact = true, component = wrapperToClass(Products))),
42-
Route(Route.Props(path = "/test", render = testComponent))
46+
Layout(Layout.Props())(
47+
renderSider(),
48+
Layout(Layout.Props())(
49+
Route(Route.Props(path = "/", exact = true, component = wrapperToClass(Products))),
50+
Route(Route.Props(path = "/test", render = testComponent))
51+
)
52+
)
4353
)
4454
}
4555

46-
private def renderHeader() = {
56+
private def renderHeader() =
4757
LayoutHeader(LayoutHeader.Props())(
4858
h1(className := "app-title")("Welcome to React (with Scala.js!) on Play")
4959
)
60+
61+
62+
private def renderSider() = {
63+
LayoutSider(
64+
Menu(
65+
MenuItem(
66+
NavLink(NavLink.Props(to = "/"))("Products")
67+
),
68+
MenuItem(
69+
NavLink(NavLink.Props(to = "/test"))("Test")
70+
)
71+
)
72+
)
5073
}
5174
}
5275

‎web_client/src/main/scala/reactrouter/NavLink.scala‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
package reactrouter
22

33
import slinky.core.ExternalComponent
4+
import slinky.core.ExternalComponentWithAttributes
5+
import slinky.web.html.a
46

57
import scala.scalajs.js
68
import scala.scalajs.js.UndefOr
79
import scala.scalajs.js.annotation.JSImport
10+
import scala.scalajs.js.|
811

912
@JSImport("react-router-dom", JSImport.Default)
1013
@js.native
1114
object ReactNavLink extends js.Object {
1215
val NavLink: js.Object = js.native
1316
}
1417

15-
object NavLink extends ExternalComponent {
18+
object NavLink extends ExternalComponentWithAttributes[a.tag.type] {
1619
case class Props(activeClassName: UndefOr[String] = js.undefined,
1720
activeStyle: UndefOr[js.Object] = js.undefined,
1821
exact: Boolean = false,
1922
strict: Boolean = false,
2023
isActive: UndefOr[js.Function2[js.Object, js.Object, Boolean]] = js.undefined,
2124
location: UndefOr[js.Object] = js.undefined,
22-
`aria-current`: String = "page")
25+
`aria-current`: String = "page",
26+
to: String | js.Object,
27+
replace: Boolean = false)
2328

2429
override val component = ReactNavLink.NavLink
2530
}

0 commit comments

Comments
 (0)