@crystallize/react-image - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var n=function(e){};e.exports=function(e,t,r,o,i,u,a,c){if(n(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[r,o,i,u,a,c],l=0;(s=new Error(t.replace(/%s/g,function(){return f[l++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}}},function(e,t,r){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,r){"use strict";var n=r(2),o=r(1),i=r(0);e.exports=function(){function e(e,t,r,n,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(3)()},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=a(r(5)),u=a(r(4));function a(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"createSrcSet",value:function(e){if(e&&e.length){var t=parseInt(this.props.width||-1,10),r=[];return e.forEach(function(e){var n=e.match(/_(\d+)\.(jpg|jpeg|png|webp)$/);if(n){var o=n[1];(-1===t||o<=t)&&r.push(e+" "+o+"w")}}),r.length?r.join(", "):void 0}}},{key:"getDefaultSrc",value:function(e){if(e&&e.length)return e[0]}},{key:"render",value:function(){var e=this.props,t=e.media,r=e.src,o=e.srcVariations,u=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["media","src","srcVariations"]),a=t&&t.url?t.url:r;if(a.includes(".gif"))return i.default.createElement("img",n({src:a},u));var c=t&&t.product_image_variations?t.product_image_variations:o,s=this.createSrcSet(c);return a=a||this.getDefaultSrc(c),i.default.createElement("img",n({src:a,srcSet:s},u))}}]),t}();c.propTypes={src:u.default.string,srcVariations:u.default.arrayOf(u.default.string),media:u.default.shape({url:u.default.string,product_image_variations:u.default.arrayOf(u.default.string)}),alt:u.default.string.isRequired},t.default=c}]);
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var n=function(e){};e.exports=function(e,t,r,o,i,u,a,c){if(n(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[r,o,i,u,a,c],l=0;(s=new Error(t.replace(/%s/g,function(){return f[l++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}}},function(e,t,r){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,r){"use strict";var n=r(2),o=r(1),i=r(0);e.exports=function(){function e(e,t,r,n,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(3)()},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),i=a(r(5)),u=a(r(4));function a(e){return e&&e.__esModule?e:{default:e}}var c=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"createSrcSet",value:function(e){if(e&&e.length){var t=parseInt(this.props.width||-1,10),r=[];return e.forEach(function(e){var n=e.match(/_(\d+)\.(jpg|jpeg|png|webp)$/);if(n){var o=n[1];(-1===t||o<=t)&&r.push(e+" "+o+"w")}}),r.length?r.join(", "):void 0}}},{key:"getDefaultSrc",value:function(e){if(e&&e.length)return e[0]}},{key:"render",value:function(){var e=this.props,t=e.media,r=e.src,o=e.srcVariations,u=e.product_image,a=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["media","src","srcVariations","product_image"]),c=r;if(t&&t.url?c=t.url:u&&(c=u),c.includes(".gif"))return i.default.createElement("img",n({src:c},a));var s=t&&t.product_image_variations?t.product_image_variations:o,f=this.createSrcSet(s);return f?(c=c||this.getDefaultSrc(s),i.default.createElement("img",n({src:c,srcSet:f},a))):i.default.createElement("img",n({src:c},a))}}]),t}();c.propTypes={src:u.default.string,srcVariations:u.default.arrayOf(u.default.string),media:u.default.shape({url:u.default.string,product_image_variations:u.default.arrayOf(u.default.string)}),alt:u.default.string.isRequired},t.default=c}]);

package.json

 {
   "name": "@crystallize/react-image",
   "description": "A React package to output an img tag with different source variations from Crystallize",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "devDependencies": {
@@ -6,0 +6,0 @@ "babel-cli": "^6.24.1",

src/index.js

@@ -9,16 +9,16 @@ import React from "react";
   url:
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv.jpg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair.jpeg",
   product_image_variations: [
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_300.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_320.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_414.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_768.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_828.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_1280.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_1366.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_1440.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_1536.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_1920.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_2560.jpg",
-    "https://accelerated.atoms.crystallize.digital/gullpila/images/133_odd-jerv/_resized_3200.jpg"
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_300.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_320.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_414.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_768.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_828.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_1280.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_1366.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_1440.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_1536.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_1920.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_2560.jpeg",
+    "https://accelerated.atoms.crystallize.digital/snowball/images/131_lounge_chair/_resized_3200.jpeg"
   ]
@@ -25,0 +25,0 @@ };

src/module/index.js

@@ -35,5 +35,11 @@ import React from "react";
   render() {
-    const { media, src, srcVariations, ...rest } = this.props;
-    let srcToUse = media && media.url ? media.url : src;
+    const { media, src, srcVariations, product_image, ...rest } = this.props;
+    let srcToUse = src;
 
+    if (media && media.url) {
+      srcToUse = media.url;
+    } else if (product_image) {
+      srcToUse = product_image;
+    }
+
     // Gifs are not supported atm.
@@ -50,4 +56,8 @@ if (srcToUse.includes(".gif")) {
     const srcSet = this.createSrcSet(srcVariationsToUse);
+
+    if (!srcSet) {
+      return <img src={srcToUse} {...rest} />;
+    }
+
     srcToUse = srcToUse || this.getDefaultSrc(srcVariationsToUse);
-
     return <img src={srcToUse} srcSet={srcSet} {...rest} />;
@@ -54,0 +64,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

312310

increased by0.11%

Lines of code

122

increased by7.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes