ywana-core8 0.0.349 → 0.0.352

package/package.json

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

package/src/html/menu.css

@@ -1,9 +1,9 @@
 .menu-icon {
-    position: relative;
-    width: 3rem;
+  position: relative;
+  width: 3rem;
 }
 
-.menu-icon>.overlay {
+.menu-icon > .overlay {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -13,70 +13,75 @@
   background-color: transparent;
 }
 
-.menu-icon>menu {
-    z-index: 6;
-    position: absolute;
-    top: 3rem;
-    left: 0px;
-    margin: 0;
-    border: solid 1px var(--divider-color);
-    background-color: var(--paper-color);
-    padding: 0;
-    min-width: 7rem;
-    max-width: 14rem;
-    max-height: 50vh;
-    overflow: auto;
-    box-shadow: var(--shadow1);
+.menu-icon > menu {
+  z-index: 6;
+  position: absolute;
+  top: 3rem;
+  left: 0px;
+  margin: 0;
+  border: solid 1px var(--divider-color);
+  background-color: var(--paper-color);
+  padding: 0;
+  min-width: 7rem;
+  max-width: 14rem;
+  max-height: 50vh;
+  overflow: auto;
+  box-shadow: var(--shadow1);
+}
+
+.menu-icon > menu.alignRight {
+  left: unset;
+  right: 0px;
+}
+
+.menu-icon > menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  cursor: pointer;
+}
+
+.menu-icon > menu li {
+  min-height: 3rem;
+  padding: 0 0.5rem;
+
+  display: flex;
+  align-items: center;
 }
 
-.menu-icon>menu.alignRight {
-    left:unset;
-    right: 0px;
-  }
+.menu-icon > menu li:hover {
+  background-color: var(--primary-color-lighter);
+}
 
-.menu-icon>menu ul {
-    list-style: none;
-    margin: 0;
-    padding: .5rem 0;
-    cursor: pointer;
-  }
-  
-  .menu-icon>menu li {
-    min-height: 3rem;
-    padding: 0 .5rem;
-    
-    display: flex;
-    align-items: center;
-  }
-  
-  .menu-icon>menu li:hover {
-    background-color: var(--primary-color-lighter);
-  }
+.menu-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
 
-  .menu-item {
-      flex: 1;
-      display: flex;
-      align-items: center;
-  }
+.menu-item > .icon {
+  color: var(--text-color-light);
+}
 
-  .menu-item>.icon {
-      color: var(--text-color-light)
-  }
+.menu-item > label {
+  flex: 1;
+  white-space: nowrap;
+  padding: 0 0.5rem 0 0;
+  color: var(--text-color);
+  font-size: 0.9rem;
+}
 
-  .menu-item>label {
-      flex: 1;
-      white-space: nowrap;
-      padding: 0 .5rem 0 0;
-      color: var(--text-color);
-      font-size: .9rem;
-  }
+.menu-item.disabled > label,
+.menu-item.disabled > .icon {
+  color: var(--text-color-lighter);
+}
 
-  .menu-item>.meta {
-    color: var(--text-color-lighter)
+.menu-item > .meta {
+  color: var(--text-color-lighter);
 }
 
 .menu-separator {
   min-height: 0px !important;
   height: 1px;
   border-top: solid 1px var(--divider-color);
-}
+}

package/src/html/menu.js

@@ -52,15 +52,19 @@ export const MenuIcon = (props) => {
  */
 export const MenuItem = (props) => {
 
-    const { id, icon, label, meta, onSelect } = props
+    const { id, icon, label, meta, disabled=false, onSelect } = props
     const [open, setOpen] = useContext(MenuContext)
 
     function select() {
-        if (onSelect) onSelect()
-        setOpen(false)
+        if (!disabled) {
+            if (onSelect) onSelect()
+            setOpen(false)
+        }
     }
+
+    const style = disabled ? "disabled" : ""
     return (
-        <li className="menu-item" onClick={select}>
+        <li className={`menu-item ${style}`} onClick={select}>
             {icon ? <Icon icon={icon} /> : null}
             <label>{label}</label>
             {meta ? <div className="meta">{meta}</div> : null}

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,11 +9,16 @@ 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
     
     function close() {
-        site.closeDialog()
+        if (className === "prompt") { 
+            site.closePromptDialog()
+        } else {
+            site.closeDialog()
+        }
     }
     
     function prevent(e) {
@@ -25,7 +30,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 (
@@ -23,7 +25,7 @@ const Page1 = (props) => {
 
     const site = useContext(SiteContext)
     useEffect(() => {
-        site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet"})
+        site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
     }, [])
 
     return (
@@ -37,10 +39,39 @@ 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>
     )