ywana-core8 0.0.430 → 0.0.433

package/package.json

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

package/src/domain/ContentViewer.css

@@ -2,7 +2,22 @@
     border-bottom: solid 1px var(--divider-color);
 }
 
-.entity-viewer>header {
+.entity-viewer>header,
+.array-viewer>header {
     padding: .5rem;
     background-color: rgba(240,240,240,.5);
+}
+
+.array-viewer>table {
+    width: 100%;
+    border: solid 1px var(--divider-color);
+}
+
+.array-viewer>table tbody {
+    max-height: 20vh;
+    overflow: auto;
+}
+
+.array-viewer>table td {
+    border-bottom: solid 1px var(--divider-color);
 }

package/src/domain/ContentViewer.js

@@ -55,10 +55,7 @@ const FieldViewer = (props) => {
         case TYPES.ENTITY:
             return <EntityViewer field={field} value={value} />
         case TYPES.ARRAY:
-            return value.map(v => {
-                console.log("fieldviewer>Array: ",item, v)
-                return <FieldViewer field={item} value={v} />
-            })
+            return <ArrayViewer label={label} item={item} value={value} />
         default:
             return <div>{label}</div>
     }
@@ -84,3 +81,32 @@ const EntityViewer = (props) => {
         </div>
     )
 }
+
+
+/**
+ * Array Viewer
+ */
+const ArrayViewer = (props) => {
+    const { label, item, value } = props
+    const columns = Object.keys(item).map(key => item[key]["label"])
+    console.log("ARRAYVIEWER", item, value, columns)
+    return (
+        <div className="array-viewer">
+            <header>
+                {label}
+            </header>
+            <table>
+                <thead>
+                    {columns.map(column => <th>{column}</th>)}
+                </thead>
+                <tbody>
+                    {value.map(v => (
+                        <tr>
+                            { Object.keys(item).map(key => <td>{v[key]}</td>) }
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}