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

3rd
Nov 2015
Janos Haber
@b0c1
Nov 03 2015 00:02
hehe :) yeah...
thnx the help... good night :D
ohh Intellij IDEA 15 released :D
Zach Langbert
@zlangbert
Nov 03 2015 00:09
yeah, used 15 today. Scala support seems pretty solid right now
Zach Langbert
@zlangbert
Nov 03 2015 02:25
Anyone have any thoughts on the two different ways things get styled in scalajs-react and the material-ui wrapper?
maybe merging them somehow?
Janos Haber
@b0c1
Nov 03 2015 06:43
@zlangbert can you explain this?
Janos Haber
@b0c1
Nov 03 2015 11:09
Anyone tried to do file upload with autowire?
Zach Langbert
@zlangbert
Nov 03 2015 15:25

I mean to style a scalatag I'll generally write something like:

val styles = Seq(
  ^.display := "flex",
  ^.alignItems := "center"
)
<.div(styles, ...)

but with material-ui:

MuiRaisedButton(
  styles = js.Dynamic.literal(
    display = "flex",
    alignItems = "center"
  )
)()
Janos Haber
@b0c1
Nov 03 2015 20:12
Yeah, I got it... maybe with some implicit converter?
which convert Seq(Attr) to js.Dynamic.literal ?
with macro :)
grrr... IDEA kick bootpickle.Default._ import when I organize imports...
Otto Chrons
@ochrons
Nov 03 2015 20:20
it's a known problem, IDEA is not too great understanding some implicits
Janos Haber
@b0c1
Nov 03 2015 21:49
@zlangbert maybe I do something wrong but nothing happened if I try to set any component "style" attribute like this...
Janos Haber
@b0c1
Nov 03 2015 21:55
Ahhahh... I tried to change the background color, I see in the code in the outer div, but inside the component the button element will override :D
Janos Haber
@b0c1
Nov 03 2015 22:05
@zlangbert ok I made an very helper to do what you want... maybe someone tune up :)
package japgolly.scalajs.react.vdom

import japgolly.scalajs.react.vdom.Scalatags.StylePair
import org.scalajs.dom
import scala.scalajs.js

object MuiStyleHelper {
  def style(attrs: TagMod*): js.Any = {
    val elements = for {
      attr <- attrs
      if (attr.isInstanceOf[StylePair[_]])
      style = attr.asInstanceOf[StylePair[js.Any]]
    } yield s"${style.s.jsName}: '${style.v}'"
    dom.console.log(elements.mkString(","))
    js.eval(s"new Object({${elements.mkString(",")}})")
  }
}
And the usage:
MuiRaisedButton(
          label = "Boo",
          style = MuiStyleHelper.style(
            ^.display := "flex",
            ^.alignItems := "center"
          )
        )()
Janos Haber
@b0c1
Nov 03 2015 22:18
Ok I removed the eval block... :D
package japgolly.scalajs.react.vdom

import japgolly.scalajs.react.vdom.Scalatags.StylePair

import scala.scalajs.js

object MuiStyleHelper {
  def style(attrs: TagMod*): js.Any = {
    val base = (new js.Object).asInstanceOf[js.Dynamic]
    for {
      attr <- attrs
      if (attr.isInstanceOf[StylePair[_]])
      style = attr.asInstanceOf[StylePair[js.Any]]
    } yield base.updateDynamic(style.s.jsName)(style.v)
    base
  }
}
@zlangbert maybe :)
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:30
hey thats a pretty sweet idea
that solves one of the big issues
Janos Haber
@b0c1
Nov 03 2015 22:31
really?
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:31
well it had bothered be for a while anyway, but not enough to have a proper look at it
most mui components supports custom styles, and it has been a bit awkward
i have been really busy the last week, but i hope to complete the remaining work on the 0.10 branch this sunday
will give it a shot to integrate this then
Janos Haber
@b0c1
Nov 03 2015 22:32
cool..
@elacin you'll use helper or integrate into macro? or define a new tag like styleTags:Seq[TagMod] ?
Janos Haber
@b0c1
Nov 03 2015 22:38
or styleTags:TagMod because TagMod composeable :D
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:40
sticking the helper functionality into the macro would be the best i suppose, if you could just pass TagMod into the facade and be done with it
dont you think?
Janos Haber
@b0c1
Nov 03 2015 22:41
so include the style method directly with variable args?
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:42
hmm, varargs tends to get messy in combination with named parameters imho
perhaps just a Seq
Janos Haber
@b0c1
Nov 03 2015 22:42
in this case when you use you must write: style = style(Seq(....))
that's why I decided to varargs, because you not using named parameter in this case, you using tag mod (filtered to style parameters)
because scala tags already contain (I think most of) css tag implementations :)
but you are the boss... :D
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:48
well, for now something quick and dirty, like exposing a style: Seq[TagMod] or whatever will work fine
Janos Haber
@b0c1
Nov 03 2015 22:48
you want to replace the current style attribute?
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:49
ideally i would have liked for scalacss and scalatags in scalajs-react to be able to render to a javascript object like they now render to a string
so you would just stick exactly the same thing in there and it would work
but that would require more effort
i thought to replace it yes, because im not happy with how it works now
Janos Haber
@b0c1
Nov 03 2015 22:50
hmm... in this case the current working application can be broke
and scalacss will provide... what?
a string of styles?
(I never used..)
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:51
yes, it would be a breaking change
perhaps we could just bundle the helper you wrote
it would solve my problems
Janos Haber
@b0c1
Nov 03 2015 22:53
I'm thinking... because if you replace the style to TagMod, it will not work with scalacss
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:54
what could work
if we expose style: WrapperStyle (or whatever, a dumb class that we export)
we could write implicits from all three alternatives to that
think we could even keep source compatibility that way
Janos Haber
@b0c1
Nov 03 2015 22:55
I think that's the right way
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 22:56
ive got half an hour of energy left here, lets see if i can make it work
Janos Haber
@b0c1
Nov 03 2015 23:01
:pray:
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:05
Aah, you snuck your code into package japgolly.scalajs.react.vdom, naughty
:D
didnt see that
Janos Haber
@b0c1
Nov 03 2015 23:05
yeah :) because the StylePair :D
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:05
just figured
gaah, im starting to not like the fact that all of scalatags is hidden like that
Janos Haber
@b0c1
Nov 03 2015 23:10
hehe :) yeah... but we work what we have :D
Zach Langbert
@zlangbert
Nov 03 2015 23:21
@b0c1 Nice!
yeah, I don't see why all the scalatags stuff is private
Janos Haber
@b0c1
Nov 03 2015 23:22
@zlangbert hehe, thnx, you asked you got it :D
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:35
on the positive side it works
Janos Haber
@b0c1
Nov 03 2015 23:35
hehe :) and the negative?
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:36
package japgolly.scalajs.react.vdom

import japgolly.scalajs.react.vdom.Scalatags.StylePair

import scala.scalajs.js

case class CssProperties(value: js.Any) //cant be AnyVal because it wraps javascript apparently

object CssProperties{
  implicit def JsCssProperties(jsObject: js.Any): CssProperties =
    CssProperties(jsObject)

  implicit def TagModCssProperties(attrs: Seq[TagMod]): CssProperties = {
    CssProperties(attrs.foldLeft((new js.Object).asInstanceOf[js.Dynamic]){
      case (acc, style: StylePair[js.Any]) ⇒
        acc.updateDynamic(style.s.jsName)(style.v)
        acc
      case (_, other) ⇒
        throw new RuntimeException(s"$other is not a `StylePair`")
    })
  }

  implicit def TagModCssPropertiesU(attrs: Seq[TagMod]): js.UndefOr[CssProperties] =
    TagModCssProperties(attrs)

  implicit def ToJs(c: CssProperties): js.Any = c.value //too much stress to update macro (would need to be defined before macro module)
}
its pretty ugly
Janos Haber
@b0c1
Nov 03 2015 23:37
why do you think that?
the negative side the application depends to ScalaCSS :)
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:40
TagModCssProperties will fail for a lot of TagMods, the code needs to live in scalajs-react namespace, the implicits dont resolve well when the props is wrapped in js.UndefOr (so we need to export two, like seen with TagModCssPropertiesU), CssProperties needs to box
Janos Haber
@b0c1
Nov 03 2015 23:41
@elacin i not see better way to do that... only macro for compile time type check...
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:41
it might be better to just expose a good, old function that people call explicitly to convert a ModTag into a js.Any
Janos Haber
@b0c1
Nov 03 2015 23:43
hmm...
why fail for a lot of TagMod?
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:43
oh, and TagModCssProperties will fail if style.v is not a js.Any, which we cannot check
TagMod has a bunch of implementations
Janos Haber
@b0c1
Nov 03 2015 23:44
I know, but for style I think only StylePair support is allowed
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:45
at least TagModComposition
but that can be handled with another branch in the pattern matching
Janos Haber
@b0c1
Nov 03 2015 23:45
hmmm...
the js.Any is neccessary because updateDynamic only handle this...
if the user want to use other value he need to be implicit or explicit to convert
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:48
yes, the user would provide a StyleValue for whatever random type
what happens if the prop is style: js.UndefOr[String]?
does that work?
no
guess i knew that, but that would be convenient
Janos Haber
@b0c1
Nov 03 2015 23:55
ok there is no silver bullet, but we have a way to use scalacss and scala tags for style...
if we not break the current solution it will work...
Øyvind Raddum Berg
@oyvindberg
Nov 03 2015 23:56
japgolly.scalajs.react.vdom.Builder is already constructing exactly what we need to get out
Janos Haber
@b0c1
Nov 03 2015 23:58
really? It's not a builder for a whole tag?
I think it's designed to create React element
(that's why the render method)