npm

Need private packages and team management tools?Check out npm Orgs. »

@logrally/kotlin-ring-ui-popup

0.0.16 • Public • Published

Kotlin wrappers for ring-ui

This library is easy to use with https://github.com/JetBrains/create-react-kotlin-app .

Quickstart

Example application

Create your project

npm install create-react-kotlin-app
npx create-react-kotlin-app my-app
cd my-app
npm install --save "@logrally/kotlin-react-ring-ui"
npm run gen-idea-libs

Patch your build configuration

See https://youtrack.jetbrains.com/issue/CRKA-85#comment=27-2957370 for details how you need to configure your build configuration.

Apply the changes to these files:

  • node_modules/react-scripts-kotlin/config/webpack.config.dev.js
  • node_modules/react-scripts-kotlin/config/webpack.config.prod.js

Run your application in development mode

npm run build

Update your source code

Update the file src/app/App.kt with this and wait until the page in the browser was reloaded.

package app
 
import react.*
import react.dom.div
import react.dom.h1
import ringui.authdialog.authDialog
import ringui.button.button
import ringui.footer.FooterLineData
import ringui.footer.copyright
import ringui.footer.footer
import ringui.header.header
import ringui.header.tray
import ringui.link.link
import ringui.loader.loader
 
interface AppState : RState {
    var showLogin: Boolean
    var loggedIn: Boolean
}
 
class App : RComponent<RProps, AppState>() {
    override fun RBuilder.render() {
        header {
            link(title = "Homepage", href = "/")
 
            tray {
                if (state.loggedIn == true) {
                    button("Logout") {
                        attrs.onClick = {
                            setState { loggedIn = false }
                        }
                    }
                }
                else {
                    button("Login") {
                        attrs.onClick = {
                            setState { showLogin = true }
                        }
                    }
                }
            }
        }
 
        div {
            authDialog(serviceName = "ACME Inc.", show = state.showLogin) {
                attrs.onConfirm = {
                    setState { showLogin = false; loggedIn = true }
                }
            }
 
            if (state.loggedIn) {
                h1 { +"Welcome to your application!" }
                loader("Loading application. Please wait ...")
            }
        }
 
        footer {
            attrs.right = arrayOf(FooterLineData(copyright(2018), "/"), "by firstname lastname")
        }
    }
}
 
fun RBuilder.app() = child(App::class) {}

Building

npm install
gradle clean build

License

Licensed under the MIT license.

install

npm i @logrally/kotlin-ring-ui-popup

Downloadsweekly downloads

2

version

0.0.16

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability