ywana-core8 0.0.198 → 0.0.202

package/package.json

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

package/src/html/table.js

@@ -4,7 +4,7 @@ import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
 import './table.css'
-import { FORMATS } from '../domain/ContentType'
+import { FORMATS, TYPES } from '../domain/ContentType'
 
 const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 
@@ -74,10 +74,11 @@ export const DataTable = (props) => {
             <table>
                 <thead>
                     <tr>
-                        {columns.map(({ id, label, sortable }) => {
+                        {columns.map(({ id, label, type, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
+                            const colspan = type === TYPES.ENTITY ? : 1
                             return (
-                                <th>
+                                <th rowSpan={2} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
@@ -85,6 +86,13 @@ export const DataTable = (props) => {
                         })}
                         <th></th>
                     </tr>
+                    <tr>
+                        {
+                            columns
+                                .filter(({ type }) => type === TYPES.ENITY)
+                                .map(({ label }) => <th>{label}</th>)
+                        }
+                    </tr>
                 </thead>
                 <tbody>
                     {
@@ -111,7 +119,7 @@ const DataTableRow = (props) => {
     return (
         <Fragment>
             <tr onClick={ev => onSelect(row, ev)}>
-                {columns.map((column,index) => <DataTableCell key={`${column.id}_${index}`} row={row} column={column} cell={row[column.id]} editable={editable} />)}
+                {columns.map((column, index) => <DataTableCell key={`${column.id}_${index}`} row={row} column={column} cell={row[column.id]} editable={editable} />)}
                 {row.info ? <td><Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /></td> : <td></td>}
             </tr>
             {row.info && isInfoOpen ? (
@@ -152,6 +160,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
                 case "ICON": return <Icon icon={cell} />
                 case "Boolean": return <BooleanCellViewer id={id} value={cell} />
                 case "String": return <StringCellViewer id={id} value={cell} format={format} options={options} />
+                case TYPES.ENTITY: return <EntityCellViewer id={id} value={cell} />
                 default: return cell
             }
         }
@@ -162,6 +171,16 @@ const DataTableCell = ({ row, column, cell, editable }) => {
     )
 }
 
+const EntityCellViewer = ({ id, value }) => {
+    console.log(id, value)
+    const subcells = value ? Object.values(value) : [1, 2, 3]
+    return (
+        <div className='entity-cell-viewer'>
+            {subcells.filter(v => !v).map(v => <div>{v}</div>)}
+        </div>
+    )
+}
+
 /**
  * Boolean Cell Viewer
  */
@@ -177,7 +196,7 @@ const StringCellViewer = ({ id, value, format, options }) => {
     const option = options ? options.find(o => o.value === value) : null
     let text = option ? option.label : value
     switch (format) {
-        case FORMATS.DATE: text = new Date(text).toLocaleDateString(); break;
+        case FORMATS.DATE: text = new Date(text).toLocaleString(); break;
     }
     return (<div className="field-editor string-viewer">{text}</div>)
 }

package/src/test.js

@@ -1,5 +1,41 @@
-<template>
-    <div class="x">
-        XXX
-    </div>
-</template>
+import React from 'react'
+
+const Test = (props) => {
+
+    return (
+
+
+        <table border="1">
+            <thead>
+                <tr>
+                    <th rowSpan={2}>Uno</th>
+                    <th rowSpan={2}>Dos</th>
+                    <th rowSpan={2}>Tres</th>
+                    <th colspan="4">Cuatro</th>
+                    <th rowSpan={2}>Ocho</th>
+                </tr>
+                <tr>
+                    <th>a</th>
+                    <th>b</th>
+                    <th>c</th>
+                    <th>d</th>
+                </tr>
+            </thead>
+            <tbody>
+
+                <tr>
+                    <td>1</td>
+                    <td>2</td>
+                    <td>3</td>
+                    <td>4</td>
+                    <td>5</td>
+                    <td>6</td>
+                    <td>7</td>
+                    <td>8</td>
+                </tr>
+            </tbody>
+        </table>
+
+
+    )
+}