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

Jul 2015
Jul 03 2015 01:37

Hi guys, I'm playing with the scalajs-spa-tutorial project. Just by adding

    "com.github.chandu0101.scalajs-react-components" %%% "core" % "0.1.0"

to build.scala, I get errors like this:

[warn] There may be incompatibilities among your library dependencies.
[warn] Here are some of the libraries that were evicted:
[warn]  * com.github.japgolly.scalacss:ext-react_sjs0.6_2.11:0.2.0 -> 0.3.0
[warn]  * com.github.japgolly.scalajs-react:core_sjs0.6_2.11:(0.9.0, 0.8.2) -> 0.9.1
[warn] Run 'evicted' to see detailed eviction warnings
[info] Compiling 1 Scala source to /Users/irfan/Src/scalajs-spa-tutorial/js/target/scala-2.11/classes...
[info] Fast optimizing /Users/irfan/Src/scalajs-spa-tutorial/jvm/target/scala-2.11/classes/web/js/scalajs-spa-fastopt.js
[error] Referring to non-existent method Ljapgolly_scalajs_react_vdom_package$prefix$und$less$up$.$$undreact$undattrString__Ljapgolly_scalajs_react_vdom_Scalatags$AttrValue
[error]   called from Ljapgolly_scalajs_react_extra_router2_RouterCtl.link__O__Ljapgolly_scalajs_react_vdom_ReactTag
[error]   called from Lspatutorial_client_modules_MainMenu$$anonfun$8$$anonfun$apply$1.apply__Lspatutorial_client_modules_MainMenu$MenuItem__Ljapgolly_scalajs_react_vdom_ReactTag
[error]   called from Lspatutorial_client_modules_MainMenu$$anonfun$8$$anonfun$apply$1.apply__O__O
[error]   called from sc_LinearSeqOptimized$class.foreach__sc_LinearSeqOptimized__F1__V
[error]   called from scm_MutableList.foreach__F1__V
[error]   called from sc_TraversableLike$WithFilter.map__F1__scg_CanBuildFrom__O
[error]   called from sci_Stream$StreamWithFilter.map__F1__scg_CanBuildFrom__O
[error]   called from Lorg_scalajs_testinterface_internal_Slave.execute__p2__sjs_js_Dynamic__V
[error]   called from Lorg_scalajs_testinterface_internal_Slave.$$anonfun$1__p2__T__F0__V
[error]   called from Lorg_scalajs_testinterface_internal_Slave.handleMsgImpl__T__F0__V
[error]   called from Lorg_scalajs_testinterface_internal_BridgeBase.handleMsg__p1__T__V
[error]   called from Lorg_scalajs_testinterface_internal_BridgeBase.$$anonfun$1__p1__T__V
[error]   called from Lorg_scalajs_testinterface_internal_BridgeBase.init__V
[error]   called from Lorg_scalajs_testinterface_internal_BridgeBase.$$js$exported$meth$init__O
[error]   called from Lorg_scalajs_testinterface_internal_BridgeBase.init
[error]   exported to JavaScript with @JSExport


Jul 03 2015 02:11
Current working theory: router change in scalajs-react ... ? Upgraded scalajs react versions but now I've lost my router.
Omid Bakhshandeh
Jul 03 2015 02:13
Jul 03 2015 02:17
yeah, i'm not using router2 but my i no longer see any of my route in the ui ... funnily enough they are still fine when I hit them, the "tabs" disappeared though ... about to upgrade react 0.12.2 from 0.12.1 ... let's see
OK, looks like user error. So, to close out for other's benefit, I had to switch to version 0.9.1 of scala-js react to make the scalajs-react-components library not complain with errors. ymmv. But n/m, moving on.
Now trying to debug why my ReactTable won't draw on the screen.
Chandra Sekhar Kode
Jul 03 2015 07:10


Now trying to debug why my ReactTable won't draw on the screen.

resolved ? or still an issue …

Jul 03 2015 07:34

val theNode = Ref(P.root.item.toString)
<.li(^.ref := theNode, ^.tabIndex := 0, ^.onKeyPress ==> B.onItemSelect,,treeMenuToggle, ^.key := "toggle",<.span(S.selected ?=

B.isFilterTextExist(P.filterText,child) ?= TreeNode.withKey(key).withRef(theNode)(P.copy(root = child,depth = depth,parent = parent,open = open,filterText = P.filterText))
}) )

I tried to add a ref directly to the component those two ways and then access it from parent component's backend with (backend).refs(refName), but nothing showed up. I also tried adding className "selected" to the selected node in treeview, but when searching for items with class name selected in parent component, it couldn't find anything still.

Chandra Sekhar Kode
Jul 03 2015 07:37
when u add a ref to component , u must use

  val topNodeRef =,"topnode")

//and then in parent  backend
 topNodeRef(t).get.backend will return NodeBackend
Jul 03 2015 08:52
hey thanks! I finally got the reference to work, now just send the event
Chandra Sekhar Kode
Jul 03 2015 09:55
i coudn’t find an easy way , one way is house keep all noderefs with index or hash code ,add listener to component , on key events maintain current index in state and call selectItem/expandItems on refs (add hasChildren method to Nodebackend) ..
does it make sense ? or i talked complete nonsense ..
Jul 03 2015 10:26
yeah it makes sense. It's along the lines I was doing, I added all the refs in a map and added selectItem method to NodeBackend. I can see all the refcomps in my parent backend, but "View.nodeRefs(refId)(t).get" returns undefined.
Chandra Sekhar Kode
Jul 03 2015 10:38
ah yeah , we’re constructing TreeNode’s recursively ,so apart from root ref all other refs not belong to parent component :(
Jul 03 2015 10:46
well, I think I'll just ignore the tree with keyboard navigation for now. Not ideal but can manage without. Thanks for the help anyway!
Jul 03 2015 19:52

resolved ? or still an issue …

That's resolved.

Next question is how to add styles. Are these components integrated with scalacss?
if any component is using scalacss then its mentioned on its info page -