fix(editor): Int/Float Editors multiple small enhancements (#54)

- should be type number not text - onCellChange should not trigger on 0 when unchanged - changed styling so that input are not invisible, however also add SASS variables in case user still want previous styling
ghiscoding · May 16, 2018 · b208fcf · b208fcf
1 parent 21215c4
commit b208fcf
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 24 deletions.
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/floatEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/floatEditor.ts
@@ -1,7 +1,7 @@
 import * as $ from 'jquery';
 import { Editor, KeyCode } from './../models/index';
 
-const defaultDecimalPlaces = 0;
+const defaultDecimalPlaces = 2;
 
 /*
  * An example of a 'detached' editor.
@@ -16,15 +16,17 @@ export class FloatEditor implements Editor {
   }
 
   init(): void {
-    this.$input = $(`<input type="text" class='editor-text' />`)
+    this.$input = $(`<input type="number" class='editor-text' />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (e) => {
         if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.RIGHT) {
           e.stopImmediatePropagation();
         }
-      })
-      .focus()
-      .select();
+      });
+
+    setTimeout(() => {
+      this.$input.focus().select();
+    }, 50);
   }
 
   destroy() {
@@ -37,7 +39,8 @@ export class FloatEditor implements Editor {
 
   getDecimalPlaces() {
     // returns the number of fixed decimal places or null
-    let rtn = this.args.column.editorFixedDecimalPlaces;
+    const columnParams = this.args.column.params || {};
+    let rtn = (columnParams && columnParams.hasOwnProperty('decimalPlaces')) ? columnParams.decimalPlaces : undefined;
     if (rtn === undefined) {
       rtn = defaultDecimalPlaces;
     }
@@ -76,19 +79,21 @@ export class FloatEditor implements Editor {
   }
 
   isValueChanged() {
-    return (!(this.$input.val() === '' && this.defaultValue === null)) && (this.$input.val() !== this.defaultValue);
+    const elmValue = this.$input.val();
+    return (!(elmValue === '' && this.defaultValue === null)) && (elmValue !== this.defaultValue);
   }
 
   validate() {
-    if (isNaN(this.$input.val())) {
+    const elmValue = this.$input.val();
+    if (isNaN(elmValue as number)) {
       return {
         valid: false,
         msg: 'Please enter a valid number'
       };
     }
 
     if (this.args.column.validator) {
-      const validationResults = this.args.column.validator(this.$input.val());
+      const validationResults = this.args.column.validator(elmValue);
       if (!validationResults.valid) {
         return validationResults;
       }

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/integerEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/integerEditor.ts
@@ -14,15 +14,17 @@ export class IntegerEditor implements Editor {
   }
 
   init(): void {
-    this.$input = $(`<input type="text" class='editor-text' />`)
+    this.$input = $(`<input type="number" class='editor-text' />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (e) => {
         if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.RIGHT) {
           e.stopImmediatePropagation();
         }
-      })
-      .focus()
-      .select();
+      });
+
+    setTimeout(() => {
+      this.$input.focus().select();
+    }, 50);
   }
 
   destroy() {
@@ -34,7 +36,7 @@ export class IntegerEditor implements Editor {
   }
 
   loadValue(item: any) {
-    this.defaultValue = item[this.args.column.field];
+    this.defaultValue = parseInt(item[this.args.column.field], 10);
     this.$input.val(this.defaultValue);
     this.$input[0].defaultValue = this.defaultValue;
     this.$input.select();
@@ -49,19 +51,22 @@ export class IntegerEditor implements Editor {
   }
 
   isValueChanged() {
-    return (!(this.$input.val() === '' && this.defaultValue === null)) && (this.$input.val() !== this.defaultValue);
+    const elmValue = this.$input.val();
+    const value = isNaN(elmValue) ? elmValue : parseInt(elmValue, 10);
+    return (!(value === '' && this.defaultValue === null)) && (value !== this.defaultValue);
   }
 
   validate() {
-    if (isNaN(this.$input.val() as number)) {
+    const elmValue = this.$input.val();
+    if (isNaN(elmValue as number)) {
       return {
         valid: false,
         msg: 'Please enter a valid integer'
       };
     }
 
     if (this.args.column.validator) {
-      const validationResults = this.args.column.validator(this.$input.val());
+      const validationResults = this.args.column.validator(elmValue);
       if (!validationResults.valid) {
         return validationResults;
       }

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss
@@ -153,6 +153,16 @@ $large-editor-textarea-height:          80px !default;
 $large-editor-textarea-width:           250px !default;
 $large-editor-button-text-align:        right !default;
 $large-editor-footer-spacing:           2px !default;
+$text-editor-border:                    initial !default;
+$text-editor-background:                #ffffff !default;
+$text-editor-margin-bottom:             2px !default;
+$text-editor-margin-left:               -2px !default; /* negative number to cancel inside padding */
+$text-editor-margin-right:              2px !default;
+$text-editor-margin-top:                2px !default;
+$text-editor-padding-bottom:            0 !default;
+$text-editor-padding-left:              2px !default;
+$text-editor-padding-right:             0 !default;
+$text-editor-padding-top:               0 !default;
 
 /* Compound Filters */
 $compound-filter-bgcolor:               #e4eacf !default;

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-default-theme.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-default-theme.scss
@@ -85,14 +85,9 @@
          input.editor-text {
            width: 100%;
            height: 100%;
-           border: 0;
-           margin: 0;
            outline: 0;
-           background: transparent;
-           padding: 0;
            transform: translate(0, -2px);
          }
-
        }
      }
 

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-editors.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-editors.scss
@@ -1,5 +1,20 @@
 @import './variables';
 
+.slick-cell.active  {
+	input.editor-text {
+    border: $text-editor-border;
+    background: $text-editor-background;
+    padding-bottom: $text-editor-padding-bottom;
+    padding-left: $text-editor-padding-left;
+    padding-right: $text-editor-padding-right;
+    padding-top: $text-editor-padding-top;
+    margin-left: $text-editor-margin-left;
+    margin-bottom: $text-editor-margin-bottom;
+    margin-right: $text-editor-margin-right;
+    margin-top: $text-editor-margin-top;
+	}
+}
+
 /* Long Text Editor */
 .slick-large-editor-text {
   z-index: 10000;

diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.ts b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
@@ -110,7 +110,7 @@ export class Example3 {
       field: 'duration',
       sortable: true,
       type: FieldType.number,
-      editor: Editors.text,
+      editor: Editors.integer,
       minWidth: 100
     }, {
       id: 'complete',
@@ -184,7 +184,13 @@ export class Example3 {
       },
       editable: true,
       enableCellNavigation: true,
-      enableExcelCopyBuffer: true,
+      enableCheckboxSelector: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        // Default to True when no "rowSelectionOptions" provided
+        selectActiveRow: true
+      },
+      enableExcelCopyBuffer: false,
       editCommandHandler: (item, column, editCommand) => {
         this._commandQueue.push(editCommand);
         editCommand.execute();