shadaj/slinky

Everything about Slinky -- issues, ideas for features, where it's being used, and more

Peter Storm

@peterstorm

I figured it out by mistake! ?D

I was using the wrong aria

but then I did a role and it prefixed it all with slinky.web.svg and I thought, maybe there's an aria one for that

And there was! :D

Peter Storm

@peterstorm

Oh, but there's not data tag in there, damn :(

Peter Storm

@peterstorm

I'm trying to pass a component as props to another component, like so:

But the compiler says value apply is not a member of slinky.core.facade.ReactElement

The react annotation

Peter Storm

@peterstorm

Well, i guess that doesnt work. How would i pass a component as props then?

Alexis Hernandez

@AlexITC

that's the way to pass the component, I even have something similar (see), sometimes the macro highlights errors but sbt compiles fine

Peter Storm

@peterstorm

@AlexITC Can you point me to where you use that componenet, and pass another component to it? Can't seem to find that :D

1 reply

I'm probably super confused because it's in a trait, and without the react annotation, but it's a cool project to learn from it seems!

1 reply

Peter Storm

@peterstorm

Ah found it. But whati wanna do is give the actual component as a prop. Like if you defined your own component with @react and a val as a functional component

how do i pass that whole component as a type?

though i guess I could just use vals... hmm, I’ll look at that

Alexis Hernandez

@AlexITC

generally it shouldn't be a problem to propagate a component, it is likely you have a different issue, if you post a snippet, I can take a look

Peter Storm

@peterstorm

Yeah, I'll give it a go again, and else I'll post a snippet. But what would be the type of an object that you created with the @react annotation? If I wanted to pass an object like that around?

Alexis Hernandez

@AlexITC

ReactElement is fine, what matters is the component

Peter Storm

@peterstorm

Ok, now that I have this component that I want to take another component as children

@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

Gabor Juhasz

@gjuhasz86

I think in the caller component's render method you can do something like this:

def render = Card(title = "card", className = "mycard")(div("foo"))

(div("foo") being the ReactElement passed as children)

I think if you name a property children, it's special, and becomes a second parameter list

Peter Storm

@peterstorm

I got it to work with this weird syntax that I got from Alex :D

ProfileSearch.component(ProfileSearch.Props(props.search))

But I'll try your way too

Alexis Hernandez

@AlexITC

Such weird syntax is what the macro ends up writing, I use that to avoid the highlighting errors from intellij

Gabor Juhasz

@gjuhasz86

I don't get highlighting errors (after struggling with it for a good while). I assume you are missing the Slinky extension?

1 reply

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.
~/.ivy2/cache/me.shadaj/slinky-core-ijext_2.12/jars/slinky-core-ijext_2.12-0.6.5.jar
It worked with that (not quite immediately, but eventually)

Peter Storm

@peterstorm

Is it possible to use font-awesome from npm with slinky?

Alexis Hernandez

@AlexITC

I think that material-ui already integrates that one, see https://github.com/ScalablyTyped/SlinkyDemos

Peter Storm

@peterstorm

Hmmm, where exactly? @AlexITC

But your repo has saved me, its much more enjoyable writing Slinky now that i know how to pass components to compoments :)

1 reply

Alexis Hernandez

@AlexITC

https://v3.material-ui.com/style/icons/#font-awesome

4 replies

Gabor Juhasz

@gjuhasz86

@AlexITC works for me

and yes the extension fixed it

not sure if this is relevant, but IntelliJ 2020.2.3 CE

Alexis Hernandez

@AlexITC

that's great to know, I'll try it later, thanks

Gabor Juhasz

@gjuhasz86

ah almost forgot, after adding the extension, I had to restart IntelliJ

Peter Storm

@peterstorm

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

Øyvind Raddum Berg

@oyvindberg

don't store it in a val

Peter Storm

@peterstorm

Ah, what do I store it as then?

Øyvind Raddum Berg

@oyvindberg

a def

Peter Storm

@peterstorm

Thank you so much, that worked!

Øyvind Raddum Berg

@oyvindberg

no problem. I'm not really sure where that limitation comes from, I can't really see what can go so wrong

Where communities thrive

People

Repo info

Activity