@newskit-render/shared-components 2.0.0 → 2.0.1-alpha.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.
Files changed (7) hide show
  1. package/dist/cjs/Image/Image.js +6 -3
  2. package/dist/cjs/Image/Image.js.map +1 -1
  3. package/dist/cjs/Image/types.d.ts +4 -3
  4. package/dist/esm/Image/Image.js +6 -3
  5. package/dist/esm/Image/Image.js.map +1 -1
  6. package/dist/esm/Image/types.d.ts +4 -3
  7. package/package.json +1 -1
package/dist/cjs/Image/Image.js CHANGED
@@ -61,12 +61,15 @@ var StyledFigure = newskit_1.styled.figure(templateObject_1 || (templateObject_1
61
61
  return aspectRatio;
62
62
  });
63
63
  var Image = function (_a) {
64
- var _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'auto' : _b, _c = _a.blurDataURL, blurDataURL = _c === void 0 ? '/assets/plchldr150x100.png' : _c, src = _a.src, width = _a.width, imageProps = __rest(_a, ["aspectRatio", "blurDataURL", "src", "width"]);
64
+ var _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'auto' : _b, _c = _a.blurDataURL, blurDataURL = _c === void 0 ? '/assets/plchldr150x100.png' : _c, src = _a.src, width = _a.width, height = _a.height, imageProps = __rest(_a, ["aspectRatio", "blurDataURL", "src", "width", "height"]);
65
65
  var _d = (0, react_1.useState)(0), actualAspectRatio = _d[0], setActualAspectRatio = _d[1];
66
+ var formatedWidth = parseFloat(width) || undefined;
67
+ var formatedHeight = parseFloat(height) || undefined;
68
+ var isRemoteImage = src.toString().includes('https');
66
69
  return (react_1.default.createElement(StyledFigure, { aspectRatio: actualAspectRatio ? actualAspectRatio : aspectRatio },
67
- react_1.default.createElement(image_1.default, __assign({ fill: !width, style: {
70
+ react_1.default.createElement(image_1.default, __assign({ fill: !formatedWidth, style: {
68
71
  objectFit: 'contain',
69
- }, sizes: "(max-width: 768px) 100vw,\n (max-width: 1200px) 50vw,\n 33vw", width: width }, imageProps, { placeholder: "blur", blurDataURL: blurDataURL, src: src || blurDataURL, onLoadingComplete: function (_a) {
72
+ }, sizes: "(max-width: 768px) 100vw,\n (max-width: 1200px) 50vw,\n 33vw", width: formatedWidth, height: formatedHeight }, imageProps, { placeholder: isRemoteImage ? 'blur' : 'empty', blurDataURL: isRemoteImage ? blurDataURL : undefined, src: src || blurDataURL, onLoadingComplete: function (_a) {
70
73
  var naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
71
74
  setActualAspectRatio(naturalWidth / naturalHeight);
72
75
  } }))));
package/dist/cjs/Image/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,qDAAkC;AAElC,mCAAgC;AAEhC,IAAM,YAAY,GAAG,gBAAM,CAAC,MAAM,mIAAkC,yDAGlD,EAAgC,KACjD,KADiB,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW;AAAX,CAAW,CACjD,CAAA;AAEM,IAAM,KAAK,GAAyB,UAAC,EAM3C;IALC,IAAA,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA,EACpB,mBAA0C,EAA1C,WAAW,mBAAG,4BAA4B,KAAA,EAC1C,GAAG,SAAA,EACH,KAAK,WAAA,EACF,UAAU,cAL6B,8CAM3C,CADc;IAEP,IAAA,KAA4C,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAtD,iBAAiB,QAAA,EAAE,oBAAoB,QAAe,CAAA;IAE7D,OAAO,CACL,8BAAC,YAAY,IACX,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;QAEhE,8BAAC,eAAS,aACR,IAAI,EAAE,CAAC,KAAK,EACZ,KAAK,EAAE;gBACL,SAAS,EAAE,SAAS;aACrB,EACD,KAAK,EAAC,wFAEK,EACX,KAAK,EAAE,KAAK,IACR,UAAU,IACd,WAAW,EAAC,MAAM,EAClB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,IAAI,WAAW,EACvB,iBAAiB,EAAE,UAAC,EAA+B;oBAA7B,YAAY,kBAAA,EAAE,aAAa,mBAAA;gBAC/C,oBAAoB,CAAC,YAAY,GAAG,aAAa,CAAC,CAAA;YACpD,CAAC,IACD,CACW,CAChB,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,KAAK,SAgCjB"}
1
+ {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,qDAAkC;AAElC,mCAAgC;AAEhC,IAAM,YAAY,GAAG,gBAAM,CAAC,MAAM,mIAAkC,yDAGlD,EAAgC,KACjD,KADiB,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW;AAAX,CAAW,CACjD,CAAA;AAEM,IAAM,KAAK,GAAyB,UAAC,EAO3C;IANC,IAAA,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA,EACpB,mBAA0C,EAA1C,WAAW,mBAAG,4BAA4B,KAAA,EAC1C,GAAG,SAAA,EACH,KAAK,WAAA,EACL,MAAM,YAAA,EACH,UAAU,cAN6B,wDAO3C,CADc;IAEP,IAAA,KAA4C,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAtD,iBAAiB,QAAA,EAAE,oBAAoB,QAAe,CAAA;IAE7D,IAAM,aAAa,GAAG,UAAU,CAAC,KAA0B,CAAC,IAAI,SAAS,CAAA;IACzE,IAAM,cAAc,GAAG,UAAU,CAAC,MAA2B,CAAC,IAAI,SAAS,CAAA;IAC3E,IAAM,aAAa,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEtD,OAAO,CACL,8BAAC,YAAY,IACX,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;QAEhE,8BAAC,eAAS,aACR,IAAI,EAAE,CAAC,aAAa,EACpB,KAAK,EAAE;gBACL,SAAS,EAAE,SAAS;aACrB,EACD,KAAK,EAAC,wFAEK,EACX,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,IAClB,UAAU,IACd,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,GAAG,IAAI,WAAW,EACvB,iBAAiB,EAAE,UAAC,EAA+B;oBAA7B,YAAY,kBAAA,EAAE,aAAa,mBAAA;gBAC/C,oBAAoB,CAAC,YAAY,GAAG,aAAa,CAAC,CAAA;YACpD,CAAC,IACD,CACW,CAChB,CAAA;AACH,CAAC,CAAA;AAtCY,QAAA,KAAK,SAsCjB"}
package/dist/cjs/Image/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ImageProps as NextImageProps } from 'next/image';
2
- export type ImageProps = {
2
+ export type ImageProps = Omit<NextImageProps, 'width' | 'height'> & {
3
3
  aspectRatio?: string | number;
4
4
  href?: string;
5
- width?: number;
6
- } & NextImageProps;
5
+ width?: string | number;
6
+ height?: string | number;
7
+ };
package/dist/esm/Image/Image.js CHANGED
@@ -32,12 +32,15 @@ var StyledFigure = styled.figure(templateObject_1 || (templateObject_1 = __makeT
32
32
  return aspectRatio;
33
33
  });
34
34
  export var Image = function (_a) {
35
- var _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'auto' : _b, _c = _a.blurDataURL, blurDataURL = _c === void 0 ? '/assets/plchldr150x100.png' : _c, src = _a.src, width = _a.width, imageProps = __rest(_a, ["aspectRatio", "blurDataURL", "src", "width"]);
35
+ var _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'auto' : _b, _c = _a.blurDataURL, blurDataURL = _c === void 0 ? '/assets/plchldr150x100.png' : _c, src = _a.src, width = _a.width, height = _a.height, imageProps = __rest(_a, ["aspectRatio", "blurDataURL", "src", "width", "height"]);
36
36
  var _d = useState(0), actualAspectRatio = _d[0], setActualAspectRatio = _d[1];
37
+ var formatedWidth = parseFloat(width) || undefined;
38
+ var formatedHeight = parseFloat(height) || undefined;
39
+ var isRemoteImage = src.toString().includes('https');
37
40
  return (React.createElement(StyledFigure, { aspectRatio: actualAspectRatio ? actualAspectRatio : aspectRatio },
38
- React.createElement(NextImage, __assign({ fill: !width, style: {
41
+ React.createElement(NextImage, __assign({ fill: !formatedWidth, style: {
39
42
  objectFit: 'contain',
40
- }, sizes: "(max-width: 768px) 100vw,\n (max-width: 1200px) 50vw,\n 33vw", width: width }, imageProps, { placeholder: "blur", blurDataURL: blurDataURL, src: src || blurDataURL, onLoadingComplete: function (_a) {
43
+ }, sizes: "(max-width: 768px) 100vw,\n (max-width: 1200px) 50vw,\n 33vw", width: formatedWidth, height: formatedHeight }, imageProps, { placeholder: isRemoteImage ? 'blur' : 'empty', blurDataURL: isRemoteImage ? blurDataURL : undefined, src: src || blurDataURL, onLoadingComplete: function (_a) {
41
44
  var naturalWidth = _a.naturalWidth, naturalHeight = _a.naturalHeight;
42
45
  setActualAspectRatio(naturalWidth / naturalHeight);
43
46
  } }))));
package/dist/esm/Image/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,IAAM,YAAY,GAAG,MAAM,CAAC,MAAM,mIAAkC,yDAGlD,EAAgC,KACjD,KADiB,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW;AAAX,CAAW,CACjD,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAyB,UAAC,EAM3C;IALC,IAAA,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA,EACpB,mBAA0C,EAA1C,WAAW,mBAAG,4BAA4B,KAAA,EAC1C,GAAG,SAAA,EACH,KAAK,WAAA,EACF,UAAU,cAL6B,8CAM3C,CADc;IAEP,IAAA,KAA4C,QAAQ,CAAC,CAAC,CAAC,EAAtD,iBAAiB,QAAA,EAAE,oBAAoB,QAAe,CAAA;IAE7D,OAAO,CACL,oBAAC,YAAY,IACX,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;QAEhE,oBAAC,SAAS,aACR,IAAI,EAAE,CAAC,KAAK,EACZ,KAAK,EAAE;gBACL,SAAS,EAAE,SAAS;aACrB,EACD,KAAK,EAAC,wFAEK,EACX,KAAK,EAAE,KAAK,IACR,UAAU,IACd,WAAW,EAAC,MAAM,EAClB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,IAAI,WAAW,EACvB,iBAAiB,EAAE,UAAC,EAA+B;oBAA7B,YAAY,kBAAA,EAAE,aAAa,mBAAA;gBAC/C,oBAAoB,CAAC,YAAY,GAAG,aAAa,CAAC,CAAA;YACpD,CAAC,IACD,CACW,CAChB,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,IAAM,YAAY,GAAG,MAAM,CAAC,MAAM,mIAAkC,yDAGlD,EAAgC,KACjD,KADiB,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW;AAAX,CAAW,CACjD,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAyB,UAAC,EAO3C;IANC,IAAA,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA,EACpB,mBAA0C,EAA1C,WAAW,mBAAG,4BAA4B,KAAA,EAC1C,GAAG,SAAA,EACH,KAAK,WAAA,EACL,MAAM,YAAA,EACH,UAAU,cAN6B,wDAO3C,CADc;IAEP,IAAA,KAA4C,QAAQ,CAAC,CAAC,CAAC,EAAtD,iBAAiB,QAAA,EAAE,oBAAoB,QAAe,CAAA;IAE7D,IAAM,aAAa,GAAG,UAAU,CAAC,KAA0B,CAAC,IAAI,SAAS,CAAA;IACzE,IAAM,cAAc,GAAG,UAAU,CAAC,MAA2B,CAAC,IAAI,SAAS,CAAA;IAC3E,IAAM,aAAa,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEtD,OAAO,CACL,oBAAC,YAAY,IACX,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;QAEhE,oBAAC,SAAS,aACR,IAAI,EAAE,CAAC,aAAa,EACpB,KAAK,EAAE;gBACL,SAAS,EAAE,SAAS;aACrB,EACD,KAAK,EAAC,wFAEK,EACX,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,IAClB,UAAU,IACd,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,GAAG,IAAI,WAAW,EACvB,iBAAiB,EAAE,UAAC,EAA+B;oBAA7B,YAAY,kBAAA,EAAE,aAAa,mBAAA;gBAC/C,oBAAoB,CAAC,YAAY,GAAG,aAAa,CAAC,CAAA;YACpD,CAAC,IACD,CACW,CAChB,CAAA;AACH,CAAC,CAAA"}
package/dist/esm/Image/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ImageProps as NextImageProps } from 'next/image';
2
- export type ImageProps = {
2
+ export type ImageProps = Omit<NextImageProps, 'width' | 'height'> & {
3
3
  aspectRatio?: string | number;
4
4
  href?: string;
5
- width?: number;
6
- } & NextImageProps;
5
+ width?: string | number;
6
+ height?: string | number;
7
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newskit-render/shared-components",
3
- "version": "2.0.0",
3
+ "version": "2.0.1-alpha.0",
4
4
  "description": "Newskit Render Shared Components",
5
5
  "author": "",
6
6
  "license": "UNLICENSED",