@egjs/react-flicking 4.10.7 → 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/declaration/ReactRenderer.d.ts +1 -0
- package/dist/flicking.cjs.js +43 -185
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +43 -185
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.umd.js +43 -185
- package/dist/flicking.umd.js.map +1 -1
- package/package.json +4 -4
- package/src/react-flicking/ReactRenderer.ts +5 -0
package/dist/flicking.esm.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
|
import * as React from 'react';
|
|
10
10
|
import React__default from 'react';
|
|
@@ -14,7 +14,7 @@ import VanillaFlicking__default, { getFlickingAttached, ExternalRenderer, Virtua
|
|
|
14
14
|
export * from '@egjs/flicking';
|
|
15
15
|
import { findDOMNode } from '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 = 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,34 +279,30 @@ function (_super) {
|
|
|
333
279
|
});
|
|
334
280
|
});
|
|
335
281
|
};
|
|
336
|
-
|
|
282
|
+
__proto.destroy = function () {
|
|
283
|
+
_super.prototype.destroy.call(this);
|
|
284
|
+
this._reactFlicking.renderEmitter.off("render");
|
|
285
|
+
};
|
|
337
286
|
__proto._collectPanels = function () {
|
|
338
287
|
var flicking = getFlickingAttached(this._flicking);
|
|
339
288
|
var reactFlicking = this._reactFlicking;
|
|
340
289
|
var reactPanels = reactFlicking.reactPanels;
|
|
341
290
|
this._panels = this._strategy.collectPanels(flicking, reactPanels);
|
|
342
291
|
};
|
|
343
|
-
|
|
344
292
|
__proto._createPanel = function (externalComponent, options) {
|
|
345
293
|
return this._strategy.createPanel(externalComponent, options);
|
|
346
294
|
};
|
|
347
|
-
|
|
348
295
|
return ReactRenderer;
|
|
349
296
|
}(ExternalRenderer);
|
|
350
297
|
|
|
351
|
-
var StrictPanel =
|
|
352
|
-
/*#__PURE__*/
|
|
353
|
-
function (_super) {
|
|
298
|
+
var StrictPanel = /*#__PURE__*/function (_super) {
|
|
354
299
|
__extends(StrictPanel, _super);
|
|
355
|
-
|
|
356
300
|
function StrictPanel() {
|
|
357
301
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
358
|
-
|
|
359
302
|
_this._hide = false;
|
|
360
303
|
_this._elRef = React.createRef();
|
|
361
304
|
return _this;
|
|
362
305
|
}
|
|
363
|
-
|
|
364
306
|
var __proto = StrictPanel.prototype;
|
|
365
307
|
Object.defineProperty(__proto, "nativeElement", {
|
|
366
308
|
get: function () {
|
|
@@ -376,40 +318,30 @@ function (_super) {
|
|
|
376
318
|
enumerable: false,
|
|
377
319
|
configurable: true
|
|
378
320
|
});
|
|
379
|
-
|
|
380
321
|
__proto.render = function () {
|
|
381
322
|
return this._hide ? React.createElement(React.Fragment, null) : this._getElement();
|
|
382
323
|
};
|
|
383
|
-
|
|
384
324
|
__proto.show = function () {
|
|
385
325
|
this._hide = false;
|
|
386
326
|
};
|
|
387
|
-
|
|
388
327
|
__proto.hide = function () {
|
|
389
328
|
this._hide = true;
|
|
390
329
|
};
|
|
391
|
-
|
|
392
330
|
__proto._getElement = function () {
|
|
393
331
|
return React.cloneElement(React.Children.only(this.props.children), {
|
|
394
332
|
ref: this._elRef
|
|
395
333
|
});
|
|
396
334
|
};
|
|
397
|
-
|
|
398
335
|
return StrictPanel;
|
|
399
336
|
}(React.Component);
|
|
400
337
|
|
|
401
|
-
var NonStrictPanel =
|
|
402
|
-
/*#__PURE__*/
|
|
403
|
-
function (_super) {
|
|
338
|
+
var NonStrictPanel = /*#__PURE__*/function (_super) {
|
|
404
339
|
__extends(NonStrictPanel, _super);
|
|
405
|
-
|
|
406
340
|
function NonStrictPanel() {
|
|
407
341
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
408
|
-
|
|
409
342
|
_this._hide = false;
|
|
410
343
|
return _this;
|
|
411
344
|
}
|
|
412
|
-
|
|
413
345
|
var __proto = NonStrictPanel.prototype;
|
|
414
346
|
Object.defineProperty(__proto, "nativeElement", {
|
|
415
347
|
get: function () {
|
|
@@ -425,19 +357,15 @@ function (_super) {
|
|
|
425
357
|
enumerable: false,
|
|
426
358
|
configurable: true
|
|
427
359
|
});
|
|
428
|
-
|
|
429
360
|
__proto.render = function () {
|
|
430
361
|
return this._hide ? React.createElement(React.Fragment, null) : this.props.children;
|
|
431
362
|
};
|
|
432
|
-
|
|
433
363
|
__proto.show = function () {
|
|
434
364
|
this._hide = false;
|
|
435
365
|
};
|
|
436
|
-
|
|
437
366
|
__proto.hide = function () {
|
|
438
367
|
this._hide = true;
|
|
439
368
|
};
|
|
440
|
-
|
|
441
369
|
return NonStrictPanel;
|
|
442
370
|
}(React.Component);
|
|
443
371
|
|
|
@@ -449,13 +377,10 @@ var ViewportSlot = React__default.memo(function (props) {
|
|
|
449
377
|
return React__default.createElement(React__default.Fragment, null, props.children);
|
|
450
378
|
});
|
|
451
379
|
|
|
452
|
-
var ReactElementProvider =
|
|
453
|
-
/*#__PURE__*/
|
|
454
|
-
function () {
|
|
380
|
+
var ReactElementProvider = /*#__PURE__*/function () {
|
|
455
381
|
function ReactElementProvider(el) {
|
|
456
382
|
this._el = el;
|
|
457
383
|
}
|
|
458
|
-
|
|
459
384
|
var __proto = ReactElementProvider.prototype;
|
|
460
385
|
Object.defineProperty(__proto, "element", {
|
|
461
386
|
get: function () {
|
|
@@ -471,36 +396,26 @@ function () {
|
|
|
471
396
|
enumerable: false,
|
|
472
397
|
configurable: true
|
|
473
398
|
});
|
|
474
|
-
|
|
475
399
|
__proto.show = function () {
|
|
476
400
|
this._el.show();
|
|
477
401
|
};
|
|
478
|
-
|
|
479
402
|
__proto.hide = function () {
|
|
480
403
|
this._el.hide();
|
|
481
404
|
};
|
|
482
|
-
|
|
483
405
|
return ReactElementProvider;
|
|
484
406
|
}();
|
|
485
407
|
|
|
486
|
-
var Flicking =
|
|
487
|
-
/*#__PURE__*/
|
|
488
|
-
function (_super) {
|
|
408
|
+
var Flicking = /*#__PURE__*/function (_super) {
|
|
489
409
|
__extends(Flicking, _super);
|
|
490
|
-
|
|
491
410
|
function Flicking(props) {
|
|
492
411
|
var _this = _super.call(this, props) || this;
|
|
493
|
-
|
|
494
412
|
_this._panels = [];
|
|
495
413
|
_this._renderEmitter = new Component();
|
|
496
|
-
|
|
497
414
|
var children = _this._getChildren();
|
|
498
|
-
|
|
499
415
|
_this._panels = _this._createPanelRefs(props, children);
|
|
500
416
|
_this._prevChildren = children;
|
|
501
417
|
return _this;
|
|
502
418
|
}
|
|
503
|
-
|
|
504
419
|
var __proto = Flicking.prototype;
|
|
505
420
|
Object.defineProperty(__proto, "reactPanels", {
|
|
506
421
|
get: function () {
|
|
@@ -518,7 +433,6 @@ function (_super) {
|
|
|
518
433
|
enumerable: false,
|
|
519
434
|
configurable: true
|
|
520
435
|
});
|
|
521
|
-
|
|
522
436
|
__proto.componentDidMount = function () {
|
|
523
437
|
var props = this.props;
|
|
524
438
|
var rendererOptions = {
|
|
@@ -532,134 +446,103 @@ function (_super) {
|
|
|
532
446
|
externalRenderer: new ReactRenderer(rendererOptions)
|
|
533
447
|
}));
|
|
534
448
|
this._vanillaFlicking = flicking;
|
|
535
|
-
|
|
536
449
|
var children = this._getChildren();
|
|
537
|
-
|
|
538
450
|
this._jsxDiffer = new ListDiffer(children, function (panel) {
|
|
539
451
|
return panel.key;
|
|
540
452
|
});
|
|
541
453
|
this._pluginsDiffer = new ListDiffer();
|
|
542
454
|
this._prevChildren = children;
|
|
543
|
-
|
|
544
455
|
this._bindEvents();
|
|
545
|
-
|
|
546
456
|
this._checkPlugins();
|
|
547
|
-
|
|
548
457
|
if (props.status) {
|
|
549
458
|
flicking.setStatus(props.status);
|
|
550
459
|
}
|
|
551
460
|
};
|
|
552
|
-
|
|
553
461
|
__proto.componentWillUnmount = function () {
|
|
554
462
|
var _a;
|
|
555
|
-
|
|
556
463
|
(_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
557
464
|
};
|
|
558
|
-
|
|
559
465
|
__proto.shouldComponentUpdate = function (nextProps) {
|
|
560
466
|
var vanillaFlicking = this._vanillaFlicking;
|
|
561
467
|
var prevProps = this.props;
|
|
562
468
|
if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
|
|
563
|
-
|
|
564
469
|
var children = nextProps.children,
|
|
565
|
-
|
|
566
|
-
|
|
470
|
+
restProps = __rest(nextProps, ["children"]);
|
|
567
471
|
for (var key in restProps) {
|
|
568
472
|
if (prevProps[key] !== nextProps[key]) {
|
|
569
473
|
return true;
|
|
570
474
|
}
|
|
571
475
|
}
|
|
572
|
-
|
|
573
476
|
var prevChildren = this._prevChildren;
|
|
574
|
-
|
|
575
477
|
var nextChildren = this._getChildren(children);
|
|
576
|
-
|
|
577
478
|
if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
|
|
578
479
|
return false;
|
|
579
480
|
};
|
|
580
|
-
|
|
581
481
|
__proto.beforeRender = function () {
|
|
582
482
|
var vanillaFlicking = this._vanillaFlicking;
|
|
583
483
|
var props = this.props;
|
|
584
|
-
var prevChildren = this._prevChildren;
|
|
484
|
+
var prevChildren = this._prevChildren;
|
|
485
|
+
// Ignore updates before init, they will be updated after "ready" event's force update
|
|
585
486
|
// Also, prevent updates when another update is already queued.
|
|
586
487
|
// This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode.
|
|
587
|
-
|
|
588
488
|
if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return;
|
|
589
|
-
|
|
590
489
|
var nextChildren = this._getChildren(props.children);
|
|
591
|
-
|
|
592
490
|
if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
|
|
593
491
|
this._panels = this._createPanelRefs(props, nextChildren);
|
|
594
492
|
this._diffResult = this._jsxDiffer.update(nextChildren);
|
|
595
493
|
this._prevChildren = nextChildren;
|
|
596
494
|
}
|
|
597
495
|
};
|
|
598
|
-
|
|
599
496
|
__proto.componentDidUpdate = function () {
|
|
600
497
|
var flicking = this._vanillaFlicking;
|
|
601
498
|
var renderEmitter = this._renderEmitter;
|
|
602
499
|
var diffResult = this._diffResult;
|
|
603
|
-
|
|
604
500
|
this._checkPlugins();
|
|
605
|
-
|
|
606
501
|
renderEmitter.trigger("render");
|
|
607
|
-
flicking.camera.updateOffset();
|
|
608
|
-
|
|
502
|
+
flicking.camera.updateOffset();
|
|
503
|
+
// Omit 'virtual', as it can't have any setter
|
|
609
504
|
var _a = this.props;
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
505
|
+
_a.virtual;
|
|
506
|
+
var props = __rest(_a, ["virtual"]);
|
|
613
507
|
for (var key in props) {
|
|
614
508
|
if (key in flicking && flicking[key] !== props[key]) {
|
|
615
509
|
flicking[key] = props[key];
|
|
616
510
|
}
|
|
617
511
|
}
|
|
618
|
-
|
|
619
512
|
if (!diffResult || !flicking.initialized) return;
|
|
620
513
|
sync(flicking, diffResult, this.reactPanels);
|
|
621
514
|
this._diffResult = null;
|
|
622
515
|
};
|
|
623
|
-
|
|
624
516
|
__proto.render = function () {
|
|
625
517
|
var _this = this;
|
|
626
|
-
|
|
627
518
|
var _a, _b;
|
|
628
|
-
|
|
629
519
|
var props = this.props;
|
|
630
520
|
var Viewport = props.viewportTag;
|
|
631
521
|
var Camera = props.cameraTag;
|
|
632
522
|
var attributes = {};
|
|
633
523
|
var flicking = this._vanillaFlicking;
|
|
634
524
|
this.beforeRender();
|
|
635
|
-
|
|
636
525
|
for (var name in props) {
|
|
637
526
|
if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking__default.prototype)) {
|
|
638
527
|
attributes[name] = props[name];
|
|
639
528
|
}
|
|
640
529
|
}
|
|
641
|
-
|
|
642
530
|
var initialized = flicking && flicking.initialized;
|
|
643
531
|
var viewportClasses = ["flicking-viewport"];
|
|
644
532
|
var cameraClasses = ["flicking-camera"];
|
|
645
533
|
var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true;
|
|
646
|
-
|
|
647
534
|
if (!isHorizontal) {
|
|
648
535
|
viewportClasses.push("vertical");
|
|
649
536
|
}
|
|
650
|
-
|
|
651
537
|
if (props.hideBeforeInit && !initialized) {
|
|
652
538
|
viewportClasses.push("flicking-hidden");
|
|
653
539
|
}
|
|
654
|
-
|
|
655
540
|
if (attributes.className) {
|
|
656
541
|
viewportClasses.push(attributes.className);
|
|
657
542
|
}
|
|
658
|
-
|
|
659
543
|
if (props.cameraClass) {
|
|
660
544
|
cameraClasses.push(props.cameraClass);
|
|
661
545
|
}
|
|
662
|
-
|
|
663
546
|
var cameraProps = !initialized && props.firstPanelSize ? {
|
|
664
547
|
style: {
|
|
665
548
|
transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
|
|
@@ -675,10 +558,8 @@ function (_super) {
|
|
|
675
558
|
className: cameraClasses.join(" ")
|
|
676
559
|
}, cameraProps), panels), this._getViewportSlot());
|
|
677
560
|
};
|
|
678
|
-
|
|
679
561
|
__proto._createPanelRefs = function (props, children) {
|
|
680
562
|
var _a;
|
|
681
|
-
|
|
682
563
|
var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1;
|
|
683
564
|
return panelsPerView > 0 && !!props.virtual ? range(panelsPerView + 1).map(function () {
|
|
684
565
|
return React.createRef();
|
|
@@ -686,10 +567,8 @@ function (_super) {
|
|
|
686
567
|
return React.createRef();
|
|
687
568
|
});
|
|
688
569
|
};
|
|
689
|
-
|
|
690
570
|
__proto._bindEvents = function () {
|
|
691
571
|
var _this = this;
|
|
692
|
-
|
|
693
572
|
var flicking = this._vanillaFlicking;
|
|
694
573
|
Object.keys(EVENTS).forEach(function (eventKey) {
|
|
695
574
|
var eventName = EVENTS[eventKey];
|
|
@@ -704,16 +583,13 @@ function (_super) {
|
|
|
704
583
|
_this.forceUpdate();
|
|
705
584
|
});
|
|
706
585
|
};
|
|
707
|
-
|
|
708
586
|
__proto._checkPlugins = function () {
|
|
709
587
|
var flicking = this._vanillaFlicking;
|
|
710
|
-
|
|
711
588
|
var _a = this._pluginsDiffer.update(this.props.plugins),
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
589
|
+
list = _a.list,
|
|
590
|
+
added = _a.added,
|
|
591
|
+
removed = _a.removed,
|
|
592
|
+
prevList = _a.prevList;
|
|
717
593
|
flicking.addPlugins.apply(flicking, added.map(function (index) {
|
|
718
594
|
return list[index];
|
|
719
595
|
}));
|
|
@@ -721,12 +597,10 @@ function (_super) {
|
|
|
721
597
|
return prevList[index];
|
|
722
598
|
}));
|
|
723
599
|
};
|
|
724
|
-
|
|
725
600
|
__proto._hasSameChildren = function (prevChildren, nextChildren) {
|
|
726
601
|
if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
|
|
727
602
|
var same = prevChildren.every(function (child, idx) {
|
|
728
603
|
var nextChild = nextChildren[idx];
|
|
729
|
-
|
|
730
604
|
if (child.key && nextChild.key) {
|
|
731
605
|
return child.key === nextChild.key;
|
|
732
606
|
} else {
|
|
@@ -735,40 +609,32 @@ function (_super) {
|
|
|
735
609
|
});
|
|
736
610
|
return same;
|
|
737
611
|
};
|
|
738
|
-
|
|
739
612
|
__proto._getChildren = function (children) {
|
|
740
613
|
var _this = this;
|
|
741
|
-
|
|
742
614
|
if (children === void 0) {
|
|
743
615
|
children = this.props.children;
|
|
744
616
|
}
|
|
745
|
-
|
|
746
617
|
return React.Children.toArray(children).filter(function (child) {
|
|
747
618
|
return child.type !== ViewportSlot;
|
|
748
619
|
}).reduce(function (all, child) {
|
|
749
620
|
return __spreadArray(__spreadArray([], all, true), _this._unpackFragment(child), true);
|
|
750
621
|
}, []);
|
|
751
622
|
};
|
|
752
|
-
|
|
753
623
|
__proto._getViewportSlot = function () {
|
|
754
624
|
return React.Children.toArray(this.props.children).filter(function (child) {
|
|
755
625
|
return child.type === ViewportSlot;
|
|
756
626
|
});
|
|
757
627
|
};
|
|
758
|
-
|
|
759
628
|
__proto._unpackFragment = function (child) {
|
|
760
629
|
var _this = this;
|
|
761
|
-
|
|
762
630
|
return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) {
|
|
763
631
|
return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true);
|
|
764
632
|
}, []) : [child];
|
|
765
633
|
};
|
|
766
|
-
|
|
767
634
|
__proto._getVirtualPanels = function () {
|
|
768
635
|
var _this = this;
|
|
769
|
-
|
|
770
636
|
var _a = this.props.virtual.panelClass,
|
|
771
|
-
|
|
637
|
+
panelClass = _a === void 0 ? "flicking-panel" : _a;
|
|
772
638
|
var panelsPerView = this.props.panelsPerView;
|
|
773
639
|
var flicking = this._vanillaFlicking;
|
|
774
640
|
var initialized = flicking && flicking.initialized;
|
|
@@ -789,12 +655,9 @@ function (_super) {
|
|
|
789
655
|
});
|
|
790
656
|
});
|
|
791
657
|
};
|
|
792
|
-
|
|
793
658
|
__proto._getPanels = function () {
|
|
794
659
|
var _this = this;
|
|
795
|
-
|
|
796
660
|
var origChildren = this._getChildren();
|
|
797
|
-
|
|
798
661
|
var vanillaFlicking = this._vanillaFlicking;
|
|
799
662
|
var diffResult = this._diffResult;
|
|
800
663
|
var children = vanillaFlicking && vanillaFlicking.initialized ? diffResult ? getRenderingPanels(vanillaFlicking, diffResult) : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren)) : origChildren;
|
|
@@ -810,19 +673,14 @@ function (_super) {
|
|
|
810
673
|
}, child);
|
|
811
674
|
});
|
|
812
675
|
};
|
|
813
|
-
|
|
814
676
|
__proto._isFragment = function (child) {
|
|
815
677
|
if (child.type) {
|
|
816
678
|
return child.type === React.Fragment;
|
|
817
679
|
}
|
|
818
|
-
|
|
819
680
|
return child === React.Fragment;
|
|
820
681
|
};
|
|
821
|
-
|
|
822
682
|
Flicking.defaultProps = DEFAULT_PROPS;
|
|
823
|
-
|
|
824
683
|
__decorate([withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
|
|
825
|
-
|
|
826
684
|
return Flicking;
|
|
827
685
|
}(React.Component);
|
|
828
686
|
|