ywana-core8 0.0.386 → 0.0.389

package/package.json

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

package/src/domain/ContentEditor.js

@@ -245,6 +245,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
 
   function renderFormat(format, options) {
     switch (format) {
+      case FORMATS.COLOR: return <div>COLOR PICKER</div>
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
       default:

package/src/domain/ContentType.js

@@ -21,6 +21,7 @@ export const FORMATS = {
     HTML: 'HTML',
     URL: 'URL',
     IMG: 'IMG',
+    COLOR: 'COLOR'
 }
 
 /**

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/login/LoginBox.js

@@ -8,6 +8,7 @@ import './LoginBox.css'
 export const LoginBox = ({
     logo, title,
     userLabel = "User",
+    userValue = "",
     passwordLabel = "Password",
     passwordValue = '',
     loginLabel = "Log In", onOK,
@@ -16,7 +17,7 @@ export const LoginBox = ({
     loading
 }) => {
 
-    const [user, setUser] = useState('')
+    const [user, setUser] = useState(userValue)
     const [password, setPassword] = useState(passwordValue)
 
     function canOK() {

package/src/widgets/upload/UploadArea.js

@@ -6,15 +6,16 @@ import { Icon } from '../../html'
  */
 export const UploadArea = (props) => {
 
-    const { resumable, icon, label = 'Add file or drop file here...' } = props
+    const { icon, label = 'Add file or drop file here...' } = props
     const areaElement = useRef()
     const [drag, setDrag] = useState(false)
+    const { resumable } = props
 
     useEffect(() => {
-        if (resumable && areaElement.current) {
+        if (resumable && areaElement) {
             resumable.assignDrop(areaElement.current)
         }
-    }, [areaElement])
+    }, [])
 
     const onDragOver = () => {
         setDrag(true)
@@ -32,7 +33,7 @@ export const UploadArea = (props) => {
             onDragLeave={onDragLeave}
             ref={areaElement}
         >
-            <UploadIcon icon={icon} resumable={resumable} />
+            <UploadIcon resumable={resumable}/>
             <label>{label}</label>
         </div>
     )
@@ -54,7 +55,7 @@ export const UploadIcon = ({ icon = "folder_open", resumable }) => {
 
     return (
         <div className="upload-icon" ref={iconElement}>
-            <Icon icon={icon}/>
+            <Icon icon={icon} clickable/>
         </div>
     )
 }