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

27th
Dec 2015
Alexej Haak
@Daxten
Dec 27 2015 15:16
!
Thanks man
MuiTable()(
          MuiTableHeader(enableSelectAll = false)(
            MuiTableRow()(
              MuiTableHeaderColumn()("Started"),
              MuiTableHeaderColumn()("Runtime")
            )
          ),
          MuiTableBody()(
                 // ....
          )
)
doesnt work for me, I'm getting this js error:
 Uncaught TypeError: Cannot read property 'children' of undefined
deleting the header fixes it
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 16:08
that's weird, it looks like you're using it just like the demo, which should work
please copy the stack trace too next time, hard to know whats wrong without it
Alexej Haak
@Daxten
Dec 27 2015 16:24
sure give me a sec
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 16:25
You can copy/paste the demo code and see if that works in your project perhaps
img was faster.. chrome doesn't put newlines into the stacktrace O_o
Alexej Haak
@Daxten
Dec 27 2015 17:32
also im getting linking errors for the <.input field in ReactSearchBox for ReactTable
[error] Referring to non-existent method Ljapgolly_scalajs_react_vdom_package$Tags$.input__Ljapgolly_scalajs_react_vdom_ReactTagOf
[error]   called from Lchandu0101_scalajs_react_components_ReactSearchBox$Backend.render__Lchandu0101_scalajs_react_components_ReactSearchBox$Props__Ljapgolly_scalajs_reac
t_vdom_ReactTagOf
trying to debug it further atm
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 18:01
That must be incompatible versions of scalajs-react?
Alexej Haak
@Daxten
Dec 27 2015 18:13
  "com.github.japgolly.scalajs-react" %%% "core" % "0.10.2",
  "com.github.japgolly.scalajs-react" %%% "extra" % "0.10.2",
  "com.github.chandu0101.scalajs-react-components" %%% "core" % "0.2.0",
should be right ?
Alexej Haak
@Daxten
Dec 27 2015 18:22
hm I see the latest snapshot is with 0.10.2, but the stable version maybe has a different one
y its working with 0.10.0 :(
thanks for the hint
dependencies should be in the install instructions I guess :- )
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 18:32
yeah, minor versions arent meant to break binary compatibility
though for now these libraries are hardly stable or popular enough that its worth to spend much time on
so about the table issues you had there, im finally on a computer now
you can follow the links in the stack trace to the material-ui code and see what ends up as undefined
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 18:38
that is, what is the code at web-jsdeps.js:45
hadnt really though about it, but it takes a lot of information to report such errors with this whole wrapper scheme
Alexej Haak
@Daxten
Dec 27 2015 18:41
y I'm just using the ReactTable now
works better anyway :)
but i can check again so you have the information
but maybe it was just the compatibility issue i also had with reacttable
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 18:43
ah good
well i am curious how it could fail
Alexej Haak
@Daxten
Dec 27 2015 18:47
Ah i don't have unminimized js depends atm :(
return o.Children.forEach(t.props.children,function(e){r.push(e)}),o.cloneElement(t,n,r)},
is where it fails
Alexej Haak
@Daxten
Dec 27 2015 19:02
ah! I think I have finally some usefull feedback, and not just a question :)
ReactTable doesn't rerender properly when using data that changes (for example loading async data)
Otto Chrons
@ochrons
Dec 27 2015 19:03
should use Diode :)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:04
yeah im looking forward to finding some time to look at diode, @ochrons
Alexej Haak
@Daxten
Dec 27 2015 19:04
I'm actually using it.. just not in that case (only that component has access to the data)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:04
just looked at source so far, like what im seeing
Alexej Haak
@Daxten
Dec 27 2015 19:04
but I think that wouldnt fix that problem :)
Otto Chrons
@ochrons
Dec 27 2015 19:04

just implementing some type class stuff in it,

  override def zoomMapRW[F[_], A, B](fa: S => F[A])(f: A => B)(set: (S, F[B]) => S)(implicit functor: Functor[F], ct: ClassTag[B]) =
    new MapModelRW(root, fa compose getF, f)((s, u) => setF(s, set(getF(s), u)))

:)

Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:05
but you are feeding it data through props, and it doesnt update, @Daxten ?
Alexej Haak
@Daxten
Dec 27 2015 19:05
the ReactTable puts the data into the state when initiating and doesn't update that right away
yeah
ReactTable(data = data(p, s), columns = columns, rowsPerPage = 10)
    def data(p: Props, s: State): Vector[Map[String, Any]] = s.boggls.sortWith(_.start > _.start).map(boggl => 
             /// mapping stuff
    )).toVector
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:06
ah, it might be missing a componentWillReceiveProps to signal that it should update state
let me check that out
for now im sure you can make it update if you give it a randomized key, for example
Alexej Haak
@Daxten
Dec 27 2015 19:06
y, just wanted to say that :) looked at the source
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:06
though that would mean it rerenders the whole thing
Alexej Haak
@Daxten
Dec 27 2015 19:06
yep I got a workaround for me
I just wait for the collection to be non-empty.. thats good enough for me now
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:07
thats pretty bad ass looking code there @ochrons :D
Alexej Haak
@Daxten
Dec 27 2015 19:07
too many types :p but y diode is great, told that @ochrons already :)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:09
anyhow, ReactTable is in a pretty sorry state tbh, when i actually used it for a project i ended up rewriting the whole thing
Otto Chrons
@ochrons
Dec 27 2015 19:09
yeah, this type "hell" is quite tough to get right, but should be quite easy to use
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:09
though that made it specific enough for my code that i didnt put it back into this project
Otto Chrons
@ochrons
Dec 27 2015 19:09
not trying to make another shapeless here :stuck_out_tongue_winking_eye:
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:09
well not even that, its almost impossible to write it wrongly
thats the beauty of working at that level
Alexej Haak
@Daxten
Dec 27 2015 19:10
will you take a look at it? if not I could take a look and see if I can make a PR
Otto Chrons
@ochrons
Dec 27 2015 19:10
the reference equality requirement creates some additional challenges
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:10
would be appreciated if you could, @Daxten
isnt reference equality the easiest to work with, ochrons?
means you can pretty much ignore it entirely
Alexej Haak
@Daxten
Dec 27 2015 19:11
btw. are you master on the repo @elacin ?
or is only chandu?
or are you chandu..?
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:11
yeah, chandu is focusing on the other projects for now
Alexej Haak
@Daxten
Dec 27 2015 19:12
sri most likely?
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:12
yes
so im working a bit on it, because i need it myself
Alexej Haak
@Daxten
Dec 27 2015 19:14
y I'm doing a ton of prototyping / internal stuff / database management gui stuff atm, so I think it will be really helpfull for me too
didn't get around to it yet since I didn't want to use npm lol
actually I think someone posted a webjar for material-ui somewhere
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:16
yeah, we started working on it
but im not convinced it can be a good enough solution until sbt/scalajs understands the javascript module system
i would so love for all of that to be automagic
Alexej Haak
@Daxten
Dec 27 2015 19:23
I know it's offtopic for this channel, but does IntelliJ freeze for you when updating sbt dependencies? I had this for the last versions.. (IntelliJ stable, scala nightly)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:23
ive had intellij freeze all the time for me over the last three weeks
in desperation i installed community edition, which so far doesnt
Alexej Haak
@Daxten
Dec 27 2015 19:27
good to know it's not just me :+1:
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:30
what kind of database management stuff?
Alexej Haak
@Daxten
Dec 27 2015 19:35
the big production thingy I did with scalajs (without scalajs-react-components) was a webapp via which multiple countries could configure an mobile-app (which has to load product information and stuff from a server)
and manage dev/stage/live environment for that app from there
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:36
cool
one of the things im working on is a generic crud-interface for slick database tables
used it to delete and not having to write thousands of lines worth of admin tools xD
Alexej Haak
@Daxten
Dec 27 2015 19:42
:)
chandu0101/scalajs-react-components#62
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 19:54
great, i prepared everything to release 0.3 now with that, dependency updates, svg icons, more theming support
also added more explicit instructions for adding scalajs-react dependency like you proposed, @Daxten chandu0101/scalajs-react-components#63
Alexej Haak
@Daxten
Dec 27 2015 20:13
great thanks :)
Alexej Haak
@Daxten
Dec 27 2015 20:25
would it be bad to have a factory which creates ReactComponents? Not sure if ReactJS will fuck with that? Thinking about sth Like
    val tableComp = TypedReactTable[MyEntity]("MyEntityReactTableComponent")
              .headerColumn(e: Vector[MyEntity] => <.span("h1"))
              .headerColumn(e: Vector[MyEntity] => <.span("h2"))
              .headerColumn(e: Vector[MyEntity] => <.span("h3"))
              .column(e: MyEntity => <.span("col 1"))
              .column(e: MyEntity => <.span("col 2"))
              .column(e: MyEntity => <.span("col 3"))
              .withSorting
              .withPagination
              .withStyle(mystyle)
              .build

    def render(p: Props, s: State) = tableComp(p.entities)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 20:28
would have loved something like that
there is really only one problem
if you do something like that, react will run createClass every time you use it
Alexej Haak
@Daxten
Dec 27 2015 20:28
tableComp is a val in that case
so it would hold the component
wouldn't it?
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 20:29
depends on where that val lives
if it lives as long as the application does that is probably fine
Alexej Haak
@Daxten
Dec 27 2015 20:30
y I also saw that problem
maybe i thought about it wrong
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 20:30
and if it lives in render() that is a catastrophe :D
Alexej Haak
@Daxten
Dec 27 2015 20:30
inside backend for example should be fine I guess
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 20:31
that would depend on the life cycle of that outer component then
Alexej Haak
@Daxten
Dec 27 2015 20:31
gnarf
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 20:31
but the thing is, javascript and react doesnt really care about those types of ours
so i think we could work around it with one cast
it's something that keeps coming up, japgolly/scalajs-react#180
the best would be to solve it at the scalajs-react level
so, there - 0.3 released! :)
Alexej Haak
@Daxten
Dec 27 2015 20:36
yay!
Alexej Haak
@Daxten
Dec 27 2015 21:48
is it okay if a non-material-ui component is based upon material ui?
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 21:48
what do you mean, based upon?
Alexej Haak
@Daxten
Dec 27 2015 21:49
Im started fiddling around with a fully typed reacttable
and im using material-ui for it atm
since I don't care much about frontend stuff, and I'm happy if I can just compose it with some other stuff :)
ReactTable has it's own style and stuff
and works without using material-ui
ah forget it..
Alexej Haak
@Daxten
Dec 27 2015 21:54
best way would be to abstract that away later
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 21:59
we do, by the way, have an unmerged ReactTable PR - chandu0101/scalajs-react-components#57
Alexej Haak
@Daxten
Dec 27 2015 22:00

I really can't get

MuiTableHeader()(
          MuiTableRow()(
            MuiTableHeaderColumn()("hi"),
            MuiTableHeaderColumn()("hi")
          )
        ),

to work :/

Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:00
i had planned to merge it for the release, but still need @rleibman to finish it
Alexej Haak
@Daxten
Dec 27 2015 22:00
y I'm trying myself on a rewrite atm
or a different one?
atm it's more an extension to muiTable
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:01
ok cool
Alexej Haak
@Daxten
Dec 27 2015 22:01
so if you guys like it, merge it, if not.. I will use it :)
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:01
but hey, we have a demo of mui table working with headers
Alexej Haak
@Daxten
Dec 27 2015 22:01
maybe it won't happen at all
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:01
what happens if you copy that in your project? does it work?
Alexej Haak
@Daxten
Dec 27 2015 22:01
let me check
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:02
well experimenting is good - it would be an awesome thing to have a really good and type safe table
Alexej Haak
@Daxten
Dec 27 2015 22:06
that one works
from the demo
(scalajs-react-component demo)
okay now I should find whats wrong here
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:08
wait, i might have it
or err, no
meh
Alexej Haak
@Daxten
Dec 27 2015 22:11
MuiTableHeader(enableSelectAll = false)(
          MuiTableRow()(
            MuiTableHeaderColumn(
              tooltip = "Super Header",
              style = js.Dynamic.literal("textAlign" -> "center"))()),
          MuiTableRow()(
            MuiTableHeaderColumn(tooltip = "The ID")("ID"),
            MuiTableHeaderColumn(tooltip = "The Name")("Name"),
            MuiTableHeaderColumn(tooltip = "The Status")("Status")
          )
        ),
works
but without the second row it doesn't
seems like 2 rows are mandatory?..
and it misses colSpan attribute
TableHeaderColumn
http://chandu0101.github.io/sjrc/#materialui/table
that's also why it renders wrong here
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:20
i had been wondering about why it was rendered with so much vertical space
is that because of missing colSpan? where should it come from?
Alexej Haak
@Daxten
Dec 27 2015 22:22
its a property
second
MuiTableHeaderColumn(
                tooltip = "Super Header",
                style = js.Dynamic.literal("textAlign" -> "center",
                colSpan = 3))()
            ),
Øyvind Raddum Berg
@oyvindberg
Dec 27 2015 22:26
aah
i remember now, i couldnt specify that when transcribing the demo
its not a defined prop in the component, but it will be passed on to the <tr> element it creates
we really need a way for these wrappers to accept unspecified parameters
Alexej Haak
@Daxten
Dec 27 2015 22:35
I see... hmm
and also a wish: an example how to change the theme would be great
didn't get that working directly
Roberto Leibman
@rleibman
Dec 27 2015 23:41
@elacin I know. I've been lax and holidays and tra-la-la-la la