These are chat archives for chandu0101/scalajs-react-components

21st
May 2016
Raul Rodriguez
@raul782
May 21 2016 11:28
Hey Guys, I'm using Playframework in a multiproject, and I want to get the jsdependencies through sbt, the one that is proving hard to configure is material-ui, any advice?
jsDependencies ++= Seq(
      "org.webjars.npm" % "classnames" % "2.2.5"
        / "classnames/2.2.5/index.js"
        commonJSName "Classnames",
      "org.webjars.bower" % "react" % "15.0.1"
        / "react-with-addons.js"
        minified "react-with-addons.min.js"
        commonJSName "React",
      "org.webjars.bower" % "react" % "15.0.1"
        / "react-dom.js"
        minified "react-dom.min.js"
        dependsOn "react-with-addons.js"
        commonJSName "ReactDOM",
      "org.webjars.npm" % "material-ui" % "0.15.0"
        / "material-ui/0.15.0/lib/index.js"
        dependsOn "react-with-addons.js"
    )
I get the jar in my dependencies, but the client-jsdeps.js is only including index.js which only have the imports.
Øyvind Raddum Berg
@oyvindberg
May 21 2016 17:03
@raul782 sbt doesnt understand javascript modules (require/import). The easiest path so far is to just use for example webpack - check the demo module of this project
Raul Rodriguez
@raul782
May 21 2016 22:35
@oyvindberg thanks, yeah, that's what I've figured it out from previous conversations on gitter /github
So I was using MuiAppBar for my AppHeader, however, there is a weird issue I'm experiencing. My IDE asked me for the title, to not be string but UndefOr[ReactNode]
Raul Rodriguez
@raul782
May 21 2016 22:41
package components

import chandu0101.scalajs.react.components.materialui._
import japgolly.scalajs.react.{ReactComponentB}
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react._

/**
  * Created by raul on 5/15/16.
  */
object AppHeader {

  class Backend() {
    def render() = {
      val myProject = "My Project"
      val title = React.createElement("h3", null, myProject) //This works but not assigning directly the title

      <.div(
        MuiAppBar(
          title = "My Project", //Type mismatch, expected: UndefOr[ReactNode], actual: String
          showMenuIconButton = true
        )()
      )
    }
  }

  val component = ReactComponentB[Unit]("AppHeader")
    .renderBackend[Backend]
    .buildU

  def apply() = component()
}
However, on the demo project, the ide doesn't complain, so I guess it's something wrong with my project.
Btw, using a reactElement, doesn't align correctly, I need to add more styles to center this correctly which I believe defeats the purpose of the MuiAppBar
Øyvind Raddum Berg
@oyvindberg
May 21 2016 22:57
Check the readme file
Raul Rodriguez
@raul782
May 21 2016 23:05
Thanks a lot.
Raul Rodriguez
@raul782
May 21 2016 23:54
So in the same spirit, If I wanted to change the style of the MuiAppBar, I see the style is defined as UndefOr[CssProperties] further inspection tells me that CssProperties is of type js.Any, then I guess I can proceed in the following way? Since there is no implicit to import.
object MyStyle {
    val muiAppBarStyle = Seq( ^.background := "#F27060" )
}
val appBarStyle : js.UndefOr[CssProperties] = MyStyle.muiAppBarStyle.asInstanceOf[js.Dynamic]
def render(S: State) = {
      <.div(
        MuiAppBar(
            title = "My Project",
            style = appBarStyle,
            showMenuIconButton = true
          )()
      )
 }
Øyvind Raddum Berg
@oyvindberg
May 21 2016 23:57
Use js.Dynamic
Raul Rodriguez
@raul782
May 21 2016 23:59
Do you have an example, how to use it?