next-cloudinary 0.2.0 → 0.4.0

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.
@@ -1,788 +0,0 @@
1
- var Image = require('next/image');
2
- var urlGen = require('@cloudinary/url-gen');
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var Script = require('next/script');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
10
- var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
11
-
12
- function _extends() {
13
- _extends = Object.assign ? Object.assign.bind() : function (target) {
14
- for (var i = 1; i < arguments.length; i++) {
15
- var source = arguments[i];
16
-
17
- for (var key in source) {
18
- if (Object.prototype.hasOwnProperty.call(source, key)) {
19
- target[key] = source[key];
20
- }
21
- }
22
- }
23
-
24
- return target;
25
- };
26
- return _extends.apply(this, arguments);
27
- }
28
-
29
- function _objectWithoutPropertiesLoose(source, excluded) {
30
- if (source == null) return {};
31
- var target = {};
32
- var sourceKeys = Object.keys(source);
33
- var key, i;
34
-
35
- for (i = 0; i < sourceKeys.length; i++) {
36
- key = sourceKeys[i];
37
- if (excluded.indexOf(key) >= 0) continue;
38
- target[key] = source[key];
39
- }
40
-
41
- return target;
42
- }
43
-
44
- function _readOnlyError(name) {
45
- throw new TypeError("\"" + name + "\" is read-only");
46
- }
47
-
48
- var cld$1 = new urlGen.Cloudinary({
49
- cloud: {
50
- cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
51
- },
52
- url: {
53
- // Used to avoid issues with SSR particularly for the blurred placeholder
54
- analytics: false
55
- }
56
- });
57
- /**
58
- * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
59
- * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
60
- *
61
- * @param {string} src The cloudiary url or public id.
62
- *
63
- * @return {string} The images public id
64
- */
65
-
66
- function getPublicId(src) {
67
- if (src.includes('res.cloudinary.com')) {
68
- var regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
69
- var regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
70
- var withTransformations = src.match(regexWithTransformations);
71
- var withoutTransformations = src.match(regexWithoutTransformations);
72
-
73
- if (withTransformations) {
74
- return withTransformations[withTransformations.length - 1];
75
- } else if (withoutTransformations) {
76
- return withoutTransformations[withoutTransformations.length - 1];
77
- } else {
78
- console.warn("Not possible to retrieve the publicUrl from " + src + ", make sure it's a valid cloudinary image url.");
79
- }
80
- }
81
-
82
- return src;
83
- }
84
- /**
85
- * createPlaceholderUrl
86
- */
87
-
88
- function createPlaceholderUrl(_ref) {
89
- var src = _ref.src,
90
- placeholder = _ref.placeholder;
91
- var cldImage = cld$1.image(src).resize('c_limit,w_100').delivery('q_1').format('auto');
92
-
93
- if (placeholder === 'grayscale') {
94
- cldImage.effect('e_grayscale');
95
- }
96
-
97
- if (placeholder.includes('color:')) {
98
- var color = placeholder.split(':').splice(1).join(':');
99
- cldImage.effect('e_grayscale');
100
- cldImage.effect("e_colorize:60,co_" + color);
101
- }
102
-
103
- return cldImage.toURL();
104
- }
105
-
106
- var cropsGravityAuto = ['crop', 'fill', 'lfill', 'fill_pad', 'thumb'];
107
- var props$6 = ['crop', 'gravity'];
108
- function plugin$6(_temp) {
109
- var _ref = _temp === void 0 ? {} : _temp,
110
- cldImage = _ref.cldImage,
111
- options = _ref.options,
112
- cldOptions = _ref.cldOptions;
113
-
114
- var width = options.width,
115
- height = options.height;
116
- var _cldOptions$crop = cldOptions.crop,
117
- crop = _cldOptions$crop === void 0 ? 'limit' : _cldOptions$crop,
118
- gravity = cldOptions.gravity;
119
- var transformationString = "c_" + crop + ",w_" + width;
120
-
121
- if (!gravity && cropsGravityAuto.includes(crop)) {
122
- _readOnlyError("gravity");
123
- }
124
-
125
- if (!['limit'].includes(crop)) {
126
- transformationString = transformationString + ",h_" + height;
127
- }
128
-
129
- if (gravity) {
130
- if (gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
131
- console.warn('Auto gravity can only be used with crop, fill, lfill, fill_pad or thumb. Not applying gravity.');
132
- } else {
133
- transformationString = transformationString + ",g_" + gravity;
134
- }
135
- }
136
-
137
- cldImage.resize(transformationString);
138
- }
139
-
140
- var croppingPlugin = {
141
- __proto__: null,
142
- props: props$6,
143
- plugin: plugin$6
144
- };
145
-
146
- var params = ['art', {
147
- prop: 'autoBrightness',
148
- effect: 'auto_brightness'
149
- }, {
150
- prop: 'autoColor',
151
- effect: 'auto_color'
152
- }, {
153
- prop: 'autoContrast',
154
- effect: 'auto_contrast'
155
- }, {
156
- prop: 'assistColorblind',
157
- effect: 'assist_colorblind'
158
- }, 'blackwhite', 'blur', {
159
- prop: 'blurFaces',
160
- effect: 'blur_faces'
161
- }, {
162
- prop: 'blurRegion',
163
- effect: 'blur_region'
164
- }, 'brightness', {
165
- prop: 'brightnessHSB',
166
- effect: 'brightness_hsb'
167
- }, 'cartoonify', 'colorize', 'contrast', 'distort', {
168
- prop: 'fillLight',
169
- effect: 'fill_light'
170
- }, 'gamma', {
171
- prop: 'gradientFade',
172
- effect: 'gradient_fade'
173
- }, 'grayscale', 'improve', 'negate', {
174
- prop: 'oilPaint',
175
- effect: 'oil_paint'
176
- }, 'outline', 'pixelate', {
177
- prop: 'pixelateFaces',
178
- effect: 'pixelate_faces'
179
- }, {
180
- prop: 'pixelateRegion',
181
- effect: 'pixelate_region'
182
- }, 'redeye', {
183
- prop: 'replaceColor',
184
- effect: 'replace_color'
185
- }, 'saturation', 'sepia', 'shadow', 'sharpen', 'shear', {
186
- prop: 'simulateColorblind',
187
- effect: 'simulate_colorblind'
188
- }, 'tint', {
189
- prop: 'unsharpMask',
190
- effect: 'unsharp_mask'
191
- }, 'vectorize', 'vibrance', 'vignette'];
192
- var props$5 = params.map(function (param) {
193
- return param.prop || param;
194
- });
195
- function plugin$5(_temp) {
196
- var _ref = _temp === void 0 ? {} : _temp,
197
- cldImage = _ref.cldImage,
198
- cldOptions = _ref.cldOptions;
199
-
200
- params.forEach(function (key) {
201
- var prop = key.prop || key;
202
- var effect = key.effect || key;
203
-
204
- if (prop === 'oilPaint' && cldOptions[prop]) {
205
- console.log('cldOptions[prop]', cldOptions[prop]);
206
- }
207
-
208
- if (cldOptions[prop] === true) {
209
- cldImage.effect("e_" + effect);
210
- } else if (typeof cldOptions[prop] === 'string') {
211
- cldImage.effect("e_" + effect + ":" + cldOptions[prop]);
212
- }
213
- });
214
- }
215
-
216
- var effectsPlugin = {
217
- __proto__: null,
218
- props: props$5,
219
- plugin: plugin$5
220
- };
221
-
222
- // aspectRatio
223
- var primary = {
224
- aspectRatio: {
225
- qualifier: 'ar'
226
- },
227
- crop: {
228
- qualifier: 'c'
229
- },
230
- gravity: {
231
- qualifier: 'g'
232
- },
233
- height: {
234
- qualifier: 'h'
235
- },
236
- width: {
237
- qualifier: 'w'
238
- }
239
- };
240
- var position = {
241
- angle: {
242
- qualifier: 'a'
243
- },
244
- gravity: {
245
- qualifier: 'g'
246
- },
247
- x: {
248
- qualifier: 'x'
249
- },
250
- y: {
251
- qualifier: 'y'
252
- }
253
- };
254
- var text = {
255
- color: {
256
- qualifier: 'co',
257
- location: 'primary'
258
- },
259
- fontFamily: {
260
- qualifier: false
261
- },
262
- fontSize: {
263
- qualifier: false
264
- },
265
- fontWeight: {
266
- qualifier: false
267
- },
268
- letterSpacing: {
269
- qualifier: 'letter_spacing'
270
- },
271
- textDecoration: {
272
- qualifier: false
273
- }
274
- };
275
-
276
- var _excluded$2 = ["publicId", "position", "text", "effects"];
277
- var props$4 = ['overlays'];
278
- function plugin$4(_temp) {
279
- var _ref = _temp === void 0 ? {} : _temp,
280
- cldImage = _ref.cldImage,
281
- cldOptions = _ref.cldOptions;
282
-
283
- var _cldOptions$overlays = cldOptions.overlays,
284
- overlays = _cldOptions$overlays === void 0 ? [] : _cldOptions$overlays;
285
- var type = 'overlay';
286
- var typeQualifier = 'l';
287
- overlays.forEach(function (_ref2) {
288
- var publicId = _ref2.publicId,
289
- position$1 = _ref2.position,
290
- text$1 = _ref2.text,
291
- _ref2$effects = _ref2.effects,
292
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
293
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
294
-
295
- var hasPublicId = typeof publicId === 'string';
296
- var hasText = typeof text$1 === 'object';
297
- var hasPosition = typeof position$1 === 'object';
298
-
299
- if (!hasPublicId && !hasText) {
300
- console.warn("An " + type + " is missing Public ID or Text");
301
- return;
302
- } // Start to construct the transformation string using text or the public ID
303
- // if it's image-based
304
-
305
-
306
- var layerTransformation;
307
-
308
- if (hasText) {
309
- layerTransformation = typeQualifier + "_text";
310
- } else {
311
- layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':');
312
- } // Begin organizing transformations based on what it is and the location
313
- // it needs to be placed in the URL
314
-
315
-
316
- var primary$1 = [];
317
- var applied = []; // Gemeral options
318
-
319
- Object.keys(options).forEach(function (key) {
320
- if (!primary[key]) return;
321
- var qualifier = primary[key].qualifier;
322
- primary$1.push(qualifier + "_" + options[key]);
323
- }); // Layer effects
324
-
325
- layerEffects.forEach(function (effect) {
326
- Object.keys(effect).forEach(function (key) {
327
- if (!primary[key]) return;
328
- var qualifier = primary[key].qualifier;
329
- primary$1.push(qualifier + "_" + effect[key]);
330
- });
331
- }); // Text styling
332
-
333
- if (hasText) {
334
- var textTransformations = [];
335
- Object.keys(text$1).forEach(function (key) {
336
- if (!text[key]) return;
337
- var _qualifiersText$key = text[key],
338
- qualifier = _qualifiersText$key.qualifier,
339
- location = _qualifiersText$key.location;
340
-
341
- if (location === 'primary') {
342
- primary$1.push(qualifier + "_" + text$1[key]);
343
- } else {
344
- textTransformations.push(text$1[key]);
345
- }
346
- });
347
- layerTransformation = layerTransformation + ":" + textTransformations.join('_') + ":" + text$1.text;
348
- } // Positioning
349
-
350
-
351
- if (hasPosition) {
352
- Object.keys(position$1).forEach(function (key) {
353
- if (!position[key]) return;
354
- var qualifier = position[key].qualifier;
355
- applied.push(qualifier + "_" + position$1[key]);
356
- });
357
- } // Add all primary transformations
358
-
359
-
360
- layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
361
-
362
- layerTransformation = layerTransformation + "/fl_layer_apply";
363
-
364
- if (applied.length > 0) {
365
- layerTransformation = layerTransformation + "," + applied.join(',');
366
- } // Finally add it to the image
367
-
368
-
369
- cldImage.addTransformation(layerTransformation);
370
- });
371
- }
372
-
373
- var overlaysPlugin = {
374
- __proto__: null,
375
- props: props$4,
376
- plugin: plugin$4
377
- };
378
-
379
- var props$3 = ['rawTransformations'];
380
- function plugin$3(_temp) {
381
- var _ref = _temp === void 0 ? {} : _temp,
382
- cldImage = _ref.cldImage,
383
- cldOptions = _ref.cldOptions;
384
-
385
- var _cldOptions$rawTransf = cldOptions.rawTransformations,
386
- rawTransformations = _cldOptions$rawTransf === void 0 ? [] : _cldOptions$rawTransf;
387
- rawTransformations.forEach(function (transformation) {
388
- cldImage.addTransformation(transformation);
389
- });
390
- }
391
-
392
- var rawTransformationsPlugin = {
393
- __proto__: null,
394
- props: props$3,
395
- plugin: plugin$3
396
- };
397
-
398
- var props$2 = ['removeBackground'];
399
- function plugin$2(_temp) {
400
- var _ref = _temp === void 0 ? {} : _temp,
401
- cldImage = _ref.cldImage,
402
- cldOptions = _ref.cldOptions;
403
-
404
- var _cldOptions$removeBac = cldOptions.removeBackground,
405
- removeBackground = _cldOptions$removeBac === void 0 ? false : _cldOptions$removeBac;
406
-
407
- if (removeBackground) {
408
- cldImage.effect('e_background_removal');
409
- }
410
- }
411
-
412
- var removeBackgroundPlugin = {
413
- __proto__: null,
414
- props: props$2,
415
- plugin: plugin$2
416
- };
417
-
418
- var _excluded$1 = ["publicId", "type", "position", "text", "effects"];
419
- var props$1 = ['underlays'];
420
- function plugin$1(_temp) {
421
- var _ref = _temp === void 0 ? {} : _temp,
422
- cldImage = _ref.cldImage,
423
- cldOptions = _ref.cldOptions;
424
-
425
- var _cldOptions$underlays = cldOptions.underlays,
426
- underlays = _cldOptions$underlays === void 0 ? [] : _cldOptions$underlays;
427
- var typeQualifier = 'u';
428
- underlays.forEach(function (_ref2) {
429
- var publicId = _ref2.publicId,
430
- type = _ref2.type,
431
- position$1 = _ref2.position,
432
- _ref2$effects = _ref2.effects,
433
- layerEffects = _ref2$effects === void 0 ? [] : _ref2$effects,
434
- options = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
435
-
436
- var hasPublicId = typeof publicId === 'string';
437
- var hasPosition = typeof position$1 === 'object';
438
-
439
- if (!hasPublicId) {
440
- console.warn("An " + type + " is missing a Public ID");
441
- return;
442
- } // Start to construct the transformation string using text or the public ID
443
- // if it's image-based
444
-
445
-
446
- var layerTransformation = typeQualifier + "_" + publicId.replace(/\//g, ':'); // Begin organizing transformations based on what it is and the location
447
- // it needs to be placed in the URL
448
-
449
- var primary$1 = [];
450
- var applied = []; // Gemeral options
451
-
452
- Object.keys(options).forEach(function (key) {
453
- if (!primary[key]) return;
454
- var qualifier = primary[key].qualifier;
455
- primary$1.push(qualifier + "_" + options[key]);
456
- }); // Layer effects
457
-
458
- layerEffects.forEach(function (effect) {
459
- Object.keys(effect).forEach(function (key) {
460
- if (!primary[key]) return;
461
- var qualifier = primary[key].qualifier;
462
- primary$1.push(qualifier + "_" + effect[key]);
463
- });
464
- }); // Positioning
465
-
466
- if (hasPosition) {
467
- Object.keys(position$1).forEach(function (key) {
468
- if (!position[key]) return;
469
- var qualifier = position[key].qualifier;
470
- applied.push(qualifier + "_" + position$1[key]);
471
- });
472
- } // Add all primary transformations
473
-
474
-
475
- layerTransformation = layerTransformation + "," + primary$1.join(','); // Add all applied transformations
476
-
477
- layerTransformation = layerTransformation + "/fl_layer_apply";
478
-
479
- if (applied.length > 0) {
480
- layerTransformation = layerTransformation + "," + applied.join(',');
481
- } // Finally add it to the image
482
-
483
-
484
- cldImage.addTransformation(layerTransformation);
485
- });
486
- }
487
-
488
- var underlaysPlugin = {
489
- __proto__: null,
490
- props: props$1,
491
- plugin: plugin$1
492
- };
493
-
494
- var props = ['zoompan'];
495
- function plugin(_temp) {
496
- var _ref = _temp === void 0 ? {} : _temp,
497
- cldImage = _ref.cldImage,
498
- cldOptions = _ref.cldOptions;
499
-
500
- var _cldOptions$zoompan = cldOptions.zoompan,
501
- zoompan = _cldOptions$zoompan === void 0 ? false : _cldOptions$zoompan;
502
- var options = {};
503
-
504
- if (zoompan === true) {
505
- cldImage.effect('e_zoompan');
506
- } else if (typeof zoompan === 'string') {
507
- if (zoompan === 'loop') {
508
- cldImage.effect('e_zoompan');
509
- cldImage.effect('e_loop');
510
- } else {
511
- cldImage.effect("e_zoompan:" + zoompan);
512
- }
513
- } else if (typeof zoompan === 'object') {
514
- var zoompanEffect = 'e_zoompan';
515
-
516
- if (typeof zoompan.options === 'string') {
517
- zoompanEffect = "" + zoompanEffect + zoompan.options;
518
- }
519
-
520
- cldImage.effect(zoompanEffect);
521
- var loopEffect;
522
-
523
- if (zoompan.loop === true) {
524
- loopEffect = 'e_loop';
525
- } else if (typeof zoompan.loop === 'string') {
526
- loopEffect = "e_loop" + zoompan.loop;
527
- }
528
-
529
- if (loopEffect) {
530
- cldImage.effect(loopEffect);
531
- }
532
- }
533
-
534
- if (zoompan !== false) {
535
- options.format = 'gif';
536
- }
537
-
538
- return {
539
- options: options
540
- };
541
- }
542
-
543
- var zoompanPlugin = {
544
- __proto__: null,
545
- props: props,
546
- plugin: plugin
547
- };
548
-
549
- var cld;
550
- var transformationPlugins = [// Background Removal must always come first
551
- removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin, // Raw transformations needs to be last simply to make sure
552
- // it's always expected to applied the same way
553
- rawTransformationsPlugin];
554
- function cloudinaryLoader(defaultOptions, cldOptions, cldConfig) {
555
- if (cldConfig === void 0) {
556
- cldConfig = {};
557
- }
558
-
559
- if (!cld) {
560
- cld = new urlGen.Cloudinary(_extends({
561
- cloud: {
562
- cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
563
- },
564
- url: {
565
- // Used to avoid issues with SSR particularly for the blurred placeholder
566
- analytics: false
567
- }
568
- }, cldConfig));
569
- }
570
-
571
- var options = _extends({
572
- format: 'auto',
573
- quality: 'auto'
574
- }, defaultOptions);
575
-
576
- var publicId = getPublicId(options.src);
577
- var cldImage = cld.image(publicId);
578
- transformationPlugins.forEach(function (_ref) {
579
- var plugin = _ref.plugin;
580
-
581
- var _ref2 = plugin({
582
- cldImage: cldImage,
583
- options: options,
584
- cldOptions: cldOptions
585
- }) || {},
586
- pluginOptions = _ref2.options;
587
-
588
- if (pluginOptions != null && pluginOptions.format) {
589
- options.format = pluginOptions.format;
590
- }
591
- });
592
- return cldImage.format(options.format).delivery("q_" + options.quality).toURL();
593
- }
594
-
595
- var CldImage = function CldImage(props) {
596
- var CLD_OPTIONS = [];
597
- transformationPlugins.forEach(function (_ref) {
598
- var _ref$props = _ref.props,
599
- props = _ref$props === void 0 ? [] : _ref$props;
600
- props.forEach(function (prop) {
601
- if (CLD_OPTIONS.includes(prop)) {
602
- throw new Error("Option " + prop + " already exists!");
603
- }
604
-
605
- CLD_OPTIONS.push(prop);
606
- });
607
- }); // Construct the base Image component props by filtering out Cloudinary-specific props
608
-
609
- var imageProps = {};
610
- Object.keys(props).filter(function (key) {
611
- return !CLD_OPTIONS.includes(key);
612
- }).forEach(function (key) {
613
- return imageProps[key] = props[key];
614
- }); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
615
-
616
- var cldOptions = {};
617
- CLD_OPTIONS.forEach(function (key) {
618
- if (props[key]) {
619
- cldOptions[key] = props[key];
620
- }
621
- }); // If we see a placeholder option, configure a Cloudinary-based URL.
622
- // The resulting image will always be blurred per Next.js, so we're
623
- // limited on options for placeholders.
624
- //
625
- // We need to do this logic here as we potentially need to mutate
626
- // an Image component prop as opposed to simply the URL
627
- //
628
- // https://nextjs.org/docs/api-reference/next/image#blurdataurl
629
-
630
- if (imageProps.placeholder) {
631
- var publicId = getPublicId(props.src);
632
- imageProps.blurDataURL = createPlaceholderUrl({
633
- src: publicId,
634
- placeholder: props.placeholder
635
- });
636
-
637
- if (imageProps.placeholder !== 'blur') {
638
- imageProps.placeholder = 'blur';
639
- }
640
- }
641
-
642
- return /*#__PURE__*/jsxRuntime.jsx(Image__default["default"], _extends({}, imageProps, {
643
- loader: function loader(options) {
644
- return cloudinaryLoader(_extends({}, imageProps, {
645
- options: options
646
- }), cldOptions);
647
- }
648
- }));
649
- };
650
-
651
- var CldUploadWidget = function CldUploadWidget(_ref) {
652
- var children = _ref.children,
653
- onUpload = _ref.onUpload,
654
- options = _ref.options,
655
- signed = _ref.signed,
656
- signatureEndpoint = _ref.signatureEndpoint;
657
- var cloudinary = react.useRef();
658
- var widget = react.useRef();
659
- /**
660
- * generateSignature
661
- * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
662
- */
663
-
664
- function generateSignature(callback, paramsToSign) {
665
- fetch(signatureEndpoint, {
666
- method: "POST",
667
- body: JSON.stringify({
668
- paramsToSign: paramsToSign
669
- })
670
- }).then(function (r) {
671
- return r.json();
672
- }).then(function (_ref2) {
673
- var signature = _ref2.signature;
674
- callback(signature);
675
- });
676
- }
677
- /**
678
- * createWidget
679
- * @description Creates a new instance of the Cloudinary widget and stores in a ref
680
- */
681
-
682
-
683
- function createWidget() {
684
- var _cloudinary$current;
685
-
686
- // When creating a signed upload, you need to provide both your Cloudinary API Key
687
- // as well as a signature generator function that will sign any paramters
688
- // either on page load or during the upload process. Read more about signed uploads at:
689
- // https://cloudinary.com/documentation/upload_widget#signed_uploads
690
- var totalOptions = _extends({}, options, !!signed && {
691
- uploadSignature: generateSignature
692
- }); // no need for apiSecret because of api/sign-cloudinary-params
693
-
694
-
695
- if (signed && !totalOptions.apiKey) {
696
- return new Error("Signed Upload needs apiKey!");
697
- }
698
-
699
- return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(totalOptions, function (error, result) {
700
- // The callback is a bit more chatty than failed or success so
701
- // only trigger when one of those are the case. You can additionally
702
- // create a separate handler such as onEvent and trigger it on
703
- // ever occurance
704
- if (error || result.event === "success") {
705
- onUpload(error, result, widget == null ? void 0 : widget.current);
706
- }
707
- });
708
- }
709
- /**
710
- * open
711
- * @description When triggered, uses the current widget instance to open the upload modal
712
- */
713
-
714
-
715
- function open() {
716
- if (!(widget != null && widget.current)) {
717
- widget.current = createWidget();
718
- }
719
-
720
- (widget == null ? void 0 : widget.current) && widget.current.open();
721
- }
722
- /**
723
- * handleOnLoad
724
- * @description Stores the Cloudinary window instance to a ref when the widget script loads
725
- */
726
-
727
-
728
- function handleOnLoad() {
729
- cloudinary.current = window.cloudinary;
730
- }
731
-
732
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
733
- children: [children({
734
- cloudinary: cloudinary.current,
735
- widget: widget.current,
736
- open: open
737
- }), /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
738
- id: "cloudinary-" + Math.floor(Math.random() * 100),
739
- src: "https://widget.cloudinary.com/v2.0/global/all.js",
740
- onLoad: handleOnLoad,
741
- onError: function onError(e) {
742
- console.error("Script failed to load", e);
743
- }
744
- })]
745
- });
746
- };
747
-
748
- var _excluded = ["onUpload", "options", "signed", "label", "children"];
749
-
750
- var CldUploadButton = function CldUploadButton(_ref) {
751
- var onUpload = _ref.onUpload,
752
- options = _ref.options,
753
- signed = _ref.signed,
754
- _children = _ref.children,
755
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
756
-
757
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
758
- children: /*#__PURE__*/jsxRuntime.jsx(CldUploadWidget, {
759
- signed: signed,
760
- options: options,
761
- onUpload: onUpload,
762
- signatureEndpoint: signed != null ? signed : props.signatureEndpoint,
763
- children: function children(_ref2) {
764
- var open = _ref2.open;
765
-
766
- function handleOnClick(e) {
767
- e.preventDefault();
768
- open();
769
- }
770
-
771
- return /*#__PURE__*/jsxRuntime.jsx("button", _extends({
772
- onClick: handleOnClick
773
- }, props, {
774
- children: _children
775
- }));
776
- }
777
- })
778
- });
779
- };
780
-
781
- exports.CldImage = CldImage;
782
- exports.CldUploadButton = CldUploadButton;
783
- exports.CldUploadWidget = CldUploadWidget;
784
- exports.cloudinaryLoader = cloudinaryLoader;
785
- exports.position = position;
786
- exports.primary = primary;
787
- exports.text = text;
788
- //# sourceMappingURL=next-cloudinary.js.map