ywana-core8 0.0.495 → 0.0.498

package/package.json

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

package/src/site/site.css

@@ -118,14 +118,22 @@
     color: #000;
 }
 
+.site6>.site-console>nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 .site6>.site-console>main {
-    border: solid 5px red;
     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

@@ -17,29 +17,30 @@ import { Console } from './console'
  * Site Provider
  */
 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 [showConsole, setShowConsole] = useState(false)
-    const [console] = useState(new Console())
+    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()
@@ -49,21 +50,25 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
             if (focused) focused.lose()
             setFocused(null)
         },
-
+        
         sideNav,
         setSideNav,
 
         showNav,
         setShowNav,
-
+        
         info,
         openInfo: (info) => { setInfo(info) },
         closeInfo: () => { setInfo(null) },
-
+        
+        consoleLines,
         showConsole,
-        console,
         toggleConsole: () => { setShowConsole(!showConsole) },
-
+        writeLog: (line) => { 
+            const next = consoleLines.concat(line)
+            setConsoleLines(next)
+        },
+        clearLog: () => { setConsoleLines([])},
 
         breadcrumb,
         setBreadcrumb,
@@ -306,7 +311,13 @@ const SitePreview = () => {
  * Site Console
  */
 const SiteConsole = () => {
+
     const context = useContext(SiteContext)
+
+    function clear() {
+        context.clearLog()
+    }
+
     return context.showConsole ? (
         <footer className="site-console" >
             <Header>
@@ -314,8 +325,11 @@ const SiteConsole = () => {
                     <Tab label="Console" />
                 </Tabs>
             </Header>
+            <nav>
+                <Icon icon="clear_all" size="small" clickable action={clear} />
+            </nav>
             <main>
-                {context.console.lines.map(line => <div>{line}</div>)}
+                {context.consoleLines.map(line => <div>{line}</div>)}
             </main>
         </footer>
     ) : ''

package/src/site/site.test.js

@@ -18,7 +18,7 @@ const SiteTest = (prop) => {
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE4"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE2"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -98,8 +98,6 @@ const Page2 = (props) => {
             </Fragment>
         )
 
-        site.console.log("open dialog")
-
         site.openDialog(
             <Dialog actions={actions}>
                 <main>
@@ -108,12 +106,18 @@ const Page2 = (props) => {
             </Dialog>
         )
     }
-
+    
+    function write() {
+        site.writeLog("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>

package/src/site/console.js

@@ -1,16 +0,0 @@
-export class Console {
-
-    constructor() {
-        this.lines = []
-    }
-
-    log(line) {
-        console.log(line)
-        this.lines.push(line)
-    }
-
-    clear() {
-        this.lines = []
-    }
-
-}