tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimized

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-06 00:08:03 +08:00
parent adb74b7441
commit c27d44872b
11 changed files with 314 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
lib/ui/grid.js
View File

@@ -78,8 +78,8 @@ class GridInputColumn extends GridColumn {
const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn {
static createEdit(trigger, parent) {
const drop = new Dropdown({ parent });
static createEdit(trigger, col, parent) {
const drop = new Dropdown({ ...col.dropOptions, parent });
drop.onselected = trigger;
return drop.create();
}
@@ -459,7 +459,7 @@ class Grid {
if (this.#needResize && widths.flag) {
this.#needResize = false;
this.columns.forEach((col, i) => {
if (!col.autoResize) {
if (!this.#get(col.key, 'autoResize')) {
return;
}
let width = widths[i];
@@ -535,7 +535,7 @@ class Grid {
return a === b ? 0 : (a > b ? 1 : -1) * direction;
};
} else {
comparer = (a, b) => col.sortFilter(a, b) * direction;
comparer = (a, b) => col.sortFilter(a.values, b.values) * direction;
}
this.#source.sort(comparer);
// TODO: filter to currentSource;
@@ -566,10 +566,10 @@ class Grid {
}
// style
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
if (col.width > 0 || col.shrink) {
col.autoResize = false;
if (col.width > 0) {
// col.autoResize = false;
} else {
col.autoResize = true;
this.#set(col.key, 'autoResize', true);
this.#needResize = true;
sizer.innerText = col.caption ?? '';
let width = sizer.offsetWidth + 22;
@@ -585,22 +585,19 @@ class Grid {
if (col.sortable !== false) {
col.sortable = true;
}
if (col.shrink) {
col.style = { 'text-align': col.align };
} else {
const w = `${col.width}px`;
col.style = {
'width': w,
'max-width': w,
'min-width': w,
'text-align': col.align
};
}
const w = `${col.width}px`;
const style = {
'width': w,
'max-width': w,
'min-width': w,
'text-align': col.align
};
this.#set(col.key, 'style', style);
// element
const th = document.createElement('th');
th.className = 'column';
th.dataset.key = col.key;
for (let css of Object.entries(col.style)) {
for (let css of Object.entries(style)) {
th.style.setProperty(css[0], css[1]);
}
if (col.sortable) {
@@ -741,8 +738,9 @@ class Grid {
const cell = document.createElement('td');
if (col.visible !== false) {
cell.keyid = ((exists + i) << MaxColumnBit) | j;
if (col.style != null) {
for (let css of Object.entries(col.style)) {
const style = this.#get(col.key, 'style');
if (style != null) {
for (let css of Object.entries(style)) {
cell.style.setProperty(css[0], css[1]);
}
}
@@ -836,7 +834,7 @@ class Grid {
let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
element = selected ?
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), this.#refs.bodyContent) :
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent) :
type.create(col);
cell.replaceChildren(element);
} else {
@@ -856,7 +854,7 @@ class Grid {
type.setEnabled(element, enabled);
}
// auto resize
if (this.#needResize && col.autoResize) {
if (this.#needResize && this.#get(col.key, 'autoResize')) {
const width = element.scrollWidth + 12;
if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
widths[j] = width;
@@ -893,9 +891,10 @@ class Grid {
// const oldwidth = col.width;
const w = `${width}px`;
col.width = width;
col.style.width = w;
col.style['max-width'] = w;
col.style['min-width'] = w;
const style = this.#get(col.key, 'style');
style.width = w;
style['max-width'] = w;
style['min-width'] = w;
let element = this.#refs.header.children[index];
element.style.width = w;
element.style.maxWidth = w;
@@ -1060,6 +1059,23 @@ class Grid {
return top;
}
#get(key, name) {
const attr = this.#colAttrs[key];
if (attr == null) {
return null;
}
return attr[name];
}
#set(key, name, value) {
const attr = this.#colAttrs[key];
if (attr == null) {
this.#colAttrs[key] = { [name]: value };
} else {
attr[name] = value;
}
}
#getRowTarget(target) {
let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
@@ -1073,8 +1089,7 @@ class Grid {
}
#onHeaderClicked(e, col, force) {
const attr = this.#colAttrs[col.key];
if (!force && attr != null && (attr.resizing || attr.dragging)) {
if (!force && (this.#get(col.key, 'resizing') || this.#get(col.key, 'dragging'))) {
return;
}
if (!this.#notHeader(e.target.tagName)) {
@@ -1185,7 +1200,7 @@ class Grid {
setTimeout(() => delete attr.resizing);
if (attr.sizing) {
delete attr.sizing;
col.autoResize = false;
delete attr.autoResize;
this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width);
@@ -1379,6 +1394,7 @@ class Grid {
}
}
}
#onRowDblClicked(e) {
if (e.target.tagName === 'INPUT') {
return;
@@ -1394,6 +1410,7 @@ class Grid {
}
}
}
#onRowChanged(_e, index, col, value) {
if (this.#currentSource == null) {
return;