@plasmicpkgs/lottie-react 0.0.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.
@@ -0,0 +1,664 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
+
7
+ var host = require('@plasmicapp/host');
8
+ var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
9
+ var Lottie = _interopDefault(require('lottie-react'));
10
+ var React = require('react');
11
+ var React__default = _interopDefault(React);
12
+
13
+ var CheckExample = {
14
+ v: "4.10.1",
15
+ fr: 30,
16
+ ip: 0,
17
+ op: 40,
18
+ w: 80,
19
+ h: 80,
20
+ nm: "Success Checkmark",
21
+ ddd: 0,
22
+ assets: [],
23
+ layers: [{
24
+ ddd: 0,
25
+ ind: 1,
26
+ ty: 4,
27
+ nm: "Check Mark",
28
+ sr: 1,
29
+ ks: {
30
+ o: {
31
+ a: 0,
32
+ k: 100,
33
+ ix: 11
34
+ },
35
+ r: {
36
+ a: 0,
37
+ k: 0,
38
+ ix: 10
39
+ },
40
+ p: {
41
+ a: 0,
42
+ k: [40, 40, 0],
43
+ ix: 2
44
+ },
45
+ a: {
46
+ a: 0,
47
+ k: [-1.312, 6, 0],
48
+ ix: 1
49
+ },
50
+ s: {
51
+ a: 0,
52
+ k: [100, 100, 100],
53
+ ix: 6
54
+ }
55
+ },
56
+ ao: 0,
57
+ shapes: [{
58
+ ty: "gr",
59
+ it: [{
60
+ ind: 0,
61
+ ty: "sh",
62
+ ix: 1,
63
+ ks: {
64
+ a: 0,
65
+ k: {
66
+ i: [[0, 0], [0, 0], [0, 0]],
67
+ o: [[0, 0], [0, 0], [0, 0]],
68
+ v: [[-15.75, 8], [-8, 16], [13.125, -4]],
69
+ c: false
70
+ },
71
+ ix: 2
72
+ },
73
+ nm: "Path 1",
74
+ mn: "ADBE Vector Shape - Group",
75
+ hd: false
76
+ }, {
77
+ ty: "tm",
78
+ s: {
79
+ a: 1,
80
+ k: [{
81
+ i: {
82
+ x: [0.667],
83
+ y: [1]
84
+ },
85
+ o: {
86
+ x: [0.333],
87
+ y: [0]
88
+ },
89
+ n: ["0p667_1_0p333_0"],
90
+ t: 25,
91
+ s: [0],
92
+ e: [100]
93
+ }, {
94
+ t: 33
95
+ }],
96
+ ix: 1
97
+ },
98
+ e: {
99
+ a: 0,
100
+ k: 0,
101
+ ix: 2
102
+ },
103
+ o: {
104
+ a: 0,
105
+ k: 0,
106
+ ix: 3
107
+ },
108
+ m: 1,
109
+ ix: 2,
110
+ nm: "Trim Paths 1",
111
+ mn: "ADBE Vector Filter - Trim",
112
+ hd: false
113
+ }, {
114
+ ty: "st",
115
+ c: {
116
+ a: 0,
117
+ k: [1, 1, 1, 1],
118
+ ix: 3
119
+ },
120
+ o: {
121
+ a: 0,
122
+ k: 100,
123
+ ix: 4
124
+ },
125
+ w: {
126
+ a: 0,
127
+ k: 3,
128
+ ix: 5
129
+ },
130
+ lc: 2,
131
+ lj: 2,
132
+ nm: "Stroke 1",
133
+ mn: "ADBE Vector Graphic - Stroke",
134
+ hd: false
135
+ }, {
136
+ ty: "tr",
137
+ p: {
138
+ a: 0,
139
+ k: [0, 0],
140
+ ix: 2
141
+ },
142
+ a: {
143
+ a: 0,
144
+ k: [0, 0],
145
+ ix: 1
146
+ },
147
+ s: {
148
+ a: 0,
149
+ k: [100, 100],
150
+ ix: 3
151
+ },
152
+ r: {
153
+ a: 0,
154
+ k: 0,
155
+ ix: 6
156
+ },
157
+ o: {
158
+ a: 0,
159
+ k: 100,
160
+ ix: 7
161
+ },
162
+ sk: {
163
+ a: 0,
164
+ k: 0,
165
+ ix: 4
166
+ },
167
+ sa: {
168
+ a: 0,
169
+ k: 0,
170
+ ix: 5
171
+ },
172
+ nm: "Transform"
173
+ }],
174
+ nm: "Shape 1",
175
+ np: 3,
176
+ cix: 2,
177
+ ix: 1,
178
+ mn: "ADBE Vector Group",
179
+ hd: false
180
+ }],
181
+ ip: 0,
182
+ op: 40,
183
+ st: 0,
184
+ bm: 0
185
+ }, {
186
+ ddd: 0,
187
+ ind: 2,
188
+ ty: 4,
189
+ nm: "Circle Flash",
190
+ sr: 1,
191
+ ks: {
192
+ o: {
193
+ a: 1,
194
+ k: [{
195
+ i: {
196
+ x: [0.833],
197
+ y: [0.833]
198
+ },
199
+ o: {
200
+ x: [0.167],
201
+ y: [0.167]
202
+ },
203
+ n: ["0p833_0p833_0p167_0p167"],
204
+ t: 25,
205
+ s: [0],
206
+ e: [98]
207
+ }, {
208
+ i: {
209
+ x: [0.833],
210
+ y: [0.833]
211
+ },
212
+ o: {
213
+ x: [0.167],
214
+ y: [0.167]
215
+ },
216
+ n: ["0p833_0p833_0p167_0p167"],
217
+ t: 30,
218
+ s: [98],
219
+ e: [0]
220
+ }, {
221
+ t: 38
222
+ }],
223
+ ix: 11
224
+ },
225
+ r: {
226
+ a: 0,
227
+ k: 0,
228
+ ix: 10
229
+ },
230
+ p: {
231
+ a: 0,
232
+ k: [40, 40, 0],
233
+ ix: 2
234
+ },
235
+ a: {
236
+ a: 0,
237
+ k: [0, 0, 0],
238
+ ix: 1
239
+ },
240
+ s: {
241
+ a: 1,
242
+ k: [{
243
+ i: {
244
+ x: [0.667, 0.667, 0.667],
245
+ y: [1, 1, 1]
246
+ },
247
+ o: {
248
+ x: [0.333, 0.333, 0.333],
249
+ y: [0, 0, 0]
250
+ },
251
+ n: ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"],
252
+ t: 25,
253
+ s: [0, 0, 100],
254
+ e: [100, 100, 100]
255
+ }, {
256
+ t: 30
257
+ }],
258
+ ix: 6
259
+ }
260
+ },
261
+ ao: 0,
262
+ shapes: [{
263
+ d: 1,
264
+ ty: "el",
265
+ s: {
266
+ a: 0,
267
+ k: [64, 64],
268
+ ix: 2
269
+ },
270
+ p: {
271
+ a: 0,
272
+ k: [0, 0],
273
+ ix: 3
274
+ },
275
+ nm: "Ellipse Path 1",
276
+ mn: "ADBE Vector Shape - Ellipse",
277
+ hd: false
278
+ }, {
279
+ ty: "fl",
280
+ c: {
281
+ a: 0,
282
+ k: [0.529866635799, 0.961458325386, 0.448091417551, 1],
283
+ ix: 4
284
+ },
285
+ o: {
286
+ a: 0,
287
+ k: 100,
288
+ ix: 5
289
+ },
290
+ r: 1,
291
+ nm: "Fill 1",
292
+ mn: "ADBE Vector Graphic - Fill",
293
+ hd: false
294
+ }],
295
+ ip: 0,
296
+ op: 40,
297
+ st: 0,
298
+ bm: 0
299
+ }, {
300
+ ddd: 0,
301
+ ind: 3,
302
+ ty: 4,
303
+ nm: "Circle Stroke",
304
+ sr: 1,
305
+ ks: {
306
+ o: {
307
+ a: 0,
308
+ k: 100,
309
+ ix: 11
310
+ },
311
+ r: {
312
+ a: 0,
313
+ k: 0,
314
+ ix: 10
315
+ },
316
+ p: {
317
+ a: 0,
318
+ k: [39.022, 39.022, 0],
319
+ ix: 2
320
+ },
321
+ a: {
322
+ a: 0,
323
+ k: [0, 0, 0],
324
+ ix: 1
325
+ },
326
+ s: {
327
+ a: 1,
328
+ k: [{
329
+ i: {
330
+ x: [0.667, 0.667, 0.667],
331
+ y: [1, 1, 1]
332
+ },
333
+ o: {
334
+ x: [0.333, 0.333, 0.333],
335
+ y: [0, 0, 0]
336
+ },
337
+ n: ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"],
338
+ t: 16,
339
+ s: [100, 100, 100],
340
+ e: [80, 80, 100]
341
+ }, {
342
+ i: {
343
+ x: [0.667, 0.667, 0.667],
344
+ y: [1, 1, 1]
345
+ },
346
+ o: {
347
+ x: [0.333, 0.333, 0.333],
348
+ y: [0, 0, 0]
349
+ },
350
+ n: ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"],
351
+ t: 22,
352
+ s: [80, 80, 100],
353
+ e: [120, 120, 100]
354
+ }, {
355
+ i: {
356
+ x: [0.667, 0.667, 0.667],
357
+ y: [1, 1, 1]
358
+ },
359
+ o: {
360
+ x: [0.333, 0.333, 0.333],
361
+ y: [0, 0, 0]
362
+ },
363
+ n: ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"],
364
+ t: 25,
365
+ s: [120, 120, 100],
366
+ e: [100, 100, 100]
367
+ }, {
368
+ t: 29
369
+ }],
370
+ ix: 6
371
+ }
372
+ },
373
+ ao: 0,
374
+ shapes: [{
375
+ ty: "gr",
376
+ it: [{
377
+ d: 1,
378
+ ty: "el",
379
+ s: {
380
+ a: 0,
381
+ k: [60, 60],
382
+ ix: 2
383
+ },
384
+ p: {
385
+ a: 0,
386
+ k: [0, 0],
387
+ ix: 3
388
+ },
389
+ nm: "Ellipse Path 1",
390
+ mn: "ADBE Vector Shape - Ellipse",
391
+ hd: false
392
+ }, {
393
+ ty: "tm",
394
+ s: {
395
+ a: 1,
396
+ k: [{
397
+ i: {
398
+ x: [0.667],
399
+ y: [1]
400
+ },
401
+ o: {
402
+ x: [0.333],
403
+ y: [0]
404
+ },
405
+ n: ["0p667_1_0p333_0"],
406
+ t: 0,
407
+ s: [0],
408
+ e: [100]
409
+ }, {
410
+ t: 16
411
+ }],
412
+ ix: 1
413
+ },
414
+ e: {
415
+ a: 0,
416
+ k: 0,
417
+ ix: 2
418
+ },
419
+ o: {
420
+ a: 0,
421
+ k: 0,
422
+ ix: 3
423
+ },
424
+ m: 1,
425
+ ix: 2,
426
+ nm: "Trim Paths 1",
427
+ mn: "ADBE Vector Filter - Trim",
428
+ hd: false
429
+ }, {
430
+ ty: "st",
431
+ c: {
432
+ a: 0,
433
+ k: [0.427450984716, 0.800000011921, 0.35686275363, 1],
434
+ ix: 3
435
+ },
436
+ o: {
437
+ a: 0,
438
+ k: 100,
439
+ ix: 4
440
+ },
441
+ w: {
442
+ a: 0,
443
+ k: 3,
444
+ ix: 5
445
+ },
446
+ lc: 2,
447
+ lj: 2,
448
+ nm: "Stroke 1",
449
+ mn: "ADBE Vector Graphic - Stroke",
450
+ hd: false
451
+ }, {
452
+ ty: "tr",
453
+ p: {
454
+ a: 0,
455
+ k: [0.978, 0.978],
456
+ ix: 2
457
+ },
458
+ a: {
459
+ a: 0,
460
+ k: [0, 0],
461
+ ix: 1
462
+ },
463
+ s: {
464
+ a: 0,
465
+ k: [100, 100],
466
+ ix: 3
467
+ },
468
+ r: {
469
+ a: 0,
470
+ k: 0,
471
+ ix: 6
472
+ },
473
+ o: {
474
+ a: 0,
475
+ k: 100,
476
+ ix: 7
477
+ },
478
+ sk: {
479
+ a: 0,
480
+ k: 0,
481
+ ix: 4
482
+ },
483
+ sa: {
484
+ a: 0,
485
+ k: 0,
486
+ ix: 5
487
+ },
488
+ nm: "Transform"
489
+ }],
490
+ nm: "Ellipse 1",
491
+ np: 3,
492
+ cix: 2,
493
+ ix: 1,
494
+ mn: "ADBE Vector Group",
495
+ hd: false
496
+ }],
497
+ ip: 0,
498
+ op: 40,
499
+ st: 0,
500
+ bm: 0
501
+ }, {
502
+ ddd: 0,
503
+ ind: 4,
504
+ ty: 4,
505
+ nm: "Circle Green Fill",
506
+ sr: 1,
507
+ ks: {
508
+ o: {
509
+ a: 1,
510
+ k: [{
511
+ i: {
512
+ x: [0.833],
513
+ y: [0.833]
514
+ },
515
+ o: {
516
+ x: [0.167],
517
+ y: [0.167]
518
+ },
519
+ n: ["0p833_0p833_0p167_0p167"],
520
+ t: 21,
521
+ s: [0],
522
+ e: [98]
523
+ }, {
524
+ t: 28
525
+ }],
526
+ ix: 11
527
+ },
528
+ r: {
529
+ a: 0,
530
+ k: 0,
531
+ ix: 10
532
+ },
533
+ p: {
534
+ a: 0,
535
+ k: [40, 40, 0],
536
+ ix: 2
537
+ },
538
+ a: {
539
+ a: 0,
540
+ k: [0, 0, 0],
541
+ ix: 1
542
+ },
543
+ s: {
544
+ a: 1,
545
+ k: [{
546
+ i: {
547
+ x: [0.667, 0.667, 0.667],
548
+ y: [1, 1, 1]
549
+ },
550
+ o: {
551
+ x: [0.333, 0.333, 0.333],
552
+ y: [0, 0, 0]
553
+ },
554
+ n: ["0p667_1_0p333_0", "0p667_1_0p333_0", "0p667_1_0p333_0"],
555
+ t: 21,
556
+ s: [0, 0, 100],
557
+ e: [100, 100, 100]
558
+ }, {
559
+ t: 28
560
+ }],
561
+ ix: 6
562
+ }
563
+ },
564
+ ao: 0,
565
+ shapes: [{
566
+ d: 1,
567
+ ty: "el",
568
+ s: {
569
+ a: 0,
570
+ k: [64, 64],
571
+ ix: 2
572
+ },
573
+ p: {
574
+ a: 0,
575
+ k: [0, 0],
576
+ ix: 3
577
+ },
578
+ nm: "Ellipse Path 1",
579
+ mn: "ADBE Vector Shape - Ellipse",
580
+ hd: false
581
+ }, {
582
+ ty: "fl",
583
+ c: {
584
+ a: 0,
585
+ k: [0.427450984716, 0.800000011921, 0.35686275363, 1],
586
+ ix: 4
587
+ },
588
+ o: {
589
+ a: 0,
590
+ k: 100,
591
+ ix: 5
592
+ },
593
+ r: 1,
594
+ nm: "Fill 1",
595
+ mn: "ADBE Vector Graphic - Fill",
596
+ hd: false
597
+ }],
598
+ ip: 0,
599
+ op: 40,
600
+ st: 0,
601
+ bm: 0
602
+ }]
603
+ };
604
+ function LottieWrapper(_ref) {
605
+ var className = _ref.className,
606
+ animationData = _ref.animationData,
607
+ loop = _ref.loop,
608
+ autoplay = _ref.autoplay,
609
+ _ref$preview = _ref.preview,
610
+ preview = _ref$preview === void 0 ? false : _ref$preview;
611
+ var inEditor = React.useContext(host.PlasmicCanvasContext);
612
+
613
+ if (!animationData) {
614
+ throw new Error("animationData is required");
615
+ }
616
+
617
+ return React__default.createElement(Lottie, {
618
+ className: className,
619
+ animationData: animationData,
620
+ loop: loop,
621
+ autoplay: inEditor ? preview : autoplay
622
+ });
623
+ }
624
+ var lottieWrapper = {
625
+ name: "hostless-lottie-react",
626
+ displayName: "Lottie",
627
+ importName: "LottieWrapper",
628
+ importPath: "@plasmicpkgs/lottie-react",
629
+ props: {
630
+ animationData: {
631
+ type: "object",
632
+ description: "The animation JSON data",
633
+ defaultValue: CheckExample
634
+ },
635
+ loop: {
636
+ type: "boolean",
637
+ description: "Whether to loop the animation",
638
+ defaultValueHint: true
639
+ },
640
+ autoplay: {
641
+ type: "boolean",
642
+ description: "Whether to autoplay the animation",
643
+ defaultValueHint: true
644
+ },
645
+ preview: {
646
+ type: "boolean",
647
+ description: "Whether to preview the animation in the editor",
648
+ defaultValueHint: false
649
+ }
650
+ }
651
+ };
652
+ function registerLottieWrapper(loader, customLottieWrapper) {
653
+ if (loader) {
654
+ loader.registerComponent(LottieWrapper, customLottieWrapper != null ? customLottieWrapper : lottieWrapper);
655
+ } else {
656
+ registerComponent(LottieWrapper, customLottieWrapper != null ? customLottieWrapper : lottieWrapper);
657
+ }
658
+ }
659
+
660
+ exports.CheckExample = CheckExample;
661
+ exports.LottieWrapper = LottieWrapper;
662
+ exports.lottieWrapper = lottieWrapper;
663
+ exports.registerLottieWrapper = registerLottieWrapper;
664
+ //# sourceMappingURL=lottie-react.cjs.development.js.map