ywana-core8 0.0.196 → 0.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.196",
+  "version": "0.0.200",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/ContentEditor.js

@@ -221,7 +221,7 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
 
   return (
     <div className='entity-editor'>
-      <header>∂
+      <header>
         <Text use='caption'>{label}</Text>
       </header>
       <main>

package/src/domain/ContentViewer.css

@@ -1,3 +1,8 @@
-.content-viewer>main>.property {
+.content-viewer main>.property {
     border-bottom: solid 1px var(--divider-color);
+}
+
+.entity-viewer>header {
+    padding: .5rem;
+    background-color: rgba(240,240,240,.5);
 }

package/src/domain/ContentViewer.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Property } from '../html'
 import { Content, TYPES } from './ContentType'
+import './ContentViewer.css'
 
 /**
  * Content Viewer

package/src/domain/TablePage.js

@@ -334,6 +334,7 @@ const TableEditor = (props) => {
                             id: field.id,
                             label: field.label,
                             type: field.type,
+                            format: field.format,
                             onChange: field.id === "checked" ? checkOne : field.editable ? change : null,     /* checked has it´s own handler */
                             options
                         }

package/src/html/table.js

@@ -4,6 +4,7 @@ import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
 import './table.css'
+import { FORMATS, TYPES } from '../domain/ContentType'
 
 const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 
@@ -130,7 +131,7 @@ const DataTableRow = (props) => {
 const DataTableCell = ({ row, column, cell, editable }) => {
 
     const render = (type) => {
-        const { id, disabled = false, min, max, onChange, options } = column
+        const { id, disabled = false, min, max, onChange, format, options } = column
         if (id === "checked") {
             return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
         } else if (editable && onChange) {
@@ -150,7 +151,8 @@ const DataTableCell = ({ row, column, cell, editable }) => {
             switch (type) {
                 case "ICON": return <Icon icon={cell} />
                 case "Boolean": return <BooleanCellViewer id={id} value={cell} />
-                case "String": return <StringCellViewer id={id} value={cell} options={options} />
+                case "String": return <StringCellViewer id={id} value={cell} format={format} options={options} />
+                case TYPES.ENTITY: return <EntityCellViewer id={id} value={cell} />
                 default: return cell
             }
         }
@@ -161,6 +163,14 @@ const DataTableCell = ({ row, column, cell, editable }) => {
     )
 }
 
+const EntityCellViewer = ({ id, value }) => {
+    return (
+        <div className='entity-cell-viewer'>
+            {value.map(v => <div>{v}</div>)}
+        </div>
+    )
+}
+
 /**
  * Boolean Cell Viewer
  */
@@ -172,9 +182,12 @@ const BooleanCellViewer = ({ id, value = false }) => {
 /**
  * String Cell Viewer
  */
-const StringCellViewer = ({ id, value, options }) => {
+const StringCellViewer = ({ id, value, format, options }) => {
     const option = options ? options.find(o => o.value === value) : null
-    const text = option ? option.label : value
+    let text = option ? option.label : value
+    switch (format) {
+        case FORMATS.DATE: text = new Date(text).toLocaleString(); break;
+    }
     return (<div className="field-editor string-viewer">{text}</div>)
 }