ywana-core8 0.0.508 → 0.0.511

package/package.json

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

package/src/html/table.js

@@ -13,7 +13,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className} = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className } = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -83,12 +83,12 @@ export const DataTable = (props) => {
                     <tr>
                         {columns.map(({ id, label, type, item, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
-                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
+                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v => v.column === true).length] : [2, 1]
                             return (
                                 <th key={id} rowSpan={rowspan} colSpan={colspan}>
                                     <div>
                                         {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
-                                        {sortable ? <Icon icon="expand_less" size="small" clickable action={() => changeSort(id)}/> : null}
+                                        {sortable ? <Icon icon="expand_less" size="small" clickable action={() => changeSort(id)} /> : null}
                                     </div>
                                 </th>
                             )
@@ -127,7 +127,7 @@ export const DataTable = (props) => {
 const DataTableRow = (props) => {
 
     const { row, columns = [], onSelect, editable, expanded = false } = props
-    const { className} = row
+    const { className } = row
     const [isInfoOpen, toggleInfo] = useState(expanded)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
 
@@ -180,7 +180,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
         }
     }
 
-    return column.type === TYPES.ENTITY ? <EntityCellViewer id={column.id} item={column.item} value={cell} /> : (
+    return column.type === TYPES.ENTITY ? <EntityCellViewer id={column.id} item={column.item} value={cell} format={column.format} /> : (
         <td key={column.id} className={column.id}>{render(column.type)}</td>
     )
 }
@@ -190,10 +190,35 @@ const DataTableCell = ({ row, column, cell, editable }) => {
  * @param {*} param0 
  * @returns 
  */
-const EntityCellViewer = ({ id, item, value }) => {
+const EntityCellViewer = ({ id, item, value, format = "" }) => {
     const fields = Object.values(item).filter(field => field.column === true)
-    return fields.map( field => {
-        return (<td key={field.id} className={`entity-cell ${field.id}`} >{value[field.id]}</td>)
+
+    return fields.map(field => {
+
+        let text = value[field.id]
+
+        if (format) {
+            switch (format) {
+                case FORMATS.COLOR:
+                    text = <input type="color" value={text} disabled />
+                case FORMATS.URL:
+                    text = <a href={text} target="download" download >{text}</a>
+                    break;
+                case FORMATS.IMG:
+                    text = <img src={text} />
+                    break;
+                case FORMATS.DATE:
+                    let fecha = new Date(text)
+                    fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
+                    text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
+                    break;
+                case FORMATS.TIME:
+                    text = new Date(text).toLocaleString(locale, { year: 'hour', month: 'minute', day: 'second' });
+                    break;
+            }
+        }
+
+        return (<td key={field.id} className={`entity-cell ${field.id}`} >{text}</td>)
     })
 }
 
@@ -213,27 +238,27 @@ const StringCellViewer = ({ id, value, format, options }) => {
     function buildOptions() {
         const opts = typeof options === 'function' ? options() : options
         return opts
-      }
-      
+    }
+
     const option = options ? buildOptions().find(o => o.value === value) : null
     let text = option ? option.label : value
     const locale = window.navigator.userLanguage || window.navigator.language;
     switch (format) {
         case FORMATS.COLOR:
-            text = <input type="color" value={text} disabled/>
+            text = <input type="color" value={text} disabled />
         case FORMATS.URL:
             text = <a href={text} target="download" download >{text}</a>
             break;
-        case FORMATS.IMG: 
+        case FORMATS.IMG:
             text = <img src={text} />
             break;
-        case FORMATS.DATE: 
+        case FORMATS.DATE:
             let fecha = new Date(text)
             fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
-            text = fecha.toLocaleString( locale, { day: 'numeric', month: 'numeric', year: 'numeric'});
+            text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
             break;
-        case FORMATS.TIME: 
-            text = new Date(text).toLocaleString( locale, { year: 'hour', month: 'minute', day: 'second' }); 
+        case FORMATS.TIME:
+            text = new Date(text).toLocaleString(locale, { year: 'hour', month: 'minute', day: 'second' });
             break;
     }
     return (<div className="field-editor string-viewer">{text}</div>)