@websolutespa/bom-mixer-ui 1.2.1 → 1.2.2
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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +17 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/media/media-image.js +18 -4
- package/dist/esm/components/media/media-image.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/components/media/media-image.d.ts +5 -0
- package/dist/types/components/media/media-image.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/media/media-image.tsx +24 -3
|
@@ -3,6 +3,15 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { getClassNames } from '@websolutespa/bom-core';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
|
|
6
|
+
var ImageStrategy;
|
|
7
|
+
(function (ImageStrategy) {
|
|
8
|
+
ImageStrategy["None"] = "none";
|
|
9
|
+
ImageStrategy["Next"] = "next";
|
|
10
|
+
ImageStrategy["Custom"] = "custom";
|
|
11
|
+
})(ImageStrategy || (ImageStrategy = {}));
|
|
12
|
+
const IMAGE_QUALITY = process.env.IMAGE_QUALITY ? parseInt(process.env.IMAGE_QUALITY) : 80;
|
|
13
|
+
const IMAGE_SIZES = process.env.IMAGE_SIZES ? process.env.IMAGE_SIZES.split(',').map(x => parseInt(x)) : [640, 828, 1080, 1200, 1920];
|
|
14
|
+
const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : ImageStrategy.Next;
|
|
6
15
|
const StyledMediaImage = styled.img`
|
|
7
16
|
max-width: 100%;
|
|
8
17
|
// height: auto;
|
|
@@ -30,8 +39,13 @@ function getImageProps(_a) {
|
|
|
30
39
|
src
|
|
31
40
|
} = _a,
|
|
32
41
|
props = __rest(_a, ["src"]);
|
|
42
|
+
if (IMAGE_STRATEGY === ImageStrategy.None || isSVG(src)) {
|
|
43
|
+
return {
|
|
44
|
+
src
|
|
45
|
+
};
|
|
46
|
+
}
|
|
33
47
|
const ratio = props.width && props.height ? parseInt(props.width.toString()) / parseInt(props.height.toString()) : 0;
|
|
34
|
-
const sizes =
|
|
48
|
+
const sizes = IMAGE_SIZES;
|
|
35
49
|
return Object.assign({
|
|
36
50
|
src: getImageSrc(src, ratio, sizes[0]),
|
|
37
51
|
srcSet: getImageSrcset(src, ratio, sizes),
|
|
@@ -40,7 +54,7 @@ function getImageProps(_a) {
|
|
|
40
54
|
}
|
|
41
55
|
function getImageSrc(src, ratio, width, quality) {
|
|
42
56
|
if (quality === void 0) {
|
|
43
|
-
quality =
|
|
57
|
+
quality = IMAGE_QUALITY;
|
|
44
58
|
}
|
|
45
59
|
if (isSVG(src)) {
|
|
46
60
|
return src;
|
|
@@ -49,7 +63,7 @@ function getImageSrc(src, ratio, width, quality) {
|
|
|
49
63
|
}
|
|
50
64
|
function getImageSrcset(src, ratio, widths, quality) {
|
|
51
65
|
if (quality === void 0) {
|
|
52
|
-
quality =
|
|
66
|
+
quality = IMAGE_QUALITY;
|
|
53
67
|
}
|
|
54
68
|
if (isSVG(src)) {
|
|
55
69
|
return undefined;
|
|
@@ -63,5 +77,5 @@ function isSVG(src) {
|
|
|
63
77
|
return src.indexOf('.svg') !== -1;
|
|
64
78
|
}
|
|
65
79
|
|
|
66
|
-
export { MediaImage };
|
|
80
|
+
export { ImageStrategy, MediaImage };
|
|
67
81
|
//# sourceMappingURL=media-image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-image.js","sources":["../../../../src/components/media/media-image.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { getClassNames } from '@websolutespa/bom-core';\nimport styled from 'styled-components';\nconst StyledMediaImage = styled.img `\r\n max-width: 100%;\r\n // height: auto;\r\n user-select: none;\r\n`;\nexport const MediaImage = (_a) => {\n var { alt = '', className, type } = _a, props = __rest(_a, [\"alt\", \"className\", \"type\"]);\n const classNames = getClassNames(className, 'image', { 'image-svg': isSVG(props.src) });\n const imageProps = getImageProps(props);\n return (_jsx(StyledMediaImage, Object.assign({ className: classNames, alt: alt, loading: \"lazy\" }, imageProps)));\n};\nfunction getImageProps(_a) {\n var { src } = _a, props = __rest(_a, [\"src\"]);\n const ratio = props.width && props.height ? (parseInt(props.width.toString()) / parseInt(props.height.toString())) : 0;\n const sizes =
|
|
1
|
+
{"version":3,"file":"media-image.js","sources":["../../../../src/components/media/media-image.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { getClassNames } from '@websolutespa/bom-core';\nimport styled from 'styled-components';\nexport var ImageStrategy;\n(function (ImageStrategy) {\n ImageStrategy[\"None\"] = \"none\";\n ImageStrategy[\"Next\"] = \"next\";\n ImageStrategy[\"Custom\"] = \"custom\";\n})(ImageStrategy || (ImageStrategy = {}));\nconst IMAGE_QUALITY = process.env.IMAGE_QUALITY ?\n parseInt(process.env.IMAGE_QUALITY) :\n 80;\nconst IMAGE_SIZES = process.env.IMAGE_SIZES ?\n process.env.IMAGE_SIZES.split(',').map(x => parseInt(x)) :\n [640, 828, 1080, 1200, 1920];\nconst IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ?\n process.env.IMAGE_STRATEGY :\n ImageStrategy.Next;\nconst StyledMediaImage = styled.img `\r\n max-width: 100%;\r\n // height: auto;\r\n user-select: none;\r\n`;\nexport const MediaImage = (_a) => {\n var { alt = '', className, type } = _a, props = __rest(_a, [\"alt\", \"className\", \"type\"]);\n const classNames = getClassNames(className, 'image', { 'image-svg': isSVG(props.src) });\n const imageProps = getImageProps(props);\n return (_jsx(StyledMediaImage, Object.assign({ className: classNames, alt: alt, loading: \"lazy\" }, imageProps)));\n};\nfunction getImageProps(_a) {\n var { src } = _a, props = __rest(_a, [\"src\"]);\n if (IMAGE_STRATEGY === ImageStrategy.None || isSVG(src)) {\n return { src };\n }\n const ratio = props.width && props.height ? (parseInt(props.width.toString()) / parseInt(props.height.toString())) : 0;\n const sizes = IMAGE_SIZES;\n return Object.assign({ src: getImageSrc(src, ratio, sizes[0]), srcSet: getImageSrcset(src, ratio, sizes), sizes: ratio !== 0 ? getImageSizes(sizes) : '100vw' }, props);\n}\nfunction getImageSrc(src, ratio, width, quality = IMAGE_QUALITY) {\n if (isSVG(src)) {\n return src;\n }\n return ratio !== 0 ?\n `/_next/image?url=${encodeURIComponent(src)}&w=${width}&h=${width / ratio}&q=${quality}` :\n `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;\n}\nfunction getImageSrcset(src, ratio, widths, quality = IMAGE_QUALITY) {\n if (isSVG(src)) {\n return undefined;\n }\n return widths.map(width => getImageSrc(src, ratio, width, quality) + ` ${width}w`).join(', ');\n}\nfunction getImageSizes(widths) {\n return widths.map((width, i) => `${i < widths.length - 1 ? `(max-width: ${width}px) ` : ''}${width}px`).join(', ');\n}\nfunction isSVG(src) {\n return src.indexOf('.svg') !== -1;\n}\n//# sourceMappingURL=media-image.js.map"],"names":["ImageStrategy","IMAGE_QUALITY","process","env","parseInt","IMAGE_SIZES","split","map","x","IMAGE_STRATEGY","Next","StyledMediaImage","styled","img","MediaImage","_a","alt","className","type","props","__rest","classNames","getClassNames","isSVG","src","imageProps","getImageProps","_jsx","Object","assign","loading","None","ratio","width","height","toString","sizes","getImageSrc","srcSet","getImageSrcset","getImageSizes","quality","encodeURIComponent","widths","undefined","join","i","length","indexOf"],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -31,7 +31,7 @@ export { List } from './components/list/list.js';
|
|
|
31
31
|
export { Loading } from './components/loading/loading.js';
|
|
32
32
|
export { MediaGallery } from './components/media-gallery/media-gallery.js';
|
|
33
33
|
export { Media } from './components/media/media.js';
|
|
34
|
-
export { MediaImage } from './components/media/media-image.js';
|
|
34
|
+
export { ImageStrategy, MediaImage } from './components/media/media-image.js';
|
|
35
35
|
export { Meta } from './components/meta/meta.js';
|
|
36
36
|
export { Modal } from './components/modal/modal.js';
|
|
37
37
|
export { NavLink } from './components/nav-link/nav-link.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-image.d.ts","sourceRoot":"","sources":["../../../../src/components/media/media-image.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAQnE,eAAO,MAAM,UAAU,uCAA6C,eAAe,4CAIlF,CAAC"}
|
|
1
|
+
{"version":3,"file":"media-image.d.ts","sourceRoot":"","sources":["../../../../src/components/media/media-image.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAcD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAQnE,eAAO,MAAM,UAAU,uCAA6C,eAAe,4CAIlF,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,6 +2,24 @@ import { getClassNames } from '@websolutespa/bom-core';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { UIStyledComponentProps } from '../../components/types';
|
|
4
4
|
|
|
5
|
+
export enum ImageStrategy {
|
|
6
|
+
None = 'none',
|
|
7
|
+
Next = 'next',
|
|
8
|
+
Custom = 'custom',
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const IMAGE_QUALITY = process.env.IMAGE_QUALITY ?
|
|
12
|
+
parseInt(process.env.IMAGE_QUALITY) :
|
|
13
|
+
80;
|
|
14
|
+
|
|
15
|
+
const IMAGE_SIZES = process.env.IMAGE_SIZES ?
|
|
16
|
+
process.env.IMAGE_SIZES.split(',').map(x => parseInt(x)) :
|
|
17
|
+
[640, 828, 1080, 1200, 1920];
|
|
18
|
+
|
|
19
|
+
const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ?
|
|
20
|
+
process.env.IMAGE_STRATEGY as ImageStrategy :
|
|
21
|
+
ImageStrategy.Next;
|
|
22
|
+
|
|
5
23
|
export type Props = {
|
|
6
24
|
src: string;
|
|
7
25
|
alt?: string;
|
|
@@ -23,8 +41,11 @@ export const MediaImage = ({ alt = '', className, type, ...props }: MediaImagePr
|
|
|
23
41
|
};
|
|
24
42
|
|
|
25
43
|
function getImageProps({ src, ...props }: MediaImageProps & Omit<MediaImageProps, 'type'>) {
|
|
44
|
+
if (IMAGE_STRATEGY === ImageStrategy.None || isSVG(src)) {
|
|
45
|
+
return { src };
|
|
46
|
+
}
|
|
26
47
|
const ratio = props.width && props.height ? (parseInt(props.width.toString()) / parseInt(props.height.toString())) : 0;
|
|
27
|
-
const sizes =
|
|
48
|
+
const sizes = IMAGE_SIZES;
|
|
28
49
|
return {
|
|
29
50
|
src: getImageSrc(src, ratio, sizes[0]),
|
|
30
51
|
srcSet: getImageSrcset(src, ratio, sizes),
|
|
@@ -33,7 +54,7 @@ function getImageProps({ src, ...props }: MediaImageProps & Omit<MediaImageProps
|
|
|
33
54
|
};
|
|
34
55
|
}
|
|
35
56
|
|
|
36
|
-
function getImageSrc(src: string, ratio: number, width: number, quality: number =
|
|
57
|
+
function getImageSrc(src: string, ratio: number, width: number, quality: number = IMAGE_QUALITY): string {
|
|
37
58
|
if (isSVG(src)) {
|
|
38
59
|
return src;
|
|
39
60
|
}
|
|
@@ -42,7 +63,7 @@ function getImageSrc(src: string, ratio: number, width: number, quality: number
|
|
|
42
63
|
`/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
|
|
43
64
|
}
|
|
44
65
|
|
|
45
|
-
function getImageSrcset(src: string, ratio: number, widths: number[], quality: number =
|
|
66
|
+
function getImageSrcset(src: string, ratio: number, widths: number[], quality: number = IMAGE_QUALITY): string | undefined {
|
|
46
67
|
if (isSVG(src)) {
|
|
47
68
|
return undefined;
|
|
48
69
|
}
|