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

fix: header z-index issue.

Browse Source 
fix: incorrect `onChanged` event trigger on `GridInputColumn`, `GridTextColumn` and `GridDateColumn`.
This commit is contained in:
Chen Lily
2024-02-26 16:11:42 +08:00
parent 7940edbea2
commit 38bad864e0
5 changed files with 63 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/ui/grid/column.js
View File

@ -55,7 +55,8 @@ export class GridColumn {
* 更多例子参考代码中 {@linkcode GridDropdownColumn} 的实现。
* @method
* @name GridColumn.createEdit
* @param {Function} trigger - 编辑事件回调函数，`e` 参数会传递给 [getValue]{@linkcode GridColumn.getValue} 方法
* @param {Function} trigger - 编辑事件回调函数
* @param {any} trigger.e - 该参数会传递给 [getValue]{@linkcode GridColumn.getValue} 方法
* @param {GridColumnDefinition} col - 列定义对象
* @param {HTMLElement} container - 父容器元素
* @param {GridItemWrapper} wrapper - 行包装对象，其 `values` 属性为行数据对象
@ -144,6 +145,29 @@ export class GridColumn {
* @ignore
*/
static toString() { return '[object Column]' }
/**
* @ignore
* @param {string} key
* @param {GridItemWrapper} wrapper
* @param {any} value
*/
static _changeValue(key, wrapper, value) {
const val = wrapper.values[key] ?? null;
const hasValue = val != null && Object.prototype.hasOwnProperty.call(val, 'Value');
if (wrapper.__editing == null) {
wrapper.__editing = {
[key]: hasValue ? val.Value : val
}
} else if (!Object.prototype.hasOwnProperty.call(wrapper.__editing, key)) {
wrapper.__editing[key] = hasValue ? val.Value : val;
}
if (hasValue) {
val.Value = value;
} else {
wrapper.values[key] = value;
}
}
}
/**
@ -158,24 +182,17 @@ export class GridInputColumn extends GridColumn {
/**
* @ignore
* @param {Function} _trigger
* @param {Function} trigger
* @param {GridColumnDefinition} col
* @param {HTMLElement} _container
* @param {GridItemWrapper} wrapper
* @returns {HTMLElement}
*/
static createEdit(_trigger, col, _container, wrapper) {
static createEdit(trigger, col, _container, wrapper) {
const input = createElement('input');
input.setAttribute('type', 'text');
input.addEventListener('input', () => {
if (wrapper.__editing == null) {
wrapper.__editing = {
[col.key]: true
}
} else {
wrapper.__editing[col.key] = true;
}
});
input.addEventListener('input', () => super._changeValue(col.key, wrapper, input.value));
input.addEventListener('change', trigger);
return input;
}
@ -221,23 +238,16 @@ export class GridInputColumn extends GridColumn {
export class GridTextColumn extends GridInputColumn {
/**
* @ignore
* @param {Function} _trigger
* @param {Function} trigger
* @param {GridColumnDefinition} col
* @param {HTMLElement} _container
* @param {GridItemWrapper} wrapper
* @returns {HTMLElement}
*/
static createEdit(_trigger, col, _container, wrapper) {
static createEdit(trigger, col, _container, wrapper) {
const input = createElement('textarea');
input.addEventListener('input', () => {
if (wrapper.__editing == null) {
wrapper.__editing = {
[col.key]: true
}
} else {
wrapper.__editing[col.key] = true;
}
});
input.addEventListener('input', () => super._changeValue(col.key, wrapper, input.value));
input.addEventListener('change', trigger);
return input;
}
@ -476,7 +486,7 @@ export class GridCheckboxColumn extends GridColumn {
*/
static createEdit(trigger) {
const check = createCheckbox({
onchange: typeof trigger === 'function' ? trigger : null
onchange: trigger
});
return check;
}
@ -604,13 +614,13 @@ export class GridDateColumn extends GridColumn {
/**
* @ignore
* @param {Function} _trigger
* @param {Function} trigger
* @param {GridColumnDefinition} col
* @param {HTMLElement} _container
* @param {GridItemWrapper} wrapper
* @returns {HTMLElement}
*/
static createEdit(_trigger, col, _container, wrapper) {
static createEdit(trigger, col, _container, wrapper) {
let enabled = col.enabled;
if (typeof enabled === 'string') {
enabled = wrapper.values[enabled];
@ -621,15 +631,8 @@ export class GridDateColumn extends GridColumn {
return super.create();
}
const date = createDateInput(col.dateMin, col.dateMax);
date.addEventListener('change', () => {
if (wrapper.__editing == null) {
wrapper.__editing = {
[col.key]: true
}
} else {
wrapper.__editing[col.key] = true;
}
});
date.addEventListener('change', () => super._changeValue(col.key, wrapper, date.value));
date.addEventListener('blur', trigger);
return date;
}