diff --git a/README.md b/README.md index 2678db5cfd00..7a1365707360 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,17 @@ # Пропатченная версия DevExtreme (by TilliWilli) -## Руководство по патчингу 0. Вызвать ```npm install``` в проекте, чтобы установились все тулзы необходимые для билдинга +## Запуск в режиме разработки +1. Выполнить команду ```npm run dev``` + +2. Выполнить команду ```http-server -c-1``` + +3. Открыть страницу ```/playground/jquery.html``` или создать свою + +## Руководство по патчингу + + 1. Внести изменения в коде в файлах находящихся в папке ```/js``` 2. Запустить команду ```npm run build-dist``` diff --git a/js/ui/pivot_grid/ui.pivot_grid.area_item.js b/js/ui/pivot_grid/ui.pivot_grid.area_item.js index 1301ab054b5d..834cb13887b1 100644 --- a/js/ui/pivot_grid/ui.pivot_grid.area_item.js +++ b/js/ui/pivot_grid/ui.pivot_grid.area_item.js @@ -66,6 +66,10 @@ export const AreaItem = Class.inherit({ this.component = component; }, + _isAutoSizeColumns: function() { + return true; + }, + option: function() { return this.component.option.apply(this.component, arguments); }, @@ -478,24 +482,35 @@ export const AreaItem = Class.inherit({ }, reset: function() { + this._reset(this._isAutoSizeColumns()); + }, + + fullReset: function() { + this._reset(true); + }, + + _reset: function(fullClear) { const that = this; const tableElement = that._tableElement[0]; that._fakeTable && that._fakeTable.detach(); that._fakeTable = null; - that.disableVirtualMode(); - that.setGroupWidth('100%'); that.setGroupHeight('auto'); - that.resetColumnsWidth(); + if(fullClear) { + that.setGroupWidth('100%'); + that.resetColumnsWidth(); + } if(tableElement) { for(let i = 0; i < tableElement.rows.length; i++) { tableElement.rows[i].style.height = ''; } tableElement.style.height = ''; - tableElement.style.width = '100%'; + if(fullClear) { + tableElement.style.width = '100%'; + } } }, diff --git a/js/ui/pivot_grid/ui.pivot_grid.data_area.js b/js/ui/pivot_grid/ui.pivot_grid.data_area.js index 2125817ad4d2..ceee21ca94fa 100644 --- a/js/ui/pivot_grid/ui.pivot_grid.data_area.js +++ b/js/ui/pivot_grid/ui.pivot_grid.data_area.js @@ -10,6 +10,11 @@ const PIVOTGRID_GRAND_TOTAL_CLASS = 'dx-grandtotal'; const PIVOTGRID_ROW_TOTAL_CLASS = 'dx-row-total'; export const DataArea = AreaItem.inherit({ + + _isAutoSizeColumns: function() { + return this.component.option('autoSizeColumns'); + }, + _getAreaName: function() { return 'data'; }, diff --git a/js/ui/pivot_grid/ui.pivot_grid.headers_area.js b/js/ui/pivot_grid/ui.pivot_grid.headers_area.js index 40a6a46531a7..d96c7ce46625 100644 --- a/js/ui/pivot_grid/ui.pivot_grid.headers_area.js +++ b/js/ui/pivot_grid/ui.pivot_grid.headers_area.js @@ -33,6 +33,10 @@ export const HorizontalHeadersArea = AreaItem.inherit({ this._scrollBarWidth = 0; }, + _isAutoSizeColumns: function() { + return this.component.option('autoSizeColumns'); + }, + _getAreaName: function() { return 'column'; }, @@ -159,6 +163,13 @@ export const HorizontalHeadersArea = AreaItem.inherit({ }); export const VerticalHeadersArea = HorizontalHeadersArea.inherit({ + ctor: function(component) { + this.callBase(component); + }, + + _isManualColumnSize: function() { + return false; + }, _getAreaClassName: function() { return PIVOTGRID_AREA_ROW_CLASS; }, diff --git a/js/ui/pivot_grid/ui.pivot_grid.js b/js/ui/pivot_grid/ui.pivot_grid.js index 692dd32518c6..7954d7fe2d60 100644 --- a/js/ui/pivot_grid/ui.pivot_grid.js +++ b/js/ui/pivot_grid/ui.pivot_grid.js @@ -160,6 +160,7 @@ const PivotGrid = Widget.inherit({ applyChangesMode: 'instantly' }, onContextMenuPreparing: null, + autoSizeColumns: true, allowSorting: false, allowSortingBySummary: false, allowFiltering: false, @@ -1164,6 +1165,22 @@ const PivotGrid = Widget.inherit({ return this.callBase() && !this._dataController.isLoading(); }, + getColumnWidth: function() { + return this._dataArea.getColumnsWidth(); + }, + + setColumnWidth: function(sizes) { + this._dataArea.setColumnsWidth(sizes); + this._columnsArea.setColumnsWidth(sizes); + this.resize(); + }, + + resetColumnsWidth: function() { + this._dataArea.fullReset(); + this._columnsArea.fullReset(); + this.resize(); + }, + updateDimensions: function() { const that = this; let groupWidth; @@ -1261,6 +1278,7 @@ const PivotGrid = Widget.inherit({ rowsAreaWidth = getArraySum(rowsAreaColumnWidths); const elementWidth = that.$element().width(); + const autoSizeColumns = that.option('autoSizeColumns'); bordersWidth = getCommonBorderWidth([rowAreaCell, dataAreaCell, tableElement], 'width'); groupWidth = elementWidth - rowsAreaWidth - bordersWidth; @@ -1269,7 +1287,9 @@ const PivotGrid = Widget.inherit({ const diff = totalWidth - groupWidth; const needAdjustWidthOnZoom = diff >= 0 && diff <= 2; if(needAdjustWidthOnZoom) { // T914454 - adjustSizeArray(resultWidths, diff); + if(autoSizeColumns) { + adjustSizeArray(resultWidths, diff); + } totalWidth = groupWidth; } @@ -1291,7 +1311,9 @@ const PivotGrid = Widget.inherit({ rowFieldsHeader.tableElement().append(that._rowsArea.headElement()); if(!hasColumnsScroll && hasRowsScroll && scrollBarWidth) { - adjustSizeArray(resultWidths, scrollBarWidth); + if(autoSizeColumns) { + adjustSizeArray(resultWidths, scrollBarWidth); + } totalWidth -= scrollBarWidth; } @@ -1321,12 +1343,15 @@ const PivotGrid = Widget.inherit({ dataAreaCell.toggleClass(BOTTOM_BORDER_CLASS, !hasRowsScroll); rowAreaCell.toggleClass(BOTTOM_BORDER_CLASS, !hasRowsScroll); + tableElement.toggleClass('dx-lastcells-right-border', !hasColumnsScroll && !autoSizeColumns); // T317921 if(!that._hasHeight && (elementWidth !== that.$element().width())) { const diff = elementWidth - that.$element().width(); if(!hasColumnsScroll) { - adjustSizeArray(resultWidths, diff); + if(autoSizeColumns) { + adjustSizeArray(resultWidths, diff); + } that._columnsArea.setColumnsWidth(resultWidths); that._dataArea.setColumnsWidth(resultWidths); } diff --git a/package.json b/package.json index 62c88391a67f..9f4a1d32fcb9 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "@devextreme-generator/react": "1.2.1", "@devextreme-generator/vue": "1.2.1", "@types/enzyme": "^3.10.5", + "@types/estree": "^1.0.7", "@types/jest": "^24.0.24", "@types/jquery": "^2.0.34", "@types/react": "16.9.16", @@ -127,7 +128,7 @@ "gulp-template": "^4.0.0", "gulp-typescript": "^5.0.0", "gulp-uglify": "^1.5.3", - "gulp-uglify-es": "^2.0.0", + "gulp-uglify-es": "^3.0.0", "gulp-watch": "^5.0.0", "handlebars": "^4.7.3", "hogan.js": "3.0.2", @@ -177,8 +178,9 @@ "typescript-min": "npm:typescript@3.1", "underscore": "^1.9.2", "vinyl-named": "^1.1.0", - "webpack": "^3.10.0", - "webpack-stream": "^3.2.0", + "webpack": "^5.98.0", + "webpack-cli": "^6.0.1", + "webpack-stream": "^7.0.0", "yargs": "^4.6.0" }, "bin": { @@ -229,4 +231,4 @@ ] }, "pre-commit": "lint-staged" -} +} \ No newline at end of file diff --git a/scss/widgets/base/pivotGrid/_index.scss b/scss/widgets/base/pivotGrid/_index.scss index b8825a5e2c28..dadc6a858719 100644 --- a/scss/widgets/base/pivotGrid/_index.scss +++ b/scss/widgets/base/pivotGrid/_index.scss @@ -458,6 +458,24 @@ $pivotgrid-expand-icon-text-offset: 0; } } } + + .dx-lastcells-right-border { + .dx-pivotgrid-horizontal-headers { + tr { + td:last-child { + border-right: $pivotgrid-border !important; // stylelint-disable-line declaration-no-important + } + } + } + + .dx-area-data-cell { + tr { + td:last-child { + border-right: $pivotgrid-border; + } + } + } + } } .dx-pivotgridfieldchooser {