https://kotlinlang.org logo
Join Slack
Powered by
I want to use npm dependency `@material/textfield`...
# javascript
r
I want to use npm dependency 
@material/textfield
in my project https://www.npmjs.com/package/@material/textfield I have added the following dependency as
Copy code
implementation(npm("@material/textfield", "13.0.0")
But after that, I am not able to understand, how to create the an adapter file for this Its not a simple function Does anyone here have similar problem or used npm dependency in kotlin web ?
t
You need related declarations like this
r
This helps, actually I could just use this libraray
But just being curious these declarations seems to be autogenerated https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-mui/src/main/generated/mui/material/TextField.kt It says these are auto generated, is there a tool for this ?
b
t
It says these are auto generated, is there a tool for this ?
Generators are here
r
Woah both these libraries are awesome Thanks @Big Chungus and @turansky
b
I've also written an article recently that covers most of what you need to know when wrapping external js declarations https://dev.to/mpetuska/js-in-kotlinjs-c4g
👍 2
r
Woah great, I was thinking of doing same after going through these
It's already been done
Seems like kotlin web and compose web has picked up alot 😲
b
What can I say, compose-mpp is exciting!
r
@turansky I am still not able to see any library/tool which generates declarations All thee files in 
types/kotlin
repo, seems to be auto genrated again
b
It's dukat
It's now integrated into kotlin plugin
Search for generateExternals gradle task
r
this task is not present in the above project Is this task present/implented by jetbrains already ?
t
I am still not able to see any library/tool which generates declarations
Custom generator located in 
buildSrc
It’s not a ducat 🙂
👀 1
b
Try jsGenerateExternals then
r
got it
t
In case of React declarations you have low (about 0%) chances on successfull automatic conversion
r
So you have to manually write adapter files for react declarations ?
t
But you can use following: 1. Use dukat for initial generations 2. Copy generated sources 3. Add missed package 4. Fix compilation
If you have small library - manual conversion is preferred
r
ohh ok understood
b
I usually use dukat output as a starting point for my manual declarations
r
I am trying to make evenly spread three input text with 
MDCTextField
But is not getting evenly spread But with core 
TextInput
got evenly spread
Copy code
Div(
            attrs = {
                style {
                    display(DisplayStyle.Flex)
                    width(100.percent)
                    justifyContent(JustifyContent.SpaceBetween)
                    flexFlow(FlexDirection.Row, FlexWrap.Nowrap)
                }
            }
        ) {

            val annualCtcState = remember { mutableStateOf("") }
            MDCTextField(
                annualCtcState.value,
                {
                    type = MDCTextFieldCommonOpts.Type.Outlined
                    label = "Annual CTC"
                },
                {
                    style {
                        margin(8.px)
                        width(33.percent)
                        title("Annual CTC")

                    }
                    onInput {
                        annualCtcState.value = it.value
                    }
                }
            )
@Big Chungus 😕
b
I'm away from my pc at the moment. Try asking in #kmdc for now
👍 1
g
@turansky and @Big Chungus looking at both of your repos. Very cool and exciting work. It looks like @Big Chungus is preparing for web compose as the future. Would you say that's the main difference? I'm just trying to figure out if I'm going to use these tools which one is the right one to choose
b
Not sure what you mean by the future. I simply noticed that compose-web is missing material components and took it upon myself to provide such option to the community (although I wish I could've kept it under wraps a bit longer as I don't have as much time as I'd like to work on it, so the progress is painstakingly slow)
Ok, to be fully transparent, I actually started kmdc as a submodule for kamp compose rework, but then it evolved into a standalone library as people started showing interest to use and contribute to it 😀
In the end, we should have two options for compose web when it comes to material components: • Official JB canvas-based widgets with mpp support • HTML-based kmdc components
g
That makes sense. Thanks for your response!
b
@Rohan Maity there you go
Untitled.cpp
image.png
image.png
r
if width 30 % is applied, it should be like this I made this change in generated html and added width 30%. (Please look at the bottom) But in your output, it does not seem like 30% is applied 😐 @Big Chungus
b
Ok, this works (needs some further polish to get exactly what you want, but should be sufficient to showcase the concept)
Untitled.cpp
image.png
r
Yes, this definterly works
I was trying to insert the width in 
mdc-text-field
but I was not able to So you created a style which would need to be applied to the parent which in turn apply a the style to all the child of the parent for a particular classname mentioned in the style
b
Correct
I'm glad you brought this up, actually. Gave me some use cases to consider when polishing kmdc api
r
Let me know If I can contrinute to this I may be able to contribute too 😄 May be related to this issue only as starter issue 😛
b
Have a look at issues in the repo and pick your poison. All contributions are welcome and I try to help as much as I can to refine PRs and explain why certain things would work or not.
For now the focus is to wrap all remaining components for 0.1.0 milestone.
r
A small UI issue. Label gets cut after a certain width Not sure, its original 
@mateiral/textField
issue or something happened due to kmdc only
b
Can you raise a bug on the repo to make sure it's not lost?
r
oh okay, so its a bug
Will raise it
@Big Chungus created the issue https://github.com/mpetuska/kmdc/issues/76
I tried to look into the MDCTextField class to find cause of the issue reported IMO, • TextField gets out of focus when typing any input because 
mdc-text-field-focusd
class gets removed from the HTML whenever I input something. I was not able to see code which handles the input. AFAIU its using simple 
TextInput
from basic compose web. Now IMO, this simple 
TextInput
is not able to maintain the state of being focused (
mdc-text-field-focused
) on input • Floating label gets cut when I tap outside of text field after typing some input. After typing some input and clicking outside. (Not sure which event is triggered on clicking outside) 
MDCNotch Span
width gets changed to random specific value. But it should have been 
fit-content.
I have highlighted the span in the attached image
2 Views
Open in Slack
PreviousNext
Powered by