Hey guys, how can I get this to work, I am again g...

# javascript

[Nikola Milovic]

Hey guys, how can I get this to work, I am again getting confused by ReactNode and Elements.

I have this attribute on a wrapper ComponentClass

var renderCustomHeader: (Date, (Int) -> Unit, (Int) -> Unit,
                         () -> Unit, () -> Unit,
                         Boolean,
                         Boolean) -> ReactNode?

And I use it like so

attrs.renderCustomHeader = {
                date,
                changeYear,
                changeMonth,
                decreaseMonth,
                increaseMonth,
                prevMonthButtonDisabled,
                nextMonthButtonDisabled,
            ->
                div {
                     //other stuff
                 }
}

I tried using createElement, but then the changeYear, changeMonth aren't usable
Uncaught TypeError: this._$changeMonth is not a function

[turansky]

You can use create method to solve this problem

[turansky]

Example

[Nikola Milovic]

@turansky what create method exactly? I am trying to find something that will allow me to create a div like in your example you create TextField but there doesn't seem to be anything like it.

[turansky]

Version pre.280 required and valid import

[Nikola Milovic]

I'm still on 1.5.31, so I'll have to refactor a few stuff first. Thank you!

[Nikola Milovic]

Are there any 1.5.31 alternatives maybe? As I am not sure if I'd like to upgrade the project quite yet

[turansky]

Pill

[Nikola Milovic]

@turansky after the update

@JsName("MenuIcon")
external val menuIcon: ComponentClass<IconProps>

Gives me Unresolved reference: ComponentClass on compile time, all the references are resolved in the IDE

Ton of these

Unresolved reference: react

[turansky]

IR?

[turansky]

Do you use material icons?

[Nikola Milovic]

I am using HeroIcons from Tailwind Labs, wrote my wrapper for them.

Yeah using IR @turansky

[turansky]

Original name prefered

MenuIcon in your case

[Nikola Milovic]

What do you mean exactly?

[turansky]

In your example you modify original component name

[turansky]

Classic - component name from upper case

[Nikola Milovic]

Oh, that, yeah I'll have to rename my components to uppercase. But other than that, that shouldnt be causing this issue

[Nikola Milovic]

This is just one part of the unresolved references, code completion works, typings everything works

[turansky]

pre.280 ?

[Nikola Milovic]

I went from 1.5.30 to 1.5.31 and upped to

"0.0.1-pre.280-kotlin-1.6.0"

Adding this in my root buildsrc

allprojects {
    repositories {
        google()
        mavenCentral()
        mavenLocal()
        maven("<https://maven.pkg.jetbrains.space/public/p/compose/dev>")
    }

    plugins.apply("com.github.ben-manes.versions")


    tasks.withType<org.jetbrains.kotlin.gradle.targets.js.npm.tasks.KotlinNpmInstallTask> {
        args += "--ignore-scripts"
    }

    configurations.all {
        resolutionStrategy {
            eachDependency {
                if (requested.group == "org.jetbrains.kotlin" && requested.name.startsWith("kotlin-"))
                    useVersion(Versions.kotlin)
            }
        }
    }
}

[turansky]

Looks like version downgrade doesn’t work with IR (If it was applied)

[Nikola Milovic]

Oh

[Nikola Milovic]

That's quite a predicament then, can I somehow stay at 1.5.31 pre.262 (i belive) and fulfill this kind of signature?

renderCustomHeader?(params: ReactDatePickerCustomHeaderProps): React.ReactNode;

In Kotlin

var renderCustomHeader: (Date, (Int) -> Unit, (Int) -> Unit,
                             () -> Unit, () -> Unit,
                             Boolean,
                             Boolean) -> ReactNode?

And something like this

attrs.renderCustomHeader = {
                date,
                changeYear,
                changeMonth,
                decreaseMonth,
                increaseMonth,
                prevMonthButtonDisabled,
                nextMonthButtonDisabled,
            ->
                div {
                     //other stuff
                 }
}

[turansky]

Update recommended 🙂

[Nikola Milovic]

Unfortunately, it's quite a large project so not all dependencies are compatible with 1.6.0 from the first glance. But I'll see if I can hack it for the time being