ywana-core8 0.0.558 → 0.0.561

package/package.json

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

package/src/domain/CollectionPage.js

@@ -71,7 +71,7 @@ export const CollectionPage = (props) => {
                 {levels ? <CollectionTree icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
-                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} />
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} onReload={reload}/>
                 {children ? <article>{children}</article> : null}
             </main>
         </Fragment>
@@ -283,7 +283,7 @@ export const CollectionTree = (props) => {
 const CollectionEditor = (props) => {
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
-    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit } = props
+    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit, onReload } = props
     const timer = useRef(null)
     const [form, setForm] = useState(selected)
 
@@ -328,9 +328,9 @@ const CollectionEditor = (props) => {
     function renderEditor() {
         const content = new Content(schema, form)
         switch (layout) {
-            case 'TABBED': return <TabbedContentEditor {...props} content={content} onChange={change} />
-            case 'TREEDED': return <TreededContentEditor {...props} content={content} onChange={change} />
-            default: return <ContentEditor {...props} content={content} onChange={change} />
+            case 'TABBED': return <TabbedContentEditor {...props} content={content} onChange={change} onReload={reload}/>
+            case 'TREEDED': return <TreededContentEditor {...props} content={content} onChange={change} onReload={reload}/>
+            default: return <ContentEditor {...props} content={content} onChange={change} onReload={reload}/>
         }
     }
 

package/src/domain/ContentEditor.js

@@ -8,13 +8,17 @@ import './ContentEditor.css';
 /**
  * Content Editor
  */
-export const ContentEditor = ({ content, filter, outlined = true, className, onChange }) => {
+export const ContentEditor = ({ content, filter, outlined = true, className, onChange, onReload }) => {
 
   function change(id, value) {
     const nextValue = Object.assign({}, content.value(), { [id]: value })
     if (onChange) onChange(nextValue)
   }
 
+  function reload() {
+    if (onReload) onReload()
+  }
+
   const sections = content.sections()
 
   return (
@@ -30,7 +34,7 @@ export const ContentEditor = ({ content, filter, outlined = true, className, onC
           <section key={title}>
             {title && title.length > 0 ? <header>{title}</header> : null}
             <main>
-              {filtered.map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={outlined} content={content} />)}
+              {filtered.map((field) => <FieldEditor key={field.id} field={field} onChange={change} onReload={reload} outlined={outlined} content={content} />)}
             </main>
           </section>
         ) : null
@@ -43,7 +47,7 @@ export const ContentEditor = ({ content, filter, outlined = true, className, onC
 /**
  * Tabbed Content Editor
  */
-export const TabbedContentEditor = ({ content, filter, grouped = false, onChange }) => {
+export const TabbedContentEditor = ({ content, filter, grouped = false, onChange, onReload }) => {
 
   const [tab, setTab] = useState(0)
 
@@ -91,7 +95,7 @@ export const TabbedContentEditor = ({ content, filter, grouped = false, onChange
                             group.fields
                               .filter(field => field.id !== 'id')
                               .filter(field => filter ? filter(field) : true)
-                              .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+                              .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} onReload={onReload} />)
                           }
                         </Fragment>
                       )
@@ -100,7 +104,7 @@ export const TabbedContentEditor = ({ content, filter, grouped = false, onChange
                   fields
                     .filter(field => field.id !== 'id')
                     .filter(field => filter ? filter(field) : true)
-                    .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+                    .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} onReload={onReload}/>)
               }
             </section>
           )
@@ -152,7 +156,7 @@ export const TreededContentEditor = ({ content, filter, onChange }) => {
         </Tree>
       </menu>
       <div>
-        {selected ? <TabbedContentEditor content={selected.item} onChange={change} /> : "select"}
+        {selected ? <TabbedContentEditor content={selected.item} onChange={change} onReload={reload}/> : "select"}
       </div>
     </div>
   )
@@ -161,13 +165,17 @@ export const TreededContentEditor = ({ content, filter, onChange }) => {
 /**
  * FieldEditor
  */
-export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
+export const FieldEditor = ({ field, onChange, content, outlined = false, onReload }) => {
   const { id, type, item, label, editable, options, hidden = false } = field
 
   function change(id, value) {
     if (onChange) onChange(id, value)
   }
 
+  function reload() {
+    onReload()
+  }
+
   function renderField() {
     const value1 = field.value || field.value === "" ? field.value : field.default
     const isHidden = CHECK['isFunction'](hidden) ? hidden(field, value1) : hidden
@@ -186,7 +194,7 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
         case TYPES.ARRAY:
           return item === TYPES.STRING ?
             options ? <MultiSelectionEditor content={content} field={field} value={value1} onChange={change} /> : <ListEditor field={field} value={value1} onChange={change} />
-            : <CollectionEditor field={field} value={value1} onChange={change} />
+            : <CollectionEditor field={field} value={value1} onChange={change} onReload={reload}/>
         default:
           return <div>{label}</div>
       }
@@ -372,7 +380,7 @@ export const MultiSelectionEditor = ({ field, value = [], content, onChange }) =
 /**
  * Collection Editor
  */
-export const CollectionEditor = ({ field, value = [], onChange }) => {
+export const CollectionEditor = ({ field, value = [], onChange, onReload }) => {
 
   const { id, item, label, Feeder, Renderer, Adder = true, editable = true } = field
 
@@ -398,6 +406,10 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
     }
   }
 
+  function reload() {
+    if (onReload) onReload()
+  }
+
   const columns = Object.values(item)
     .filter(field => field.column === true)
     .map((item) => ({ ...item, onChange: change }))
@@ -423,7 +435,7 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
 
       }
       <footer>
-        {Feeder ? <Feeder onAdd={add} /> : null}
+        {Feeder ? <Feeder onAdd={add} onReload={reload} /> : null}
         {Adder ? <CollectionAdder item={item} onAdd={add} /> : null}
       </footer>
     </div>

package/src/html/table.js

@@ -134,12 +134,11 @@ export const DataTable = (props) => {
  * DataTable Row
  */
 const DataTableRow = (props) => {
-
     const { index, row, columns = [], onSelect, editable, expanded = false } = props
     const { className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
-    const style = expanded ? "expanded" : "" 
+    const style = isInfoOpen ? "expanded" : "" 
     return (
         <Fragment>
             <tr className={`${style} ${className}`} onClick={ev => onSelect(row, ev)}>