Add blueprintjs Dialog component

3 files changed, 117 insertions, 0 deletions

diff --git a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/BpDialog.kt b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/BpDialog.kt
new file mode 100644
index 00000000..ed95b8ab
--- /dev/null
+++ b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/BpDialog.kt
@@ -0,0 +1,46 @@
+@file:JsModule("@blueprintjs/core")
+
+package com.palantir.blueprintjs
+
+import react.PureComponent
+import react.RState
+import react.ReactElement
+
+external interface IDialogProps : IOverlayableProps, IBackdropProps, IProps {
+    /**
+     * Toggles the visibility of the overlay and its children.
+     * This prop is required because the component is controlled.
+     */
+    var isOpen: Boolean
+    /**
+     * Name of a Blueprint UI icon (or an icon element) to render in the
+     * dialog's header. Note that the header will only be rendered if `title` is
+     * provided.
+     */
+    var icon: IconName?
+    /**
+     * Whether to show the close button in the dialog's header.
+     * Note that the header will only be rendered if `title` is provided.
+     * @default true
+     */
+    var isCloseButtonShown: Boolean?
+    /**
+     * CSS styles to apply to the dialog.
+     * @default {}
+     */
+    var style: dynamic
+    /**
+     * Title of the dialog. If provided, an element with `Classes.DIALOG_HEADER`
+     * will be rendered inside the dialog before any children elements.
+     */
+    var title: ReactElement?
+    /**
+     * Name of the transition for internal `CSSTransition`. Providing your own
+     * name here will require defining new CSS transition properties.
+     */
+    var transitionName: String?
+}
+
+external class Dialog : PureComponent<IDialogProps, RState> {
+    override fun render(): ReactElement
+}
diff --git a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjs.kt b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjs.kt
index 8063f98e..639360e8 100644
--- a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjs.kt
+++ b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjs.kt
@@ -105,5 +105,7 @@ external interface IOptionProps : IProps {
 external class Classes {
     companion object {
         val HTML_TABLE: String = definedExternally
+        val DIALOG_BODY: String = definedExternally
+        val DIALOG_FOOTER: String = definedExternally
     }
 }
diff --git a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt
index 5ad0cc7c..b74e984d 100644
--- a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt
+++ b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt
@@ -1,5 +1,6 @@
 package com.palantir.blueprintjs
 
+import kotlinext.js.js
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.MouseEvent
 import react.RBuilder
@@ -155,6 +156,74 @@ fun RBuilder.bpOverlay(
     block()
 }
 
+fun RBuilder.bpDialog(
+    isOpen: Boolean,
+    title: ReactElement? = null,
+    icon: IconName? = null,
+    autoFocus: Boolean = true,
+    enforceFocus: Boolean = true,
+    usePortal: Boolean = true,
+    hasBackdrop: Boolean = true,
+    canEscapeKeyClose: Boolean = true,
+    canOutsideClickClose: Boolean = true,
+    isCloseButtonShown: Boolean = true,
+    transitionName: String? = null,
+    onClose: () -> Unit = {},
+    block: RHandler<IDialogProps> = {},
+): ReactElement = child(Dialog::class) {
+    attrs {
+        this.isOpen = isOpen
+        if (title != null) {
+            this.title = title
+        }
+        if (icon != null) {
+            this.icon = icon
+        }
+        this.autoFocus = autoFocus
+        this.enforceFocus = enforceFocus
+        this.usePortal = usePortal
+        this.hasBackdrop = hasBackdrop
+        this.canEscapeKeyClose = canEscapeKeyClose
+        this.canOutsideClickClose = canOutsideClickClose
+        this.isCloseButtonShown = isCloseButtonShown
+        if (transitionName != null) {
+            this.transitionName = transitionName
+        }
+        this.onClose = { onClose() }
+    }
+    block()
+}
+
+fun RBuilder.bpDialog(
+    isOpen: Boolean,
+    title: String? = null,
+    icon: IconName? = null,
+    autoFocus: Boolean = true,
+    enforceFocus: Boolean = true,
+    usePortal: Boolean = true,
+    hasBackdrop: Boolean = true,
+    canEscapeKeyClose: Boolean = true,
+    canOutsideClickClose: Boolean = true,
+    isCloseButtonShown: Boolean = true,
+    transitionName: String? = null,
+    onClose: () -> Unit = {},
+    block: RHandler<IDialogProps> = {},
+): ReactElement = bpDialog(
+    isOpen = isOpen,
+    title = title?.let { buildElement { +title } },
+    icon = icon,
+    autoFocus = autoFocus,
+    enforceFocus = enforceFocus,
+    usePortal = usePortal,
+    hasBackdrop = hasBackdrop,
+    canEscapeKeyClose = canEscapeKeyClose,
+    canOutsideClickClose = canOutsideClickClose,
+    isCloseButtonShown = isCloseButtonShown,
+    transitionName = transitionName,
+    onClose = onClose,
+    block = block
+)
+
 fun RBuilder.bpPopover(
     content: ReactElement,
     hoverOpenDelay: Number? = null,