ywana-core8 0.0.364 → 0.0.367

package/package.json

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

package/src/html/textfield.css

@@ -25,6 +25,11 @@
   background-color: var(--paper-color);
 }
 
+.textfield > input:read-only {
+  background-color: var(--paper-color);
+  border-bottom: 1px solid var(--divider-color) !important;
+}
+
 .textfield > input:focus {
   outline: none;
   border-color: var(--primary-color, blue);

package/src/html/textfield.js

@@ -38,6 +38,16 @@ export const TextField = (props) => {
         }
     }
 
+    function focusOut() {
+        if (site && site.changeFocus) {
+            site.changeFocus({
+                lose: () => {
+                    // DO NOTHING
+                }
+            })
+        }
+    }
+
     function clear() {
         if (onChange) onChange(id, "")
     }
@@ -49,8 +59,8 @@ 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} />
-            {!readOnly && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={focusOut} 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}
         </div>
@@ -169,7 +179,7 @@ export const DropDown = (props) => {
 
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} onChange={change} />
+            <TextField {...props} onClick={toggle} value={label} onChange={change} readOnly={!predictive}/>
             {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null }
             {renderOptions()}
         </div>

package/src/html/textfield.test.js

@@ -12,6 +12,7 @@ const TextFieldTest = (prop) => {
     }
 
     const options = [
+        { label: "", value: "" },
         { label: "One", value: "1" },
         { label: "Two", value: "2" },
         { label: "Three", value: "3" },
@@ -21,7 +22,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={false}/>
+            <DropDown id="gender2" label="Dropdown 2" value={form.gender2} 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>