Skip to content

Commit 80444c3

Browse files
kazievabkazievab
committed
Add lab components and lab demos
1 parent e46c50d commit 80444c3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1600
-78
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@
66
[![Scala.js](https://img.shields.io/badge/Scala.js-0.6.32-orange.svg?logo=Scala&logoColor=orange)](https://www.scala-js.org/)
77
[![react](https://img.shields.io/badge/react-16.7.0-61DAFB.svg?logo=React)](https://ru.reactjs.org/)
88
[![scalajs-react](https://img.shields.io/static/v1?label=scalajs-react&message=1.6.0&color=blue)](https://github.com/japgolly/scalajs-react)
9-
[![material-ui](https://img.shields.io/static/v1?label=@material-ui/core&message=3.9.0&color=ff69b4)](https://v3.material-ui.com/)
9+
10+
[![material-ui-core](https://img.shields.io/static/v1?label=@material-ui/core&message=3.9.0&color=ff69b4)](https://v3.material-ui.com/)
1011
[![material-ui-icons](https://img.shields.io/static/v1?label=@material-ui/icons&message=3.0.2&color=ff69b4)](https://v3.material-ui.com/)
12+
[![material-ui-lab](https://img.shields.io/static/v1?label=@material-ui/lab&message=3.0.0-alpha.30&color=ff69b4)](https://v3.material-ui.com/)
1113

1214
[scalajs-react](https://github.com/japgolly/scalajs-react) facade for :
1315
* [@material-ui/core v3.9.0](https://github.com/mui-org/material-ui/tree/v3.x/packages/material-ui)
1416
* [@material-ui/icons v3.0.2](https://github.com/mui-org/material-ui/tree/v3.x/packages/material-ui-icons)
17+
* [@material-ui/lab v3.0.0-alpha.30](https://github.com/mui-org/material-ui/tree/v3.x/packages/material-ui-lab)
1518

1619
## Demo
1720

‎build.sbt‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
addCommandAlias("restartWDS", "; demo/fastOptJS::stopWebpackDevServer; ~demo/fastOptJS::startWebpackDevServer")
22

3-
lazy val root = project.in(file(".")).settings(commonSettings).aggregate(core, icons, demo).settings(
3+
lazy val root = project.in(file(".")).settings(commonSettings).aggregate(core, icons, lab, demo).settings(
44
name := "scalajs-react-material-ui",
55
// No, SBT, we don't want any artifacts for root.
66
// No, not even an empty jar.
@@ -40,7 +40,14 @@ lazy val icons = (project in file("icons")).settings(commonSettings).settings(
4040
sourceGenerators in Compile += muiIconsGenerator.taskValue
4141
).enablePlugins(ScalaJSBundlerPlugin)
4242

43-
lazy val demo = (project in file("demo")).dependsOn(core)
43+
lazy val lab = (project in file("lab")).settings(commonSettings).settings(
44+
name := "scalajs-react-material-ui-lab",
45+
scalaJSUseMainModuleInitializer := false,
46+
npmDependencies in Compile ++= Settings.npmDependenciesLab.value,
47+
libraryDependencies ++= Settings.scalajsDependenciesLib.value
48+
).enablePlugins(ScalaJSBundlerPlugin)
49+
50+
lazy val demo = (project in file("demo")).dependsOn(core, lab)
4451
.settings(commonSettings).settings(
4552
scalaJSUseMainModuleInitializer := true,
4653
npmDependencies in Compile ++= Settings.npmDependenciesDemo.value,

‎core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/package.scala‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,25 @@ package object styles {
1010
@JSImport("@material-ui/core/styles/colorManipulator.js", JSImport.Default)
1111
@js.native
1212
object colorManipulator extends js.Object {
13-
def recomposeColor(color: ColorObject): String = js.native
14-
15-
def convertHexToRGB(hex: String): String = js.native
13+
def hexToRgb(hex: String): String = js.native
1614

1715
def rgbToHex(color: String): String = js.native
1816

17+
def hslToRgb(color: String): String = js.native
18+
1919
def decomposeColor(color: String): ColorObject = js.native
2020

21+
def recomposeColor(color: ColorObject): String = js.native
22+
2123
def getContrastRatio(foreground: String, background: String): Double = js.native
2224

2325
def getLuminance(color: String): Double = js.native
2426

25-
def emphasize(color: String, coefficient: js.UndefOr[String]): String = js.native
27+
def emphasize(color: String, coefficient: js.UndefOr[Double]): String = js.native
2628

2729
def fade(color: String, value: Double): String = js.native
2830

29-
def darken(color: String, coefficient: js.UndefOr[String]): String = js.native
31+
def darken(color: String, coefficient: js.UndefOr[Double]): String = js.native
3032

3133
def lighten(color: String, coefficient: js.UndefOr[Double]): String = js.native
3234
}

‎demo/src/main/resources/static/images/misc/circle.png‎

1.09 KB
Loading

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ import io.kinoplan.demo.styles.demos.Tables._
2727
import io.kinoplan.demo.styles.demos.Tabs._
2828
import io.kinoplan.demo.styles.demos.TextFields._
2929
import io.kinoplan.demo.styles.demos.Tooltips._
30+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{DefaultBreadcrumbsStyle, DefaultCustomizedBreadcrumbsStyle}
31+
import io.kinoplan.demo.styles.labs.Slider.{DefaultDisabledSliderStyle, DefaultSliderStyle, DefaultVerticalSliderStyle}
32+
import io.kinoplan.demo.styles.labs.SpeedDial.DefaultSpeedDialStyle
33+
import io.kinoplan.demo.styles.labs.ToggleButton.DefaultToggleButtonStyle
3034
import scalacss.ScalaCssReactImplicits
3135
import scalacss.internal.mutable.StyleSheetRegistry
3236

@@ -38,7 +42,7 @@ object AppCSS extends ScalaCssReactImplicits {
3842
DefaultCommonStyle,
3943
DefaultLayoutStyle,
4044
DefaultSimpleTableStyle,
41-
DefaultDemoMenuStyle,
45+
DefaultChildMenuStyle,
4246
DefaultPrimarySearchAppBarStyle,
4347
DefaultSearchAppBarStyle,
4448
DefaultBottomAppBarStyle,
@@ -121,7 +125,14 @@ object AppCSS extends ScalaCssReactImplicits {
121125
DefaultSimpleTooltipsStyle,
122126
DefaultPositionedTooltipsStyle,
123127
DefaultVariableWidthStyle,
124-
DefaultInteractiveTooltipsStyle
128+
DefaultInteractiveTooltipsStyle,
129+
DefaultBreadcrumbsStyle,
130+
DefaultCustomizedBreadcrumbsStyle,
131+
DefaultSliderStyle,
132+
DefaultDisabledSliderStyle,
133+
DefaultVerticalSliderStyle,
134+
DefaultToggleButtonStyle,
135+
DefaultSpeedDialStyle
125136
)
126137

127138
registry.addToDocumentOnRegistration()

‎demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CollapsedBreadcrumbs.scala‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package io.kinoplan.demo.components.labs.Breadcrumbs
2+
3+
import io.kinoplan.demo.components.ComponentContainer
4+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{BreadcrumbsStyle, DefaultBreadcrumbsStyle}
5+
import io.kinoplan.scalajs.react.material.ui.core._
6+
import io.kinoplan.scalajs.react.material.ui.lab.MuiBreadcrumbs
7+
import japgolly.scalajs.react.vdom.all.{VdomElement, _}
8+
import japgolly.scalajs.react.{BackendScope, Callback, ScalaComponent}
9+
import scalacss.ScalaCssReactImplicits
10+
11+
object CollapsedBreadcrumbs extends ScalaCssReactImplicits {
12+
case class Props(style: BreadcrumbsStyle)
13+
14+
class Backend(t: BackendScope[Props, Unit]) {
15+
def handleClick: Callback = Callback.alert("You clicked a breadcrumb.")
16+
17+
def render(props: Props): VdomElement = {
18+
val css = props.style
19+
20+
div(
21+
ComponentContainer("Collapsed breadcrumbs")(
22+
div(css.root,
23+
MuiPaper()(css.paper,
24+
MuiBreadcrumbs(maxItems = 2)(aria.label := "Breadcrumb",
25+
MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Home"),
26+
MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Catalog"),
27+
MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Accessories"),
28+
MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "New Collection"),
29+
MuiTypography(color = MuiTypography.Color.textPrimary)("Belts")
30+
)
31+
)
32+
)
33+
)
34+
)
35+
}
36+
}
37+
38+
private val component = ScalaComponent.builder[Props]("CollapsedBreadcrumbs")
39+
.renderBackend[Backend]
40+
.build
41+
42+
def apply(style: BreadcrumbsStyle = DefaultBreadcrumbsStyle) = component(Props(style))
43+
}

‎demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomSeparator.scala‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
package io.kinoplan.demo.components.labs.Breadcrumbs
2+
3+
import io.kinoplan.demo.components.ComponentContainer
4+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{BreadcrumbsStyle, DefaultBreadcrumbsStyle}
5+
import io.kinoplan.scalajs.react.material.ui.core._
6+
import io.kinoplan.scalajs.react.material.ui.icons.MuiNavigateNextIcon
7+
import io.kinoplan.scalajs.react.material.ui.lab.MuiBreadcrumbs
8+
import japgolly.scalajs.react.vdom.all.{VdomElement, _}
9+
import japgolly.scalajs.react.{BackendScope, Callback, ScalaComponent}
10+
import scalacss.ScalaCssReactImplicits
11+
12+
object CustomSeparator extends ScalaCssReactImplicits {
13+
case class Props(style: BreadcrumbsStyle)
14+
15+
class Backend(t: BackendScope[Props, Unit]) {
16+
def handleClick: Callback = Callback.alert("You clicked a breadcrumb.")
17+
18+
def render(props: Props): VdomElement = {
19+
val css = props.style
20+
21+
div(
22+
ComponentContainer("Custom separator")(
23+
div(css.root,
24+
MuiPaper()(css.paper,
25+
MuiBreadcrumbs(separator = VdomNode(">"))(aria.label := "Breadcrumb",
26+
MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"),
27+
MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"),
28+
MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb")
29+
)
30+
),
31+
br(),
32+
MuiPaper()(css.paper,
33+
MuiBreadcrumbs(separator = VdomNode("-"))(aria.label := "Breadcrumb",
34+
MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"),
35+
MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"),
36+
MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb")
37+
)
38+
),
39+
br(),
40+
MuiPaper()(css.paper,
41+
MuiBreadcrumbs(separator = MuiNavigateNextIcon(fontSize = MuiSvgIcon.FontSize.small)())(aria.label := "Breadcrumb",
42+
MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"),
43+
MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"),
44+
MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb")
45+
)
46+
)
47+
)
48+
)
49+
)
50+
}
51+
}
52+
53+
private val component = ScalaComponent.builder[Props]("CustomSeparator")
54+
.renderBackend[Backend]
55+
.build
56+
57+
def apply(style: BreadcrumbsStyle = DefaultBreadcrumbsStyle) = component(Props(style))
58+
}

‎demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomizedBreadcrumbs.scala‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
package io.kinoplan.demo.components.labs.Breadcrumbs
2+
3+
import io.kinoplan.demo.components.ComponentContainer
4+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{CustomizedBreadcrumbsStyle, DefaultCustomizedBreadcrumbsStyle}
5+
import io.kinoplan.scalajs.react.material.ui.core._
6+
import io.kinoplan.scalajs.react.material.ui.icons.{MuiExpandMoreIcon, MuiHomeIcon}
7+
import io.kinoplan.scalajs.react.material.ui.lab.MuiBreadcrumbs
8+
import japgolly.scalajs.react.vdom.all.{VdomElement, _}
9+
import japgolly.scalajs.react.{BackendScope, Callback, ReactEvent, ScalaComponent}
10+
import scalacss.ScalaCssReactImplicits
11+
12+
object CustomizedBreadcrumbs extends ScalaCssReactImplicits {
13+
case class Props(style: CustomizedBreadcrumbsStyle)
14+
15+
class Backend(t: BackendScope[Props, Unit]) {
16+
def handleClick: Callback = Callback.alert("You clicked a breadcrumb.")
17+
18+
def handleChangeOnDelete: ReactEvent => Callback = _ => handleClick
19+
20+
def render(props: Props): VdomElement = {
21+
val css = props.style
22+
23+
div(
24+
ComponentContainer("Customized breadcrumbs")(
25+
MuiPaper()(css.root,
26+
MuiBreadcrumbs()(aria.label := "Breadcrumb",
27+
MuiChip(
28+
component = "a",
29+
label = VdomNode("Home"),
30+
avatar = MuiAvatar()(css.avatar,
31+
MuiHomeIcon()
32+
)().rawElement
33+
)(css.chip, href := "#", onClick --> handleClick),
34+
MuiChip(component = "a", label = VdomNode("Catalog"))(css.chip, href := "#", onClick --> handleClick),
35+
MuiChip(
36+
label = VdomNode("Accessories"),
37+
onDelete = handleChangeOnDelete,
38+
deleteIcon = MuiExpandMoreIcon()().rawElement
39+
)(css.chip, onClick --> handleClick)
40+
)
41+
)
42+
)
43+
)
44+
}
45+
}
46+
47+
private val component = ScalaComponent.builder[Props]("CustomizedBreadcrumbs")
48+
.renderBackend[Backend]
49+
.build
50+
51+
def apply(style: CustomizedBreadcrumbsStyle = DefaultCustomizedBreadcrumbsStyle) = component(Props(style))
52+
}

‎demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/IconBreadcrumbs.scala‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
package io.kinoplan.demo.components.labs.Breadcrumbs
2+
3+
import io.kinoplan.demo.components.ComponentContainer
4+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{BreadcrumbsStyle, DefaultBreadcrumbsStyle}
5+
import io.kinoplan.scalajs.react.material.ui.core._
6+
import io.kinoplan.scalajs.react.material.ui.icons.{MuiGrainIcon, MuiHomeIcon, MuiWhatshotIcon}
7+
import io.kinoplan.scalajs.react.material.ui.lab.MuiBreadcrumbs
8+
import japgolly.scalajs.react.vdom.all.{VdomElement, _}
9+
import japgolly.scalajs.react.{BackendScope, Callback, ScalaComponent}
10+
import scalacss.ScalaCssReactImplicits
11+
12+
object IconBreadcrumbs extends ScalaCssReactImplicits {
13+
case class Props(style: BreadcrumbsStyle)
14+
15+
class Backend(t: BackendScope[Props, Unit]) {
16+
def handleClick: Callback = Callback.alert("You clicked a breadcrumb.")
17+
18+
def render(props: Props): VdomElement = {
19+
val css = props.style
20+
21+
div(
22+
ComponentContainer("Breadcrumbs with icons")(
23+
div(css.root,
24+
MuiPaper()(css.paper,
25+
MuiBreadcrumbs()(aria.label := "Breadcrumb",
26+
MuiLink(color = MuiLink.Color.inherit)(css.link,
27+
href := "/",
28+
onClick --> handleClick,
29+
MuiHomeIcon()(css.icon),
30+
"Material-UI"
31+
),
32+
MuiLink(color = MuiLink.Color.inherit)(css.link,
33+
href := "/#demos/app-bar/",
34+
onClick --> handleClick,
35+
MuiWhatshotIcon()(css.icon),
36+
"Lab"
37+
),
38+
MuiTypography(color = MuiTypography.Color.textPrimary)(css.link,
39+
MuiGrainIcon()(css.icon),
40+
"Breadcrumb"
41+
)
42+
)
43+
)
44+
)
45+
)
46+
)
47+
}
48+
}
49+
50+
private val component = ScalaComponent.builder[Props]("IconBreadcrumbs")
51+
.renderBackend[Backend]
52+
.build
53+
54+
def apply(style: BreadcrumbsStyle = DefaultBreadcrumbsStyle) = component(Props(style))
55+
}

‎demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/SimpleBreadcrumbs.scala‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
package io.kinoplan.demo.components.labs.Breadcrumbs
2+
3+
import io.kinoplan.demo.components.ComponentContainer
4+
import io.kinoplan.demo.styles.labs.Breadcrumbs.{DefaultBreadcrumbsStyle, BreadcrumbsStyle}
5+
import io.kinoplan.scalajs.react.material.ui.core._
6+
import io.kinoplan.scalajs.react.material.ui.lab.MuiBreadcrumbs
7+
import japgolly.scalajs.react.vdom.all.{VdomElement, _}
8+
import japgolly.scalajs.react.{BackendScope, Callback, ScalaComponent}
9+
import scalacss.ScalaCssReactImplicits
10+
11+
object SimpleBreadcrumbs extends ScalaCssReactImplicits {
12+
case class Props(style: BreadcrumbsStyle)
13+
14+
class Backend(t: BackendScope[Props, Unit]) {
15+
def handleClick: Callback = Callback.alert("You clicked a breadcrumb.")
16+
17+
def render(props: Props): VdomElement = {
18+
val css = props.style
19+
20+
div(
21+
ComponentContainer("Simple breadcrumbs")(
22+
div(css.root,
23+
MuiPaper()(css.paper,
24+
MuiBreadcrumbs()(aria.label := "Breadcrumb",
25+
MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"),
26+
MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"),
27+
MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb")
28+
)
29+
),
30+
br(),
31+
MuiPaper()(css.paper,
32+
MuiBreadcrumbs()(aria.label := "Breadcrumb",
33+
MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"),
34+
MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"),
35+
MuiLink(color = MuiLink.Color.textPrimary)(
36+
href := "/#lab/breadcrumbs/",
37+
aria.current := "page",
38+
onClick --> handleClick,
39+
"Breadcrumb"
40+
)
41+
)
42+
)
43+
)
44+
)
45+
)
46+
}
47+
}
48+
49+
private val component = ScalaComponent.builder[Props]("SimpleBreadcrumbs")
50+
.renderBackend[Backend]
51+
.build
52+
53+
def apply(style: BreadcrumbsStyle = DefaultBreadcrumbsStyle) = component(Props(style))
54+
}

0 commit comments

Comments
 (0)