Everything about Slinky -- issues, ideas for features, where it's being used, and more
@JSImport("resources/scss/card/style.scss", JSImport.Default)
@js.native
object Style extends js.Object
@react
object Card {
private val css = Style
case class Props(title: String, className: String, children: ReactElement)
val component = FunctionalComponent[Props] { props =>
Grid(className := s"{props.className} cardWrapper")(
Grid(className := "cardHeader")(
div(className := "cardHeaderLeft")(
h3(props.title)
)
), props.children
)
}
}
How do I pass an actual React Component to that then? @AlexITC
I think if you name a property
children, it's special, and becomes a second parameter list
ProfileSearch.component(ProfileSearch.Props(props.search))
But I'll try your way too
I'm on Slinky 0.6.6, but the extension didn't work for that version, and I found the previous version in my ivy cache.
It worked with that (not quite immediately, but eventually)
~/.ivy2/cache/me.shadaj/slinky-core-ijext_2.12/jars/slinky-core-ijext_2.12-0.6.5.jarIt worked with that (not quite immediately, but eventually)
I think that material-ui already integrates that one, see https://github.com/ScalablyTyped/SlinkyDemos
But your repo has saved me, its much more enjoyable writing Slinky now that i know how to pass components to compoments :)
1 reply
@AlexITC works for me
and yes the extension fixed it
not sure if this is relevant, but IntelliJ 2020.2.3 CE
ah almost forgot, after adding the extension, I had to restart IntelliJ
So I thought I had figured out a clever way to build up my Sidebar links, using a case class called SideBarLinks, and in there I wanted either pngs as js.Objects or MaterialIcons as SVGElements. But when I tried it with MaterialIcons I keep getting
Uncaught java.lang.IllegalStateException: This component has already been built into a ReactElement, and cannot be reused when I open and close my menu, which is weird, right?
I might have explained it poorly, but maybe someone has tried something similar, and can help me see whats going on
It loads fine when the page is not in "mobile view", when the menu is just visible all the time
how do people deal with asynchrony? For example I have a component with a boolean state
Anyone had to deal with similar situation and have a good solution?
shouldAggregate, and another one that holds a key based on which it loads a list of items from the server. Now, on a user click I want to change the key as well as the shouldAggregate, but the aggregation takes into effect immediately (this happens on the client) while loading the list takes time, so after the click I can see the current list aggregated before the new items arrive.Anyone had to deal with similar situation and have a good solution?
I created a component for that, so that the component depending on the async result renders only when the result is ready
so when it's loading it shows a progress indicator, right?
roughly:
DisplayPrefs { shouldAggregate0 =>
ItemFetcher(onComplete = gate.release()) { items =>
Gate(state = shouldAggregate0) { shouldAggregate =>
(if(shouldAggregate) aggregate(items) else items)
.map{ item => div(onClick = {fetcher.load(item))(item.name); dispPrefs.setAggregate(true)} }
}.withRef(gate)
}.withRef(fetcher)
}.withRef(dispPrefs)
I like your workaround for implementing generic components. (I still wish it was supported out of the box, though)
