ywana-core8 0.0.362 → 0.0.365

package/package.json

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

package/src/domain/ContentViewer.js

@@ -27,7 +27,7 @@ export const ContentViewer = (props) => {
                             {title}
                         </header>
                         <main>
-                            { fields.map( field => <FieldViewer key={field.id} field={field} value={value[field.id]} />)}
+                            {fields.map(field => <FieldViewer key={field.id} field={field} value={value[field.id]} />)}
                         </main>
                     </section>
                 )
@@ -44,12 +44,12 @@ export const ContentViewer = (props) => {
  */
 const FieldViewer = (props) => {
 
-    const { field, value } = props
-    const { id, type, item, label, visible =t rue } = field
-    
+    const { field, value } = props
+    const { type, label, visible = true } = field
+
     if (!visible) return null
 
-    switch(type) {
+    switch (type) {
         case TYPES.STRING:
             return <Property label={label} value={value} />
         case TYPES.ENTITY:
@@ -74,7 +74,7 @@ const EntityViewer = (props) => {
                 {label}
             </header>
             <main>
-                { fields.map( field => <FieldViewer field={field} value={value[field.id]} /> )}
+                {fields.map(field => <FieldViewer field={field} value={value[field.id]} />)}
             </main>
         </div>
     )

package/src/domain/TablePage.js

@@ -431,10 +431,10 @@ export const TableEditor = (props) => {
 
             table.columns.push({ id: "actions" })
             const groupSize = groups[groupName].length
-
+            const title = <span><span className="size">{groupSize}</span>{renderGroupLabel(groupName)}</span>
             return (
                 <Fragment key={groupName}>
-                    <Header title={renderGroupLabel(groupName)} >
+                    <Header title={title} >
                         <span className="size">{groupSize}</span>
                     </Header>
                     <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} />

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>