bsimmons
08/04/2021, 12:09 PMturansky
08/04/2021, 1:41 PMexternal interface MyProps {
var children: (String) -> ReactNode
}
?bsimmons
08/04/2021, 2:30 PM@JsModule("react-virtualized-auto-sizer")
@JsNonModule
external val module: dynamic
val autoSizer: RClass<AutoSizerProps> = module.default
external interface AutoSizerProps : RProps {
var children: (dynamic) -> ReactElement
}
bsimmons
08/04/2021, 2:33 PMautoSizer {
attrs.children = { size -> myComponent { attrs.height = size.height } }
}
turansky
08/04/2021, 3:19 PMturansky
08/04/2021, 3:20 PMbsimmons
08/04/2021, 3:30 PM@file:JsModule("react-virtualized-auto-sizer")
@file:JsNonModule
import react.*
@JsName("default")
external val autoSizer: RClass<AutoSizerProps>
external interface AutoSizerProps : RProps {
var children: (dynamic) -> ReactElement
}
bsimmons
08/04/2021, 3:30 PMturansky
08/04/2021, 3:34 PMmyComponent {
attrs.height = size.height
}
myComponent
called on builder provided by autoSizer
As result - you have children: ReactNode[]
instead of children: (T) -> ReactElement
turansky
08/04/2021, 3:35 PMmyComponent {
attrs.height = size.height
}
Move this code to separate method to see a problembsimmons
08/04/2021, 3:41 PMbuildElement
?bsimmons
08/04/2021, 3:42 PMattrs.children = { size -> ... }
then it never gets printed. So I'm not sure why that is either.turansky
08/04/2021, 3:46 PMOk, so what is the work around? UseOr?buildElement
createElement
for simple casesbsimmons
08/04/2021, 3:54 PMSergei Grishchenko
08/04/2021, 3:54 PMturansky
08/04/2021, 4:00 PMbsimmons
08/04/2021, 4:03 PMRBuilder.() -> Unit
pattern possible with external components?Sergei Grishchenko
08/04/2021, 4:05 PMContext.Consumer
that actually solve similar problemsbsimmons
08/04/2021, 4:12 PMturansky
08/04/2021, 4:26 PM@JsName("default")
external val autoSizer: FC<AutoSizerProps>
external interface AutoSizerProps : RProps {
var children: FC<AutoSizerChildProps>
}
external interface AutoSizerChildProps : RProps {
val width: Double
val height: Double
// ...
}
Sergei Grishchenko
08/04/2021, 4:31 PM// file AutoSizer.kt
@JsModule("react-virtualized-auto-sizer")
@JsNonModule
external val module: dynamic
val autoSizer: RClass<AutoSizerProps> = module.default
external interface AutoSizerProps : RProps {
var children: (dynamic) -> ReactElement
}
// file AutoSizer.ext.kt
var AutoSizerProps.children: RBuilder.(dynamic) -> Unit
get() = this.children
set(handler) {
child(this, jsObject {
this.children = { value ->
buildElements { handler(value) }
}
}) {}
}
// or you can try to declare children as Function Componet
var AutoSizerProps.children: FunctionComponent<dynamic>
get() = this.children
set(component) {
child(this, jsObject {
this.children = component
}) {}
}
Sergei Grishchenko
08/04/2021, 4:33 PMvar RProps.key: Key
@Deprecated(message = "Write-only property", level = DeprecationLevel.HIDDEN)
get() = error("")
set(value) {
asDynamic().key = value
}
Sergei Grishchenko
08/04/2021, 4:33 PMbsimmons
08/04/2021, 4:50 PMchild(autoSizer) {
attrs.children = myComponent
}
turansky
08/04/2021, 4:57 PMchild
- redundant in your examplebsimmons
08/04/2021, 4:59 PMFC<AutoSizerProps>
then don't you need it?bsimmons
08/04/2021, 4:59 PMimport react.FunctionalComponent as FC
turansky
08/04/2021, 5:00 PMimport react.FC
turansky
08/04/2021, 5:00 PMbsimmons
08/04/2021, 5:01 PMkotlin-react:17.0.1-pre.146-kotlin-1.4.30
bsimmons
08/04/2021, 5:01 PMSergei Grishchenko
08/04/2021, 5:02 PMbsimmons
08/04/2021, 5:02 PMbsimmons
08/04/2021, 5:07 PMturansky
08/04/2021, 5:14 PMturansky
08/04/2021, 5:18 PMbsimmons
08/04/2021, 5:22 PMturansky
08/04/2021, 5:23 PMchildren
as function doesn’t work as expected it will be fixed in pre.225+
versionbsimmons
08/04/2021, 5:23 PM.js
wrapper to get around all of this. Thanks anyways!turansky
08/04/2021, 6:29 PM