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