ywana-core8 0.0.491 → 0.0.494

package/package.json

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

package/src/html/table.css

@@ -1,8 +1,9 @@
 .datatable8 {
-    overflow: hidden;
     border: solid 0px var(--divider-color);
     background-color: var(--paper-color);
     overflow: auto;
+    max-height: 100%;
+    width: 100%;
 }
 
 .datatable8.outlined {

package/src/html/table.test.js

@@ -49,8 +49,8 @@ export const TableTest = (prop) => {
     } 
 
     return (
-        <>
+        <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
            <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
-        </>
+        </div>
     )
 }

package/src/site/console.js

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

package/src/site/site.css

@@ -115,7 +115,17 @@
     grid-area: footer;
     min-height: 20rem;
     background-color: rgb(222, 222, 222);
-    color: #FFF;
+    color: #000;
+}
+
+.site6>.site-console>main {
+    border: solid 5px red;
+    overflow: scroll;
+    max-height: 40vh;
+}
+
+.site6>.site-console>main>div {
+    padding: 1rem;
 }
 
 .site6>.site-preview {

package/src/site/site.js

@@ -9,20 +9,22 @@ 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 [console] = useState(new Console())
     const [page, setPage] = useState()
     const [dialog, setDialog] = useState()
     const [promptDialog, setPromptDialog] = useState()
@@ -58,8 +60,10 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
         openInfo: (info) => { setInfo(info) },
         closeInfo: () => { setInfo(null) },
 
+        showConsole,
         console,
-        toggleConsole: () => { setConsole(!console) },
+        toggleConsole: () => { setShowConsole(!showConsole) },
+
 
         breadcrumb,
         setBreadcrumb,
@@ -303,7 +307,7 @@ const SitePreview = () => {
  */
 const SiteConsole = () => {
     const context = useContext(SiteContext)
-    return context.console ? (
+    return context.showConsole ? (
         <footer className="site-console" >
             <Header>
                 <Tabs>
@@ -311,7 +315,7 @@ const SiteConsole = () => {
                 </Tabs>
             </Header>
             <main>
-
+                {context.console.lines.map(line => <div>{line}</div>)}
             </main>
         </footer>
     ) : ''

package/src/site/site.test.js

@@ -97,6 +97,9 @@ const Page2 = (props) => {
                 <Button label="CLOSE" action={() => site.closeDialog()} />
             </Fragment>
         )
+
+        site.console.log("open dialog")
+
         site.openDialog(
             <Dialog actions={actions}>
                 <main>

package/src/site/view.css

@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     background-color: rgb(200,200,200);
-    height: 2rem;
+    min-height: 2rem;
     padding-left: 1rem;
 }
 
@@ -19,6 +19,7 @@
 }
 
 .view>nav {
+    min-height: 2rem;
     display: flex;
     flex-direction: ;
     align-items: center;