ywana-core8 0.0.350 → 0.0.353

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.350",
+  "version": "0.0.353",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.1",

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,78 @@
   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.alignRight {
+  left: unset;
+  right: 0px;
+}
 
-.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-icon > menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  cursor: pointer;
+}
 
-  .menu-item {
-      flex: 1;
-      display: flex;
-      align-items: center;
-  }
+.menu-icon > menu li {
+  min-height: 3rem;
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+}
 
-  .menu-item>.icon {
-      color: var(--text-color-light)
-  }
+.menu-icon > menu li:hover {
+  background-color: var(--primary-color-lighter);
+}
 
-  .menu-item>label {
-      flex: 1;
-      white-space: nowrap;
-      padding: 0 .5rem 0 0;
-      color: var(--text-color);
-      font-size: .9rem;
-  }
+.menu-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
 
-  .menu-item>.meta {
-    color: var(--text-color-lighter)
+.menu-item > .icon {
+  color: var(--text-color-light);
+  cursor: pointer;
+}
+
+.menu-item > label {
+  flex: 1;
+  white-space: nowrap;
+  padding: 0 0.5rem 0 0;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.menu-item.disabled > label,
+.menu-item.disabled > .icon {
+  color: var(--text-color-lighter);
+  cursor: initial;
+}
+
+.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/http/token.test.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Button, TextField } from '../html'
+import sha256 from 'crypto-js/sha256';
+import hmacSHA512 from 'crypto-js/hmac-sha512';
+import Base64 from 'crypto-js/enc-base64';
+
+const TokenTest = (prop) => {
+
+    const [text, setText] = useState()
+    const [hash, setHash] = useState()
+    const [decripted, setDecripted] = useState()
+
+    function encryptData(data, iv, key) {
+
+    }
+
+
+    function decryptData(encrypted, iv, key) {
+
+    }
+
+    return (
+        <>
+            <TextField label="Text" onChange={(id, value) => setText(value)}></TextField>
+            <Button label="ENCRYPT" action={encryptData}></Button>
+            <TextField label="Encrypted" value={encripted}></TextField>
+            <Button label="DECRYPT" action={decryptData}></Button>
+            <TextField label="Decrypted" value={decripted} />
+        </>
+    )
+}

package/src/site/dialog.js

@@ -14,7 +14,11 @@ export const Dialog = (props) => {
     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) {

package/src/site/site.test.js

@@ -25,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 (
@@ -41,7 +41,7 @@ const Page1 = (props) => {
 const Page2 = (props) => {
 
     const site = useContext(SiteContext)
-    
+
     function prompt() {
         const actions = (
             <Fragment>
@@ -50,14 +50,13 @@ const Page2 = (props) => {
         )
         site.openPromptDialog(<Dialog className="prompt" actions={actions} >PROMPT</Dialog>)
     }
-    
+
     function openDialog() {
-        
-            const actions = (
-                <Fragment>
-                    <Button label="CLOSE" action={() => site.closeDialog()} />
-                </Fragment>
-            )
+        const actions = (
+            <Fragment>
+                <Button label="CLOSE" action={() => site.closeDialog()} />
+            </Fragment>
+        )
         site.openDialog(
             <Dialog actions={actions}>
                 <main>