ywana-core8 0.0.278 → 0.0.279

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.278",
+  "version": "0.0.279",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/site/index.js

@@ -1,4 +1,5 @@
 export * from './site'
 export * from './siteContext'
 export * from './page'
-export * from './dialog'
+export * from './dialog'
+export * from './view'

package/src/site/view.css

@@ -0,0 +1,41 @@
+.view {
+    flex: 1;
+    border: solid 1px rgb(200,200,200);;
+    display: flex;
+    flex-direction: column;
+}
+
+.view>header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgb(200,200,200);
+}
+
+.view>header>label {
+    flex: 1;
+}
+
+.view>nav {
+    display: flex;
+    flex-direction: ;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: rgb(230,230,230);
+}
+
+.view>nav>* {
+    border-radius: 0px !important;
+}
+
+.view>main {
+    flex: 1;
+    height: 100%;
+}
+
+.view>footer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgb(230,230,230);
+}

package/src/site/view.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { Icon, MenuIcon } from '../html'
+import './view.css'
+
+/**
+ * View
+ */
+export const View = (props) => {
+
+    const { icon, title, toolbar, menu, info, onClose, canCollapse = false, children } = props
+    const [open, setOpen] = useState(true)
+
+    function toggle() {
+        setOpen(!open)
+    }
+
+    function close() {
+        if (onClose) onClose()
+    }
+
+    return (
+        <div className='view'>
+            <header>
+                {canCollapse ? <Icon icon="expand_more" size="small" clickable action={toggle} /> : null}
+                {icon ? <Icon icon={icon} size="small" /> : null}
+                {title ? <label>{title}</label> : null}
+                {menu ? <MenuIcon align="alignRight">{menu}</MenuIcon> : null}
+                {onClose ? <Icon icon="close" size="small" clickable action={close} /> : null}
+            </header>
+            {toolbar ? <nav>{toolbar}</nav> : null}
+            {open ? <main>{children}</main> : null}
+            {info ? <footer>{info}</footer> : null}
+        </div>
+    )
+}

package/src/site/view.test.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { Icon, MenuItem, Chip } from '../html'
+import { View } from './view'
+
+const ViewTest = (prop) => {
+
+    function close() {
+        alert('close view')
+    }
+
+    const menu = [
+        <MenuItem key="option1" label="option1" action={() => alert('1')} />
+    ]
+
+    const toolbar = [
+        <Icon key="action1" icon="person" clickable size="small"/>,
+        <Icon key="action2 " icon="people" clickable size="small"/>
+    ]
+
+    const info = [
+        <Chip label="Info1" />,
+        <Chip label="Info2" />,
+        <Chip label="Info3" />
+    ]
+
+    return (
+        <div style={{ padding: "1rem", height: "20rem" }}>
+            <View
+                canCollapse={true}
+                icon="star"
+                title="Title"
+                menu={menu}
+                onClose={close}
+                toolbar={toolbar}
+                info={info}
+            >
+                hola
+            </View>
+        </div>
+    )
+}

package/src/widgets/upload/UploadArea.js

@@ -49,7 +49,7 @@ const UploadIcon = ({ icon = "folder_open", resumable }) => {
             resumable.assignBrowse(iconElement.current)
             console.log('uploadicon')
         }
-    }, [])
+    }, [iconElement])
 
     return (
         <div className="upload-icon" ref={iconElement}>

package/src/widgets/upload/UploadDialog.js

@@ -23,7 +23,7 @@ export const UploadDialog = ({ label, target, accept, onSuccess, onClose }) => {
 
     const actions = (
         <Fragment>
-            <Button label="CLOSE" action={() => onAction("CLOSE")} />
+            <Button label="CERRAR" action={() => onAction("CLOSE")} />
         </Fragment>
     )