ywana-core8 0.0.531 → 0.0.532

package/package.json

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

package/src/domain/CollectionPage.css

@@ -20,6 +20,11 @@ menu.collection-page>main {
     overflow:auto;
 }
 
+menu.collection-page>main>.search-box {
+    border-top: dotted 1px var(--divider-color);
+    padding: 0 1rem 1rem 1rem;
+}
+
 main.collection-page {
     display: flex;
     flex-direction: column;

package/src/domain/CollectionPage.js

@@ -169,6 +169,7 @@ export const CollectionTree = (props) => {
     const { icon="description", levels, onSelect, sorter } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
+    const [ filter, setFilter] = useState()
 
     function clear() {
         pageContext.clear()
@@ -182,6 +183,10 @@ export const CollectionTree = (props) => {
         if (onSelect) onSelect(id)
     }
 
+    function search(id, value) {
+        setFilter(value)
+    }
+
     function group(items, by) {
         return items.reduce((nodes, field) => {
             let node = nodes.find(n => n.name === field[by])
@@ -214,12 +219,16 @@ export const CollectionTree = (props) => {
     }
 
     const items = sorter ? sorter(all) : all
-    const nodes = generateNodes(levels, items)
+    const items2 = filter ? items.filter(item => item.name.toUpperCase().indexOf(filter.toUpperCase())>= 0) : items
+    const nodes = generateNodes(levels, items2)
     return (
         <main>
             <Tree>
                 {renderNodes(nodes)}
             </Tree>
+            <div className='search-box'>
+                <TextField icon="search" label="Buscar" onChange={search} outlined className="search-box"/>
+            </div>
         </main>
     )
 }