ywana-core8 0.0.759 → 0.0.761

package/package.json

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

package/src/html/table.js

@@ -178,7 +178,7 @@ const DataTableCell = ({ index, row, column, cell, editable }) => {
                 case "CHECKABLE": return cell && cell.value ? <CheckBox id={id} value={cell.checked || false} label={cell.value} onChange={(id, checked) => onChange(row.id, id, cell.value, checked, cell)} /> : ''
                 case "TEXTFIELD": return <TextField id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
                 case "String": return <StringCellEditor id={id} value={cell} options={options} onChange={(id, value) => onChange(row.id, id, value)} />
-                case "Number": return <TextField id={id} type="number" value={cell} min={min} max={max} onChange={(id, value) => onChange(row.id, id, value)} />
+                case "Number": return <TextField id={id} type="number" value={cell} min={min} max={max} maxDecimals={column.maxDecimals} onChange={(id, value) => onChange(row.id, id, value)} />
                 default: return cell
             }
         } else {
@@ -187,6 +187,7 @@ const DataTableCell = ({ index, 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} action={action} />
+                case "Number": return <NumberCellViewer id={id} value={cell} format={format} />
                 default: return cell
             }
         }
@@ -244,6 +245,27 @@ const BooleanCellViewer = ({ id, value = false }) => {
     return <Icon icon={icon} />
 }
 
+/**
+ * NumberCellViewer
+ */
+const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
+    if (format) {
+        switch (format) {
+            case FORMATS.CURRENCY:
+                return <span>{value.toLocaleString('es-ES', { style: 'currency', currency: 'EUR' })}</span>
+            case FORMATS.PERCENT:
+                return <span>{value.toLocaleString('es-ES', { style: 'percent', minimumFractionDigits: 2 })}</span>
+            default:
+                return <span>{value}</span>
+        }
+    } else {
+        const decimals = maxDecimals ? maxDecimals : 2
+        // check value is a number
+        return (value && !isNaN(value)) ? <span>{value.toFixed(decimals)}</span> : ""
+    }
+}
+
+
 /**
  * String Cell Viewer
  */

package/src/html/table.test.js

@@ -13,7 +13,7 @@ export const TableTest = (prop) => {
             { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
             { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum ", color: "#CCFFFF" },
             { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum ", color: "#CCFFFF" },
+            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum ", color: "#CCFFFF" , num: 890.1234567890 },
             { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF", date: new Date().toString() },
         ]
     )
@@ -47,6 +47,7 @@ export const TableTest = (prop) => {
             { id: "description", label: "Description", type: "String"                        },
             { id: "color"      , label: "Color"      , type: "String", format: FORMATS.COLOR },
             { id: "date"       , label: "Date"       , type: "String", format: FORMATS.DATE  },
+            { id: "num"        , label: "Num"        , type: "Number", maxDecimals: 2 },
         ],
         rows
     }