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

23rd
Sep 2015
TP Diffenbach
@tpdi
Sep 23 2015 17:28
Material-ui makes use of the ...other syntx to pass properties to child components. This works in javascript because props are just a js object. In Scala, props is typed
Can we add a Seq[UndefOr[Any]] to components, and modify JSMacro to flatMap that Seq into the returned props object
?
We can't, because to add to props we need a property name.
other: Map[String, UndefOr[Any]] or other: Seq[(String, UndefOr[Any])]?
Since sjs-react-componenets uses named arguments, we can't also have a varargs.
TP Diffenbach
@tpdi
Sep 23 2015 17:36
other: Js.Dynamic
MuiSomeComponent(namedProp = 1, fooProp= "2", others:   js.Dynamic.literal(bar = "bar", baz = "baz"))()
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 17:47
hmm, that's worthy of some research
i hadnt noticed it had that possibility of threading things through
it would be possible to do it with either a Map or js.Dynamic indeed, but it would be better to keep it statically typed
do you know how it's used among the different components?
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 18:29
which, afaict, gives you a way to send things to a span and a button inside it
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 18:38
so it seems there is an easy and a hard way to do that then, either we expose a js.Dynamic for all components and use that as a base for doing the component -> json mapping, or we can selectively expose fields that will end up in child component props that actually makes sense so users stand a chance to discover them without reading source code
TP Diffenbach
@tpdi
Sep 23 2015 19:45
Or both. expose the fields that make sense/ we know are used, but keep other as a fallback
BTW, great news! My sjs-react-components example ( chandu0101/scalajs-react-components#37 ) had some bugs. Several seem to be fixed by 1) upgrading to material-ui 0.11.1, and 2) adding value as an MuiDatePicker parameter!
Unfortunately, mayerial-ui's timepicker does not use value, so that's still a problem/bug.
TP Diffenbach
@tpdi
Sep 23 2015 19:50
BTW, is there a way to merge two js.Dynamics? val a = js.Dynamic.literal(a=1); val b = js.Dynamic.literal(b=2); a SOME OP b // {a = 1, b = 2}
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 20:34
yeah @tpdi i cant wait to be able to sync to newest material-ui, just too bad were stuck waiting for scalajs-react to support a newer react version before doing it
TP Diffenbach
@tpdi
Sep 23 2015 20:58
I was locally able to use material-ui 0.11.1. It appears to work, and it fixes a bad bug in TimePicker, but I have notr exhaustively tested it. What are we waiting on in sjs-react??
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:14
next version will support react 0.13 at least japgolly/scalajs-react#173
it already mostly works (i always used it with 0.13), but there are some changes, so the wrapper needs to be updated
and material-ui > 0.9.2 iirc requires 0.13
TP Diffenbach
@tpdi
Sep 23 2015 21:16
ah, ok, thanks
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:18
hey i had a look at that example you wrote
cool stuff
but you should really look into using js.UndefOr instead of null all over the place
think you can clean it up quite a bit if you do :)
TP Diffenbach
@tpdi
Sep 23 2015 21:43
You're right. This was my first foray into React r scalajs-react, so I wasn't sure about which to use. Now I know that UndefOr get flatmapped/foreached into javascript.
Ugh. m-ui 0.9.2 doesn't expose value -- so it gets ...othered into the text control, which then prevents (lol) the picker dialog from setting its own text control.
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:46
which value is this?
that sounds pretty irritating
TP Diffenbach
@tpdi
Sep 23 2015 21:46
the attribute value which in React sets the componnet up as "controlled"
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:47
yeah i too just discovered that the material-ui components can be controlled
gotta read up on this
TP Diffenbach
@tpdi
Sep 23 2015 21:47
basically, that means for inputs, the input's value is passed in at all time from whatever parent renders it.
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:47
and something like the date chooser supports both modes, right?
TP Diffenbach
@tpdi
Sep 23 2015 21:48
yes, if you don't set value (or valueLink) the you can call setDate on it
Ok, so in react, state should live at the lowest common parent (ie, the most recent common ancestor) of the components that use that state, right
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:50
well the opposite can be quite beneficial as well
fewer places with state is better
TP Diffenbach
@tpdi
Sep 23 2015 21:50
so presumbaly, you give a onUpdate property to the control to sed the user-altered vaue back to your state
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:50
err yeah i guess i read your statement wrong
TP Diffenbach
@tpdi
Sep 23 2015 21:50
right
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:50
lowest common parent - well said :)
and yep
TP Diffenbach
@tpdi
Sep 23 2015 21:51
"deepest" is probbaly better ;)
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:52
in terms of wrappers i would be tempted to have two, one for each of those modes
if youre just supposed to set a subset of the possible props for each mode anyway
TP Diffenbach
@tpdi
Sep 23 2015 21:52
So I dson't know that there's much need for a non-controlled input, unless you're using it , for example, "every time I hit enter in this control, I want to execute an action"
So uncontrolled might be a search input
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:53
yeah, though i've learn that people tend to do things you dont expect :smile:
TP Diffenbach
@tpdi
Sep 23 2015 21:53
even defaultDate applies for controlled, albeit only if vlaue is null or undefined
so you'd just have wrappers with and without value
You watching thr Pope's Mass? The music is great.
Unfortunately, its keeping me from getting lunch
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:55
ah ok, so that doesnt make much sense then
is he somewhere?
just read the statement about evolution
which means im a bit more positive about the pope today than on a normal day :)
TP Diffenbach
@tpdi
Sep 23 2015 21:56
He's making his visit to the US.
what statement
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 21:58
oh haha
TP Diffenbach
@tpdi
Sep 23 2015 21:59
Oh, Catholic doctrine has asserted evolution for years and years.
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:00
oh well, thats good at least
TP Diffenbach
@tpdi
Sep 23 2015 22:00
anti-evolution is mostly a Protestant thing, and mostly Evangelical, not Mainline
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:01
right, it's probably quite niche
TP Diffenbach
@tpdi
Sep 23 2015 22:02
You're Swedish?
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:02
norwegian
TP Diffenbach
@tpdi
Sep 23 2015 22:02
Sorry, sorrry
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:03
hehe dont worry, wasnt that far off
TP Diffenbach
@tpdi
Sep 23 2015 22:04
Used to do some stuff on rockbox, that was Swedish
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:04
ooh, the firmware thing?
TP Diffenbach
@tpdi
Sep 23 2015 22:07
yeah OS mp3 firmware
C code without malloc
Ok, so we're waiting on sjs-react 0.10
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:09
now that is a pretty cool project
think i was going to try it on an old ipod once, but dont think i ever got around to it
and yes, we are
i have a branch where i ported the entire library to the new api at least
TP Diffenbach
@tpdi
Sep 23 2015 22:11
yeah, you really had to worry about memory
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:11
so once we have that we can update the wrappers to match newest material-ui
TP Diffenbach
@tpdi
Sep 23 2015 22:11
which library? sjs-react-components?
Øyvind Raddum Berg
@oyvindberg
Sep 23 2015 22:11
yes
i always make sure to use memory as freely as possible now in a small celebration of that the times of squeezing things out of very little memory are mostly over
TP Diffenbach
@tpdi
Sep 23 2015 22:12
;)
TP Diffenbach
@tpdi
Sep 23 2015 22:27
Yeah, I have my entire music library on my phone now, and it weighs less then my ipod.