ywana-core8 0.0.139 → 0.0.143

package/package.json

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

package/src/html/textfield.js

@@ -59,7 +59,6 @@ export const DropDown = (props) => {
     const { id, options = [], value, onChange, canFilter = false } = props
     const [open, setOpen] = useState(false)
     const [label, setLabel] = useState()
-    const [filter, setFilter] = useState()
 
     useEffect(() => {
         if (Array.isArray(options)) {
@@ -71,7 +70,7 @@ export const DropDown = (props) => {
     function change(id, value) {
         console.log('dropdown change > canFilter:', canFilter, id, value)
         if (canFilter) {
-            setFilter(value)
+            setLabel(value)
         } else {
             if (onChange) onChange(id, value)
         }
@@ -96,23 +95,24 @@ export const DropDown = (props) => {
         setOpen(false)
     }
 
-    const items = (open == true && Array.isArray(options)) ?
-        options
-            .filter(option => canFilter === false || filter.toUpperCase().indexOf(option.label.toUpperCase()) >= 0 )
-            .map(option => <li key={option.value} value={option.value}>{option.label}</li>)
-            : null
+    function renderOptions() {
+        const canShow = open == true && Array.isArray(options)
+        if (canShow) {
+            const filterActive = canFilter && label && label.length > 0
+            const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
+            console.log('filterActive: ',filterActive, label, items.length)
+            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} onChange={change} />
             <Icon icon="expand_more" clickable size="small" action={toggle} />
-            {open == true ? (
-                <menu>
-                    <ul onClick={select}>
-                        {items}
-                    </ul>
-                </menu>
-            ) : null}
+            {renderOptions()}
         </div>
     )
 }