ywana-core8 0.0.138 → 0.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.138",
+  "version": "0.0.142",
   "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.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, srtFilter] = useState()
 
     useEffect(() => {
         if (Array.isArray(options)) {
@@ -69,8 +68,9 @@ export const DropDown = (props) => {
     }, [value])
 
     function change(id, value) {
+        console.log('dropdown change > canFilter:', canFilter, id, value)
         if (canFilter) {
-            setFilter(value)
+            setLabel(value)
         } else {
             if (onChange) onChange(id, value)
         }
@@ -95,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 => label.toUpperCase().indexOf(option.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>
     )
 }