@qoretechnologies/reqore 0.73.0 → 0.73.1
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.
|
@@ -35,6 +35,23 @@ export interface IReqoreFadeScrollerProps extends Omit<React.HTMLAttributes<HTML
|
|
|
35
35
|
* @default true
|
|
36
36
|
*/
|
|
37
37
|
fade?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Let the row be scrolled by grabbing it and pulling sideways.
|
|
40
|
+
*
|
|
41
|
+
* A mouse has no horizontal axis, so a row that overflows is reachable only by
|
|
42
|
+
* shift+wheel or a trackpad gesture — neither discoverable, and the first
|
|
43
|
+
* unavailable on a plain wheel mouse. Dragging is the gesture a rail of peers
|
|
44
|
+
* already looks like it should accept.
|
|
45
|
+
*
|
|
46
|
+
* Selecting text inside the row is preserved rather than traded away: hold
|
|
47
|
+
* **Shift** and drag to select on a pointer device, and on touch the drag
|
|
48
|
+
* never engages at all, so native panning and long-press-to-select both apply
|
|
49
|
+
* unchanged.
|
|
50
|
+
*
|
|
51
|
+
* Opt-in, because it changes what a press-and-move does on an existing row.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
dragToScroll?: boolean;
|
|
38
55
|
}
|
|
39
56
|
/**
|
|
40
57
|
* A single-line horizontal scroller that fades whichever edge has content out of
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FadeScroller/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB;IACpB,mEAAmE;IACnE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IACjE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FadeScroller/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB;IACpB,mEAAmE;IACnE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IACjE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAiJD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,+JAqT9B,CAAC;AAIF,eAAe,kBAAkB,CAAC"}
|
|
@@ -43,6 +43,28 @@ var TooltipComponent_1 = require("../TooltipComponent");
|
|
|
43
43
|
* a hard edge, narrow enough not to obscure a whole item.
|
|
44
44
|
*/
|
|
45
45
|
var FADE_WIDTH = 36;
|
|
46
|
+
/**
|
|
47
|
+
* How far the pointer must travel before a press becomes a drag.
|
|
48
|
+
*
|
|
49
|
+
* Zero would make every click a one-pixel drag and swallow it; too large and the
|
|
50
|
+
* row feels stuck before it moves. Four pixels is the usual hysteresis for
|
|
51
|
+
* distinguishing a click from a drag.
|
|
52
|
+
*/
|
|
53
|
+
var DRAG_THRESHOLD = 4;
|
|
54
|
+
/**
|
|
55
|
+
* Elements a drag must never start on.
|
|
56
|
+
*
|
|
57
|
+
* Deliberately NOT "anything interactive". The rows this is built for are made
|
|
58
|
+
* OF interactive things — a rail of clickable KPI tiles is the motivating case —
|
|
59
|
+
* so excluding buttons would leave nowhere to grab and the feature would do
|
|
60
|
+
* nothing. Their clicks are protected instead by suppressing the click that
|
|
61
|
+
* follows a real drag, which is what makes press-and-release still activate a
|
|
62
|
+
* tile while press-and-pull scrolls past it.
|
|
63
|
+
*
|
|
64
|
+
* What IS excluded is text entry, where a press-and-move already means
|
|
65
|
+
* "select within this value" and there is no other way to ask for it.
|
|
66
|
+
*/
|
|
67
|
+
var NON_DRAGGABLE = 'input, textarea, select, [contenteditable=""], [contenteditable="true"]';
|
|
46
68
|
/*
|
|
47
69
|
* The fades are overlay gradients on the wrapper rather than a mask on the scroller,
|
|
48
70
|
* so they sit above the content without entering the scroll flow — a `::before` inside
|
|
@@ -70,7 +92,7 @@ var StyledFadeScrollerWrapper = styled_components_1.default.div(templateObject_1
|
|
|
70
92
|
* horizontal bar under a single row of chips is thicker than the row it describes.
|
|
71
93
|
* The row stays scrollable by wheel, trackpad, touch and keyboard regardless.
|
|
72
94
|
*/
|
|
73
|
-
var StyledFadeScrollerContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: nowrap;\n align-items: ", ";\n gap: ", "px;\n width: ", ";\n max-width: 100%;\n min-width: 0;\n overflow-x: auto;\n overflow-y: hidden;\n /* Keeps a focus ring on the last item from being clipped by the overflow box. */\n padding-bottom: 2px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n display: none;\n }\n\n ", "\n"], ["\n display: flex;\n flex-wrap: nowrap;\n align-items: ", ";\n gap: ", "px;\n width: ", ";\n max-width: 100%;\n min-width: 0;\n overflow-x: auto;\n overflow-y: hidden;\n /* Keeps a focus ring on the last item from being clipped by the overflow box. */\n padding-bottom: 2px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n display: none;\n }\n\n ", "\n"])), function (_a) {
|
|
95
|
+
var StyledFadeScrollerContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: nowrap;\n align-items: ", ";\n gap: ", "px;\n width: ", ";\n max-width: 100%;\n min-width: 0;\n overflow-x: auto;\n overflow-y: hidden;\n /* Keeps a focus ring on the last item from being clipped by the overflow box. */\n padding-bottom: 2px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n display: none;\n }\n\n ", "\n\n /* Drag state is carried by CLASSES, not by props, because it is not React\n state: a drag is a transient pointer interaction, and routing it through\n setState would re-render every child on every drag \u2014 on the rail this was\n built for, that is a whole row of memoized tiles, mid-gesture.\n\n The grab cursor appears only when there is somewhere to go: an idle \"grab\"\n on a row that already fits is a promise the row cannot keep. The class is\n toggled by the same measurement that draws the fades, so the cursor and the\n fade can never disagree about whether the row overflows. */\n &.reqore-fade-scroller-draggable {\n cursor: grab;\n }\n\n /* While dragging, the whole row is the control: suppress selection so pulling\n across a tile drags it instead of highlighting its label, and keep the\n grabbing cursor even as the pointer passes over children that set their own\n (a clickable tile sets the pointer cursor). */\n &.reqore-fade-scroller-dragging {\n cursor: grabbing;\n user-select: none;\n -webkit-user-select: none;\n\n & * {\n cursor: grabbing !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n }\n }\n"], ["\n display: flex;\n flex-wrap: nowrap;\n align-items: ", ";\n gap: ", "px;\n width: ", ";\n max-width: 100%;\n min-width: 0;\n overflow-x: auto;\n overflow-y: hidden;\n /* Keeps a focus ring on the last item from being clipped by the overflow box. */\n padding-bottom: 2px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n display: none;\n }\n\n ", "\n\n /* Drag state is carried by CLASSES, not by props, because it is not React\n state: a drag is a transient pointer interaction, and routing it through\n setState would re-render every child on every drag \u2014 on the rail this was\n built for, that is a whole row of memoized tiles, mid-gesture.\n\n The grab cursor appears only when there is somewhere to go: an idle \"grab\"\n on a row that already fits is a promise the row cannot keep. The class is\n toggled by the same measurement that draws the fades, so the cursor and the\n fade can never disagree about whether the row overflows. */\n &.reqore-fade-scroller-draggable {\n cursor: grab;\n }\n\n /* While dragging, the whole row is the control: suppress selection so pulling\n across a tile drags it instead of highlighting its label, and keep the\n grabbing cursor even as the pointer passes over children that set their own\n (a clickable tile sets the pointer cursor). */\n &.reqore-fade-scroller-dragging {\n cursor: grabbing;\n user-select: none;\n -webkit-user-select: none;\n\n & * {\n cursor: grabbing !important;\n user-select: none !important;\n -webkit-user-select: none !important;\n }\n }\n"])), function (_a) {
|
|
74
96
|
var $verticalAlign = _a.$verticalAlign;
|
|
75
97
|
return $verticalAlign;
|
|
76
98
|
}, function (_a) {
|
|
@@ -100,14 +122,18 @@ var StyledFadeScrollerContent = styled_components_1.default.div(templateObject_2
|
|
|
100
122
|
* </ReqoreFadeScroller>
|
|
101
123
|
*/
|
|
102
124
|
exports.ReqoreFadeScroller = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
|
|
103
|
-
var children = _a.children, _b = _a.gapSize, gapSize = _b === void 0 ? 'normal' : _b, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? 'center' : _c, _d = _a.rigid, rigid = _d === void 0 ? true : _d, fadeColor = _a.fadeColor, _e = _a.fade, fade = _e === void 0 ? true : _e, _f = _a.fluid, fluid =
|
|
104
|
-
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
|
|
125
|
+
var children = _a.children, _b = _a.gapSize, gapSize = _b === void 0 ? 'normal' : _b, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? 'center' : _c, _d = _a.rigid, rigid = _d === void 0 ? true : _d, fadeColor = _a.fadeColor, _e = _a.fade, fade = _e === void 0 ? true : _e, _f = _a.dragToScroll, dragToScroll = _f === void 0 ? false : _f, _g = _a.fluid, fluid = _g === void 0 ? true : _g, intent = _a.intent, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, tooltip = _a.tooltip, className = _a.className, rest = __rest(_a, ["children", "gapSize", "verticalAlign", "rigid", "fadeColor", "fade", "dragToScroll", "fluid", "intent", "customTheme", "inheritCustomTheme", "tooltip", "className"]);
|
|
126
|
+
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
|
|
105
127
|
var scrollRef = (0, react_1.useRef)(null);
|
|
106
128
|
var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
|
|
107
|
-
var
|
|
129
|
+
var _h = (0, react_1.useState)({
|
|
108
130
|
left: false,
|
|
109
131
|
right: false,
|
|
110
|
-
}), edges =
|
|
132
|
+
}), edges = _h[0], setEdges = _h[1];
|
|
133
|
+
// Read inside `update`, which is deliberately dependency-free so it can be
|
|
134
|
+
// handed to listeners and observers once and never rebuilt.
|
|
135
|
+
var dragToScrollRef = (0, react_1.useRef)(dragToScroll);
|
|
136
|
+
dragToScrollRef.current = dragToScroll;
|
|
111
137
|
var update = (0, react_1.useCallback)(function () {
|
|
112
138
|
var element = scrollRef.current;
|
|
113
139
|
if (!element) {
|
|
@@ -115,6 +141,10 @@ exports.ReqoreFadeScroller = (0, react_1.memo)((0, react_1.forwardRef)(function
|
|
|
115
141
|
}
|
|
116
142
|
var left = element.scrollLeft > 1;
|
|
117
143
|
var right = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
|
|
144
|
+
// The cursor follows the measurement, not the render: toggling a class
|
|
145
|
+
// here keeps "can this be dragged?" answered by the same pass that
|
|
146
|
+
// decides which edges fade, without a state round-trip.
|
|
147
|
+
element.classList.toggle('reqore-fade-scroller-draggable', dragToScrollRef.current && element.scrollWidth > element.clientWidth);
|
|
118
148
|
// Only commit a real change — this runs after every render (below), and an
|
|
119
149
|
// unconditional setState would loop.
|
|
120
150
|
setEdges(function (current) {
|
|
@@ -137,6 +167,177 @@ exports.ReqoreFadeScroller = (0, react_1.memo)((0, react_1.forwardRef)(function
|
|
|
137
167
|
observer === null || observer === void 0 ? void 0 : observer.disconnect();
|
|
138
168
|
};
|
|
139
169
|
}, [update]);
|
|
170
|
+
(0, react_1.useEffect)(function () {
|
|
171
|
+
var element = scrollRef.current;
|
|
172
|
+
if (!dragToScroll || !element) {
|
|
173
|
+
return undefined;
|
|
174
|
+
}
|
|
175
|
+
var activePointer;
|
|
176
|
+
var startX = 0;
|
|
177
|
+
var startScrollLeft = 0;
|
|
178
|
+
var engaged = false;
|
|
179
|
+
// Set when a drag actually moved the row, and consumed by the click that
|
|
180
|
+
// the browser fires next. Without it, pulling the row sideways and
|
|
181
|
+
// letting go on top of a clickable tile ALSO activates that tile.
|
|
182
|
+
var swallowNextClick = false;
|
|
183
|
+
/* The live gesture is tracked on the WINDOW, not on the row.
|
|
184
|
+
*
|
|
185
|
+
* A pull leaves the row almost immediately — the edges are where you are
|
|
186
|
+
* pulling TO — and the release can land anywhere, including outside the
|
|
187
|
+
* browser window entirely. Listening on the row alone meant a release it
|
|
188
|
+
* never saw left `activePointer` set: the next move over the row resumed
|
|
189
|
+
* the drag with no button held, and there was no way to let go, because
|
|
190
|
+
* the only thing that could have ended it was a pointerup on the row that
|
|
191
|
+
* was never coming.
|
|
192
|
+
*
|
|
193
|
+
* Pointer capture alone does not cover this — it is taken only once the
|
|
194
|
+
* drag ENGAGES, and a fast pull can be past the row's edge before the
|
|
195
|
+
* first qualifying move arrives.
|
|
196
|
+
*
|
|
197
|
+
* Bound per-gesture rather than permanently, so an idle scroller adds no
|
|
198
|
+
* global pointermove listener. */
|
|
199
|
+
var stopTracking = function () {
|
|
200
|
+
window.removeEventListener('pointermove', onPointerMove);
|
|
201
|
+
window.removeEventListener('pointerup', onPointerEnd);
|
|
202
|
+
window.removeEventListener('pointercancel', onPointerEnd);
|
|
203
|
+
window.removeEventListener('lostpointercapture', onPointerEnd);
|
|
204
|
+
window.removeEventListener('blur', endGesture);
|
|
205
|
+
};
|
|
206
|
+
var startTracking = function () {
|
|
207
|
+
window.addEventListener('pointermove', onPointerMove);
|
|
208
|
+
window.addEventListener('pointerup', onPointerEnd);
|
|
209
|
+
window.addEventListener('pointercancel', onPointerEnd);
|
|
210
|
+
window.addEventListener('lostpointercapture', onPointerEnd);
|
|
211
|
+
// Alt-tabbing mid-pull: the release happens in another window.
|
|
212
|
+
window.addEventListener('blur', endGesture);
|
|
213
|
+
};
|
|
214
|
+
/* Ends the gesture however it got here — a normal release, a release the
|
|
215
|
+
* page never saw, a cancelled pointer, or the window losing focus.
|
|
216
|
+
* Idempotent: `activePointer` is cleared before the capture is released,
|
|
217
|
+
* so the `lostpointercapture` our own release fires re-enters and returns. */
|
|
218
|
+
var endGesture = function () {
|
|
219
|
+
var _a;
|
|
220
|
+
if (activePointer === undefined) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
var pointerId = activePointer;
|
|
224
|
+
activePointer = undefined;
|
|
225
|
+
stopTracking();
|
|
226
|
+
if ((_a = element.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(element, pointerId)) {
|
|
227
|
+
element.releasePointerCapture(pointerId);
|
|
228
|
+
}
|
|
229
|
+
if (engaged) {
|
|
230
|
+
engaged = false;
|
|
231
|
+
element.classList.remove('reqore-fade-scroller-dragging');
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
var onPointerEnd = function (event) {
|
|
235
|
+
if (activePointer === undefined || event.pointerId !== activePointer) {
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
endGesture();
|
|
239
|
+
};
|
|
240
|
+
var onPointerMove = function (event) {
|
|
241
|
+
if (activePointer === undefined || event.pointerId !== activePointer) {
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
/* Nothing is held down, so the button came up somewhere this page could
|
|
245
|
+
* never observe it — off the edge of the window, the usual way. Recover
|
|
246
|
+
* on the first move back rather than wait for a pointerup that is never
|
|
247
|
+
* coming; `buttons` is a bitmask of what is CURRENTLY pressed, so during
|
|
248
|
+
* a real drag it can only be non-zero. */
|
|
249
|
+
if (event.buttons === 0) {
|
|
250
|
+
endGesture();
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
var distance = event.clientX - startX;
|
|
254
|
+
if (!engaged) {
|
|
255
|
+
// Below the threshold this is still a click, so do nothing at all —
|
|
256
|
+
// not even preventDefault, which would break focus on the target.
|
|
257
|
+
if (Math.abs(distance) < DRAG_THRESHOLD) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
engaged = true;
|
|
261
|
+
swallowNextClick = true;
|
|
262
|
+
element.classList.add('reqore-fade-scroller-dragging');
|
|
263
|
+
// Capture keeps the moves addressed to the row while the pointer is
|
|
264
|
+
// over other elements. The window listeners are what make the drag
|
|
265
|
+
// survive leaving it; this is what keeps hover states elsewhere quiet.
|
|
266
|
+
try {
|
|
267
|
+
element.setPointerCapture(event.pointerId);
|
|
268
|
+
}
|
|
269
|
+
catch (_a) {
|
|
270
|
+
// Capture is a nicety, not the mechanism.
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
// Stops the browser starting a native text/image drag mid-pull.
|
|
274
|
+
event.preventDefault();
|
|
275
|
+
element.scrollLeft = startScrollLeft - distance;
|
|
276
|
+
};
|
|
277
|
+
var onPointerDown = function (event) {
|
|
278
|
+
var _a, _b;
|
|
279
|
+
/* Before any guard. A previous gesture whose click never arrived —
|
|
280
|
+
* released off-window, so nothing followed it — leaves this armed, and
|
|
281
|
+
* the next genuine click would be eaten. A fresh press always makes the
|
|
282
|
+
* previous gesture's click moot, INCLUDING a press this handler goes on
|
|
283
|
+
* to decline: pressing an input or holding shift must not inherit a
|
|
284
|
+
* swallow from a drag that ended somewhere the page never saw. */
|
|
285
|
+
swallowNextClick = false;
|
|
286
|
+
// Touch already pans natively and long-press already selects; taking
|
|
287
|
+
// the gesture over would replace two working behaviours with one.
|
|
288
|
+
if (event.pointerType === 'touch') {
|
|
289
|
+
return;
|
|
290
|
+
}
|
|
291
|
+
// Middle/right are paste and context menu.
|
|
292
|
+
if (event.button !== 0) {
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
// Shift is the documented escape hatch to "select instead of drag".
|
|
296
|
+
if (event.shiftKey) {
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, NON_DRAGGABLE)) {
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
// Nothing to scroll: leave the press alone entirely so a click on a
|
|
303
|
+
// row that happens to fit behaves exactly as it did before.
|
|
304
|
+
if (element.scrollWidth <= element.clientWidth) {
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
activePointer = event.pointerId;
|
|
308
|
+
startX = event.clientX;
|
|
309
|
+
startScrollLeft = element.scrollLeft;
|
|
310
|
+
engaged = false;
|
|
311
|
+
startTracking();
|
|
312
|
+
};
|
|
313
|
+
var onClickCapture = function (event) {
|
|
314
|
+
if (!swallowNextClick) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
swallowNextClick = false;
|
|
318
|
+
event.preventDefault();
|
|
319
|
+
event.stopPropagation();
|
|
320
|
+
};
|
|
321
|
+
// A native drag beats pointer events to the punch on links and images.
|
|
322
|
+
var onDragStart = function (event) {
|
|
323
|
+
if (engaged) {
|
|
324
|
+
event.preventDefault();
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
element.addEventListener('pointerdown', onPointerDown);
|
|
328
|
+
element.addEventListener('dragstart', onDragStart);
|
|
329
|
+
// Capture phase: the click has to be stopped before it reaches the tile.
|
|
330
|
+
element.addEventListener('click', onClickCapture, true);
|
|
331
|
+
return function () {
|
|
332
|
+
element.removeEventListener('pointerdown', onPointerDown);
|
|
333
|
+
element.removeEventListener('dragstart', onDragStart);
|
|
334
|
+
element.removeEventListener('click', onClickCapture, true);
|
|
335
|
+
// A gesture live at unmount would otherwise leave window listeners behind.
|
|
336
|
+
stopTracking();
|
|
337
|
+
element.classList.remove('reqore-fade-scroller-dragging');
|
|
338
|
+
element.classList.remove('reqore-fade-scroller-draggable');
|
|
339
|
+
};
|
|
340
|
+
}, [dragToScroll]);
|
|
140
341
|
/* An intent tints the fade, because the fade IS this component's only
|
|
141
342
|
surface — there is no border or background for an intent to colour
|
|
142
343
|
instead. Without this, `intent` would type-check and paint nothing. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FadeScroller/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAUe;AACf,wEAAuC;AACvC,+CAA8D;AAG9D,+CAA8D;AAC9D,+DAA8D;AAC9D,iDAAsD;AAOtD,wDAA6D;AAE7D;;;GAGG;AACH,IAAM,UAAU,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FadeScroller/index.tsx"],"names":[],"mappings":"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"}
|