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

18th
Jul 2017
Øyvind Raddum Berg
@oyvindberg
Jul 18 2017 19:38
@rleibman ca 29th of July. I have planned to take care of all this then. If you have capacity to do it before, all the better
Also feel free to revisit my proposal to merge the other branch first. I have not looked at the code at all myself
And well, again if you do it, please open a PR. We're three set of eyes now :)
José Luis Colomer Martorell
@beikern
Jul 18 2017 20:39

I suppose I shouldn't try scalajs-react-components until you release a stable version, but... I'm doing it :)
I'm using a local published version from @rleibman fork
I have a question, I'm trying to generate a menu from a MuiIconMenu using the following code:

object NavToolBar {
  val component =
    ScalaComponent
      .builder[String]("NavToolBar")
  .render(
    p =>
      MuiToolbar()(
        MuiToolbarGroup(firstChild = true)(
          MuiFlatButton(key = "HomeButton", label = p.props)(),
          MuiFlatButton(key = "UsersButton", label = "USERS")(),
          MuiFlatButton(key = "GroupsButton", label = "GROUPS")(),
          MuiFlatButton(key = "PoliciesButton", label = "POLICIES")()
        ),
        MuiToolbarGroup(lastChild = true)(
          MuiToolbarSeparator()(),
          MuiIconMenu[String](
            desktop = true,
            iconButtonElement = MuiIconButton()(
              MuiSvgIcons.NavigationMoreVert.apply(
                style = js.Dynamic.literal(width = "30px", height = "30px")
              )()
            )
          )(
            MuiMenuItem(value = "1", primaryText = <.div("Hello").render)(),
            MuiMenuItem(value = "2", primaryText = <.div("Hello").render)()
          )
        )
      )
  ).build

  def apply(name: String) = component(name)

The svgIcon is there but the menu does not appear when I click it :( Is it maybe a bug?

ReactTools reveal the MenuItem abscense in the VDOM
http://imgur.com/a/hiS9d
Anyways, what a great job are all of you doing here dudes, I've tried to build a facade for Bootstrap (alone) and I gave up because is so painful :& Hope you release soon an stable version :)

Roberto Leibman
@rleibman
Jul 18 2017 20:44
This is working for me:
        MuiIconMenu(
          anchorOrigin = Origin(Vertical.bottom, Horizontal.left),
          targetOrigin = Origin(Vertical.bottom, Horizontal.left),
          animated = true,
          iconButtonElement = MuiIconButton("Common options")(Mui.SvgIcons.NavigationMenu()()))(
            MuiMenuItem(primaryText = js.defined("Item1"),
              disabled = environment.version.isEmpty,
              onTouchTap = backend.versionDetailsDlgShow(environment) _)())
Let me try your example
Roberto Leibman
@rleibman
Jul 18 2017 20:51
I tried your example... sorry to say: "it worked in my machine"
José Luis Colomer Martorell
@beikern
Jul 18 2017 20:54
@rleibman scala js react version? i'm using 1.1.0
So weird
Roberto Leibman
@rleibman
Jul 18 2017 20:55
Ah... still using 1.0.1
One thing at a time :)
José Luis Colomer Martorell
@beikern
Jul 18 2017 20:56
gonna try to compile against 1.0.1, hope it doesn't explode "cross fingers"
Roberto Leibman
@rleibman
Jul 18 2017 20:57
Let me know.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:00
Compiled against 1.0.1 without issues, still not working. Weird
Roberto Leibman
@rleibman
Jul 18 2017 21:01
Anything on the console?
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:03
warning.js:36 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by FlatButton)
    in FlatButton (created by NavToolBar)
    in div (created by ToolbarGroup)
    in ToolbarGroup (created by NavToolBar)
    in div (created by Toolbar)
    in Toolbar (created by NavToolBar)
    in NavToolBar (created by Router)
    in MuiThemeProvider (created by Router)
    in div (created by Router)
    in nav (created by Router)
    in div (created by Router)
    in Router
I don't think that warn is related with the menuItem issue, but console is spitting it
Or maybe yes, I'm so noob in scala.js and React :)
Roberto Leibman
@rleibman
Jul 18 2017 21:08
Assuming you cleaned your example before posting it and that your real code has the onTouchTap, try removing it.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:11
The code is exactly the same I posted above
Roberto Leibman
@rleibman
Jul 18 2017 21:12
... remembering... I had to do something for onTouchTap to work.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:12
This is how I'm instantiating the component btw MuiMuiThemeProvider()(NavToolBar("Test"))
Roberto Leibman
@rleibman
Jul 18 2017 21:13
That's ok.
Are you including react-tap-event-plugin in your npmDependencies (I have those in my build.sbt project)
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:14
  npmDependencies in Compile := Seq(
    "react"                             -> Settings.versions.reactVersion,
    "react-dom"                         -> Settings.versions.reactVersion,
    "material-ui"                       -> Settings.versions.MuiVersion,
    "react-tap-event-plugin"            -> "2.0.1",
    "jquery"                            -> Settings.versions.jQuery,
    "bootstrap"                         -> Settings.versions.bootstrap
  )
I think so
maybe the version is not the correct one?
Roberto Leibman
@rleibman
Jul 18 2017 21:15
That's the same I have.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:15
val reactVersion = "15.6.1"
val MuiVersion   = "0.18.1"
maybe the react or mui versions are bitting me
Roberto Leibman
@rleibman
Jul 18 2017 21:16
I have
lazy val MuiVersion = "0.18.1"
lazy val reactVersion = "15.5.4"
But that probably does not matter.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:16
D'oh!
Roberto Leibman
@rleibman
Jul 18 2017 21:16
?
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:19
Only blaming my bad luck :)
Roberto Leibman
@rleibman
Jul 18 2017 21:19
Do you have this in your main class?
ReactTapEventPlugin(js.undefined)
'cause you need that to inject the tapevent plugin into the classes.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:20

Dunno what could be wrong, I'm not using onTouchTap in my code.

Nope, 0 hits when searching for ReactTapEventPlugin

oh, interesting
Roberto Leibman
@rleibman
Jul 18 2017 21:21
Try adding that to the main body of your JSApp
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:22
Just throw it in the main method?
like
@JSExport
  def main(): Unit = {

    ReactTapEventPlugin(js.undefined)
    // create stylesheet
    GlobalStyles.addToDocument()
    // create the router
    val router = Router(BaseUrl.until_#, routerConfig)


    router.mapUnmounted(_.renderIntoDOM(dom.document.getElementById("root")))
  }
Roberto Leibman
@rleibman
Jul 18 2017 21:22
No, before the main method, otherwise for some stupid reason it gets called twice.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:23
Ok, gonna try that
Roberto Leibman
@rleibman
Jul 18 2017 21:23
Mine:
object MyApp extends JSApp {
  //TODO: dev-server complains that we load several times?
  ReactTapEventPlugin(js.undefined)

  @JSExport
  override def main(): Unit = {
    val baseTheme = Mui.Styles.LightRawTheme
    val theme: MuiTheme =
      Mui.Styles.getMuiTheme(baseTheme)

    AppCSS.load()
    val router = MuiMuiThemeProvider(muiTheme = theme)(AppRouter.router())
    router.renderIntoDOM(dom.document.getElementById("content"))

    ()
  }

}
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:24
WOW
man, you are godsend :)
now it works like a charm
you nailed it !
Roberto Leibman
@rleibman
Jul 18 2017 21:25
Awesome...thanks... now you can do your part... can you add an issue that we need to document this?
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:25
Yeah, ofc
Roberto Leibman
@rleibman
Jul 18 2017 21:25
thx
We're super tied to that plugin, and through the code generation we are also super tied to a very specific version of mui/elemental/semantic libraries as well... maybe we shouldn't even give the option to change those.
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:31
That could be a decent workaround
issue: chandu0101/scalajs-react-components#86
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:43
Btw, thnx :) , just one more thing. You said that scalajs-react-component is super tied to a specific material-ui version due to code generation
what version are you using? 0.17.0 as the readme documents?
Roberto Leibman
@rleibman
Jul 18 2017 21:45
We generate Mui components based on a specific version. No, I believe 0.18.1
José Luis Colomer Martorell
@beikern
Jul 18 2017 21:45
nice, gonna change that then to avoid future noise