ywana-core8 0.0.349 → 0.0.350

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.349",
+  "version": "0.0.350",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/site/dialog.css

@@ -12,6 +12,10 @@
   z-index: 100;
 }
 
+.overlay.prompt {
+  z-index: 1000;
+}
+
 .dialog {
   border-radius: 4px;
   position: absolute;
@@ -25,6 +29,10 @@
   justify-content: center;
 }
 
+.dialog.prompt {
+  z-index: 1010;
+}
+
 .dialog-panel {
   min-width: 500px;
   max-width: 90%;

package/src/site/dialog.js

@@ -9,6 +9,7 @@ import './dialog.css'
  * <Dialog title={title} open={true} onAction={onAction} actions={actions}>
  */
 export const Dialog = (props) => {
+
     const site = useContext(SiteContext)
     const { icon, title = "Dialog", children, onAction, actions, className, eventPropagation = false } = props
     
@@ -25,7 +26,7 @@ export const Dialog = (props) => {
     
     return (
         <Fragment>
-            <div className="overlay" />
+            <div className={`overlay ${className}`} />
             <div className={`dialog ${className}`} onClick={close}>
                 <div className="dialog-panel" onClick={prevent}>
                     <header>

package/src/site/site.js

@@ -24,6 +24,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
     const [console, setConsole] = useState(false)
     const [page, setPage] = useState()
     const [dialog, setDialog] = useState()
+    const [promptDialog, setPromptDialog] = useState()
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
     const [focused, setFocused] = useState()
@@ -72,6 +73,10 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
         confirm: (message) => window.confirm(message),
         prompt: (message) => window.prompt(message),
 
+        promptDialog,
+        openPromptDialog: (dialog) => {setPromptDialog(dialog)},
+        closePromptDialog: () => { setPromptDialog(null)},
+
         notify: ({ title, body, type = "success" }) => {
             Store.addNotification({
                 title,
@@ -113,6 +118,7 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
                 <SiteAside />
                 <SiteConsole />
                 <SiteDialog />
+                <SitePromptDialog />
                 <SitePreview />
                 <SiteNotifications />
             </div>
@@ -249,6 +255,15 @@ const SiteDialog = () => {
     return context.dialog ? context.dialog : ''
 }
 
+
+/**
+ * Site Promtp Dialog
+ */
+ const SitePromptDialog = () => {
+    const context = useContext(SiteContext)
+    return context.promptDialog ? context.promptDialog : ''
+}
+
 /**
  * Site Preview
  */

package/src/site/site.test.js

@@ -5,6 +5,8 @@ import { Page } from './page'
 import './site.css'
 import './page.css'
 import { TablePage } from '../domain/TablePage'
+import { Dialog } from './dialog'
+import { Button } from '../html'
 
 const SiteTest = (prop) => {
     return (
@@ -37,10 +39,40 @@ const Page1 = (props) => {
 }
 
 const Page2 = (props) => {
+
+    const site = useContext(SiteContext)
+    
+    function prompt() {
+        const actions = (
+            <Fragment>
+                <Button label="CLOSE" action={() => site.closePromptDialog()} />
+            </Fragment>
+        )
+        site.openPromptDialog(<Dialog className="prompt" actions={actions} >PROMPT</Dialog>)
+    }
+    
+    function openDialog() {
+        
+            const actions = (
+                <Fragment>
+                    <Button label="CLOSE" action={() => site.closeDialog()} />
+                </Fragment>
+            )
+        site.openDialog(
+            <Dialog actions={actions}>
+                <main>
+                    <Button label="open Custom Prompt" action={prompt} />
+                </main>
+            </Dialog>
+        )
+    }
+
     return (
         <Fragment>
             <header>Page 2</header>
-            <main></main>
+            <main>
+                <Button label="open Dialog" action={openDialog} />
+            </main>
             <footer>f2</footer>
         </Fragment>
     )