@egjs/react-flicking 4.10.8 → 4.10.9
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/dist/flicking.cjs.js +39 -187
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +39 -187
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.umd.js +39 -187
- package/dist/flicking.umd.js.map +1 -1
- package/package.json +4 -4
package/dist/flicking.cjs.js
CHANGED
|
@@ -4,7 +4,7 @@ name: @egjs/react-flicking
|
|
|
4
4
|
license: MIT
|
|
5
5
|
author: NAVER Corp.
|
|
6
6
|
repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
|
|
7
|
-
version: 4.10.
|
|
7
|
+
version: 4.10.9
|
|
8
8
|
*/
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
@@ -14,7 +14,7 @@ var ListDiffer = require('@egjs/list-differ');
|
|
|
14
14
|
var VanillaFlicking = require('@egjs/flicking');
|
|
15
15
|
var reactDom = require('react-dom');
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
/******************************************************************************
|
|
18
18
|
Copyright (c) Microsoft Corporation.
|
|
19
19
|
|
|
20
20
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -28,8 +28,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
28
28
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
29
29
|
PERFORMANCE OF THIS SOFTWARE.
|
|
30
30
|
***************************************************************************** */
|
|
31
|
-
|
|
32
31
|
/* global Reflect, Promise */
|
|
32
|
+
|
|
33
33
|
var extendStatics = function (d, b) {
|
|
34
34
|
extendStatics = Object.setPrototypeOf || {
|
|
35
35
|
__proto__: []
|
|
@@ -38,38 +38,29 @@ var extendStatics = function (d, b) {
|
|
|
38
38
|
} || function (d, b) {
|
|
39
39
|
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
|
|
40
40
|
};
|
|
41
|
-
|
|
42
41
|
return extendStatics(d, b);
|
|
43
42
|
};
|
|
44
|
-
|
|
45
43
|
function __extends(d, b) {
|
|
46
44
|
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
47
45
|
extendStatics(d, b);
|
|
48
|
-
|
|
49
46
|
function __() {
|
|
50
47
|
this.constructor = d;
|
|
51
48
|
}
|
|
52
|
-
|
|
53
49
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
54
50
|
}
|
|
55
51
|
var __assign = function () {
|
|
56
52
|
__assign = Object.assign || function __assign(t) {
|
|
57
53
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
58
54
|
s = arguments[i];
|
|
59
|
-
|
|
60
55
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
61
56
|
}
|
|
62
|
-
|
|
63
57
|
return t;
|
|
64
58
|
};
|
|
65
|
-
|
|
66
59
|
return __assign.apply(this, arguments);
|
|
67
60
|
};
|
|
68
61
|
function __rest(s, e) {
|
|
69
62
|
var t = {};
|
|
70
|
-
|
|
71
63
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
72
|
-
|
|
73
64
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
74
65
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
75
66
|
}
|
|
@@ -77,8 +68,8 @@ function __rest(s, e) {
|
|
|
77
68
|
}
|
|
78
69
|
function __decorate(decorators, target, key, desc) {
|
|
79
70
|
var c = arguments.length,
|
|
80
|
-
|
|
81
|
-
|
|
71
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
72
|
+
d;
|
|
82
73
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
83
74
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
84
75
|
}
|
|
@@ -88,7 +79,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
88
79
|
resolve(value);
|
|
89
80
|
});
|
|
90
81
|
}
|
|
91
|
-
|
|
92
82
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
93
83
|
function fulfilled(value) {
|
|
94
84
|
try {
|
|
@@ -97,7 +87,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
97
87
|
reject(e);
|
|
98
88
|
}
|
|
99
89
|
}
|
|
100
|
-
|
|
101
90
|
function rejected(value) {
|
|
102
91
|
try {
|
|
103
92
|
step(generator["throw"](value));
|
|
@@ -105,28 +94,26 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
105
94
|
reject(e);
|
|
106
95
|
}
|
|
107
96
|
}
|
|
108
|
-
|
|
109
97
|
function step(result) {
|
|
110
98
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
111
99
|
}
|
|
112
|
-
|
|
113
100
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
114
101
|
});
|
|
115
102
|
}
|
|
116
103
|
function __generator(thisArg, body) {
|
|
117
104
|
var _ = {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
105
|
+
label: 0,
|
|
106
|
+
sent: function () {
|
|
107
|
+
if (t[0] & 1) throw t[1];
|
|
108
|
+
return t[1];
|
|
109
|
+
},
|
|
110
|
+
trys: [],
|
|
111
|
+
ops: []
|
|
122
112
|
},
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
y,
|
|
128
|
-
t,
|
|
129
|
-
g;
|
|
113
|
+
f,
|
|
114
|
+
y,
|
|
115
|
+
t,
|
|
116
|
+
g;
|
|
130
117
|
return g = {
|
|
131
118
|
next: verb(0),
|
|
132
119
|
"throw": verb(1),
|
|
@@ -134,78 +121,59 @@ function __generator(thisArg, body) {
|
|
|
134
121
|
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
|
|
135
122
|
return this;
|
|
136
123
|
}), g;
|
|
137
|
-
|
|
138
124
|
function verb(n) {
|
|
139
125
|
return function (v) {
|
|
140
126
|
return step([n, v]);
|
|
141
127
|
};
|
|
142
128
|
}
|
|
143
|
-
|
|
144
129
|
function step(op) {
|
|
145
130
|
if (f) throw new TypeError("Generator is already executing.");
|
|
146
|
-
|
|
147
|
-
while (_) try {
|
|
131
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
148
132
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
149
133
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
150
|
-
|
|
151
134
|
switch (op[0]) {
|
|
152
135
|
case 0:
|
|
153
136
|
case 1:
|
|
154
137
|
t = op;
|
|
155
138
|
break;
|
|
156
|
-
|
|
157
139
|
case 4:
|
|
158
140
|
_.label++;
|
|
159
141
|
return {
|
|
160
142
|
value: op[1],
|
|
161
143
|
done: false
|
|
162
144
|
};
|
|
163
|
-
|
|
164
145
|
case 5:
|
|
165
146
|
_.label++;
|
|
166
147
|
y = op[1];
|
|
167
148
|
op = [0];
|
|
168
149
|
continue;
|
|
169
|
-
|
|
170
150
|
case 7:
|
|
171
151
|
op = _.ops.pop();
|
|
172
|
-
|
|
173
152
|
_.trys.pop();
|
|
174
|
-
|
|
175
153
|
continue;
|
|
176
|
-
|
|
177
154
|
default:
|
|
178
155
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
|
179
156
|
_ = 0;
|
|
180
157
|
continue;
|
|
181
158
|
}
|
|
182
|
-
|
|
183
159
|
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
|
|
184
160
|
_.label = op[1];
|
|
185
161
|
break;
|
|
186
162
|
}
|
|
187
|
-
|
|
188
163
|
if (op[0] === 6 && _.label < t[1]) {
|
|
189
164
|
_.label = t[1];
|
|
190
165
|
t = op;
|
|
191
166
|
break;
|
|
192
167
|
}
|
|
193
|
-
|
|
194
168
|
if (t && _.label < t[2]) {
|
|
195
169
|
_.label = t[2];
|
|
196
|
-
|
|
197
170
|
_.ops.push(op);
|
|
198
|
-
|
|
199
171
|
break;
|
|
200
172
|
}
|
|
201
|
-
|
|
202
173
|
if (t[2]) _.ops.pop();
|
|
203
|
-
|
|
204
174
|
_.trys.pop();
|
|
205
|
-
|
|
206
175
|
continue;
|
|
207
176
|
}
|
|
208
|
-
|
|
209
177
|
op = body.call(thisArg, _);
|
|
210
178
|
} catch (e) {
|
|
211
179
|
op = [6, e];
|
|
@@ -213,7 +181,6 @@ function __generator(thisArg, body) {
|
|
|
213
181
|
} finally {
|
|
214
182
|
f = t = 0;
|
|
215
183
|
}
|
|
216
|
-
|
|
217
184
|
if (op[0] & 5) throw op[1];
|
|
218
185
|
return {
|
|
219
186
|
value: op[0] ? op[1] : void 0,
|
|
@@ -258,27 +225,19 @@ var DEFAULT_PROPS = {
|
|
|
258
225
|
onPanelChange: function (e) {}
|
|
259
226
|
};
|
|
260
227
|
|
|
261
|
-
var ReactRenderer =
|
|
262
|
-
/*#__PURE__*/
|
|
263
|
-
function (_super) {
|
|
228
|
+
var ReactRenderer = /*#__PURE__*/function (_super) {
|
|
264
229
|
__extends(ReactRenderer, _super);
|
|
265
|
-
|
|
266
230
|
function ReactRenderer(options) {
|
|
267
231
|
var _this = _super.call(this, options) || this;
|
|
268
|
-
|
|
269
232
|
_this._reactFlicking = options.reactFlicking;
|
|
270
233
|
return _this;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
|
|
234
|
+
}
|
|
235
|
+
// eslint-disable-next-line @typescript-eslint/require-await
|
|
274
236
|
var __proto = ReactRenderer.prototype;
|
|
275
|
-
|
|
276
237
|
__proto.render = function () {
|
|
277
238
|
return __awaiter(this, void 0, void 0, function () {
|
|
278
239
|
var flicking, reactFlicking, strategy;
|
|
279
|
-
|
|
280
240
|
var _this = this;
|
|
281
|
-
|
|
282
241
|
return __generator(this, function (_a) {
|
|
283
242
|
flicking = VanillaFlicking.getFlickingAttached(this._flicking);
|
|
284
243
|
reactFlicking = this._reactFlicking;
|
|
@@ -286,14 +245,10 @@ function (_super) {
|
|
|
286
245
|
this._rendering = true;
|
|
287
246
|
strategy.updateRenderingPanels(flicking);
|
|
288
247
|
strategy.renderPanels(flicking);
|
|
289
|
-
return [2
|
|
290
|
-
/*return*/
|
|
291
|
-
, new Promise(function (resolve) {
|
|
248
|
+
return [2 /*return*/, new Promise(function (resolve) {
|
|
292
249
|
reactFlicking.renderEmitter.once("render", function () {
|
|
293
250
|
_this._rendering = false;
|
|
294
|
-
|
|
295
251
|
_this._afterRender();
|
|
296
|
-
|
|
297
252
|
resolve();
|
|
298
253
|
});
|
|
299
254
|
reactFlicking.forceUpdate();
|
|
@@ -301,28 +256,19 @@ function (_super) {
|
|
|
301
256
|
});
|
|
302
257
|
});
|
|
303
258
|
};
|
|
304
|
-
|
|
305
259
|
__proto.forceRenderAllPanels = function () {
|
|
306
260
|
return __awaiter(this, void 0, void 0, function () {
|
|
307
261
|
var reactFlicking;
|
|
308
|
-
|
|
309
262
|
var _this = this;
|
|
310
|
-
|
|
311
263
|
return __generator(this, function (_a) {
|
|
312
264
|
switch (_a.label) {
|
|
313
265
|
case 0:
|
|
314
266
|
reactFlicking = this._reactFlicking;
|
|
315
267
|
this._rendering = true;
|
|
316
|
-
return [4
|
|
317
|
-
/*yield*/
|
|
318
|
-
, _super.prototype.forceRenderAllPanels.call(this)];
|
|
319
|
-
|
|
268
|
+
return [4 /*yield*/, _super.prototype.forceRenderAllPanels.call(this)];
|
|
320
269
|
case 1:
|
|
321
270
|
_a.sent();
|
|
322
|
-
|
|
323
|
-
return [2
|
|
324
|
-
/*return*/
|
|
325
|
-
, new Promise(function (resolve) {
|
|
271
|
+
return [2 /*return*/, new Promise(function (resolve) {
|
|
326
272
|
reactFlicking.renderEmitter.once("render", function () {
|
|
327
273
|
_this._rendering = false;
|
|
328
274
|
resolve();
|
|
@@ -333,40 +279,30 @@ function (_super) {
|
|
|
333
279
|
});
|
|
334
280
|
});
|
|
335
281
|
};
|
|
336
|
-
|
|
337
282
|
__proto.destroy = function () {
|
|
338
283
|
_super.prototype.destroy.call(this);
|
|
339
|
-
|
|
340
284
|
this._reactFlicking.renderEmitter.off("render");
|
|
341
285
|
};
|
|
342
|
-
|
|
343
286
|
__proto._collectPanels = function () {
|
|
344
287
|
var flicking = VanillaFlicking.getFlickingAttached(this._flicking);
|
|
345
288
|
var reactFlicking = this._reactFlicking;
|
|
346
289
|
var reactPanels = reactFlicking.reactPanels;
|
|
347
290
|
this._panels = this._strategy.collectPanels(flicking, reactPanels);
|
|
348
291
|
};
|
|
349
|
-
|
|
350
292
|
__proto._createPanel = function (externalComponent, options) {
|
|
351
293
|
return this._strategy.createPanel(externalComponent, options);
|
|
352
294
|
};
|
|
353
|
-
|
|
354
295
|
return ReactRenderer;
|
|
355
296
|
}(VanillaFlicking.ExternalRenderer);
|
|
356
297
|
|
|
357
|
-
var StrictPanel =
|
|
358
|
-
/*#__PURE__*/
|
|
359
|
-
function (_super) {
|
|
298
|
+
var StrictPanel = /*#__PURE__*/function (_super) {
|
|
360
299
|
__extends(StrictPanel, _super);
|
|
361
|
-
|
|
362
300
|
function StrictPanel() {
|
|
363
301
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
364
|
-
|
|
365
302
|
_this._hide = false;
|
|
366
303
|
_this._elRef = React.createRef();
|
|
367
304
|
return _this;
|
|
368
305
|
}
|
|
369
|
-
|
|
370
306
|
var __proto = StrictPanel.prototype;
|
|
371
307
|
Object.defineProperty(__proto, "nativeElement", {
|
|
372
308
|
get: function () {
|
|
@@ -382,40 +318,30 @@ function (_super) {
|
|
|
382
318
|
enumerable: false,
|
|
383
319
|
configurable: true
|
|
384
320
|
});
|
|
385
|
-
|
|
386
321
|
__proto.render = function () {
|
|
387
322
|
return this._hide ? React.createElement(React.Fragment, null) : this._getElement();
|
|
388
323
|
};
|
|
389
|
-
|
|
390
324
|
__proto.show = function () {
|
|
391
325
|
this._hide = false;
|
|
392
326
|
};
|
|
393
|
-
|
|
394
327
|
__proto.hide = function () {
|
|
395
328
|
this._hide = true;
|
|
396
329
|
};
|
|
397
|
-
|
|
398
330
|
__proto._getElement = function () {
|
|
399
331
|
return React.cloneElement(React.Children.only(this.props.children), {
|
|
400
332
|
ref: this._elRef
|
|
401
333
|
});
|
|
402
334
|
};
|
|
403
|
-
|
|
404
335
|
return StrictPanel;
|
|
405
336
|
}(React.Component);
|
|
406
337
|
|
|
407
|
-
var NonStrictPanel =
|
|
408
|
-
/*#__PURE__*/
|
|
409
|
-
function (_super) {
|
|
338
|
+
var NonStrictPanel = /*#__PURE__*/function (_super) {
|
|
410
339
|
__extends(NonStrictPanel, _super);
|
|
411
|
-
|
|
412
340
|
function NonStrictPanel() {
|
|
413
341
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
414
|
-
|
|
415
342
|
_this._hide = false;
|
|
416
343
|
return _this;
|
|
417
344
|
}
|
|
418
|
-
|
|
419
345
|
var __proto = NonStrictPanel.prototype;
|
|
420
346
|
Object.defineProperty(__proto, "nativeElement", {
|
|
421
347
|
get: function () {
|
|
@@ -431,19 +357,15 @@ function (_super) {
|
|
|
431
357
|
enumerable: false,
|
|
432
358
|
configurable: true
|
|
433
359
|
});
|
|
434
|
-
|
|
435
360
|
__proto.render = function () {
|
|
436
361
|
return this._hide ? React.createElement(React.Fragment, null) : this.props.children;
|
|
437
362
|
};
|
|
438
|
-
|
|
439
363
|
__proto.show = function () {
|
|
440
364
|
this._hide = false;
|
|
441
365
|
};
|
|
442
|
-
|
|
443
366
|
__proto.hide = function () {
|
|
444
367
|
this._hide = true;
|
|
445
368
|
};
|
|
446
|
-
|
|
447
369
|
return NonStrictPanel;
|
|
448
370
|
}(React.Component);
|
|
449
371
|
|
|
@@ -455,13 +377,10 @@ var ViewportSlot = React.memo(function (props) {
|
|
|
455
377
|
return React.createElement(React.Fragment, null, props.children);
|
|
456
378
|
});
|
|
457
379
|
|
|
458
|
-
var ReactElementProvider =
|
|
459
|
-
/*#__PURE__*/
|
|
460
|
-
function () {
|
|
380
|
+
var ReactElementProvider = /*#__PURE__*/function () {
|
|
461
381
|
function ReactElementProvider(el) {
|
|
462
382
|
this._el = el;
|
|
463
383
|
}
|
|
464
|
-
|
|
465
384
|
var __proto = ReactElementProvider.prototype;
|
|
466
385
|
Object.defineProperty(__proto, "element", {
|
|
467
386
|
get: function () {
|
|
@@ -477,36 +396,26 @@ function () {
|
|
|
477
396
|
enumerable: false,
|
|
478
397
|
configurable: true
|
|
479
398
|
});
|
|
480
|
-
|
|
481
399
|
__proto.show = function () {
|
|
482
400
|
this._el.show();
|
|
483
401
|
};
|
|
484
|
-
|
|
485
402
|
__proto.hide = function () {
|
|
486
403
|
this._el.hide();
|
|
487
404
|
};
|
|
488
|
-
|
|
489
405
|
return ReactElementProvider;
|
|
490
406
|
}();
|
|
491
407
|
|
|
492
|
-
var Flicking =
|
|
493
|
-
/*#__PURE__*/
|
|
494
|
-
function (_super) {
|
|
408
|
+
var Flicking = /*#__PURE__*/function (_super) {
|
|
495
409
|
__extends(Flicking, _super);
|
|
496
|
-
|
|
497
410
|
function Flicking(props) {
|
|
498
411
|
var _this = _super.call(this, props) || this;
|
|
499
|
-
|
|
500
412
|
_this._panels = [];
|
|
501
413
|
_this._renderEmitter = new Component();
|
|
502
|
-
|
|
503
414
|
var children = _this._getChildren();
|
|
504
|
-
|
|
505
415
|
_this._panels = _this._createPanelRefs(props, children);
|
|
506
416
|
_this._prevChildren = children;
|
|
507
417
|
return _this;
|
|
508
418
|
}
|
|
509
|
-
|
|
510
419
|
var __proto = Flicking.prototype;
|
|
511
420
|
Object.defineProperty(__proto, "reactPanels", {
|
|
512
421
|
get: function () {
|
|
@@ -524,7 +433,6 @@ function (_super) {
|
|
|
524
433
|
enumerable: false,
|
|
525
434
|
configurable: true
|
|
526
435
|
});
|
|
527
|
-
|
|
528
436
|
__proto.componentDidMount = function () {
|
|
529
437
|
var props = this.props;
|
|
530
438
|
var rendererOptions = {
|
|
@@ -538,134 +446,103 @@ function (_super) {
|
|
|
538
446
|
externalRenderer: new ReactRenderer(rendererOptions)
|
|
539
447
|
}));
|
|
540
448
|
this._vanillaFlicking = flicking;
|
|
541
|
-
|
|
542
449
|
var children = this._getChildren();
|
|
543
|
-
|
|
544
450
|
this._jsxDiffer = new ListDiffer(children, function (panel) {
|
|
545
451
|
return panel.key;
|
|
546
452
|
});
|
|
547
453
|
this._pluginsDiffer = new ListDiffer();
|
|
548
454
|
this._prevChildren = children;
|
|
549
|
-
|
|
550
455
|
this._bindEvents();
|
|
551
|
-
|
|
552
456
|
this._checkPlugins();
|
|
553
|
-
|
|
554
457
|
if (props.status) {
|
|
555
458
|
flicking.setStatus(props.status);
|
|
556
459
|
}
|
|
557
460
|
};
|
|
558
|
-
|
|
559
461
|
__proto.componentWillUnmount = function () {
|
|
560
462
|
var _a;
|
|
561
|
-
|
|
562
463
|
(_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
563
464
|
};
|
|
564
|
-
|
|
565
465
|
__proto.shouldComponentUpdate = function (nextProps) {
|
|
566
466
|
var vanillaFlicking = this._vanillaFlicking;
|
|
567
467
|
var prevProps = this.props;
|
|
568
468
|
if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
|
|
569
|
-
|
|
570
469
|
var children = nextProps.children,
|
|
571
|
-
|
|
572
|
-
|
|
470
|
+
restProps = __rest(nextProps, ["children"]);
|
|
573
471
|
for (var key in restProps) {
|
|
574
472
|
if (prevProps[key] !== nextProps[key]) {
|
|
575
473
|
return true;
|
|
576
474
|
}
|
|
577
475
|
}
|
|
578
|
-
|
|
579
476
|
var prevChildren = this._prevChildren;
|
|
580
|
-
|
|
581
477
|
var nextChildren = this._getChildren(children);
|
|
582
|
-
|
|
583
478
|
if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
|
|
584
479
|
return false;
|
|
585
480
|
};
|
|
586
|
-
|
|
587
481
|
__proto.beforeRender = function () {
|
|
588
482
|
var vanillaFlicking = this._vanillaFlicking;
|
|
589
483
|
var props = this.props;
|
|
590
|
-
var prevChildren = this._prevChildren;
|
|
484
|
+
var prevChildren = this._prevChildren;
|
|
485
|
+
// Ignore updates before init, they will be updated after "ready" event's force update
|
|
591
486
|
// Also, prevent updates when another update is already queued.
|
|
592
487
|
// This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode.
|
|
593
|
-
|
|
594
488
|
if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return;
|
|
595
|
-
|
|
596
489
|
var nextChildren = this._getChildren(props.children);
|
|
597
|
-
|
|
598
490
|
if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
|
|
599
491
|
this._panels = this._createPanelRefs(props, nextChildren);
|
|
600
492
|
this._diffResult = this._jsxDiffer.update(nextChildren);
|
|
601
493
|
this._prevChildren = nextChildren;
|
|
602
494
|
}
|
|
603
495
|
};
|
|
604
|
-
|
|
605
496
|
__proto.componentDidUpdate = function () {
|
|
606
497
|
var flicking = this._vanillaFlicking;
|
|
607
498
|
var renderEmitter = this._renderEmitter;
|
|
608
499
|
var diffResult = this._diffResult;
|
|
609
|
-
|
|
610
500
|
this._checkPlugins();
|
|
611
|
-
|
|
612
501
|
renderEmitter.trigger("render");
|
|
613
|
-
flicking.camera.updateOffset();
|
|
614
|
-
|
|
502
|
+
flicking.camera.updateOffset();
|
|
503
|
+
// Omit 'virtual', as it can't have any setter
|
|
615
504
|
var _a = this.props;
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
505
|
+
_a.virtual;
|
|
506
|
+
var props = __rest(_a, ["virtual"]);
|
|
619
507
|
for (var key in props) {
|
|
620
508
|
if (key in flicking && flicking[key] !== props[key]) {
|
|
621
509
|
flicking[key] = props[key];
|
|
622
510
|
}
|
|
623
511
|
}
|
|
624
|
-
|
|
625
512
|
if (!diffResult || !flicking.initialized) return;
|
|
626
513
|
VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
|
|
627
514
|
this._diffResult = null;
|
|
628
515
|
};
|
|
629
|
-
|
|
630
516
|
__proto.render = function () {
|
|
631
517
|
var _this = this;
|
|
632
|
-
|
|
633
518
|
var _a, _b;
|
|
634
|
-
|
|
635
519
|
var props = this.props;
|
|
636
520
|
var Viewport = props.viewportTag;
|
|
637
521
|
var Camera = props.cameraTag;
|
|
638
522
|
var attributes = {};
|
|
639
523
|
var flicking = this._vanillaFlicking;
|
|
640
524
|
this.beforeRender();
|
|
641
|
-
|
|
642
525
|
for (var name in props) {
|
|
643
526
|
if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
|
|
644
527
|
attributes[name] = props[name];
|
|
645
528
|
}
|
|
646
529
|
}
|
|
647
|
-
|
|
648
530
|
var initialized = flicking && flicking.initialized;
|
|
649
531
|
var viewportClasses = ["flicking-viewport"];
|
|
650
532
|
var cameraClasses = ["flicking-camera"];
|
|
651
533
|
var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true;
|
|
652
|
-
|
|
653
534
|
if (!isHorizontal) {
|
|
654
535
|
viewportClasses.push("vertical");
|
|
655
536
|
}
|
|
656
|
-
|
|
657
537
|
if (props.hideBeforeInit && !initialized) {
|
|
658
538
|
viewportClasses.push("flicking-hidden");
|
|
659
539
|
}
|
|
660
|
-
|
|
661
540
|
if (attributes.className) {
|
|
662
541
|
viewportClasses.push(attributes.className);
|
|
663
542
|
}
|
|
664
|
-
|
|
665
543
|
if (props.cameraClass) {
|
|
666
544
|
cameraClasses.push(props.cameraClass);
|
|
667
545
|
}
|
|
668
|
-
|
|
669
546
|
var cameraProps = !initialized && props.firstPanelSize ? {
|
|
670
547
|
style: {
|
|
671
548
|
transform: VanillaFlicking.getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
|
|
@@ -681,10 +558,8 @@ function (_super) {
|
|
|
681
558
|
className: cameraClasses.join(" ")
|
|
682
559
|
}, cameraProps), panels), this._getViewportSlot());
|
|
683
560
|
};
|
|
684
|
-
|
|
685
561
|
__proto._createPanelRefs = function (props, children) {
|
|
686
562
|
var _a;
|
|
687
|
-
|
|
688
563
|
var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1;
|
|
689
564
|
return panelsPerView > 0 && !!props.virtual ? VanillaFlicking.range(panelsPerView + 1).map(function () {
|
|
690
565
|
return React.createRef();
|
|
@@ -692,10 +567,8 @@ function (_super) {
|
|
|
692
567
|
return React.createRef();
|
|
693
568
|
});
|
|
694
569
|
};
|
|
695
|
-
|
|
696
570
|
__proto._bindEvents = function () {
|
|
697
571
|
var _this = this;
|
|
698
|
-
|
|
699
572
|
var flicking = this._vanillaFlicking;
|
|
700
573
|
Object.keys(VanillaFlicking.EVENTS).forEach(function (eventKey) {
|
|
701
574
|
var eventName = VanillaFlicking.EVENTS[eventKey];
|
|
@@ -710,16 +583,13 @@ function (_super) {
|
|
|
710
583
|
_this.forceUpdate();
|
|
711
584
|
});
|
|
712
585
|
};
|
|
713
|
-
|
|
714
586
|
__proto._checkPlugins = function () {
|
|
715
587
|
var flicking = this._vanillaFlicking;
|
|
716
|
-
|
|
717
588
|
var _a = this._pluginsDiffer.update(this.props.plugins),
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
589
|
+
list = _a.list,
|
|
590
|
+
added = _a.added,
|
|
591
|
+
removed = _a.removed,
|
|
592
|
+
prevList = _a.prevList;
|
|
723
593
|
flicking.addPlugins.apply(flicking, added.map(function (index) {
|
|
724
594
|
return list[index];
|
|
725
595
|
}));
|
|
@@ -727,12 +597,10 @@ function (_super) {
|
|
|
727
597
|
return prevList[index];
|
|
728
598
|
}));
|
|
729
599
|
};
|
|
730
|
-
|
|
731
600
|
__proto._hasSameChildren = function (prevChildren, nextChildren) {
|
|
732
601
|
if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
|
|
733
602
|
var same = prevChildren.every(function (child, idx) {
|
|
734
603
|
var nextChild = nextChildren[idx];
|
|
735
|
-
|
|
736
604
|
if (child.key && nextChild.key) {
|
|
737
605
|
return child.key === nextChild.key;
|
|
738
606
|
} else {
|
|
@@ -741,40 +609,32 @@ function (_super) {
|
|
|
741
609
|
});
|
|
742
610
|
return same;
|
|
743
611
|
};
|
|
744
|
-
|
|
745
612
|
__proto._getChildren = function (children) {
|
|
746
613
|
var _this = this;
|
|
747
|
-
|
|
748
614
|
if (children === void 0) {
|
|
749
615
|
children = this.props.children;
|
|
750
616
|
}
|
|
751
|
-
|
|
752
617
|
return React.Children.toArray(children).filter(function (child) {
|
|
753
618
|
return child.type !== ViewportSlot;
|
|
754
619
|
}).reduce(function (all, child) {
|
|
755
620
|
return __spreadArray(__spreadArray([], all, true), _this._unpackFragment(child), true);
|
|
756
621
|
}, []);
|
|
757
622
|
};
|
|
758
|
-
|
|
759
623
|
__proto._getViewportSlot = function () {
|
|
760
624
|
return React.Children.toArray(this.props.children).filter(function (child) {
|
|
761
625
|
return child.type === ViewportSlot;
|
|
762
626
|
});
|
|
763
627
|
};
|
|
764
|
-
|
|
765
628
|
__proto._unpackFragment = function (child) {
|
|
766
629
|
var _this = this;
|
|
767
|
-
|
|
768
630
|
return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) {
|
|
769
631
|
return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true);
|
|
770
632
|
}, []) : [child];
|
|
771
633
|
};
|
|
772
|
-
|
|
773
634
|
__proto._getVirtualPanels = function () {
|
|
774
635
|
var _this = this;
|
|
775
|
-
|
|
776
636
|
var _a = this.props.virtual.panelClass,
|
|
777
|
-
|
|
637
|
+
panelClass = _a === void 0 ? "flicking-panel" : _a;
|
|
778
638
|
var panelsPerView = this.props.panelsPerView;
|
|
779
639
|
var flicking = this._vanillaFlicking;
|
|
780
640
|
var initialized = flicking && flicking.initialized;
|
|
@@ -795,12 +655,9 @@ function (_super) {
|
|
|
795
655
|
});
|
|
796
656
|
});
|
|
797
657
|
};
|
|
798
|
-
|
|
799
658
|
__proto._getPanels = function () {
|
|
800
659
|
var _this = this;
|
|
801
|
-
|
|
802
660
|
var origChildren = this._getChildren();
|
|
803
|
-
|
|
804
661
|
var vanillaFlicking = this._vanillaFlicking;
|
|
805
662
|
var diffResult = this._diffResult;
|
|
806
663
|
var children = vanillaFlicking && vanillaFlicking.initialized ? diffResult ? VanillaFlicking.getRenderingPanels(vanillaFlicking, diffResult) : VanillaFlicking.getRenderingPanels(vanillaFlicking, ListDiffer.diff(origChildren, origChildren)) : origChildren;
|
|
@@ -816,19 +673,14 @@ function (_super) {
|
|
|
816
673
|
}, child);
|
|
817
674
|
});
|
|
818
675
|
};
|
|
819
|
-
|
|
820
676
|
__proto._isFragment = function (child) {
|
|
821
677
|
if (child.type) {
|
|
822
678
|
return child.type === React.Fragment;
|
|
823
679
|
}
|
|
824
|
-
|
|
825
680
|
return child === React.Fragment;
|
|
826
681
|
};
|
|
827
|
-
|
|
828
682
|
Flicking.defaultProps = DEFAULT_PROPS;
|
|
829
|
-
|
|
830
683
|
__decorate([VanillaFlicking.withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
|
|
831
|
-
|
|
832
684
|
return Flicking;
|
|
833
685
|
}(React.Component);
|
|
834
686
|
|