ywana-core8 0.0.240 → 0.0.244

package/package.json

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

package/src/html/property.css

@@ -1,6 +1,8 @@
 .property {
     flex:1;
+    max-height: 3rem;
     display: flex;
+    flex-direction: row;
 }
 
 .property-name {
@@ -8,8 +10,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: .5rem 0 .5rem .5rem;
-
+    display: flex;
+    align-items: center;
+    padding: .5rem;
 }
 
 .property-value {
@@ -17,5 +20,20 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: .5rem .5rem .5rem 0
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.property-value>input {
+    width: 100%;
+    height: 100%;
+    border: solid 0px;
+    background-color: rgba(240,240,240,.5);
+    padding: .5rem;
+}
+
+.property-value>.icon {
+    position: absolute;
+    right: .5rem;
 }

package/src/html/property.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Icon } from './icon'
 import './property.css'
 
 /**
@@ -6,12 +7,27 @@ import './property.css'
  */
 export const Property = (props) => {
 
-    const { label, name, value} = props
+    const { id, className, label, name, initial, value, editable = false, onChange } = props
+
+    function change(event) {
+        if (onChange) {
+            const value = event.target.value
+            onChange(id, value)
+        }
+    }
+
+    function clear() {
+        if (onChange) onChange(id, "")
+    }
 
     return (
-        <div className="property">
+        <div className={`property property-${id} ${className}`}>
             <div className="property-name">{name || label}</div>
-            <div className="property-value">{value}</div>
+            { initial ? <div className='property-value'>{initial}</div> : null}
+            <div className="property-value">
+                {editable ? <input type="text" value={value} onChange={change}/> : value}
+                {editable && value.length > 0 ? <Icon icon="close" size="small" clickable action={clear} /> : null }
+            </div>
         </div>
     )
 }

package/src/html/property.test.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import { FORMATS } from '../domain/ContentType'
+import { Property } from './property'
+
+const PropertyTest = (prop) => {
+
+    const [form, setForm] = useState({
+        name: 'John',
+        address: 'Porto Colon'
+    })
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id] : value })
+        setForm(next)
+    }
+
+    return (
+        <>
+           <Property id="name" label="Name" initial="John" value={form.name} editable={true} onChange={change}/>
+           <Property id="address" label="Address" initial="Porto Colon" value={form.address} editable={true} onChange={change}/>
+        </>
+    )
+}

package/src/html/textfield.js

@@ -29,7 +29,7 @@ export const TextField = (props) => {
     }
 
     function focus() {
-        if (site) {
+        if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
                     // DO NOTHING
@@ -77,11 +77,12 @@ export const TextField = (props) => {
         event.stopPropagation()
         event.preventDefault()
         const value = event.target.value
+        console.log(value)
         if (onChange) onChange(id, value)
     }
 
     function focus() {
-        if (site) {
+        if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
                     // DO NOTHING

package/src/html/textfield.test.js

@@ -13,7 +13,7 @@ const TextFieldTest = (prop) => {
 
     return (
         <>
-            <TextArea id="text1" label="Text 1" value="Lorem ipsum dolor sit amet..." onChange={change}/>
+            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change}/>
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
             <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} /> 
         </>

package/src/site/page.css

@@ -11,6 +11,7 @@
     color: var(--page-menu-color);
     background-color: var(--page-menu-bgcolor);
     border-right: solid 1px var(--divider-color);
+    resize: horizontal;
 }
 
 .page6>header {

package/src/site/site.css

@@ -57,6 +57,7 @@
 .site6>main {
     grid-area: main;
     overflow: hidden;
+    resize: horizontal;
 }
 
 .site6>aside {

package/src/widgets/index.js

@@ -3,4 +3,5 @@ export * from './login/ResetPasswordBox'
 export * from './viewer/Viewer'
 export * from './kanban/Kanban'
 export * from './avatar/avatar'
-export * from './waiter'
+export * from './waiter'
+export * from './planner/Planner'