Skip to content

Commit

Permalink
feat(core): rewrite "Empty Data" warning component to be in the canvas (
Browse files Browse the repository at this point in the history
#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
  • Loading branch information
ghiscoding authored Nov 13, 2020
1 parent 78c80b4 commit 78e2132
Show file tree
Hide file tree
Showing 14 changed files with 277 additions and 81 deletions.
4 changes: 2 additions & 2 deletions examples/webpack-demo-vanilla-bundle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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] },
Expand All @@ -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: '>=' },
Expand All @@ -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 },
Expand All @@ -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 },
Expand Down Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions packages/common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
12 changes: 8 additions & 4 deletions packages/common/src/global-grid-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
22 changes: 17 additions & 5 deletions packages/common/src/interfaces/emptyWarning.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 1 addition & 2 deletions packages/common/src/services/groupingAndColspan.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
4 changes: 3 additions & 1 deletion packages/common/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
4 changes: 3 additions & 1 deletion packages/common/src/styles/slick-component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}


Expand Down
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/vanilla-bundle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit 78e2132

Please sign in to comment.