ywana-core8 0.0.364 → 0.0.365

package/package.json

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

package/src/html/textfield.js

@@ -29,6 +29,18 @@ export const TextField = (props) => {
     }
 
     function focus() {
+        console.log("FOCUS")
+        if (site && site.changeFocus) {
+            site.changeFocus({
+                lose: () => {
+                    // DO NOTHING
+                }
+            })
+        }
+    }
+
+    function focusOut() {
+        console.log("FOCUS OUT")
         if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
@@ -49,7 +61,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} readOnly={readOnly} />
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={focusOut} readOnly={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}

package/src/html/textfield.test.js

@@ -21,7 +21,9 @@ const TextFieldTest = (prop) => {
 
     return (
         <>
-            <DropDown id="gender1" label="Dropdown" value={form.gender1} onChange={change} options={options} predictive={true}/>
+            <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}/>
             <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
         </>

package/src/site/site.test.js

@@ -4,16 +4,15 @@ import { Site } from './site'
 import { Page } from './page'
 import './site.css'
 import './page.css'
-import { TablePage } from '../domain/TablePage'
 import { Dialog } from './dialog'
-import { Button } from '../html'
+import { Button,  DropDown, TextField, TextArea } from '../html'
 
 const SiteTest = (prop) => {
 
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE2"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE1"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -27,14 +26,34 @@ const SiteTest = (prop) => {
 const Page1 = (props) => {
 
     const site = useContext(SiteContext)
+    const [form, setForm] = useState({})
+    
     useEffect(() => {
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
     }, [])
 
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id]: value })
+        setForm(next)
+    }
+
+    const options = [
+        { label: "One", value: "1" },
+        { label: "Two", value: "2" },
+        { label: "Three", value: "3" },
+        { label: "Four", value: "4" },
+        { label: "Five", value: "5" },
+    ]
+
     return (
         <Fragment>
             <header>Page 1</header>
             <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} />
+                <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
+                <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
             </main>
             <footer>f1</footer>
         </Fragment>