@vaadin/virtual-list 24.5.0 → 24.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -8
- package/src/vaadin-virtual-list-mixin.js +44 -1
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/virtual-list",
|
|
3
|
-
"version": "24.5.
|
|
3
|
+
"version": "24.5.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -41,15 +41,15 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
43
43
|
"@polymer/polymer": "^3.0.0",
|
|
44
|
-
"@vaadin/component-base": "~24.5.
|
|
45
|
-
"@vaadin/lit-renderer": "~24.5.
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "~24.5.
|
|
47
|
-
"@vaadin/vaadin-material-styles": "~24.5.
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "~24.5.
|
|
44
|
+
"@vaadin/component-base": "~24.5.2",
|
|
45
|
+
"@vaadin/lit-renderer": "~24.5.2",
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "~24.5.2",
|
|
47
|
+
"@vaadin/vaadin-material-styles": "~24.5.2",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "~24.5.2",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/chai-plugins": "~24.5.
|
|
52
|
+
"@vaadin/chai-plugins": "~24.5.2",
|
|
53
53
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
54
54
|
"sinon": "^18.0.0"
|
|
55
55
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "3e07e97ed0bf355373d1ef0216a3954113e4a40f"
|
|
61
61
|
}
|
|
@@ -63,6 +63,11 @@ export const VirtualListMixin = (superClass) =>
|
|
|
63
63
|
return this.__virtualizer.lastVisibleIndex;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
constructor() {
|
|
67
|
+
super();
|
|
68
|
+
this.__onDragStart = this.__onDragStart.bind(this);
|
|
69
|
+
}
|
|
70
|
+
|
|
66
71
|
/** @protected */
|
|
67
72
|
ready() {
|
|
68
73
|
super.ready();
|
|
@@ -75,13 +80,28 @@ export const VirtualListMixin = (superClass) =>
|
|
|
75
80
|
scrollContainer: this.shadowRoot.querySelector('#items'),
|
|
76
81
|
reorderElements: true,
|
|
77
82
|
});
|
|
78
|
-
|
|
79
83
|
this.__overflowController = new OverflowController(this);
|
|
80
84
|
this.addController(this.__overflowController);
|
|
81
85
|
|
|
82
86
|
processTemplates(this);
|
|
83
87
|
}
|
|
84
88
|
|
|
89
|
+
/** @protected */
|
|
90
|
+
connectedCallback() {
|
|
91
|
+
super.connectedCallback();
|
|
92
|
+
// Chromium based browsers cannot properly generate drag images for elements
|
|
93
|
+
// that have children with massive heights. This workaround prevents crashes
|
|
94
|
+
// and performance issues by excluding the items from the drag image.
|
|
95
|
+
// https://github.com/vaadin/web-components/issues/7985
|
|
96
|
+
document.addEventListener('dragstart', this.__onDragStart, { capture: true });
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/** @protected */
|
|
100
|
+
disconnectedCallback() {
|
|
101
|
+
super.disconnectedCallback();
|
|
102
|
+
document.removeEventListener('dragstart', this.__onDragStart, { capture: true });
|
|
103
|
+
}
|
|
104
|
+
|
|
85
105
|
/**
|
|
86
106
|
* Scroll to a specific index in the virtual list.
|
|
87
107
|
*
|
|
@@ -133,6 +153,29 @@ export const VirtualListMixin = (superClass) =>
|
|
|
133
153
|
}
|
|
134
154
|
}
|
|
135
155
|
|
|
156
|
+
/** @private */
|
|
157
|
+
__onDragStart(e) {
|
|
158
|
+
// The dragged element can be the element itself or a parent of the element
|
|
159
|
+
if (!e.target.contains(this)) {
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
// The threshold value 20000 provides a buffer to both
|
|
163
|
+
// - avoid the crash and the performance issues
|
|
164
|
+
// - unnecessarily avoid excluding items from the drag image
|
|
165
|
+
if (this.$.items.offsetHeight > 20000) {
|
|
166
|
+
const initialItemsMaxHeight = this.$.items.style.maxHeight;
|
|
167
|
+
const initialVirtualListOverflow = this.style.overflow;
|
|
168
|
+
// Momentarily hides the items until the browser starts generating the
|
|
169
|
+
// drag image.
|
|
170
|
+
this.$.items.style.maxHeight = '0';
|
|
171
|
+
this.style.overflow = 'hidden';
|
|
172
|
+
requestAnimationFrame(() => {
|
|
173
|
+
this.$.items.style.maxHeight = initialItemsMaxHeight;
|
|
174
|
+
this.style.overflow = initialVirtualListOverflow;
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
136
179
|
/**
|
|
137
180
|
* Requests an update for the content of the rows.
|
|
138
181
|
* While performing the update, it invokes the renderer passed in the `renderer` property for each visible row.
|
package/web-types.json
CHANGED