ywana-core8 0.0.189 → 0.0.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.189",
+  "version": "0.0.193",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -15,6 +15,9 @@
   "bugs": {
     "url": "https://github.com/ywana/ywana-core8/issues"
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "peerDependencies": {
     "react": "17.x",
     "react-dom": "17.x"

package/src/domain/ContentViewer.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Property } from '../html'
+import { TYPES } from './ContentType'
+
+/**
+ * Content Viewer
+ * 
+ * @param {*} props 
+ * @returns 
+ */
+export const ContentViewer = (props) => {
+
+    const { content, field } = props
+
+    if (!content) return <div>No Content...</div>
+
+    const sections = content.sections()
+
+    return (
+        <div className="content-viewer">
+            {sections.map(section => {
+                const { title, fields } = section
+                return (
+                    <section key={title}>
+                        <header>
+                            {title}
+                        </header>
+                        <main>
+                            { fields.map( field => <FieldViewer key={field.id} field={field} value={content[field.id]} />)}
+                        </main>
+                    </section>
+                )
+            })}
+        </div>
+    )
+}
+
+const FieldViewer = (props) => {
+
+    const { field, value } = props
+    const { id, type, item, label } = field
+
+    console.log('FieldViewer', field, value)
+    
+    switch(type) {
+        case TYPES.STRING:
+            return <Property label={label} value={value} />
+        default:
+            return <div>{label}</div>
+    }
+}

package/src/domain/TablePage.js

@@ -5,6 +5,7 @@ import { HTTPClient, Session } from '../http'
 import { PageContext, SiteContext } from '../site'
 import { ContentEditor } from './ContentEditor'
 import { Content } from './ContentType'
+import { ContentViewer } from './ContentViewer'
 import { CreateContentDialog } from './CreateContentDialog'
 import "./TablePage.css"
 
@@ -95,7 +96,7 @@ export const TablePage = (props) => {
         if (rowSelected || rowChecked) {
             return (
                 <aside className="table-page">
-                    {rowSelected ? <TableRowEditor content={new Content(schema, form)} filter={editorFilter} onChange={change} onClose={closeAside} /> : null}
+                    {rowSelected ? <TableRowEditor content={new Content(schema, form)} filter={editorFilter} onChange={change} onClose={closeAside} editable={editable}/> : null}
                     {rowChecked ? <TableSelector schema={schema} actions={selectionActions} /> : null}
                 </aside>
             )
@@ -138,14 +139,14 @@ export const TablePage = (props) => {
  * TableRowEditor
  */
 const TableRowEditor = (props) => {
-    const { name, content, filter, onChange, onClose } = props
+    const { name, content, filter, editable, onChange, onClose } = props
     return (
         <div className="table-row-editor">
             <Header icon="local_offer" title={name || "Propiedades"}>
                 <Icon icon="close" clickable action={onClose} />
             </Header>
             <main>
-                <ContentEditor content={content} onChange={onChange} filter={filter} />
+                { editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} /> }
             </main>
         </div>
     )

package/src/html/textfield.js

@@ -49,7 +49,7 @@ export const TextField = (props) => {
     return (
         <div className={`${style}`} onClick={onClick}>
             <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
-            {canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            {!readOnly && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>