From cb3b03f365e344ea07308a23b5e5a4683231a648 Mon Sep 17 00:00:00 2001 From: Tsanie Lily Date: Mon, 3 Apr 2023 17:32:07 +0800 Subject: [PATCH] start dropdown grid column --- css/dropdown.scss | 2 +- css/grid.scss | 20 ++++++++++++++++++ lib/ui/grid.html | 30 ++++++++++++++++++--------- lib/ui/grid.js | 53 ++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 86 insertions(+), 19 deletions(-) diff --git a/css/dropdown.scss b/css/dropdown.scss index 730c1d1..cdc4366 100644 --- a/css/dropdown.scss +++ b/css/dropdown.scss @@ -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; diff --git a/css/grid.scss b/css/grid.scss index 5df77d4..844522e 100644 --- a/css/grid.scss +++ b/css/grid.scss @@ -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; + } } } diff --git a/lib/ui/grid.html b/lib/ui/grid.html index 05f26ae..d68813a 100644 --- a/lib/ui/grid.html +++ b/lib/ui/grid.html @@ -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; }(); diff --git a/lib/ui/grid.js b/lib/ui/grid.js index 5bade01..b3b6b83 100644 --- a/lib/ui/grid.js +++ b/lib/ui/grid.js @@ -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'); } } }