From b208fcf8389ea03fbaa155c194114b970e61233a Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Wed, 16 May 2018 09:04:46 -0400 Subject: [PATCH] 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 --- .../aurelia-slickgrid/editors/floatEditor.ts | 23 +++++++++++-------- .../editors/integerEditor.ts | 21 ++++++++++------- .../aurelia-slickgrid/styles/_variables.scss | 10 ++++++++ .../styles/slick-default-theme.scss | 5 ---- .../styles/slick-editors.scss | 15 ++++++++++++ .../src/examples/slickgrid/example3.ts | 10 ++++++-- 6 files changed, 60 insertions(+), 24 deletions(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/floatEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/floatEditor.ts index 52e57c938..64b0cfe7d 100644 --- 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 = $(``) + this.$input = $(``) .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,11 +79,13 @@ 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' @@ -88,7 +93,7 @@ export class FloatEditor implements Editor { } 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 index 20fe753b3..984c1ceb0 100644 --- 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 = $(``) + this.$input = $(``) .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,11 +51,14 @@ 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' @@ -61,7 +66,7 @@ export class IntegerEditor implements Editor { } 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 index 06a3f9817..817919444 100644 --- 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 index 6e0a75ff3..a26fddffd 100644 --- 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 index 1b0463137..02b60bf66 100644 --- 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 index 4a569f6b6..a9d627209 100644 --- 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();