ywana-core8 0.0.351 → 0.0.354

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.351",
+  "version": "0.0.354",
   "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/html/text.test.js

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
+import { useEffect } from 'react/cjs/react.production.min'
 import { Text, TEXTFORMATS } from './text'
 
 const TextTest = (prop) => {
 
+
     return (
         <>
            <Text format={TEXTFORMATS.NUMERIC}>846964.4199142859</Text>

package/src/http/token.test.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react'
+import { TextField } from '../html'
+import CryptoJS from 'crypto-js';
+import { useEffect } from 'react/cjs/react.production.min';
+
+
+const Token = () => {
+
+    const [encrypted, setEncrypted] = useState("")
+    const [decrypted, setDecrypted] = useState("")
+
+    
+    function decryptData(encrypted, secret) {
+        const bytes = CryptoJS.AES.decrypt(encrypted, secret);
+        const originalText = bytes.toString(CryptoJS.enc.Utf8);
+        return originalText;
+    }
+    
+    function encryptData(message, secret) {
+        return CryptoJS.AES.encrypt(message, secret).toString();
+    }
+    
+    function change(id, value) {
+        const secret = '12345678';
+        const e = encryptData(value, secret)
+        setEncrypted(e)
+        const d = decryptData(e, secret)
+        setDecrypted(d)
+    }
+
+    return (
+        <>
+            <TextField label="Text" onChange={(id, value) => change(id, value)}></TextField>
+            <TextField label="Encrypted" value={encrypted}></TextField>
+            <TextField label="Decrypted" value={decrypted}></TextField>
+        </>
+    )
+}
+

package/src/site/site.css

@@ -109,6 +109,10 @@
 
 .site6>footer {
     grid-area: footer;
+}
+
+.site6>.site-console {
+    grid-area: footer;
     min-height: 20rem;
     background-color: rgb(222, 222, 222);
     color: #FFF;

package/src/site/site.js

@@ -104,7 +104,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
 /**
  * Site
  */
-export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, dictionary }) => {
+export const Site = ({ icon, logo, title, toolbar, footer, children, init, min, lang, dictionary }) => {
     return (
         <SiteProvider siteLang={lang} siteDictionary={dictionary}>
             <div className="site6">
@@ -121,6 +121,7 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
                 <SitePromptDialog />
                 <SitePreview />
                 <SiteNotifications />
+                <SiteFooter>{footer}</SiteFooter>
             </div>
         </SiteProvider>
     )
@@ -141,6 +142,7 @@ const SiteHeader = (props) => {
         <Header icon={icon} title={title} />
     )
 }
+
 /**
  * Site ToolBar
  */
@@ -154,6 +156,19 @@ const SiteToolBar = ({ children }) => {
     )
 }
 
+/**
+ * Site Footer
+ */
+ const SiteFooter = ({ children }) => {
+    const context = useContext(SiteContext)
+    const { breadcrumb } = context
+    return (
+        <footer>
+            {children}
+        </footer>
+    )
+}
+
 /**
  * Site Aside
  */

package/src/site/site.test.js

@@ -9,8 +9,11 @@ import { Dialog } from './dialog'
 import { Button } from '../html'
 
 const SiteTest = (prop) => {
+
+    const footer = <div>FOOTER</div>
+
     return (
-        <Site icon="star" title="Site Test" init={"PAGE2"}>
+        <Site icon="star" title="Site Test" init={"PAGE2"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>