ywana-core8 0.0.713 → 0.0.715

package/package.json

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

package/src/domain2/CollectionContext.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CollectionAPI } from "./CollectionAPI";
 
 export const CollectionContext = React.createContext()
@@ -12,12 +12,17 @@ export const CollectionContextProvider = (props) => {
     const API = CollectionAPI(url, host)
 
     const [all, setAll] = useState([])
-    const [filters, setFilters] = useState({})
+    const [filters, setFilters] = useState()
     const [likes, setLikes] = useState([])
     const [customFilters, setCustomFilters] = useState({})
     const [queries, setQueries] = useState([])
     const [selected, setSelected] = useState(null)
 
+    useEffect(() => {
+        console.log("CONTEXT LOAD", filters, customFilters)
+        load()
+    }, [filters, customFilters])
+
     async function load() {
 
         const runCustomFilters = (all) => {

package/src/domain2/CollectionFilters.js

@@ -9,12 +9,13 @@ import './CollectionFilters.css'
  */
 export const CollectionFilters = (props) => {
 
-    const { schema, children } = props
+    const { schema, children, value } = props
     const context = useContext(CollectionContext)
     const { filters } = context
     const [open, setOpen] = useState(false)
 
     useEffect(() => {
+        context.setFilters(value)
         const likes = Object.keys(schema).filter(id => schema[id].like === true)
         context.setLikes(likes)
     }, [schema])
@@ -53,13 +54,17 @@ export const CollectionFilters = (props) => {
     )
 }
 
+/**
+ * Collection Filters Resume
+ */
 const CollectionFiltersResume = (props) => {
 
     const { schema } = props
     const context = useContext(CollectionContext)
     const { filters } = context
-    const fields = Object.keys(filters)
 
+    if (!filters) return null
+    const fields = Object.keys(filters)
     if (!fields.length) return null
 
     return (

package/src/domain2/CollectionList.js

@@ -13,9 +13,7 @@ export const CollectionList = (props) => {
     const { all = [], selected, filters, customFilters } = context
     const [search, setSearch] = useState('')
 
-    useEffect(() => {
-        context.load()
-    }, [filters, customFilters])
+
 
     function changeSearch(id, value) {
         setSearch(value)

package/src/domain2/CollectionPage.js

@@ -15,7 +15,7 @@ export const CollectionPage = (props) => {
         host, url, schema,
         layout,
         title, actions,
-        canFilter, customFilters,
+        canFilter, customFilters, filtersValue,
         listGroupBy, listSearchBy, listItemRenderer,
         customEditor,
     } = props
@@ -26,7 +26,7 @@ export const CollectionPage = (props) => {
                 <Header title={title} >
                     {actions}
                 </Header>
-                {canFilter ? <CollectionFilters schema={schema} >{customFilters}</CollectionFilters> : null}
+                {canFilter ? <CollectionFilters schema={schema} value={filtersValue} >{customFilters}</CollectionFilters> : null}
                 <CollectionList itemRenderer={listItemRenderer} groupBy={listGroupBy} searchBy={listSearchBy} />
                 <CollectionEditor customEditor={customEditor} />
             </CollectionContextProvider>

package/src/domain2/CollectionPage.test.js

@@ -34,6 +34,7 @@ const CollectionPageTest = (prop) => {
         title: <CustomTitle />,
         canFilter: true,
         customFilters: [<CustomFilter1 />, <CustomFilter2 />],
+        filtersValue: { name: "333"},
         listSearchBy: ["name"],
         listGroupBy: "name",
         listItemRenderer,

package/src/html/list.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { Icon } from './icon';
 import { Text } from './text';
 import "./list.css"
@@ -8,7 +8,7 @@ import "./list.css"
  */
 export const List = (props) => {
 
-    const { items = [], children, onSelect, groupBy } = props
+    const { items = [], children, selected, onSelect, groupBy } = props
 
     function select(id) {
         if (onSelect) onSelect(id)
@@ -28,14 +28,14 @@ export const List = (props) => {
  * Grouped List
  */
 const GroupedList = (props) => {
-    const { items = [], children, onSelect, groupBy } = props
+    const { items = [], children, selected, onSelect, groupBy } = props
 
     const groups = items.reduce((groups, item) => {
         let group = groups.find(g => g.name === item[groupBy])
         if (!group) {
-            group = { name: item[groupBy], items: []}
+            group = { name: item[groupBy], items: [] }
             groups.push(group)
-        } 
+        }
         group.items.push(item)
         return groups
     }, [])
@@ -46,7 +46,7 @@ const GroupedList = (props) => {
                 <Fragment key={group.name}>
                     <header key={`${group.name}-header`}><Text>{group.name}</Text></header>
                     <ul key={`${group.name}-ul`}>
-                        {group.items.map(item => <ListItem key={item.id} item={item} onSelect={onSelect} />)}
+                        {group.items.map(item => <ListItem key={item.id} item={item} selected={selected} onSelect={onSelect} />)}
                     </ul>
                 </Fragment>
             ))}
@@ -58,15 +58,16 @@ const GroupedList = (props) => {
 /**
  * List Item
  */
-const ListItem = ({ item, onSelect }) => {
+const ListItem = ({ item, selected, onSelect }) => {
     const { id, icon, line1, line2, meta } = item
 
     function select() {
         if (onSelect) onSelect(id)
     }
 
+    const style = selected === id ? "selected" : ""
     return (
-        <li onClick={select}>
+        <li className={`${style}`} onClick={select}>
             {icon ? <Icon icon={icon} size="small" /> : null}
             <main>
                 <div className="primary-line"><Text>{line1}</Text></div>