Last active
September 27, 2016 09:35
-
-
Save somanythings/8c3d34de754af311d7826ea837d160b4 to your computer and use it in GitHub Desktop.
scalajs, react interaction with javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Confusion over how to pass a scalajs defined component to a javascript defined component | |
object GriddleComponentWrapper { | |
// for customComponent I've tried js.Any, ReactComponentU | |
@ScalaJSDefined | |
class ColumnMeta(val columnName: String, val order: Int, val customComponent: ReactClass=null) extends js.Object | |
} | |
case class GriddleComponentWrapper(results: js.Any, //Seq[Map[String, Any]], | |
columns: Seq[String], | |
columnMeta: Option[Seq[ColumnMeta]] = None, | |
showSettings: Boolean = true, | |
showFilter: Boolean = true | |
) { | |
def toJS = { | |
val p = js.Dynamic.literal() | |
p.updateDynamic("results")(results) | |
p.updateDynamic("columns")(columns) | |
p.updateDynamic("showSettings")(showSettings) | |
p.updateDynamic("showFilter")(showFilter) | |
(columnMeta).foreach { case cm => p.updateDynamic("columnMetadata")(cm.toJsArray) } | |
p | |
} | |
def apply(children: ReactNode*) = { | |
val f = React.asInstanceOf[js.Dynamic].createFactory(js.Dynamic.global.Bundle.griddle) // access real js component , make sure you wrap with createFactory (this is needed from 0.13 onwards) | |
f(toJS, children.toJsArray).asInstanceOf[ReactComponentU_] | |
} | |
} | |
object MyTestGrid { | |
@js.native | |
class ColumnMetaProps(val data: js.Object, val rowData: js.Object, val metadata: js.Object) extends js.Object | |
// I've tried making the Props argument js.Dynamic, and also the ColumnMetaProps above | |
@JSExport | |
val testComp = ReactComponentB[js.Dynamic]("Mine").renderP( | |
(sc, props: js.Dynamic) => { | |
//when debugging this in the browser, 'sc' and 'props' have inspectable object values with the expected members in the browser | |
//dev tools, BUT, they're undefined | |
log.info(s"what is ${sc.props}") | |
log.info(s"what is $props") | |
val string: Frag = if (!js.isUndefined(props)) props.data.toString() else "nothing!" | |
<.h1(string) | |
}).build | |
@JSExport | |
val aCompletelyStaticComponentWithNoPropsWillWork = ReactComponentB[js.Dynamic]("MyStaticComponent").renderP( | |
(sc, props: js.Dynamic) => <.h1("this renders!!") ).build | |
// am I passing the right thing to columnmeta with testComp.reactClass? | |
val columnMeta = (new ColumnMeta("c1", 1, testComp.reactClass) :: Nil).toJsArray | |
val results = Seq( | |
js.Dynamic.literal("c1" -> "row1c1", "c2" -> "row1c2"), | |
).toJsArray | |
val component = ReactComponentB[js.Dynamic]("MyTestGrid") | |
.render_P { | |
props => | |
GriddleComponentWrapper(results, columns = "c1" :: "c2" :: Nil, columnMeta = Some(columnMeta))() | |
}.build | |
def apply() = component | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment