Hello. I'm trying to achieve simple "Slide up" animation in Kotlin with official React mui wrappers,...

# javascript

[Rafał Kuźmiński]

Hello. I'm trying to achieve simple "Slide up" animation in Kotlin with official React mui wrappers, but I cannot find any example of how to do it.
JS Code looks like this:

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement<any, any>;
  },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
});

And mine attempt:

val transition = forwardRef<Any, PropsWithRef<Any>> { propsWithRef, ref ->
            Slide {
                attrs.ref = ref
                attrs.direction = SlideDirection.up
                Object.assign(this, propsWithRef)
            }
        }

        Dialog {
            fullWidth = true
            fullScreen = true
...

But it throws error "Cannot read properties of undefined (reading 'ref')"

Can someone guide me how to use forwardRef in Kotlin? Thanks!

[Artem Kobzar]

@turansky ^^

[turansky]

For non-legacy wrappers example is here

[Rafał Kuźmiński]

Thanks, I'll try to apply this on mui Transition

[turansky]

Also in modern wrappers:

// in legacy
Object.assign(this, props)

// in modern
+props

[Rafał Kuźmiński]

+props didin't work there because type mismatch, and still I see that I cannot use

val Transition = ForwardRef<_, TransitionProps> {

because TransitionProps is just a "Props" not a PropsWithRef.

Is there any example of how to use mui Transitions? I see you are one of contributiors to "kotlin-mui-showcase" so maybe you have an idea how to implement custom transition to dialog?

[turansky]

cc @aerialist

[turansky]

external interface MyTransitionProps : TransitionProps, PropsWithref<>

[turansky]

From example looks like you need custom props

[turansky]

TransitionProps - your custom interface?

[Rafał Kuźmiński]

No, its from mui:

package mui.material.transitions

external interface TransitionProps : react.Props

[turansky]

For custom components it's recommended to create custom props interface (your case)

[Rafał Kuźmiński]

Okey I ll try, thanks!