ywana-core8 0.0.601 → 0.0.604

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.601",
+  "version": "0.0.604",
   "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 { Property } from '../html'
+import { Icon, Property } 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 icon="search" text="..."/> }
                         </main>
                     </section>
                 )
@@ -52,6 +53,8 @@ const FieldViewer = (props) => {
     if (hidden) return null;
 
     switch (type) {
+        case TYPES.BOOLEAN:
+            return <BooleanViewer field={field} value={value} />
         case TYPES.STRING:
             return <StringViewer field={field} value={value} />
         case TYPES.ENTITY:
@@ -84,6 +87,17 @@ const EntityViewer = (props) => {
     )
 }
 
+/**
+ * Boolean Viewer
+ */
+const BooleanViewer = (props) => {
+    const { field, value } = props
+    const { label, options } = field
+    const iconName = value === true ? "check_box" : "check_box_outline_blank"
+    const icon = <Icon icon={iconName} />
+    return <Property label={label} value={icon} options={options} />
+}
+
 /**
  * StringViewer
  */
@@ -119,11 +133,11 @@ 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 icon="search" text="..."/>}
                 </tbody>
             </table>
         </div>

package/src/widgets/empty/EmptyMessage.css

@@ -0,0 +1,3 @@
+.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'