ywana-core8 0.0.167 → 0.0.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.167",
+  "version": "0.0.171",
   "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, content )
+  
   return (
     <div className='field-editor string-editor'>
       {

package/src/domain/TablePage.js

@@ -105,11 +105,8 @@ export const TablePage = (props) => {
 
     function renderActions() {
         return actions.map(element => {
-
-            console.log("renderActions", element.props, pageContext)
-
-            const action = () => element.props.action(pageContext, "a")
-            const clone = React.cloneElement(element, [ action ])
+            const action = () => element.props.action(pageContext)
+            const clone = React.cloneElement(element, { action })
             return clone
         })
     }

package/src/html/textfield-outlined.css

@@ -26,6 +26,12 @@
   outline: none;
 }
 
+.textfield-outlined>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: .2rem;
+}
+
 .textfield-outlined > label {
   color: var(--primary-color);
   font-size: 1rem;

package/src/html/textfield.css

@@ -29,6 +29,12 @@
   outline: none;
 }
 
+.textfield>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: .2rem;
+}
+
 .textfield > label {
   color: var(--primary-color);
   font-size: .9rem;
@@ -104,6 +110,14 @@ input:read-only ~ label,
   right: .2rem;
 }
 
+.dropdown>.textfield>.icon,
+.dropdown>.textfield-outlined>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: 2rem;
+  color: rgba(150,150,150,1);
+}
+
 .dropdown>menu {
   z-index: 2;
   position: absolute;

package/src/html/textfield.js

@@ -11,7 +11,7 @@ import './textfield.css'
 export const TextField = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, onChange, onEnter, onClick } = props
+    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick } = props
 
     function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
@@ -37,6 +37,10 @@ export const TextField = (props) => {
         }
     }
 
+    function clear() {
+        if (onChange) onChange(id, "")
+    }
+
     const borderStyle = outlined ? "textfield-outlined" : "textfield"
     const labelStyle = label ? "" : "no-label"
     const style = `${labelStyle} ${borderStyle}`
@@ -44,6 +48,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} />
+            {canClear ? <Icon icon="close" clickable size="small" action={clear} /> : null }
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>

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;
 }