ywana-core8 0.0.604 → 0.0.605

package/package.json

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

package/src/domain/ContentViewer.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Property } from '../html'
+import { Icon, Property, TokenField } from '../html'
 import { EmptyMessage } from '../widgets'
 import { Content, FORMATS, TYPES } from './ContentType'
 import './ContentViewer.css'
@@ -28,7 +28,7 @@ export const ContentViewer = (props) => {
                             {title}
                         </header>
                         <main>
-                            { fields.length > 0 ? fields.map(field => <FieldViewer key={field.id} field={field} value={value[field.id]} />) : <EmptyMessage icon="search" text="..."/> }
+                            { fields.length > 0 ? fields.map(field => <FieldViewer key={field.id} field={field} value={value[field.id]} />) : <EmptyMessage" text="..."/> }
                         </main>
                     </section>
                 )
@@ -60,7 +60,7 @@ const FieldViewer = (props) => {
         case TYPES.ENTITY:
             return <EntityViewer field={field} value={value} />
         case TYPES.ARRAY:
-            return <ArrayViewer label={label} item={item} value={value} />
+            return item === TYPES.STRING ? <ListViewer label={label} value={value} /> : <ArrayViewer label={label} item={item} value={value} />
         default:
             return <div>{label}</div>
     }
@@ -137,9 +137,23 @@ const ArrayViewer = (props) => {
                         <tr>
                             {Object.keys(item).map(key => <td key={v[key]}>{v[key]}</td>)}
                         </tr>
-                    )) : <EmptyMessage icon="search" text="..."/>}
+                    )) : <EmptyMessage text="..."/>}
                 </tbody>
             </table>
         </div>
     )
 }
+
+/**
+ * List Viewer
+ */
+export const ListViewer = ({ field, value = [] }) => {
+
+  const { label } = field
+
+  return (
+    <div className="list-editor">
+      <TokenField id={field.id} label={label} tokens={value} />
+    </div>
+  )
+}

package/src/widgets/empty/EmptyMessage.css

@@ -1,3 +1,14 @@
+.empty {
+    width: 100%;
+    height: 100%;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(--text-color-lighter);
+}
+
 .empty i {
     width: 4rem
 }