ywana-core8 0.0.369 → 0.0.372

package/package.json

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

package/src/html/textfield.js

@@ -12,7 +12,7 @@ import './textarea.css'
 export const TextField = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick } = props
+    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick, onBlur } = props
 
     function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
@@ -38,14 +38,8 @@ export const TextField = (props) => {
         }
     }
 
-    function focusOut() {
-        if (site && site.changeFocus) {
-            site.changeFocus({
-                lose: () => {
-                    // DO NOTHING
-                }
-            })
-        }
+    function blur() {
+        if (onBlur) onBlur()
     }
 
     function clear() {
@@ -59,7 +53,7 @@ export const TextField = (props) => {
 
     return (
         <div className={`${style}`} onClick={onClick}>
-            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={focusOut} readOnly={readOnly} />
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={blur} readOnly={readOnly} />
             {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
@@ -87,7 +81,6 @@ export const TextField = (props) => {
         event.stopPropagation()
         event.preventDefault()
         const value = event.target.value
-        console.log(value)
         if (onChange) onChange(id, value)
     }
 
@@ -112,7 +105,7 @@ export const TextField = (props) => {
     return (
         <div className={`${style}`} onClick={onClick}>
             <textarea id={id} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
-            {!readOnly && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>
@@ -158,7 +151,6 @@ export const DropDown = (props) => {
     }
 
     function select(event) {
-        console.log(event)
         const next = event.target.getAttribute("value")
         const option = options.find(option => option.value === next)
         if (onChange) onChange(id, next)
@@ -166,13 +158,18 @@ export const DropDown = (props) => {
         setOpen(false)
     }
 
+    function blur() {
+        console.log("BLUR DD")
+        site.clearFocus()
+    }
+
     function renderOptions() {
         const canShow = open == true && Array.isArray(options)
         if (canShow) {
             const filterActive = predictive === true && label && label.length > 0
             const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
             const lis = items.map(option => <li key={option.value} value={option.value}>{option.label}</li>)
-            return <menu><ul onClick={select}>{lis}</ul></menu>
+            return <menu><ul onMouseDown={select}>{lis}</ul></menu>
         } else {
             return null
         }
@@ -180,7 +177,7 @@ export const DropDown = (props) => {
 
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} onChange={change} readOnly={!predictive}/>
+        <TextField {...props} onClick={toggle} value={label} onChange={change} onBlur={blur} readOnly={!predictive}/>
             {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null }
             {renderOptions()}
         </div>

package/src/http/client.js

@@ -1,4 +1,4 @@
-async function fetchAsync(method, URL, body = null, token) {
+async function fetchAsync(method, URL, body = null, token, headers) {
 
   console.log('FETCH', method, URL)
 
@@ -8,7 +8,8 @@ async function fetchAsync(method, URL, body = null, token) {
     headers: {
       "Accept": "application/json",
       "Content-Type": "application/json",
-      "x-access-token": token
+      "x-access-token": token,
+      ...headers
     },
     body
   }
@@ -39,9 +40,9 @@ export const HTTPClient = (domain, securityCtx) => {
       return fetchAsync('GET', domain + URL, undefined, token);
     },
 
-    POST: (URL, body) => {
+    POST: (URL, body, headers) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('POST', domain + URL, body, token);
+      return fetchAsync('POST', domain + URL, body, token, headers);
     },
 
     PUT: (URL, body) => {

package/src/site/site.js

@@ -42,6 +42,10 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
             if (focused) focused.lose()
             setFocused(next)
         },
+        clearFocus: () => {
+            if (focused) focused.lose()
+            setFocused(null)
+        },
 
         sideNav,
         setSideNav,

package/src/site/site.test.js

@@ -51,7 +51,7 @@ const Page1 = (props) => {
             <main>
                 <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.gender1} onChange={change} options={options} predictive={true} />
+                <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={false} />
                 <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
                 <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
             </main>