kotlinlang #react

function material$lambda$lambda($receiver) {
    $receiver.invoke_eb8iu4$($module$react_materialize.Icon, material$lambda$lambda$lambda);
    $receiver.unaryPlus_pdl1vz$('HELLO THERE!');
    return Unit;
  }

Filipp Riabchun

02/24/2018, 11:41 PM

yeah, looks like it appends the text one level higher than it should

Filipp Riabchun

02/24/2018, 11:41 PM

or it doesn't, I missed the fact that it's 'HELLO THERE!' not 'thumb_up'

Filipp Riabchun

02/24/2018, 11:42 PM

how does

material$lambda$lambda$lambda

look like

deviant

02/24/2018, 11:46 PM

my code looks like this

Copy code

div {
        Button {
            Icon { +"thumb_up" }
            +"HELLO THERE!"
        }
    }

deviant

02/24/2018, 11:47 PM

and here is result

https://i.imgur.com/tGdF2CV.png▾

Filipp Riabchun

02/24/2018, 11:57 PM

how does

material$lambda$lambda$lambda

look like Slack Conversation

Filipp Riabchun

02/24/2018, 11:58 PM

In generated code

deviant

02/25/2018, 9:38 AM

oh, sorry. here it is:

Copy code

function material$lambda$lambda$lambda($receiver) {
    $receiver.unaryPlus_pdl1vz$('thumb_up');
    return Unit;
  }

Filipp Riabchun

02/25/2018, 10:40 AM

Looks correct

Filipp Riabchun

02/25/2018, 10:40 AM

Will try myself

deviant

02/25/2018, 10:44 AM

false alarm. looks like i didn't add the icons pack dependency 🤦‍♂️

👌 1

deviant

02/25/2018, 10:46 AM

btw, what is the best practice to add such dependencies in

kotlin react

apps?

Copy code

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

in the html or maybe in webpack loader?

Filipp Riabchun

02/25/2018, 10:48 AM

Html, because it's an external link not a resource available on file system

👍 1

deviant

02/25/2018, 2:39 PM

there is also

material-icons

npm package. seems to work

chadmorrow

02/28/2018, 3:41 AM

I keep going back and forth between feeling like I get how the kotlin/react stuff works and feeling like i don't know how anything works. Today, I could not figure out how props are passed from one component to another. I was trying to have a stateful class-based component wrap a stateless functional component and have props from the class component passed down to the functional one. Couldn't get it to work. Anyone have any examples at hand beside the few listed in the wrappers repo?

bashor

02/28/2018, 5:02 PM

Actually

kotlin-wrappers

is not yet obsolete since it’s more about “extending”/kotlinizing API of some libraries. In the near future we are going to migrate

kotlin-wrappers

to declarations from

js-externals

instead of having own.

bashor

02/28/2018, 5:02 PM

About versions, we going to support as many libraries and versions as we can and depending on requests. And we hope the community will help us.

02/28/2018, 6:38 PM

am I the only one who finds the jsx version of kotlin even less readable than jsx? https://github.com/JetBrains/kotlin-wrappers/blob/master/examples/src/main/kotlin/example/Todo.kt

02/28/2018, 6:39 PM

maybe I'm too used to reading html, but I'm having difficulty keeping a mental map of:

Copy code

h3 {
                ul {
                    for ((index, item) in state.items.withIndex()) {
                        li {
                            key = index.toString()
                            +item.toString()
                            button {
                                +"×"
                                attrs {
                                    onClickFunction = {
                                        setState {
                                            items = items.filterIndexed { i, _ -> i != index }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

chadmorrow

02/28/2018, 6:56 PM

It seems about as readable to me as jsx with one exception: i’m still not clear what

attrs

really means. Is

attrs

props? attributes of the specific html tags?

Filipp Riabchun

02/28/2018, 6:58 PM

it's props

Filipp Riabchun

02/28/2018, 6:58 PM

But if we'd use

props

name, it would clash with component's own props in cases like

props.foo = "bar"

chadmorrow

02/28/2018, 8:34 PM

ahhh

chadmorrow

02/28/2018, 8:35 PM

so attrs are the props passed down from parent components?

chadmorrow

02/28/2018, 8:36 PM

er no, they’d be the props you want to pass down, right?

chadmorrow

02/28/2018, 8:37 PM

i need more coffee

Filipp Riabchun

02/28/2018, 8:41 PM

yes, the second quess is right

👍 1