Implement int cell type

Author: martinRenou

js/src/sheet.ts

@@ -1,4 +1,5 @@
-import * as widgets  from '@jupyter-widgets/base';
+import * as widgets from '@jupyter-widgets/base';
+import * as d3 from 'd3-format';
 import {cloneDeep, extend, includes as contains, each, debounce, times, map, unzip as transpose} from 'lodash';
 import {semver_range} from './version';
 import {RendererModel} from './renderer';
@@ -143,8 +144,8 @@ let SheetModel = widgets.DOMWidgetModel.extend({
                     cell_data.options['readOnly'] = cell.get('read_only');
                 if (cell.get('choice') != null)
                     cell_data.options['source'] = cell.get('choice')
-                if (cell.get('numeric_format') && cell.get('type') == 'numeric')
-                    cell_data.options['numericFormat'] = {'pattern': cell.get('numeric_format')};
+                if (cell.get('numeric_format') && (cell.get('type') == 'int' || cell.get('type') == 'float'))
+                    cell_data.options['numericFormat'] = cell.get('numeric_format');
                 if (cell.get('date_format') && cell.get('type') == 'date') {
                     cell_data.options['correctFormat'] = true;
                     cell_data.options['dateFormat'] = cell.get('date_format') || cell_data.options['dateFormat'];
@@ -262,7 +263,7 @@ let put_values2d = function(grid, values) {
     }
 };
 
-// calls the original renderer and then applies custom styling
+// Custom styled renderer that applies the default renderer then apply the given style on the cell
 (Handsontable.renderers as any).registerRenderer('styled', function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {
     let name = cellProperties.original_renderer || cellProperties.type || 'text';
     let original_renderer = (Handsontable.renderers as any).getRenderer(name);
@@ -272,6 +273,34 @@ let put_values2d = function(grid, values) {
     });
 });
 
+
+// Register `int` cell type
+let int_editor = Handsontable.editors.TextEditor.prototype.extend();
+
+function int_renderer(hotInstance, td, row, column, prop, value, cellProperties) {
+    const numeric_format = cellProperties.numericFormat || 'd';
+    td.innerHTML = d3.format(numeric_format)(value);
+}
+
+function int_validator(query, callback) {
+    let is_integer = false;
+    if (typeof query == 'number') {
+        is_integer = Number.isInteger(query);
+    } else {
+        is_integer = Number.isInteger(parseFloat(query));
+    }
+
+    console.log('is_integer?', query, is_integer);
+    callback(is_integer);
+}
+
+(Handsontable.cellTypes as any).registerCellType('int', {
+    editor: int_editor,
+    renderer: int_renderer,
+    validator: int_validator,
+    allowInvalid: false
+});
+
 let SheetView = widgets.DOMWidgetView.extend({
     render: function() {
         // this.widget_view_promises = {}

js/tsconfig.json

@@ -1,7 +1,7 @@
 {
 "compilerOptions": {
     "noImplicitAny": false,
-    "lib": ["dom", "es5", "es2015.promise", "es2015.iterable"],
+    "lib": ["dom", "es5", "es2015"],
     "strictNullChecks": true,
     "module": "commonjs",
     "moduleResolution": "node",