fix(editors): fix BS3,BS4 styles & slider value not shown with undefi…

…ned (#204)
ghiscoding · Dec 18, 2020 · 3aca8f9 · 3aca8f9
1 parent b7ff862
commit 3aca8f9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -134,7 +134,7 @@ export class DateEditor implements Editor {
       }
 
       this._$editorInputElm = $(`<div class="flatpickr input-group"></div>`);
-      const closeButtonElm = $(`<span class="input-group-btn" data-clear>
+      const closeButtonElm = $(`<span class="input-group-btn input-group-append" data-clear>
           <button class="btn btn-default icon-close" type="button"></button>
         </span>`);
       this._$input = $(`<input type="text" data-input data-defaultDate="${this.defaultDate}" class="${inputCssClasses.replace(/\./g, ' ')}" placeholder="${placeholder}" title="${title}" />`);

diff --git a/packages/common/src/editors/sliderEditor.ts b/packages/common/src/editors/sliderEditor.ts
@@ -14,7 +14,7 @@ declare const Slick: SlickNamespace;
  * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
  */
 export class SliderEditor implements Editor {
-  private _defaultValue: any;
+  private _defaultValue = 0;
   private _elementRangeInputId = '';
   private _elementRangeOutputId = '';
   private _$editorElm: any;
@@ -76,8 +76,8 @@ export class SliderEditor implements Editor {
     if (container && this.columnDef) {
       // define the input & slider number IDs
       const itemId = this.args?.item?.id ?? '';
-      this._elementRangeInputId = `rangeInput_${this.columnDef.field}_${itemId}`;
-      this._elementRangeOutputId = `rangeOutput_${this.columnDef.field}_${itemId}`;
+      this._elementRangeInputId = `rangeInput_${this.columnDef.id}_${itemId}`;
+      this._elementRangeOutputId = `rangeOutput_${this.columnDef.id}_${itemId}`;
       const compositeEditorOptions = this.args.compositeEditorOptions;
 
       // create HTML string template
@@ -139,7 +139,7 @@ export class SliderEditor implements Editor {
 
         // clear the checkbox when it's newly disabled
         if (prevIsDisabled !== isDisabled && this.args?.compositeEditorOptions) {
-          this._defaultValue = '';
+          this._defaultValue = 0;
           this._$editorElm.children('input').val(0);
           this._$editorElm.children('div.input-group-addon.input-group-append').children().html(0);
           this._$editorElm.val(0);
@@ -185,7 +185,7 @@ export class SliderEditor implements Editor {
   }
 
   applyValue(item: any, state: any) {
-    const fieldName = this.columnDef && this.columnDef.field;
+    const fieldName = this.columnDef?.field ?? '';
     if (fieldName !== undefined) {
       const isComplexObject = fieldName?.indexOf('.') > 0; // is the field a complex object, "address.streetNumber"
 
@@ -207,13 +207,13 @@ export class SliderEditor implements Editor {
   }
 
   loadValue(item: any) {
-    const fieldName = this.columnDef && this.columnDef.field;
+    const fieldName = this.columnDef?.field ?? '';
 
 
     if (item && fieldName !== undefined) {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName?.indexOf('.') > 0;
-      let value = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) && item[fieldName]);
+      let value = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) ? item[fieldName] : this._defaultValue);
 
       if (value === '' || value === null || value === undefined) {
         value = this._defaultValue; // load default value when item doesn't have any value
@@ -253,7 +253,7 @@ export class SliderEditor implements Editor {
       return { valid: true, msg: '' };
     }
 
-    const elmValue = (inputValue !== undefined) ? inputValue : this._$input && this._$input.val && this._$input.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this._$input?.val();
     return sliderValidator(elmValue, {
       editorArgs: this.args,
       errorMessage: this.columnEditor.errorMessage,

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -573,6 +573,7 @@ $editor-modal-close-btn-padding:                      0px !default;
 $editor-modal-close-btn-width:                        20px !default;
 $editor-modal-close-btn-right:                        10px !default;
 $editor-modal-close-btn-top:                          10px !default;
+$editor-modal-close-btn-border-left:                  1px solid #ced4da !default;
 $editor-modal-close-btn-border-radius:                0 4px 4px 0 !default;
 $editor-modal-close-btn-outside-color:                #dddddd !default;
 $editor-modal-close-btn-outside-color-hover:          darken($editor-modal-close-btn-outside-color, 10%) !default;
@@ -634,6 +635,7 @@ $editor-modal-large-editor-footer-line-height:        12px !default;
 $editor-modal-large-editor-count-color:               $large-editor-count-color !default;
 $editor-modal-large-editor-count-font-size:           10px !default;
 $editor-modal-large-editor-count-margin:              0 !default;
+$editor-modal-slider-editor-value-height:             $editor-modal-input-editor-height !default;
 $editor-modal-slider-editor-value-min-height:         100% !default;
 $editor-modal-title-font-color:                       #333333 !default;
 $editor-modal-title-font-size:                        20px !default;

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -46,7 +46,6 @@
   .flatpickr.input-group {
     .input-group-btn {
       .btn {
-        border-left: 0 !important;
         background-color: #eeeeee;
         border: 1px solid #cccccc;
         padding: $date-editor-clear-button-icon-padding;
@@ -175,16 +174,18 @@
       top: 0;
     }
 
-    .btn {
-      margin: $editor-modal-footer-btn-margin;
-      height: $editor-modal-footer-btn-height;
-      border: $editor-modal-footer-btn-border;
-      border-radius: $editor-modal-footer-btn-radius;
-      &:hover {
-        border-color: $editor-modal-footer-btn-border-hover;
-      }
-      &:disabled {
-        background-color: $button-primary-bg-color-disabled;
+    .footer-buttons {
+      .btn {
+        margin: $editor-modal-footer-btn-margin;
+        height: $editor-modal-footer-btn-height;
+        border: $editor-modal-footer-btn-border;
+        border-radius: $editor-modal-footer-btn-radius;
+        &:hover {
+          border-color: $editor-modal-footer-btn-border-hover;
+        }
+        &:disabled {
+          background-color: $button-primary-bg-color-disabled;
+        }
       }
     }
 
@@ -398,7 +399,8 @@
         .input-group-btn {
           min-width: 28px;
           .btn {
-            margin: 0;
+            min-width: 28px;
+            border-left: $editor-modal-close-btn-border-left;
             height: $editor-modal-input-editor-height;
             border-radius: $editor-modal-close-btn-border-radius;
           }
@@ -412,6 +414,7 @@
         }
       }
       .slider-value {
+        height: $editor-modal-slider-editor-value-height;
         min-width: 28px;
         .input-group-text {
           min-height: $editor-modal-slider-editor-value-min-height;

diff --git a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss
@@ -113,6 +113,10 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
+    z-index: 2;
+    margin-left: -1px;
+  }
 
   .input-group-addon:not(:first-child):not(:last-child),
   .input-group-btn:not(:first-child):not(:last-child),