feat(core): rewrite "Empty Data" warning component to be in the canvas (

#157) * feat(core): rewrite "Empty Data" warning component to be in the canvas - remove all the previous absolute position as it was causing too many issues - instead create a component and place it within the grid-canvas on both left/right viewports which will work for both regular/frozen grids and also add options to hide any of the 2 sides when using frozen grid
ghiscoding · Nov 13, 2020 · 78e2132 · 78e2132
1 parent 78c80b4
commit 78e2132
Show file tree

Hide file tree

Showing 14 changed files with 277 additions and 81 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json
@@ -36,15 +36,15 @@
     "@types/jquery": "^3.5.4",
     "@types/moment": "^2.13.0",
     "@types/node": "^14.14.7",
-    "@types/webpack": "^4.41.24",
+    "@types/webpack": "^4.41.25",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^5.0.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",
     "html-loader": "^1.3.2",
     "html-webpack-plugin": "^4.5.0",
-    "mini-css-extract-plugin": "^1.3.0",
+    "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "5.0.0",
     "sass-loader": "^10.0.5",
     "style-loader": "^2.0.0",

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
@@ -124,7 +124,7 @@ export class Example12 {
   initializeGrid() {
     this.columnDefinitions = [
       {
-        id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
+        id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 100,
         filterable: true, columnGroup: 'Common Factor',
         filter: { model: Filters.compoundInputText },
         formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
@@ -142,13 +142,13 @@ export class Example12 {
         editor: { model: Editors.float, massUpdate: true, decimal: 2, valueStep: 1, minValue: 0, maxValue: 10000, alwaysSaveOnEnterKey: true, required: true },
       },
       {
-        id: 'cost', name: 'Cost', field: 'cost', width: 90,
+        id: 'cost', name: 'Cost', field: 'cost', width: 90, minWidth: 100,
         sortable: true, filterable: true, type: FieldType.number, columnGroup: 'Analysis',
         filter: { model: Filters.compoundInputNumber },
         formatter: Formatters.dollar,
       },
       {
-        id: 'percentComplete', name: '% Complete', field: 'percentComplete',
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 100,
         type: FieldType.number,
         sortable: true, filterable: true, columnGroup: 'Analysis',
         filter: { model: Filters.compoundSlider, operator: '>=' },
@@ -170,7 +170,7 @@ export class Example12 {
         },
       },
       {
-        id: 'start', name: 'Start', field: 'start', sortable: true,
+        id: 'start', name: 'Start', field: 'start', sortable: true, minWidth: 100,
         formatter: Formatters.dateUs, columnGroup: 'Period',
         type: FieldType.dateIso, outputType: FieldType.dateUs,
         filterable: true, filter: { model: Filters.compoundDate },
@@ -190,7 +190,7 @@ export class Example12 {
         // editor: { model: Editors.singleSelect, collection: [{ value: true, label: 'Yes' }, { value: false, label: 'No' }], },
       },
       {
-        id: 'finish', name: 'Finish', field: 'finish', sortable: true,
+        id: 'finish', name: 'Finish', field: 'finish', sortable: true, minWidth: 100,
         formatter: Formatters.dateUs, columnGroup: 'Period',
         type: FieldType.dateIso, outputType: FieldType.dateUs,
         filterable: true, filter: { model: Filters.compoundDate },
@@ -278,7 +278,7 @@ export class Example12 {
         }
       },
       {
-        id: 'action', name: 'Action', field: 'action', width: 70, maxWidth: 70,
+        id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
         excludeFromExport: true,
         formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
         cellMenu: {

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -80,11 +80,11 @@
     "autoprefixer": "^10.0.1",
     "copyfiles": "^2.4.0",
     "cross-env": "^7.0.2",
-    "mini-css-extract-plugin": "^1.3.0",
+    "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "5.0.0",
     "nodemon": "^2.0.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.6",
+    "postcss": "^8.1.7",
     "postcss-cli": "^8.2.0",
     "rimraf": "^3.0.2"
   },

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -96,13 +96,17 @@ export const GlobalGridOptions: GridOption = {
   defaultSlickgridEventPrefix: '',
   editable: false,
   editorTypingDebounce: 450,
-  enableEmptyDataWarningMessage: false,
+  enableEmptyDataWarningMessage: true,
   emptyDataWarning: {
-    class: 'slick-empty-data-warning',
+    className: 'slick-empty-data-warning',
     message: 'No data to display.',
     messageKey: 'EMPTY_DATA_WARNING_MESSAGE',
-    marginTop: 100,
-    marginLeft: 10
+    hideFrozenLeftWarning: false,
+    hideFrozenRightWarning: false,
+    leftViewportMarginLeft: '40%',
+    rightViewportMarginLeft: '40%',
+    frozenLeftViewportMarginLeft: '0px',
+    frozenRightViewportMarginLeft: '40%',
   },
   enableAutoResize: true,
   enableAutoSizeColumns: true,

diff --git a/packages/common/src/interfaces/emptyWarning.interface.ts b/packages/common/src/interfaces/emptyWarning.interface.ts
@@ -6,11 +6,23 @@ export interface EmptyWarning {
   messageKey?: string;
 
   /** DOM Element class name, defaults to "empty-data-warning" */
-  class?: string;
+  className?: string;
 
-  /** Top margin position, number in pixel, of where the warning message will be displayed, default calculation is (header title row + filter row + 5px) */
-  marginTop?: number;
+  /** Defaults to False, when using a frozen/pinned grid, do we want to hide the warning on the left side? */
+  hideFrozenLeftWarning?: boolean;
 
-  /** Left margin position, number in pixel, of where the warning message will be displayed, defaults to 10px */
-  marginLeft?: number;
+  /** Defaults to False, when using a frozen/pinned grid, do we want to hide the warning on the right side? */
+  hideFrozenRightWarning?: boolean;
+
+  /** Defaults to "40%", what is the margin-left CSS style to use when we have a regular grid (non-frozen grid)? */
+  leftViewportMarginLeft?: number | string;
+
+  /** Defaults to "10px", what is the margin-left CSS style to use when the grid is a frozen/pinned grid? */
+  frozenLeftViewportMarginLeft?: number | string;
+
+  /** Defaults to "40%", what is the margin-left CSS style to use when we have a regular grid (non-frozen grid)? */
+  rightViewportMarginLeft?: number | string;
+
+  /** Defaults to "10px", what is the margin-left CSS style to use when the grid is a frozen/pinned grid? */
+  frozenRightViewportMarginLeft?: number | string;
 }
diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -135,9 +135,8 @@ export class GroupingAndColspanService {
     let header;
     let lastColumnGroup = '';
     let widthTotal = 0;
-    const frozenColumn = this._gridOptions?.frozenColumn ?? -1;
     const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0;
-    const isFrozenGrid = frozenColumn >= 0;
+    const isFrozenGrid = (this._gridOptions?.frozenRow !== undefined && this._gridOptions.frozenRow >= 0);
 
     for (let i = start; i < end; i++) {
       colDef = this._columnDefinitions[i];

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -868,4 +868,6 @@ $empty-data-warning-font-family:                      $font-family !default;
 $empty-data-warning-font-size:                        calc(#{$font-size-base} + 2px) !default;
 $empty-data-warning-font-style:                       italic !default;
 $empty-data-warning-line-height:                      18px !default;
-$empty-data-warning-z-index:                           9999 !default;
+$empty-data-warning-margin:                           0px !default;
+$empty-data-warning-padding:                          8px !default;
+$empty-data-warning-z-index:                          10 !default;
diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
@@ -45,13 +45,15 @@
 // ----------------------------------------------
 
 .slick-empty-data-warning {
-  position: absolute;
+  position: relative;
   color: $empty-data-warning-color;
   font-family: $empty-data-warning-font-family;
   font-size: $empty-data-warning-font-size;
   font-style: $empty-data-warning-font-style;
   line-height: $empty-data-warning-line-height;
   z-index: $empty-data-warning-z-index;
+  margin: $empty-data-warning-margin;
+  padding: $empty-data-warning-padding;
 }
 
 

diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
diff --git a/packages/vanilla-bundle/package.json b/packages/vanilla-bundle/package.json
@@ -52,7 +52,7 @@
     "isomorphic-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@types/webpack": "^4.41.24",
+    "@types/webpack": "^4.41.25",
     "archiver": "^5.0.2",
     "cross-env": "^7.0.2",
     "dts-bundle-webpack": "^1.0.2",