ywana-core8 0.0.170 → 0.0.174

package/package.json

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

package/src/domain/ContentEditor.js

@@ -245,6 +245,8 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
     return opts
   }
 
+  console.log('StringEditor: ', label, value )
+  
   return (
     <div className='field-editor string-editor'>
       {
@@ -271,6 +273,8 @@ const NumberEditor = ({ field, value, onChange }) => {
   const max = field.max
   const disabled = !editable
 
+  console.log('StringEditor: ', label, val, value )
+
   return (
     <div className='field-editor number-editor'>
       <TextField outlined id={id} label={label} type='NUMBER' value={val} max={max} min={min} onChange={change} disabled={disabled} />

package/src/html/textfield.css

@@ -114,7 +114,8 @@ input:read-only ~ label,
 .dropdown>.textfield-outlined>.icon {
   position: absolute;
   top: 1.7rem;
-  right: 4rem;
+  right: 2rem;
+  color: rgba(150,150,150,1);
 }
 
 .dropdown>menu {

package/src/html/textfield.js

@@ -45,10 +45,11 @@ export const TextField = (props) => {
     const labelStyle = label ? "" : "no-label"
     const style = `${labelStyle} ${borderStyle}`
     const labelTxt = <Text>{label}</Text>
+
     return (
         <div className={`${style}`} onClick={onClick}>
             <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
-            {canClear ? <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>
@@ -68,12 +69,12 @@ export const DropDown = (props) => {
     useEffect(() => {
         if (Array.isArray(options)) {
             const option = options.find(option => option.value === value)
-            if (option) setLabel(option.label)
+            const label = option ? option.label : ""
+            setLabel(label)
         }
     }, [value])
 
     function change(id, value) {
-        console.log('dropdown change > canFilter:', canFilter, id, value)
         if (canFilter) {
             setLabel(value)
         } else {
@@ -104,7 +105,6 @@ export const DropDown = (props) => {
         const canShow = open == true && Array.isArray(options)
         if (canShow) {
             const filterActive = canFilter === true && label && label.length > 0
-            console.log('Dropdown filterActive', filterActive, canFilter, label )
             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>

package/src/html/tree.css

@@ -13,12 +13,12 @@
     display: flex;
     align-items: center;
     font: 1rem;
-    color: rgba(0,0,0,.7);
+    color: var(--text-color-light);
 }
 
 .tree-item:hover {
     cursor: pointer;
-    background-color: rgba(200,200,200,.7);
+    background-color: var(--background-color);
     font-weight: 500;
 }