ywana-core8 0.0.743 → 0.0.744

package/package.json

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

package/src/domain/CollectionPage.js

@@ -5,7 +5,7 @@ import { SiteContext } from '../site/siteContext'
 import { Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField, Chip, Tooltip } from '../html'
 import { ContentEditor, TabbedContentEditor, TreededContentEditor } from './ContentEditor'
 import { CreateContentDialog } from './CreateContentDialog'
-import { CollectionAPI } from './CollectionAPI'
+import { CollectionAPI } from './CollectionAPI'
 import { Content, TYPES } from './ContentType'
 import "./CollectionPage.css"
 
@@ -24,6 +24,7 @@ export const CollectionPage = (props) => {
         autosave = false, delay = 1000, patch = false, versioning = false,
         groupBy, levels, sorter, namer,
         editor, editorTitle, editorActions,
+        listItemRenderer,
         filters,
         footer,
         children
@@ -80,10 +81,10 @@ export const CollectionPage = (props) => {
             </Header>
             <menu className={`collection-page ${className} ${hiddenStyle}`}>
                 {canFilter ? <CollectionFilters schema={schema} initial={filters} /> : null}
-                {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
+                {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} itemRenderer={listItemRenderer} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
-                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} onReload={reloadSelection} patch={patch} onChange={onChange} actions={editorActions} title={editorTitle}/>
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} onReload={reloadSelection} patch={patch} onChange={onChange} actions={editorActions} title={editorTitle} />
                 {children ? <article>{children}</article> : null}
                 <footer>
                     {footer}
@@ -165,7 +166,7 @@ const FilterResume = (props) => {
             {fields.length > 0 ? (
                 <Tooltip text="Limpiar Filtros">
                     <Icon icon="clear_all" size="small" clickable action={onClear} />
-                </Tooltip> 
+                </Tooltip>
             ) : null}
 
             <div className='filters-resume'>
@@ -188,7 +189,7 @@ const FilterResume = (props) => {
  */
 const CollectionList = (props) => {
 
-    const { groupBy, onSelect, searchBy = [] } = props
+    const { groupBy, onSelect, searchBy = [], itemRenderer } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
     const [filter, setFilter] = useState()
@@ -221,18 +222,21 @@ const CollectionList = (props) => {
     }
 
     const items = search()
-    const items2 = items.map(content => ({
-        id: content.id,
-        line1: content.name || content.centre || content.tag, // TODO: centres page Signflow legacy
-        line2: content.description,
-        grouper: content[groupBy],
-        content,
-    }))
+    const items2 = items.map(content => {
+        if (itemRenderer) return itemRenderer(content)
+        return {
+            id: content.id,
+            line1: content.name || content.centre || content.tag, // TODO: centres page Signflow legacy
+            line2: content.description,
+            grouper: content[groupBy],
+            content,
+        }
+    })
 
     return (
         <>
             <main>
-                { groupBy ? <List items={items2} onSelect={select} groupBy="grouper" /> : <List items={items2} onSelect={select} /> }
+                {groupBy ? <List items={items2} onSelect={select} groupBy="grouper" /> : <List items={items2} onSelect={select} />}
             </main>
             <footer>
                 <div className='search-box'>
@@ -397,7 +401,7 @@ const CollectionEditor = (props) => {
 
     function renderTitle() {
         if (title) {
-            return typeof title === 'function' ?  title(form) : title
+            return typeof title === 'function' ? title(form) : title
         } else {
             return selected ? selected.name : "New"
         }
@@ -406,7 +410,7 @@ const CollectionEditor = (props) => {
     function renderActions() {
         if (actions) {
             return actions.map(action => {
-               // clone React action
+                // clone React action
                 const action2 = React.cloneElement(action, { form })
                 return action2
             })