ywana-core8 0.0.370 → 0.0.371

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.370",
+  "version": "0.0.371",
   "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>
@@ -165,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
         }
@@ -179,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/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>