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