ywana-core8 0.0.493 → 0.0.496

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.493",
+  "version": "0.0.496",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/console.js

@@ -0,0 +1,18 @@
+import { publish } from "gh-pages"
+
+export class Console {
+
+    constructor(publish) {
+        this.lines = []
+    }
+
+    log(line) {
+        this.lines.push(line)
+        publish(this.lines)
+    }
+
+    clear() {
+        this.lines = []
+    }
+
+}

package/src/site/site.css

@@ -115,7 +115,25 @@
     grid-area: footer;
     min-height: 20rem;
     background-color: rgb(222, 222, 222);
-    color: #FFF;
+    color: #000;
+}
+
+.site6>.site-console>nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.site6>.site-console>main {
+    overflow: scroll;
+    max-height: 40vh;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.site6>.site-console>main>div {
+    padding: 1rem;
+    border-bottom: dotted 1px var(--divider-color);
 }
 
 .site6>.site-preview {

package/src/site/site.js

@@ -9,35 +9,38 @@ import './site.css'
 
 import { ReactNotifications, Store } from 'react-notifications-component'
 import 'react-notifications-component/dist/theme.css'
+import { Console } from './console'
 
 
 
 /**
  * Site Provider
  */
-export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }) => {
-
+export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
+    
     const [lang, setLang] = useState(siteLang)
     const [dictionary, setDictionary] = useState(siteDictionary)
     const [sideNav, setSideNav] = useState('max')
     const [showNav, setShowNav] = useState(false)
     const [info, setInfo] = useState(null)
-    const [console, setConsole] = useState(false)
+    const [showConsole, setShowConsole] = useState(true)
+    const [consoleLines, setConsoleLines] = useState([])
     const [page, setPage] = useState()
     const [dialog, setDialog] = useState()
     const [promptDialog, setPromptDialog] = useState()
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
     const [focused, setFocused] = useState()
-
+    
+    
     const value = {
-
+        
         lang,
         setLang,
-
+        
         dictionary,
         setDictionary,
-
+        
         focused,
         changeFocus: (next) => {
             if (focused) focused.lose()
@@ -47,19 +50,27 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
             if (focused) focused.lose()
             setFocused(null)
         },
-
+        
         sideNav,
         setSideNav,
 
         showNav,
         setShowNav,
-
+        
         info,
         openInfo: (info) => { setInfo(info) },
         closeInfo: () => { setInfo(null) },
-
-        console,
-        toggleConsole: () => { setConsole(!console) },
+        
+        consoleLines,
+        showConsole,
+        toggleConsole: () => { setShowConsole(!showConsole) },
+        log: (line) => { 
+            const next = consoleLines.concat(line)
+            setConsoleLines(next)
+        },
+        clearLog: () => {
+            setConsoleLines([])
+        },
 
         breadcrumb,
         setBreadcrumb,
@@ -302,16 +313,25 @@ const SitePreview = () => {
  * Site Console
  */
 const SiteConsole = () => {
+
     const context = useContext(SiteContext)
-    return context.console ? (
+
+    function clear() {
+        context.clearLog()
+    }
+
+    return context.showConsole ? (
         <footer className="site-console" >
             <Header>
                 <Tabs>
                     <Tab label="Console" />
                 </Tabs>
             </Header>
+            <nav>
+                <Icon icon="clear_all" size="small" clickable action={clear} />
+            </nav>
             <main>
-
+                {context.consoleLines.map(line => <div>{line}</div>)}
             </main>
         </footer>
     ) : ''

package/src/site/site.test.js

@@ -97,6 +97,7 @@ const Page2 = (props) => {
                 <Button label="CLOSE" action={() => site.closeDialog()} />
             </Fragment>
         )
+
         site.openDialog(
             <Dialog actions={actions}>
                 <main>
@@ -105,12 +106,18 @@ const Page2 = (props) => {
             </Dialog>
         )
     }
-
+    
+    function write() {
+        site.log("xxx"+new Date())
+    }
+    
+    
     return (
         <Fragment>
             <header>Page 2</header>
             <main>
                 <Button label="open Dialog" action={openDialog} />
+                <Button label="Write inConsole" action={write} />
             </main>
             <footer>f2</footer>
         </Fragment>