ywana-core8 0.0.365 → 0.0.368

package/package.json

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

package/src/html/textfield.css

@@ -25,6 +25,11 @@
   background-color: var(--paper-color);
 }
 
+.textfield > input:read-only {
+  background-color: var(--paper-color) !important;
+  border-bottom: 1px solid var(--divider-color) !important;
+}
+
 .textfield > input:focus {
   outline: none;
   border-color: var(--primary-color, blue);

package/src/html/textfield.js

@@ -29,7 +29,6 @@ export const TextField = (props) => {
     }
 
     function focus() {
-        console.log("FOCUS")
         if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
@@ -40,7 +39,6 @@ export const TextField = (props) => {
     }
 
     function focusOut() {
-        console.log("FOCUS OUT")
         if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
@@ -62,7 +60,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} onBlur={focusOut} readOnly={readOnly} />
-            {!readOnly && canClear && value && value.length > 0 ? <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>
@@ -160,6 +158,7 @@ export const DropDown = (props) => {
     }
 
     function select(event) {
+        console.log(event)
         const next = event.target.getAttribute("value")
         const option = options.find(option => option.value === next)
         if (onChange) onChange(id, next)
@@ -181,7 +180,7 @@ export const DropDown = (props) => {
 
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} onChange={change} />
+            <TextField {...props} value={label} onChange={change} readOnly={!predictive}/>
             {!readOnly ? <Icon icon="expand_more" clickable size="small" action={toggle} /> : null }
             {renderOptions()}
         </div>

package/src/html/textfield.test.js

@@ -12,6 +12,7 @@ const TextFieldTest = (prop) => {
     }
 
     const options = [
+        { label: "", value: "" },
         { label: "One", value: "1" },
         { label: "Two", value: "2" },
         { label: "Three", value: "3" },
@@ -22,8 +23,8 @@ const TextFieldTest = (prop) => {
     return (
         <>
             <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}/>
+            <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
+            <DropDown id="gender2" label="Dropdown 2" value={form.gender2} 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} />
         </>