@true-directive/base
Version:
The set of base classes for the TrueDirective Grid
409 lines (408 loc) • 16.4 kB
JavaScript
/**
* Copyright (c) 2018-2019 Aleksey Melnikov, True Directive Company.
* @link https://truedirective.com/
* @license MIT
*/
import { RenderMode, DetectionMode, SelectionMode, EditorShowMode, ColumnType, LazyLoadingMode } from './enums';
import { MenuAction } from './menu-action.class';
import { GridAppearance } from './grid-appearance.class';
/**
* Grid settings
*/
var GridSettings = /** @class */ (function () {
function GridSettings() {
/**
* Field's name which allows to identify the specific object.
* You should set this property to avoid loosing grid's selected ranges
* after updating the data.
*/
this.keyField = '';
/**
* Grid's css-class
*/
this.appearance = new GridAppearance();
/**
* Грид запрашивает данные у родительского компонента
* (у обработчика события state.OnDataQuery)
*/
this.requestData = false;
/**
* Единица измерения ширины колонок
*/
this.widthUnit = 'px';
/**
* Change detection mode
* Режим проверки изменений. При значении MANUAL необходимо вручную вызывать
* обновление грида после изменения данных.
*/
this.changeDetectionMode = DetectionMode.MANUAL;
/**
* Режим отрисовки (все данные или только видимые)
*/
this.renderMode = RenderMode.ALL;
/**
* Lazy Loading mode
*/
this.lazyLoading = LazyLoadingMode.NONE;
/**
* Page size
*/
this.lazyLoadingPageSize = 400;
/**
*
*/
this.lazyLoadingThreshold = 50;
/**
* Milliseconds between scrolling and loading
*/
this.lazyLoadingPause = 10;
/**
* Способ выделения ячеек данных
*/
this.selectionMode = SelectionMode.ROW_AND_RANGE;
/**
* Выделение нескольких ячеек/строк/областей (с удержанием Ctrl key)
*/
this.multiSelect = false;
/**
* Header's word wrap setting
*/
this.headerWordWrap = false;
/**
* Data cell's word wrap setting
*/
this.dataWordWrap = false;
/**
* Data row height in pixels. Можно задать заведомо меньшую высоту, тогда
* высота строки будет такой, чтобы уместить контент. Если высота задана,
* то минимальная высота будет такой.
*/
this.rowHeight = 25;
/**
* Высота строки для грида, который находится в окне фильтров.
* Если не задан, берется rowHeight
*/
this._filterItemRowHeight = null;
/**
* Максимальная высота выпадающего списка для редактора EditorSelectTrue.
* Нужно указать с единицей измерения.
*/
this.maxDropDownHeight = '350px';
/**
* Внутренний или пользовательский шаблон
*/
this.customTemplate = false;
// Настройки
this.columnResize = true;
this.columnReorder = true;
this.bandReorder = true;
this.allowSorting = true;
this.allowFilter = true;
this.allowFixedColumns = true;
this.rowDrag = false;
/**
* При обнаружении iOS или Android горизонтальный и вертикальный скролл производится
* двумя разными скроллбоксами. Для избежания дерганий.
* Но если скролл по горизонтали не предусмотрен, то лучше отключить эту опцию.
*/
this.enableTouchScroll = true;
// Еще настройки
this.showGroupArea = true;
this.showHeader = true;
this.showBands = true;
this.showFooter = true;
/**
* Значение чекбокса меняется по клику всей ячейки
*/
this.checkByCellClick = false;
/**
* Показывать счетчик количества rows в группе
*/
this.showGroupCounts = false;
/**
* Группы сколлапсированы по умолчанию
*/
this.groupCollapseByDefault = false;
/**
* Минимальная ширина колонки, доступная при изменении ширины пользователем
* В указанных выше единицах измерения
*/
this.minColumnWidthOnResize = 100;
/**
* Автоматическое растягивание колонок
*/
this.columnAutoWidth = false;
/**
* Ширина отступа при формировании уровней группировки или при отображении
* дочерних items дерева
*/
this.levelIndent = 36;
/**
* Свойство, в которых содержится список дочерних items.
* Если задано, то считается, что грид отображает дерево.
*/
this.treeChildrenProperty = '';
// Иконка переключателя групп
this.groupSwitcherIconField = '';
// Параметры автоматической прокрутки при drag-n-drop
/**
* Шаг автоматической прокрутки при drag-n-drop в пикселах
*/
this.autoScrollStep = 30;
/**
* Интервал автоматической прокрутки при drag-n-drop в миллисекундах
*/
this.autoScrollInterval = 50;
/**
* Способ перехода ячейки в режим редактирования. По умолчанию возможность
* редактирования отключена
*/
this.editorShowMode = EditorShowMode.NONE;
/**
* Активация редактора при нажатии клавиши (не учитываются стрелочные клавиши и RETURN)
*/
this.editorByKey = true;
/**
* Автоматическое принятие изменений, сделанных в редакторе.
* Если true, то изменения принимаются при потере фокуса, при переходе
* на другую ячейку.
* Если false, то изменения принимаются только при нажатии Enter, а в
* остальных случаях отменяются.
*/
this.editorAutoCommit = true;
/**
* Подсветка найденной подстроки общего текстового фильтра. Для подсветки
* используется свойство innerHTML ячейки. При наличии колонок с типом HTML
* могут быть сложности.
*/
this.searchHighlight = true;
/**
* Number of milliseconds between user input of search string and data
* processing. If value set is too low, refresh will occur too often, which
* will lead to subjectively worse perceptual performance.
*/
this.searchDelay = 200;
this.dataContextMenuActions = [
MenuAction.CUSTOM
];
this.headerContextMenuActions = [
MenuAction.SORT_ASC,
MenuAction.SORT_DESC,
MenuAction.HIDE
];
this.enableDataContextMenu = false;
this.enableHeaderContextMenu = false;
this.autoFocusAfterEditor = true;
}
Object.defineProperty(GridSettings.prototype, "sta", {
get: function () {
return this.appearance;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridSettings.prototype, "filterItemRowHeight", {
get: function () {
if (this._filterItemRowHeight === null) {
return this.rowHeight;
}
return this._filterItemRowHeight;
},
set: function (v) {
this._filterItemRowHeight = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridSettings.prototype, "fixedRowHeight", {
/**
* Is row's height fixed?
*/
get: function () {
return !this.dataWordWrap;
},
enumerable: true,
configurable: true
});
/**
* Minimal settings for dropdown lists
*/
GridSettings.minimal = function (autoWidth) {
if (autoWidth === void 0) { autoWidth = false; }
var s = new GridSettings();
s.changeDetectionMode = DetectionMode.MANUAL;
s.showGroupArea = false; // No grouping
s.showBands = false; // No column bands
s.showFooter = false; // No footer
s.dataWordWrap = false;
s.allowSorting = false; // No sort
s.allowFilter = false; // No filters
s.columnResize = false; // No column resizing
s.columnReorder = false; // No column reordering
// Select only single rows
s.selectionMode = SelectionMode.ROW;
s.multiSelect = false;
// No lines
s.appearance.verticalLines = false;
s.appearance.horizontalLines = false;
s.appearance.headerVerticalLines = false;
// Simple group styles
s.appearance.groupL1Class = 'true-group-simple';
s.appearance.groupClass = 'true-group-simple';
// No highlights
s.appearance.enableFocusedAppearance = false;
// No checked rows
s.appearance.enableCheckedAppearance = false;
// Hovered row
s.appearance.enableHoverAppearance = true;
// Не показываем количество строк в группе
s.showGroupCounts = false;
// Подгоняем ширину колонок под размер окна
s.columnAutoWidth = autoWidth;
return s;
};
/**
* Можно ли выделять прямоугольные области при заданных настройках
*/
GridSettings.prototype.canSelectRange = function () {
return this.selectionMode.range;
};
Object.defineProperty(GridSettings.prototype, "hdWidth", {
/**
* Ширина правой пустой колонки в заголовке
* @return Ширина с единицей измерения
*/
get: function () {
var dw = '96px';
if (this.widthUnit !== 'px') {
dw = 8 + this.widthUnit;
}
return dw;
},
enumerable: true,
configurable: true
});
/**
* Класс ячейки данных
* @return Список классов через пробел
*/
GridSettings.prototype.cellClass = function (col) {
var res = '';
if (col.isNumeric) {
// Числа выровниваются по правому краю
res = 'true-align-right';
}
else {
if (col.isCheckbox) {
// Чекбоксы выравниваются по центру
res = 'true-align-center true-cell-checkbox';
if (this.checkByCellClick) {
res += ' true-check-by-click';
}
}
else {
if (col.isBoolean) {
// Булеваые значения по центру
res = 'true-align-center true-cell-boolean';
if (this.checkByCellClick) {
res += ' true-check-by-click';
}
}
}
}
// Дополнительный класс из свойств колонки
if (col.class) {
res += ' ' + col.class;
}
return res;
};
/**
* Класс ячейки заголовка
*/
GridSettings.prototype.headerCellClass = function (col) {
var res = '';
if (col.type === ColumnType.CHECKBOX) {
res += ' true-header-cell__checkbox';
}
else { // не разрешим менять ширину колонки с чекбоксом
if (this.columnResize) {
if (col.columnResize === null || col.columnResize) {
res += ' true-column-resizable';
}
}
if (!this.allowFilter || !col.allowFilter) {
res += ' true-column-nobtn';
}
}
return res;
};
/**
* Класс ячейки футера
*/
GridSettings.prototype.footerCellClass = function (col) {
if (col.type === ColumnType.CHECKBOX) {
return 'true-footer-cell__is-checkbox';
}
return '';
};
/**
* Класс ячейки данных с чекбоксом
* @param v Значение
*/
GridSettings.prototype.checkboxClass = function (v) {
var res = this.appearance.checkboxClass;
if (v === null) {
res += ' indeterminate';
}
else {
res = v ? ' checked' : '';
}
return res;
};
/**
* Класс ячейки заголовка с чекбоксом
* @param v Значение (отмечено / не отмечено)
* @return Класс
*/
GridSettings.prototype.headerCheckboxClass = function (v) {
var res = this.appearance.checkboxClass;
if (v === null) {
res += ' indeterminate';
}
else {
res += v ? ' checked' : '';
}
return res;
};
Object.defineProperty(GridSettings.prototype, "levelWidth", {
/**
* Ширина отступа одного уровня
* @return Ширина с единицей измерения
*/
get: function () {
return this.levelIndent + this.widthUnit;
},
enumerable: true,
configurable: true
});
/**
* Проверка возможности редактирования ячейки заданной колонки
* @param col Колонка
* @return Можно ли редактировать
*/
GridSettings.prototype.canEditColumnCell = function (col) {
if (col === null) {
return false;
}
if (col.editorComponentType !== null) {
return this.editorShowMode !== EditorShowMode.NONE;
}
if (col.type === ColumnType.REFERENCE) {
// Запрещаем для этого типа, если не задан компонент редактора
return false;
}
return this.editorShowMode !== EditorShowMode.NONE && col.allowEdit;
};
return GridSettings;
}());
export { GridSettings };