@stellar-expert/ui-framework 1.13.8 → 1.14.0

package/index.js

@@ -50,6 +50,8 @@ export * from './interaction/theme-selector'
 export * from './interaction/inline-progress'
 export * from './interaction/responsive'
 export * from './interaction/qr-code'
+export * from './interaction/dialog'
+export * from './interaction/system-dialog'
 //date components
 export * from './date/utc-timestamp'
 export * from './date/elapsed-time'

package/interaction/dialog.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './dialog.scss'
+
+/**
+ * Modal dialog
+ * @param {boolean} dialogOpen - Whether a dialog is shown
+ * @param {*} children - Dialog content
+ * @return {JSX.Element|null}
+ * @constructor
+ */
+export const Dialog = React.memo(function Dialog({dialogOpen, children}) {
+    if (!dialogOpen)
+        return null
+    return <div className="dialog">
+        <div className="dialog-backdrop"/>
+        <div className="dialog-content container">
+            <div className="container">
+                {children}
+            </div>
+        </div>
+    </div>
+})
+
+Dialog.propTypes = {
+    dialogOpen: PropTypes.bool,
+    children: PropTypes.any
+}

package/interaction/dialog.scss

@@ -0,0 +1,35 @@
+.dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  overscroll-behavior: contain;
+
+  > .dialog-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--color-modal-bg);
+    backdrop-filter: blur(2px);
+  }
+
+  > .dialog-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+
+    > .container {
+      background: var(--color-bg);
+      border: 1px solid var(--color-contrast-border);
+      border-radius: $border-radius-input;
+      box-shadow: 0 2px 4px 0 var(--color-modal-bg);
+      padding: $space-micro $space-standard $space-standard;
+      max-width: 32em;
+    }
+  }
+}

package/interaction/system-dialog.js

@@ -0,0 +1,65 @@
+import React, {useEffect, useState} from 'react'
+import {Button} from '../controls/button'
+import {Dialog} from './dialog'
+
+const defaultConfirmCaption = 'Confirm'
+const defaultCancelCaption = 'Cancel'
+
+const defaultAlertTitle = 'Info'
+const defaultConfirmTitle = 'Confirmation'
+
+/**
+ * Replaces the built-in alert() and confirm() dialogs with prettier versions
+ * @return {JSX.Element|null}
+ * @constructor
+ */
+export const SystemDialog = React.memo(function SystemDialog() {
+    const [buttons, setButtons] = useState([])
+    const [content, setContent] = useState()
+
+    useEffect(() => {
+        window.alert = function (content, options = {title: defaultAlertTitle, icon: 'info'}) {
+            setContent(<>
+                <h2>
+                    <i className={'inline-block icon-' + (options.icon || 'info')} style={{marginLeft: '-0.2em'}}/>{' '}
+                    {options.title || defaultAlertTitle}
+                </h2>
+                <div className="space">{content}</div>
+            </>)
+            setButtons([null, <Button block autoFocus onClick={() => setContent(undefined)}>Ok</Button>])
+        }
+        window.confirm = function (content, options = {
+            title: defaultConfirmTitle,
+            icon: 'help',
+            confirmTitle: defaultConfirmCaption,
+            cancelTitle: defaultCancelCaption
+        }) {
+            return new Promise((resolve, reject) => {
+                function setResult(result) {
+                    setContent(undefined)
+                    resolve(result)
+                }
+
+                setContent(<>
+                    <h2>
+                        <i className={'inline-block icon-' + (options.icon || 'help')} style={{marginLeft: '-0.2em'}}/>{' '}
+                        {options.title || defaultConfirmTitle}</h2>
+                    <div className="space">{content}</div>
+                </>)
+                setButtons([
+                    <Button block autoFocus onClick={() => setResult(true)}>{options.confirmTitle || defaultConfirmCaption}</Button>,
+                    <Button block outline onClick={() => setResult(false)}>{options.cancelTitle || defaultCancelCaption}</Button>
+                ])
+            })
+        }
+    }, [])
+    if (!content)
+        return null
+    return <Dialog dialogOpen>
+        <div style={{minHeight: '6em'}}>{content}</div>
+        <hr/>
+        <div className="row space">
+            {buttons.map((button, index) => <div key={index} className="column column-50">{button}</div>)}
+        </div>
+    </Dialog>
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.13.8",
+  "version": "1.14.0",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",