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