ywana-core8 0.0.137 → 0.0.141

package/package.json

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

package/src/domain/ContentEditor.js

@@ -244,7 +244,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
     <div className='field-editor string-editor'>
       {
         format === FORMATS.DATE ? <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} /> :
-          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} /> :
+          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} canFilter={true}/> :
             <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
       }
     </div>

package/src/html/textfield-outlined.css

@@ -39,6 +39,12 @@
   -webkit-transition: 0.2s ease all;
 }
 
+.textfield-outlined input[type="date"] ~ label {
+    top: .3rem;
+    font-size: .8rem;
+    color: var(--primary-color);
+}
+
 /* active state */
 .textfield-outlined > input:focus ~ label,
 .textfield-outlined > input:valid ~ label {

package/src/html/textfield.css

@@ -47,6 +47,12 @@ input:read-only {
   border: 0px !important;
 }
 
+.textfield input[type="date"] ~ label {
+    top: .3rem;
+    font-size: .8rem;
+    color: var(--primary-color);
+}
+
 /* active state */
 input:read-only ~ label,
 .textfield > input:focus ~ label,

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, onChange, onEnter, onClick } = props
 
     function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
@@ -29,9 +29,11 @@ export const TextField = (props) => {
 
     function focus() {
         if (site) {
-            site.changeFocus({ lose: () => {
-                // DO NOTHING
-            }})
+            site.changeFocus({
+                lose: () => {
+                    // DO NOTHING
+                }
+            })
         }
     }
 
@@ -41,9 +43,9 @@ export const TextField = (props) => {
     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} onfocus="(this.type='date')" onfocusout="(this.type='text')"/>
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} onfocus="(this.type='date')" onfocusout="(this.type='text')" />
             <span className="bar"></span>
-            { label ? <label>{labelTxt}</label> : null }
+            {label ? <label>{labelTxt}</label> : null}
         </div>
     )
 }
@@ -54,7 +56,7 @@ export const TextField = (props) => {
 export const DropDown = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, options = [], value, onChange } = props
+    const { id, options = [], value, onChange, canFilter = false } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
 
@@ -65,13 +67,23 @@ export const DropDown = (props) => {
         }
     }, [value])
 
+    function change(id, value) {
+        console.log('dropdown change > canFilter:', canFilter, id, value)
+        if (canFilter) {
+            setLabel(value)
+        } else {
+            if (onChange) onChange(id, value)
+        }
+    }
 
     function toggle() {
         if (site) {
-            site.changeFocus({ lose: () => {
-                setOpen(false) 
-            }})
-        } 
+            site.changeFocus({
+                lose: () => {
+                    setOpen(false)
+                }
+            })
+        }
         setOpen(!open)
     }
 
@@ -83,17 +95,23 @@ export const DropDown = (props) => {
         setOpen(false)
     }
 
+    function renderOptions() {
+        const canShow = open == true && Array.isArray(options)
+        if (canShow) {
+            const filterActive = canFilter && label && label.length > 0
+            const items = filterActive ? options.filter(option => canFilter === false || label.toUpperCase().indexOf(option.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>
+        } else {
+            return null
+        }
+    }
+
     return (
         <div className="dropdown">
-            <TextField {...props} onClick={toggle} value={label} />
+            <TextField {...props} onClick={toggle} value={label} onChange={change} />
             <Icon icon="expand_more" clickable size="small" action={toggle} />
-            {open == true ? (
-                <menu>
-                    <ul onClick={select}>
-                        {Array.isArray(options) ? options.map(option => <li key={option.value} value={option.value}>{option.label}</li>) : null}
-                    </ul>
-                </menu>
-            ) : null}
+            {renderOptions()}
         </div>
     )
 }