Move getHTML methods inside class

This commit is contained in:
Faris Ansari 2018-02-12 11:23:56 +05:30
parent 0ebe0461e1
commit e41e6ad386
6 changed files with 1096 additions and 1095 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,5 @@
import $ from './dom';
import Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify } from './utils';
export default class BodyRenderer {
@ -87,14 +86,14 @@ export default class BodyRenderer {
}
getDataForClusterize(rows) {
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
}
};
export function getBodyHTML(rows) {
return `
<tbody>
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
</tbody>
`;
}

View File

@ -467,8 +467,8 @@ export default class CellManager {
}
refreshCell(cell) {
const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = getCellContent(cell);
const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = this.getCellContent(cell);
}
isStandardCell(colIndex) {
@ -477,7 +477,7 @@ export default class CellManager {
}
getCell$(colIndex, rowIndex) {
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable);
return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable);
}
getAboveCell$($cell) {
@ -541,9 +541,8 @@ export default class CellManager {
getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
}
}
export function getCellHTML(cell) {
getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
@ -553,16 +552,16 @@ export function getCellHTML(cell) {
return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
${getCellContent(cell)}
${this.getCellContent(cell)}
</td>
`;
}
export function getCellContent(cell) {
getCellContent(cell) {
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? getEditCellHTML() : '';
const editCellHTML = editable ? this.getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
@ -586,12 +585,13 @@ export function getCellContent(cell) {
`;
}
export function getEditCellHTML() {
getEditCellHTML() {
return `
<div class="edit-cell"></div>
`;
}
function cellSelector(colIndex, rowIndex) {
cellSelector(colIndex, rowIndex) {
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
}
}

View File

@ -1,6 +1,5 @@
import $ from './dom';
import Sortable from 'sortablejs';
import { getRowHTML } from './rowmanager';
import { getDefault } from './utils';
export default class ColumnManager {
@ -28,13 +27,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) {
// insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
} else {
// refresh dom state
const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) {
// deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
return;
}

View File

@ -1,6 +1,5 @@
import $ from './dom';
import { makeDataAttributeString, promisify } from './utils';
import { getCellHTML } from './cellmanager';
export default class RowManager {
constructor(instance) {
@ -184,14 +183,14 @@ export default class RowManager {
this._lastScrollTo = rowIndex;
$.scrollTop(this.bodyScrollable, offset);
}
}
export function getRowHTML(row, props) {
getRowHTML(row, props) {
const dataAttr = makeDataAttributeString(props);
return `
<tr class="data-table-row" ${dataAttr}>
${row.map(getCellHTML).join('')}
${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
</tr>
`;
}
}