minor fixes
- edit cell orange border - eslint fixes - remove default left align
This commit is contained in:
parent
4bb4002300
commit
5ff72dfcee
@ -1,8 +1,6 @@
|
|||||||
import $ from './dom';
|
|
||||||
import Clusterize from 'clusterize.js';
|
import Clusterize from 'clusterize.js';
|
||||||
import {
|
import $ from './dom';
|
||||||
nextTick
|
import { nextTick } from './utils';
|
||||||
} from './utils';
|
|
||||||
|
|
||||||
export default class BodyRenderer {
|
export default class BodyRenderer {
|
||||||
constructor(instance) {
|
constructor(instance) {
|
||||||
@ -60,9 +58,7 @@ export default class BodyRenderer {
|
|||||||
scrollElem: this.bodyScrollable,
|
scrollElem: this.bodyScrollable,
|
||||||
contentElem: $('tbody', this.bodyScrollable),
|
contentElem: $('tbody', this.bodyScrollable),
|
||||||
callbacks: {
|
callbacks: {
|
||||||
clusterChanged: () => {
|
clusterChanged: () => this.restoreState()
|
||||||
this.restoreState();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
show_no_data_row: false,
|
show_no_data_row: false,
|
||||||
@ -99,7 +95,7 @@ export default class BodyRenderer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getDataForClusterize(rows) {
|
getDataForClusterize(rows) {
|
||||||
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
|
return rows.map(row => this.rowmanager.getRowHTML(row, row.meta));
|
||||||
}
|
}
|
||||||
|
|
||||||
getBodyHTML(rows) {
|
getBodyHTML(rows) {
|
||||||
@ -109,4 +105,4 @@ export default class BodyRenderer {
|
|||||||
</tbody>
|
</tbody>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|||||||
@ -5,9 +5,7 @@ import {
|
|||||||
linkProperties
|
linkProperties
|
||||||
} from './utils';
|
} from './utils';
|
||||||
import $ from './dom';
|
import $ from './dom';
|
||||||
import {
|
import { getDropdownHTML } from './columnmanager';
|
||||||
getDropdownHTML
|
|
||||||
} from './columnmanager';
|
|
||||||
|
|
||||||
export default class CellManager {
|
export default class CellManager {
|
||||||
constructor(instance) {
|
constructor(instance) {
|
||||||
@ -46,7 +44,7 @@ export default class CellManager {
|
|||||||
this.activateEditing(cell);
|
this.activateEditing(cell);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.keyboard.on('enter', (e) => {
|
this.keyboard.on('enter', () => {
|
||||||
if (this.$focusedCell && !this.$editingCell) {
|
if (this.$focusedCell && !this.$editingCell) {
|
||||||
// enter keypress on focused cell
|
// enter keypress on focused cell
|
||||||
this.activateEditing(this.$focusedCell);
|
this.activateEditing(this.$focusedCell);
|
||||||
@ -105,13 +103,11 @@ export default class CellManager {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
['left', 'right', 'up', 'down', 'tab', 'shift+tab'].map(
|
['left', 'right', 'up', 'down', 'tab', 'shift+tab']
|
||||||
direction => this.keyboard.on(direction, () => focusCell(direction))
|
.map(direction => this.keyboard.on(direction, () => focusCell(direction)));
|
||||||
);
|
|
||||||
|
|
||||||
['left', 'right', 'up', 'down'].map(
|
['left', 'right', 'up', 'down']
|
||||||
direction => this.keyboard.on('ctrl+' + direction, () => focusLastCell(direction))
|
.map(direction => this.keyboard.on(`ctrl+${direction}`, () => focusLastCell(direction)));
|
||||||
);
|
|
||||||
|
|
||||||
this.keyboard.on('esc', () => {
|
this.keyboard.on('esc', () => {
|
||||||
this.deactivateEditing();
|
this.deactivateEditing();
|
||||||
@ -120,9 +116,7 @@ export default class CellManager {
|
|||||||
if (this.options.inlineFilters) {
|
if (this.options.inlineFilters) {
|
||||||
this.keyboard.on('ctrl+f', (e) => {
|
this.keyboard.on('ctrl+f', (e) => {
|
||||||
const $cell = $.closest('.data-table-cell', e.target);
|
const $cell = $.closest('.data-table-cell', e.target);
|
||||||
let {
|
const { colIndex } = $.data($cell);
|
||||||
colIndex
|
|
||||||
} = $.data($cell);
|
|
||||||
|
|
||||||
this.activateFilter(colIndex);
|
this.activateFilter(colIndex);
|
||||||
return true;
|
return true;
|
||||||
@ -147,10 +141,9 @@ export default class CellManager {
|
|||||||
return $selectionCursor;
|
return $selectionCursor;
|
||||||
};
|
};
|
||||||
|
|
||||||
['left', 'right', 'up', 'down'].map(
|
['left', 'right', 'up', 'down']
|
||||||
direction => this.keyboard.on('shift+' + direction,
|
.map(direction =>
|
||||||
() => this.selectArea(getNextSelectionCursor(direction)))
|
this.keyboard.on(`shift+${direction}`, () => this.selectArea(getNextSelectionCursor(direction))));
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bindCopyCellContents() {
|
bindCopyCellContents() {
|
||||||
@ -298,7 +291,7 @@ export default class CellManager {
|
|||||||
// valid selection
|
// valid selection
|
||||||
this.$selectionCursor = $selectionCursor;
|
this.$selectionCursor = $selectionCursor;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
_selectArea($cell1, $cell2) {
|
_selectArea($cell1, $cell2) {
|
||||||
if ($cell1 === $cell2) return false;
|
if ($cell1 === $cell2) return false;
|
||||||
@ -318,7 +311,6 @@ export default class CellManager {
|
|||||||
[colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments;
|
[colIndex1, rowIndex1, colIndex2, rowIndex2] = arguments;
|
||||||
} else
|
} else
|
||||||
if (typeof $cell1 === 'object') {
|
if (typeof $cell1 === 'object') {
|
||||||
|
|
||||||
if (!($cell1 && $cell2)) {
|
if (!($cell1 && $cell2)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -344,17 +336,17 @@ export default class CellManager {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let cells = [];
|
const cells = [];
|
||||||
let colIndex = colIndex1;
|
let colIndex = colIndex1;
|
||||||
let rowIndex = rowIndex1;
|
let rowIndex = rowIndex1;
|
||||||
let rowIndices = [];
|
const rowIndices = [];
|
||||||
|
|
||||||
while (rowIndex <= rowIndex2) {
|
while (rowIndex <= rowIndex2) {
|
||||||
rowIndices.push(rowIndex);
|
rowIndices.push(rowIndex);
|
||||||
rowIndex++;
|
rowIndex += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
rowIndices.map(rowIndex => {
|
rowIndices.map((rowIndex) => {
|
||||||
while (colIndex <= colIndex2) {
|
while (colIndex <= colIndex2) {
|
||||||
cells.push([colIndex, rowIndex]);
|
cells.push([colIndex, rowIndex]);
|
||||||
colIndex++;
|
colIndex++;
|
||||||
|
|||||||
@ -113,7 +113,6 @@ export default class DataManager {
|
|||||||
prepareCell(content, i) {
|
prepareCell(content, i) {
|
||||||
const cell = {
|
const cell = {
|
||||||
content: '',
|
content: '',
|
||||||
align: 'left',
|
|
||||||
sortOrder: 'none',
|
sortOrder: 'none',
|
||||||
colIndex: i,
|
colIndex: i,
|
||||||
column: this.columns[i]
|
column: this.columns[i]
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import BodyRenderer from './body-renderer';
|
|||||||
import Style from './style';
|
import Style from './style';
|
||||||
import Keyboard from './keyboard';
|
import Keyboard from './keyboard';
|
||||||
import DEFAULT_OPTIONS from './defaults';
|
import DEFAULT_OPTIONS from './defaults';
|
||||||
import './style.css';
|
|
||||||
|
|
||||||
class DataTable {
|
class DataTable {
|
||||||
constructor(wrapper, options) {
|
constructor(wrapper, options) {
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
--primary-color: rgb(82, 146, 247);
|
--primary-color: rgb(82, 146, 247);
|
||||||
--light-bg: #f5f7fa;
|
--light-bg: #f5f7fa;
|
||||||
--light-red: #FD8B8B;
|
--light-red: #FD8B8B;
|
||||||
|
--orange: rgb(255, 160, 10);
|
||||||
--text-color: #000000;
|
--text-color: #000000;
|
||||||
--text-light: #dfe2e5;
|
--text-light: #dfe2e5;
|
||||||
|
|
||||||
@ -213,7 +214,7 @@
|
|||||||
.edit-cell {
|
.edit-cell {
|
||||||
display: none;
|
display: none;
|
||||||
padding: var(--spacer-2);
|
padding: var(--spacer-2);
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@ -228,7 +229,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.edit-cell {
|
.edit-cell {
|
||||||
border: 2px solid var(--primary-color);
|
border: 2px solid var(--orange);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user