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

start dropdown grid column

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-03 17:32:07 +08:00
parent 6234154f33
commit cb3b03f365
4 changed files with 86 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/dropdown.scss
View File

@ -108,7 +108,7 @@ $listMaxHeight: 210px;
flex: 1 1 auto;
cursor: pointer;
font-size: $mediumSize;
line-height: $headerHeight;
// line-height: $headerHeight;
padding: 0 6px;
overflow: hidden;
text-overflow: ellipsis;

20
css/grid.scss
View File

@ -207,6 +207,18 @@
transition: none;
}
}
.dropdown-wrapper {
height: calc(var(--line-height) + 2px);
width: 100%;
display: flex;
flex-direction: column;
>.dropdown-header {
border: none;
height: 100%;
}
}
}
}
}
@ -220,6 +232,14 @@
white-space: pre;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
&.active {
visibility: visible;
opacity: 1;
}
}
}

30
lib/ui/grid.html
View File

@ -18,21 +18,31 @@
grid.columns = [
{ key: 'c1', caption: 'column 1' },
{ key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
{
key: 'c2a',
caption: 'column 2 a',
type: Grid.ColumnTypes.Dropdown,
source: [
{ value: 'off', text: 'Off' },
{ value: 'pending', text: 'Pending' },
{ value: 'broken', text: 'Broken' },
{ value: 'running', text: 'Running' }
],
enabled: 'enabled'
},
{ key: 'c3', caption: 'column 3', width: 90 },
{ key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
];
grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
grid.init();
const source = [];
for (let i = 0; i < 1000; i++) {
source.push(
{ c1: 'abc', c2: true, c3: 12345, c4: 'Note note this is note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c3: 1225, c4: 'Note note this is note' },
{ c1: 'type', c2: false, c3: 121111 },
{ c1: 'diff', c2: true, c3: 124445555555555555 }
);
}
grid.source = source;
grid.source = [
{ c1: 'abc', c2: true, c2a: 'off', c3: 12345, c4: 'another note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c3: 1225, c4: 'Note note this is note' },
{ c1: 'type', c2: false, c2a: 'broken', c3: 121111 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 12499 },
{ c1: 'diff', c2: true, c2a: 'off', c3: 1244445 }
];
window.grid = grid;
}();

53
lib/ui/grid.js
View File

@ -2,6 +2,7 @@ import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from ".
import { r } from "../utility/lgres";
import { createIcon } from "../ui/icon";
import { createCheckbox } from "../ui/checkbox";
import Dropdown from "../ui/dropdown";
const ColumnChangedType = {
Reorder: 'reorder',
@ -52,7 +53,43 @@ class GridInputColumn extends GridColumn {
static setEnabled(element, enabled) { element.disabled = enabled === false }
}
const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn {
static createEdit(trigger) {
const drop = new Dropdown({
});
return drop.create();
}
static setValue(element, val, item, col) {
const dropGlobal = global[SymbolDropdown];
if (dropGlobal == null) {
return;
}
const dropId = element.dataset.dropId;
const drop = dropGlobal[dropId];
if (drop == null) {
return;
}
let source = col.source;
if (typeof source === 'function') {
source = source(item);
}
if (source != null) {
drop.source = source;
}
drop.select(val, true);
}
static getValue(e) {
}
static setEnabled(element, enabled) {
}
}
class GridCheckboxColumn extends GridColumn {
@ -559,7 +596,6 @@ class Grid {
if (!this.holderDisabled) {
const holder = document.createElement('div');
holder.className = 'grid-hover-holder';
holder.style.display = 'none';
bodyContainer.appendChild(holder);
body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
}
@ -695,7 +731,7 @@ class Grid {
if (typeof enabled === 'string') {
enabled = item[enabled];
}
type.setValue(element, val, item);
type.setValue(element, val, item, col);
if (typeof type.setEnabled === 'function') {
type.setEnabled(element, enabled);
}
@ -808,7 +844,7 @@ class Grid {
if (!force && attr != null && (attr.resizing || attr.dragging)) {
return;
}
if (col.sortable && ['LABEL', 'LAYER', 'SVG', 'USE'].indexOf(e.target.tagName) < 0) {
if (col.sortable && !/^(label|layer|svg|use)$/i.test(e.target.tagName)) {
const index = this.columns.indexOf(col);
if (index < 0) {
return;
@ -867,7 +903,7 @@ class Grid {
#onBodyMouseMove(e, holder) {
let target = e.target;
if (target.className === 'grid-hover-holder') {
if (target.classList.contains('grid-hover-holder')) {
return;
}
let parent;
@ -877,8 +913,8 @@ class Grid {
let keyid = target.keyid;
if (parent == null || keyid == null) {
delete holder.keyid;
if (holder.style.display !== 'none') {
holder.style.display = 'none';
if (holder.classList.contains('active')) {
holder.classList.remove('active');
}
return;
}
@ -907,12 +943,13 @@ class Grid {
}
const height = target.offsetHeight;
holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
holder.classList.add('active');
} else {
if (oldkeyid != null) {
delete holder.keyid;
}
if (holder.style.display !== 'none') {
holder.style.display = 'none';
if (holder.classList.contains('active')) {
holder.classList.remove('active');
}
}
}