ywana-core8 0.0.712 → 0.0.714

package/package.json

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

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])

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: "111111"},
         listSearchBy: ["name"],
         listGroupBy: "name",
         listItemRenderer,

package/src/html/list.css

@@ -6,7 +6,7 @@
 }
 
 .list.grouped {
-  overflow: unset;
+  overflow: auto;
 }
 
 .list>header {
@@ -27,7 +27,7 @@
 }
 
 .list.grouped>ul {
-  overflow: none;
+  overflow: unset;
 }
 
 .list > ul li {

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>