ywana-core8 0.0.877 → 0.0.878

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.877",
+  "version": "0.0.878",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/checkbox.js

@@ -17,16 +17,17 @@ export const CheckBox = (props) => {
     }
 
     const labelTxt = <Text>{label}</Text>
+    const placeholderTxt = <Text>{placeholder}</Text>
     
     return value === true  ? (
         <div className="checkbox" key={`${id}1`}>
-            <input id={id} type="checkbox" placeholder={placeholder} checked value={value} onChange={change} />
+            <input id={id} type="checkbox" placeholder={placeholderTxt} checked value={value} onChange={change} />
             <span className="checkmark" />
             <label htmlFor={id}>{labelTxt}</label>
         </div>
     ) : (
         <div className="checkbox" key={`${id}0`}>
-        <input id={id} type="checkbox" placeholder={placeholder} value={value} onChange={change} />
+        <input id={id} type="checkbox" placeholder={placeholderTxt} value={value} onChange={change} />
         <span className="checkmark" />
         <label htmlFor={id}>{labelTxt}</label>
     </div>

package/src/html/property.js

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

package/src/html/textfield.js

@@ -45,10 +45,11 @@ export const TextField = (props) => {
     const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
     const style = `${labelStyle} ${labelPositionStyle} ${borderStyle} textfield-${type}`
     const labelTxt = <Text>{label}</Text>
+    const placeholderTxt = <Text>{placeholder}</Text>
 
     return (
         <div className={`${style} ${id}`} onClick={onClick}>
-            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={blur} readOnly={readOnly} step="any" />
+            <input id={id} type={type} placeholder={placeholderTxt} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={blur} readOnly={readOnly} step="any" />
             {readOnly === false && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null}
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
@@ -97,10 +98,11 @@ export const TextArea = (props) => {
     const labelStyle = label ? "" : "no-label"
     const style = `textarea ${labelStyle} textarea-${type}`
     const labelTxt = <Text>{label}</Text>
+    const placeholderTxt = <Text>{placeholder}</Text>
 
     return (
         <div className={`${style}`} onClick={onClick}>
-            <textarea id={id} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
+            <textarea id={id} placeholder={placeholderTxt} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} 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}
@@ -217,9 +219,11 @@ export const DateRange = (props) => {
         setForm(next)
     }
 
+    const labelTxt = label ?  <Text>{label}</Text> : null
+
     return (
         <div className="date-range">
-            {label ? <label>{label}</label> : null}
+            {label ? <label>{labelTxt}</label> : null}
             <TextField id="from" type="date" label="From" value={form.from} onChange={change} />
             <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
         </div>
@@ -235,9 +239,11 @@ export const PasswordField = (props) => {
         setShow(!show)
     }
 
+    const labelTxt = label ?  <Text>{label}</Text> : null
+
     return (
         <div className="password-field">
-            <TextField id={id} type={show ? "text" : "password"} label={label} value={value} onChange={onChange} />
+            <TextField id={id} type={show ? "text" : "password"} label={labelTxt} value={value} onChange={onChange} />
             <Icon icon={show ? "visibility" : "visibility_off"} clickable size="small" action={toggle} />
         </div>
     )

package/src/html/tooltip.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Text } from './text'
 import './tooltip.css'
 
 /**
@@ -12,7 +13,7 @@ export const Tooltip = (props) => {
 
     return (
         <div className="tooltip" >
-            <span className="tooltip-text" style={style}>{text}</span>
+            <span className="tooltip-text" style={style}><Text>{text}</Text></span>
             {props.children}
         </div>
     )

package/src/incubator/task.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext, useState } from 'react'
 import { CollectionAPI, FORMATS, TYPES } from '../domain'
-import { Icon, DataTable, Header, LinearProgress } from '../html'
+import { Icon, DataTable, Header, LinearProgress, Text } from '../html'
 import "./task.css"
 
 /**
@@ -206,7 +206,7 @@ export const TaskMonitor = (props) => {
             .map(task => {
                 return {
                     id: task.id,
-                    state: task.state,
+                    state: <Text>{task.state}</Text>,
                     description: task.description,
                     progress: <LinearProgress progress={task.percentage} />,
                     percentage: task.percentage,