ywana-core8 0.0.384 → 0.0.387

package/package.json

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

package/src/site/dialog.css

@@ -16,24 +16,12 @@
   z-index: 1000;
 }
 
-.dialog {
-  border-radius: 4px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 110;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dialog.prompt {
+.dialog-panel.prompt {
   z-index: 1010;
 }
 
 .dialog-panel {
+  z-index: 110;
   min-width: 500px;
   max-width: 90%;
   top: 0;
@@ -47,6 +35,7 @@
   border-radius: 5px;
   box-shadow: var(--shadow1);
   overflow: auto;
+  border: solid 1px var(--divider-color);
 }
 
 .dialog-panel > header {

package/src/site/dialog.js

@@ -11,38 +11,31 @@ import './dialog.css'
 export const Dialog = (props) => {
 
     const site = useContext(SiteContext)
-    const { icon, title = "Dialog", children, onAction, actions, className} = props
-    
+    const { icon, title = "Dialog", children, onAction, actions, className } = props
+
     function close() {
-        if (className === "prompt") { 
+        if (className === "prompt") {
             site.closePromptDialog()
         } else {
             site.closeDialog()
         }
     }
-    
-    function prevent(e) {
-            e.preventDefault()
-            e.stopPropagation()
-    }
-    
+
     return (
         <Fragment>
-            <div className={`overlay ${className}`} />
-            <div className={`dialog ${className}`} onClick={close}>
-                <div className="dialog-panel" onClick={prevent}>
-                    <header>
-                        {icon ? <MenuIcon icon={icon} /> : null}
-                        <Text>{title}</Text>
-                    </header>
-                    <main>
-                        {children}
-                    </main>
-                    <footer>
-                        {actions}
-                    </footer>
-                </div>
-            </div>
+            <div className={`overlay ${className}`} onMouseDown={close} />
+            <dialog className="dialog-panel  ${className}">
+                <header>
+                    {icon ? <MenuIcon icon={icon} /> : null}
+                    <Text>{title}</Text>
+                </header>
+                <main>
+                    {children}
+                </main>
+                <footer>
+                    {actions}
+                </footer>
+            </dialog>
         </Fragment>
     )
 }

package/src/site/site.test.js

@@ -6,6 +6,8 @@ import './site.css'
 import './page.css'
 import { Dialog } from './dialog'
 import { Button,  DropDown, TextField, TextArea } from '../html'
+import { UploadDialog } from '../widgets/upload/UploadDialog'
+import { Uploader } from '../widgets/upload/Uploader'
 
 const SiteTest = (prop) => {
 
@@ -32,6 +34,10 @@ const Page1 = (props) => {
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
     }, [])
 
+    function upload() {
+        site.openDialog(<UploadDialog target="https://maso.developxp.com/kiosk/api/upload" />)
+    }
+
     function change(id, value) {
         const next = Object.assign({}, form, { [id]: value })
         setForm(next)
@@ -49,6 +55,10 @@ const Page1 = (props) => {
         <Fragment>
             <header>Page 1</header>
             <main>
+
+            <Uploader icon="cloud_upload" target="https://maso.developxp.com/kiosk/api/upload" />
+
+                <Button label="Upload" action={upload} />
                 <TextField id="name" label="Name" value={form.name} onChange={change} />
                 <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={true} />
                 <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={false} />

package/src/widgets/upload/UploadArea.js

@@ -9,12 +9,11 @@ export const UploadArea = (props) => {
     const { icon, label = 'Add file or drop file here...' } = props
     const areaElement = useRef()
     const [drag, setDrag] = useState(false)
+    const { resumable } = props
 
     useEffect(() => {
-        const { resumable } = props
         if (resumable && areaElement) {
             resumable.assignDrop(areaElement.current)
-            resumable.assignBrowse(areaElement.current)
         }
     }, [])
 
@@ -34,7 +33,7 @@ export const UploadArea = (props) => {
             onDragLeave={onDragLeave}
             ref={areaElement}
         >
-            <Icon icon={icon} clickable eventPropagation={true}/>
+            <UploadIcon resumable={resumable}/>
             <label>{label}</label>
         </div>
     )