Update ring-ui

This commit is contained in:
Alexander Nozik 2021-05-09 11:11:21 +03:00
parent faf3fa8512
commit 65c0183ba7
17 changed files with 103 additions and 120 deletions

View File

@ -28,7 +28,7 @@ rootProject.name = "visionforge"
include( include(
// ":ui", // ":ui",
":ui:react", ":ui:react",
// ":ui:ring", ":ui:ring",
// ":ui:material", // ":ui:material",
":ui:bootstrap", ":ui:bootstrap",
":visionforge-core", ":visionforge-core",

View File

@ -13,7 +13,6 @@ kotlin{
dependencies{ dependencies{
api(project(":ui:react")) api(project(":ui:react"))
implementation(npm("@jetbrains/logos", "1.1.6")) implementation(npm("@jetbrains/icons", "3.14.1"))
implementation(npm("@jetbrains/ring-ui", "3.0.13")) implementation(npm("@jetbrains/ring-ui", "4.0.7"))
implementation(npm("svg-inline-loader", "0.8.0"))
} }

View File

@ -5,29 +5,29 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/alert/alert.js // https://github.com/JetBrains/ring-ui/blob/master/components/alert/alert.js
external interface AlertProps : WithClassName { public external interface AlertProps : WithClassName {
var timeout: Number public var timeout: Number
var onCloseRequest: () -> Unit public var onCloseRequest: () -> Unit
var onClose: () -> Unit public var onClose: () -> Unit
var isShaking: Boolean public var isShaking: Boolean
var isClosing: Boolean public var isClosing: Boolean
var inline: Boolean public var inline: Boolean
var showWithAnimation: Boolean public var showWithAnimation: Boolean
var closeable: Boolean public var closeable: Boolean
var type: AlertType public var type: AlertType
} }
typealias AlertType = String public typealias AlertType = String
object AlertTypes { public object AlertTypes {
var ERROR = "error" public var ERROR = "error"
var MESSAGE = "message" public var MESSAGE = "message"
var SUCCESS = "success" public var SUCCESS = "success"
var WARNING = "warning" public var WARNING = "warning"
var LOADING = "loading" public var LOADING = "loading"
} }
fun RBuilder.ringAlert(handler: RHandler<AlertProps>) { public fun RBuilder.ringAlert(handler: RHandler<AlertProps>) {
RingUI.Alert { RingUI.Alert {
handler() handler()
} }

View File

@ -6,29 +6,29 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/button/button.js // https://github.com/JetBrains/ring-ui/blob/master/components/button/button.js
external interface ButtonProps : WithClassName { public external interface ButtonProps : WithClassName {
var theme: String public var theme: String
var active: Boolean public var active: Boolean
var danger: Boolean public var danger: Boolean
var delayed: Boolean public var delayed: Boolean
var loader: Boolean public var loader: Boolean
var primary: Boolean public var primary: Boolean
var short: Boolean public var short: Boolean
var text: Boolean public var text: Boolean
var inline: Boolean public var inline: Boolean
var dropdown: Boolean public var dropdown: Boolean
var href: String public var href: String
var icon: dynamic /* string | func */ public var icon: dynamic /* string | func */
var iconSize: Number public var iconSize: Number
var iconClassName: String public var iconClassName: String
var onMouseDown: (MouseEvent) -> Unit public var onMouseDown: (MouseEvent) -> Unit
} }
fun RBuilder.ringButton(handler: RHandler<ButtonProps>) { public fun RBuilder.ringButton(handler: RHandler<ButtonProps>) {
RingUI.Button { RingUI.Button {
handler() handler()
} }

View File

@ -5,22 +5,22 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/dialog/dialog.js // https://github.com/JetBrains/ring-ui/blob/master/components/dialog/dialog.js
external interface DialogProps : WithClassName { public external interface DialogProps : WithClassName {
var contentClassName: String public var contentClassName: String
var show: Boolean public var show: Boolean
var showCloseButton: Boolean public var showCloseButton: Boolean
var onOverlayClick: () -> Unit public var onOverlayClick: () -> Unit
var onEscPress: () -> Unit public var onEscPress: () -> Unit
var onCloseClick: () -> Unit public var onCloseClick: () -> Unit
// onCloseAttempt is a common callback for ESC pressing and overlay clicking. // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
// Use it if you don't need different behaviors for this cases. // Use it if you don't need different behaviors for this cases.
var onCloseAttempt: () -> Unit public var onCloseAttempt: () -> Unit
// focusTrap may break popups inside dialog, so use it carefully // focusTrap may break popups inside dialog, so use it carefully
var trapFocus: Boolean public var trapFocus: Boolean
var autoFocusFirst: Boolean public var autoFocusFirst: Boolean
} }
fun RBuilder.ringDialog(show: Boolean, handler: RHandler<DialogProps>) { public fun RBuilder.ringDialog(show: Boolean, handler: RHandler<DialogProps>) {
RingUI.Dialog { RingUI.Dialog {
attrs.show = show attrs.show = show
handler() handler()

View File

@ -5,16 +5,16 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/icon/icon.js // https://github.com/JetBrains/ring-ui/blob/master/components/icon/icon.js
external interface IconProps : WithClassName { public external interface IconProps : WithClassName {
var color: String public var color: String
var glyph: dynamic /* string | func */ public var glyph: dynamic /* string | func */
var height: Number public var height: Number
var size: Number public var size: Number
var width: Number public var width: Number
var loading: Boolean public var loading: Boolean
} }
fun RBuilder.ringIcon(handler: RHandler<IconProps>) { public fun RBuilder.ringIcon(handler: RHandler<IconProps>) {
RingUI.Icon { RingUI.Icon {
handler() handler()
} }

View File

@ -6,9 +6,9 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/link/link.js // https://github.com/JetBrains/ring-ui/blob/master/components/link/link.js
external interface LinkProps : WithClassName { public external interface LinkProps : WithClassName {
var innerClassName: String public var innerClassName: String
var active: Boolean public var active: Boolean
var inherit: Boolean var inherit: Boolean
var pseudo: Boolean var pseudo: Boolean
var hover: Boolean var hover: Boolean

View File

@ -4,11 +4,11 @@ import react.RClass
import ringui.header.HeaderProps import ringui.header.HeaderProps
@JsModule("@jetbrains/ring-ui") @JsModule("@jetbrains/ring-ui")
external object RingUI { public external object RingUI {
val Alert: RClass<AlertProps> public val Alert: RClass<AlertProps>
val Button: RClass<ButtonProps> public val Button: RClass<ButtonProps>
val Dialog: RClass<DialogProps> public val Dialog: RClass<DialogProps>
val Header: RClass<HeaderProps> public val Header: RClass<HeaderProps>
val Link: RClass<LinkProps> public val Link: RClass<LinkProps>
val Icon: RClass<IconProps> public val Icon: RClass<IconProps>
} }

View File

@ -11,12 +11,12 @@ private external object UserCardModule {
} }
// https://github.com/JetBrains/ring-ui/blob/master/components/user-card/card.js // https://github.com/JetBrains/ring-ui/blob/master/components/user-card/card.js
external interface UserCardProps : RProps { public external interface UserCardProps : RProps {
var user: UserCardModel public var user: UserCardModel
var wording: UserCardWording public var wording: UserCardWording
} }
data class UserCardModel( public data class UserCardModel(
val name: String, val name: String,
val login: String, val login: String,
val avatarUrl: String, val avatarUrl: String,
@ -24,13 +24,13 @@ data class UserCardModel(
val href: String? = null val href: String? = null
) )
data class UserCardWording( public data class UserCardWording(
val banned: String, val banned: String,
val online: String, val online: String,
val offline: String val offline: String
) )
fun RBuilder.ringUserCard(user: UserCardModel, handler: RHandler<UserCardProps> = {}) { public fun RBuilder.ringUserCard(user: UserCardModel, handler: RHandler<UserCardProps> = {}) {
UserCardModule.UserCard { UserCardModule.UserCard {
attrs.user = user attrs.user = user
handler() handler()

View File

@ -19,12 +19,12 @@ internal external object HeaderModule {
} }
// https://github.com/JetBrains/ring-ui/blob/master/components/header/header.js // https://github.com/JetBrains/ring-ui/blob/master/components/header/header.js
external interface HeaderProps : WithClassName { public external interface HeaderProps : WithClassName {
var spaced: Boolean public var spaced: Boolean
var theme: String public var theme: String
} }
fun RBuilder.ringHeader(handler: RHandler<HeaderProps>) { public fun RBuilder.ringHeader(handler: RHandler<HeaderProps>) {
RingUI.Header { RingUI.Header {
handler() handler()
} }

View File

@ -6,15 +6,15 @@ import react.RHandler
import ringui.IconProps import ringui.IconProps
import styled.StyledDOMBuilder import styled.StyledDOMBuilder
external interface HeaderLogoProps : IconProps public external interface HeaderLogoProps : IconProps
fun StyledDOMBuilder<A>.ringLogo(handler: RHandler<HeaderLogoProps>) { public fun StyledDOMBuilder<A>.ringLogo(handler: RHandler<HeaderLogoProps>) {
HeaderModule.Logo { HeaderModule.Logo {
handler() handler()
} }
} }
fun RElementBuilder<HeaderProps>.ringLogo(handler: RHandler<HeaderLogoProps>) { public fun RElementBuilder<HeaderProps>.ringLogo(handler: RHandler<HeaderLogoProps>) {
HeaderModule.Logo { HeaderModule.Logo {
handler() handler()
} }

View File

@ -6,20 +6,20 @@ import react.dom.WithClassName
import ringui.ButtonProps import ringui.ButtonProps
// https://github.com/JetBrains/ring-ui/blob/master/components/header/tray.js // https://github.com/JetBrains/ring-ui/blob/master/components/header/tray.js
external interface HeaderTrayProps : WithClassName public external interface HeaderTrayProps : WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/header/tray-icon.js // https://github.com/JetBrains/ring-ui/blob/master/components/header/tray-icon.js
external interface HeaderTrayIconProps : ButtonProps { public external interface HeaderTrayIconProps : ButtonProps {
var rotatable: Boolean public var rotatable: Boolean
} }
fun RElementBuilder<HeaderProps>.ringTray(handler: RHandler<HeaderTrayProps>) { public fun RElementBuilder<HeaderProps>.ringTray(handler: RHandler<HeaderTrayProps>) {
HeaderModule.Tray { HeaderModule.Tray {
handler() handler()
} }
} }
fun RElementBuilder<HeaderTrayProps>.ringTrayIcon(handler: RHandler<WithClassName>) { public fun RElementBuilder<HeaderTrayProps>.ringTrayIcon(handler: RHandler<WithClassName>) {
HeaderModule.TrayIcon { HeaderModule.TrayIcon {
handler() handler()
} }

View File

@ -5,15 +5,15 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/island/content.js // https://github.com/JetBrains/ring-ui/blob/master/components/island/content.js
external interface IslandContentProps : WithClassName { public external interface IslandContentProps : WithClassName {
var scrollableWrapperClassName: String public var scrollableWrapperClassName: String
var fade: Boolean public var fade: Boolean
var bottomBorder: Boolean public var bottomBorder: Boolean
var onScroll: () -> Unit public var onScroll: () -> Unit
var onScrollToBottom: () -> Unit public var onScrollToBottom: () -> Unit
} }
fun RElementBuilder<IslandProps>.ringIslandContent(handler: RHandler<IslandContentProps>) { public fun RElementBuilder<IslandProps>.ringIslandContent(handler: RHandler<IslandContentProps>) {
IslandModule.Content { IslandModule.Content {
handler() handler()
} }

View File

@ -5,13 +5,13 @@ import react.RHandler
import react.dom.WithClassName import react.dom.WithClassName
// https://github.com/JetBrains/ring-ui/blob/master/components/island/header.js // https://github.com/JetBrains/ring-ui/blob/master/components/island/header.js
external interface IslandHeaderProps : WithClassName { public external interface IslandHeaderProps : WithClassName {
var border: Boolean public var border: Boolean
var wrapWithTitle: Boolean public var wrapWithTitle: Boolean
var phase: Number public var phase: Number
} }
fun RElementBuilder<IslandProps>.ringIslandHeader(handler: RHandler<IslandHeaderProps>) { public fun RElementBuilder<IslandProps>.ringIslandHeader(handler: RHandler<IslandHeaderProps>) {
IslandModule.Header { IslandModule.Header {
handler() handler()
} }

View File

@ -14,18 +14,18 @@ internal external object IslandModule {
} }
// https://github.com/JetBrains/ring-ui/blob/master/components/island/island.js // https://github.com/JetBrains/ring-ui/blob/master/components/island/island.js
external interface IslandProps : WithClassName { public external interface IslandProps : WithClassName {
val narrow: Boolean public val narrow: Boolean
val withoutPaddings: Boolean public val withoutPaddings: Boolean
} }
fun RBuilder.ringIsland(handler: RHandler<IslandProps>) { public fun RBuilder.ringIsland(handler: RHandler<IslandProps>) {
IslandModule.default { IslandModule.default {
handler() handler()
} }
} }
fun RBuilder.ringAdaptiveIsland(handler: RHandler<IslandProps>) { public fun RBuilder.ringAdaptiveIsland(handler: RHandler<IslandProps>) {
IslandModule.AdaptiveIsland { IslandModule.AdaptiveIsland {
handler() handler()
} }

View File

@ -1,7 +1,6 @@
// wrap is useful, because declaring variables in module can be already declared // wrap is useful, because declaring variables in module can be already declared
// module creates own lexical environment // module creates own lexical environment
;(function (config) { (function (config) {
const ringConfig = require('@jetbrains/ring-ui/webpack.config').config; const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;
config.module.rules.push(...ringConfig.module.rules); config.module.rules.push(...ringConfig.module.rules);
})(config); })(config);

View File

@ -1,15 +0,0 @@
// wrap is useful, because declaring variables in module can be already declared
// module creates own lexical environment
;(function (config) {
const path = require("path");
config.module.rules.push(
{
test: /\.svg$/,
loader: "svg-inline-loader",
options: {removeSVGTagAttrs: false},
include: [
path.resolve(require.resolve("@jetbrains/logos"), "..", "..")
]
}
);
})(config);