ywana-core8 0.0.603 → 0.0.606

package/package.json

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

package/src/domain/ContentViewer.js

@@ -1,5 +1,6 @@
 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'
 
@@ -27,7 +28,7 @@ export const ContentViewer = (props) => {
                             {title}
                         </header>
                         <main>
-                            {fields.map(field => <FieldViewer key={field.id} field={field} value={value[field.id]} />)}
+                            { fields.length > 0 ? fields.map(field => <FieldViewer key={field.id} field={field} value={value[field.id]} />) : <EmptyMessage" text="..."/> }
                         </main>
                     </section>
                 )
@@ -59,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>
     }
@@ -132,13 +133,27 @@ const ArrayViewer = (props) => {
                     {columns.map(column => <th key={column}>{column}</th>)}
                 </thead>
                 <tbody>
-                    {value.map(v => (
+                    {value.length >0 ? value.map(v => (
                         <tr>
                             {Object.keys(item).map(key => <td key={v[key]}>{v[key]}</td>)}
                         </tr>
-                    ))}
+                    )) : <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} readOnly={true} />
+    </div>
+  )
+}

package/src/widgets/empty/EmptyMessage.css

@@ -0,0 +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
+}

package/src/widgets/empty/EmptyMessage.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Icon, Text } from '../../html'
+import './EmptyMessage.css'
+
+/**
+ * Empty Message
+ */
+export const EmptyMessage = ({ icon, text }) => {
+
+    return (
+        <div className="empty">
+            <span><Icon icon={icon} /></span>
+            <br />
+            <Text use="subtitle2">{text}</Text>
+        </div>
+    )
+}

package/src/widgets/index.js

@@ -7,4 +7,5 @@ export * from './waiter'
 export * from './calendar/Calendar'
 export * from './planner/Planner'
 export * from './upload'
-export * from './explorer/Explorer'
+export * from './explorer/Explorer'
+export * from './empty/EmptyMessage'