@jetshop/ui 6.3.3 → 6.3.5
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/Gallery/constructGallery.js +2 -3
- package/Gallery/constructGallery.js.map +1 -1
- package/Image/BaseImage.js +2 -2
- package/Image/BaseImage.js.map +1 -1
- package/Image/FlightImage.d.ts +0 -1
- package/Image/FlightImage.js +4 -3
- package/Image/FlightImage.js.map +1 -1
- package/Image/useConstructImage.d.ts +3 -0
- package/Image/useConstructImage.js +28 -5
- package/Image/useConstructImage.js.map +1 -1
- package/Image/utils/getImageWidths.d.ts +2 -2
- package/Image/utils/getImageWidths.js +10 -3
- package/Image/utils/getImageWidths.js.map +1 -1
- package/Image/utils/getSizesMap.d.ts +2 -2
- package/Image/utils/getSizesMap.js +32 -19
- package/Image/utils/getSizesMap.js.map +1 -1
- package/package.json +2 -2
|
@@ -5,10 +5,9 @@ import { getSizesMap } from '../Image/utils/getSizesMap';
|
|
|
5
5
|
import { getSmallestSize } from '../Image/utils/getSmallestSize';
|
|
6
6
|
import { getSrcSetFromWidths } from '../Image/utils/getSrcSetFromWidths';
|
|
7
7
|
export function constructGallery(images, sizes, aspect, baseUrl, breakpoints) {
|
|
8
|
-
const
|
|
9
|
-
const calculatedSizes = getSizesMap(breakpointValues, sizes);
|
|
8
|
+
const calculatedSizes = getSizesMap(breakpoints, sizes);
|
|
10
9
|
// Get required set of image widths
|
|
11
|
-
const widths = getImageWidths(
|
|
10
|
+
const widths = getImageWidths(breakpoints, sizes);
|
|
12
11
|
return images.map((img, index) => {
|
|
13
12
|
const url = img.url || img.sizes;
|
|
14
13
|
let imageSrc;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constructGallery.js","sourceRoot":"","sources":["constructGallery.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAC9B,MAAsB,EACtB,KAAe,EACf,MAAc,EACd,OAAe,EACf,WAAwC;IAExC,MAAM,
|
|
1
|
+
{"version":3,"file":"constructGallery.js","sourceRoot":"","sources":["constructGallery.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,MAAM,UAAU,gBAAgB,CAC9B,MAAsB,EACtB,KAAe,EACf,MAAc,EACd,OAAe,EACf,WAAwC;IAExC,MAAM,eAAe,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IACxD,mCAAmC;IACnC,MAAM,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QAEjC,IAAI,QAAgB,CAAC;QACrB,IAAI,QAAgB,CAAC;QAErB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,qDAAqD;YACrD,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;YACpD,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;SACtD;aAAM;YACL,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACpC,QAAQ,GAAG,QAAQ,CAAC;SACrB;QAED,mDAAmD;QACnD,MAAM,MAAM,GAAG,mBAAmB,CAChC,QAAQ,EACR,MAAM,EACN,MAAM,EACN,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5B,GAAG,CAAC,YAAY,CACjB,CAAC;QACF,OAAO;YACL,KAAK;YACL,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,GAAG,CAAC,GAAG;YACpB,aAAa,EAAE,GAAG,CAAC,KAAK;YACxB,SAAS,EAAE,QAAQ;YACnB,YAAY,EAAE,GAAG,CAAC,GAAG;YACrB,cAAc,EAAE,GAAG,CAAC,KAAK;YACzB,KAAK,EAAE,eAAe;YACtB,MAAM;YACN,YAAY,EAAE,GAAG,CAAC,YAAY;SAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
|
package/Image/BaseImage.js
CHANGED
|
@@ -172,12 +172,12 @@ const Image = function Image(_a) {
|
|
|
172
172
|
(inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
|
|
173
173
|
React.createElement("source", { type: "image/webp", srcSet: webpSrcset, sizes: sizes }),
|
|
174
174
|
React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
|
|
175
|
-
React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical }))),
|
|
175
|
+
React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical, fetchpriority: critical ? 'high' : 'auto' }))),
|
|
176
176
|
React.createElement("noscript", null,
|
|
177
177
|
React.createElement("picture", null,
|
|
178
178
|
React.createElement(Img, { srcSet: srcset, src: src, sizes: sizes, alt: alt, style: {
|
|
179
179
|
objectFit
|
|
180
|
-
}, critical: critical }))))),
|
|
180
|
+
}, critical: critical, fetchpriority: critical ? 'high' : 'auto' }))))),
|
|
181
181
|
children && (React.createElement("div", { "data-flight-image-children": "", style: {
|
|
182
182
|
position: 'relative',
|
|
183
183
|
zIndex: 2,
|
package/Image/BaseImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":"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"}
|
package/Image/FlightImage.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ProductImageSize } from '@jetshop/core/types';
|
|
3
3
|
export type ImageSrcType = string | ProductImageSize[];
|
|
4
|
-
export type BreakpointValues = string[];
|
|
5
4
|
export type ImageBreakpointSize = number | string;
|
|
6
5
|
export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
|
|
7
6
|
export type AspectRatio = string | number;
|
package/Image/FlightImage.js
CHANGED
|
@@ -15,6 +15,7 @@ import React from 'react';
|
|
|
15
15
|
import t from '@jetshop/intl';
|
|
16
16
|
import { useConstructImage } from './useConstructImage';
|
|
17
17
|
import ChannelContext from '@jetshop/core/components/ChannelContext';
|
|
18
|
+
import { Below } from '../Breakpoints';
|
|
18
19
|
export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
|
|
19
20
|
function Error() {
|
|
20
21
|
return (React.createElement("div", { style: {
|
|
@@ -31,14 +32,14 @@ function Error() {
|
|
|
31
32
|
}
|
|
32
33
|
function FlightImage(props) {
|
|
33
34
|
const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
|
|
34
|
-
const { theme: { breakpoints } } = useShopConfig();
|
|
35
|
+
const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
|
|
35
36
|
// The baseUrl will change based on the currently-selected channel.
|
|
36
37
|
// We need it to correctly construct the image url
|
|
37
38
|
const { selectedChannel } = React.useContext(ChannelContext);
|
|
38
39
|
const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
|
|
39
40
|
? String(selectedChannel.imageUrl)
|
|
40
41
|
: null;
|
|
41
|
-
const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
|
|
42
|
+
const { src, hasFalsySrc, lqip, sizes, sizesMobile, srcset, webpSrcset, srcsetMobile, webpSrcsetMobile } = useConstructImage({
|
|
42
43
|
gravity,
|
|
43
44
|
crop,
|
|
44
45
|
src: originalSrc,
|
|
@@ -52,7 +53,7 @@ function FlightImage(props) {
|
|
|
52
53
|
focalPointX,
|
|
53
54
|
focalPointY
|
|
54
55
|
});
|
|
55
|
-
return (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: ErrorComp })));
|
|
56
|
+
return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset, webpSrcset: matches && useMobileImageSizes ? webpSrcsetMobile : webpSrcset, error: ErrorComp })))));
|
|
56
57
|
}
|
|
57
58
|
export default FlightImage;
|
|
58
59
|
//# sourceMappingURL=FlightImage.js.map
|
package/Image/FlightImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -39,8 +39,11 @@ export declare function useConstructImage({ gravity, crop, src, sizes, aspect, c
|
|
|
39
39
|
srcset: string;
|
|
40
40
|
webpSrcset: string;
|
|
41
41
|
sizes: string;
|
|
42
|
+
sizesMobile: string;
|
|
42
43
|
lqip: string;
|
|
43
44
|
src: string;
|
|
44
45
|
hasFalsySrc: boolean;
|
|
46
|
+
srcsetMobile: string;
|
|
47
|
+
webpSrcsetMobile: string;
|
|
45
48
|
};
|
|
46
49
|
export {};
|
|
@@ -52,11 +52,12 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
52
52
|
}
|
|
53
53
|
// useMemo so this runs only if the image props change. It calculates the
|
|
54
54
|
// strings used for `sizes`, `srcset`, and the `lqip`
|
|
55
|
-
const { sizesMap, srcset, lqip, webpSrcset } = React.useMemo(() => {
|
|
55
|
+
const { sizesMap, sizesMapMobile, srcset, lqip, webpSrcset, srcsetMobile, webpSrcsetMobile } = React.useMemo(() => {
|
|
56
56
|
if (hasFalsySrc) {
|
|
57
57
|
return {};
|
|
58
58
|
}
|
|
59
|
-
const widths = getImageWidths(
|
|
59
|
+
const widths = getImageWidths(breakpoints, sizes);
|
|
60
|
+
const mobileWidths = getImageWidths(breakpoints, sizes, true);
|
|
60
61
|
const srcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, widths, aspect, {
|
|
61
62
|
crop,
|
|
62
63
|
gravity,
|
|
@@ -65,14 +66,33 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
65
66
|
focalPointX,
|
|
66
67
|
focalPointY
|
|
67
68
|
}, modifiedDate);
|
|
69
|
+
const mobileSrcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, mobileWidths, aspect, {
|
|
70
|
+
crop,
|
|
71
|
+
gravity,
|
|
72
|
+
quality,
|
|
73
|
+
webp,
|
|
74
|
+
focalPointX,
|
|
75
|
+
focalPointY
|
|
76
|
+
}, modifiedDate);
|
|
68
77
|
const srcset = srcSetFromWidths({ webp: false });
|
|
69
78
|
const webpSrcset = srcSetFromWidths({ webp: true });
|
|
79
|
+
const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
|
|
80
|
+
const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
|
|
70
81
|
// If this is a critical image, don't calculate LQIP
|
|
71
82
|
const lqip = critical
|
|
72
83
|
? null
|
|
73
84
|
: getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
|
|
74
|
-
const sizesMap = getSizesMap(
|
|
75
|
-
|
|
85
|
+
const sizesMap = getSizesMap(breakpoints, sizes);
|
|
86
|
+
const sizesMapMobile = getSizesMap(breakpoints, sizes, true);
|
|
87
|
+
return {
|
|
88
|
+
sizesMap,
|
|
89
|
+
sizesMapMobile,
|
|
90
|
+
srcset,
|
|
91
|
+
lqip,
|
|
92
|
+
webpSrcset,
|
|
93
|
+
srcsetMobile,
|
|
94
|
+
webpSrcsetMobile
|
|
95
|
+
};
|
|
76
96
|
}, [
|
|
77
97
|
aspect,
|
|
78
98
|
breakpoints,
|
|
@@ -91,9 +111,12 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
91
111
|
srcset,
|
|
92
112
|
webpSrcset,
|
|
93
113
|
sizes: sizesMap,
|
|
114
|
+
sizesMobile: sizesMapMobile,
|
|
94
115
|
lqip,
|
|
95
116
|
src: imageSrc,
|
|
96
|
-
hasFalsySrc
|
|
117
|
+
hasFalsySrc,
|
|
118
|
+
srcsetMobile,
|
|
119
|
+
webpSrcsetMobile
|
|
97
120
|
};
|
|
98
121
|
}
|
|
99
122
|
//# sourceMappingURL=useConstructImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,EACX,OAAO,EACP,WAAW,EACX,WAAW,EACK;IAChB,gDAAgD;IAChD,eAAe,CACb,OAAO,IAAI,CAAC,IAAI,EAChB,qKAAqK,CACtK,CAAC;IACF,mCAAmC;IACnC,eAAe,CACb,CAAC,CAAC,CAAC,GAAG,EACN,sNAAsN,CACvN,CAAC;IAEF;;;;;;;;;;;;;;;;;;MAkBE;IACF,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACtB,oDAAoD;QACpD,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;KACrD;IACD,oCAAoC;IACpC,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QACpC,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAK,GAAkB,CAAC,KAAK,EAAE;QACjE,WAAW,GAAG,KAAK,CAAC;QACpB,QAAQ,GAAG,UAAU,CAAE,GAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3D;IACD,yEAAyE;IACzE,qDAAqD;IACrD,MAAM,
|
|
1
|
+
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const getImageWidths: (breakpoints:
|
|
1
|
+
import { ImageBreakpointSizes } from '../Image';
|
|
2
|
+
export declare const getImageWidths: (breakpoints: Record<string, string>, sizes: ImageBreakpointSizes, mobile?: boolean) => number[];
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
import { getImageWidth } from './getImageWidth';
|
|
2
2
|
import { remToPx } from './remToPx';
|
|
3
3
|
import { getSizeForBreakpoint } from './getSizeForBreakpoint';
|
|
4
|
-
export const getImageWidths = (breakpoints, sizes) => {
|
|
4
|
+
export const getImageWidths = (breakpoints, sizes, mobile = false) => {
|
|
5
5
|
const all = new Set();
|
|
6
|
-
|
|
6
|
+
const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
|
|
7
|
+
key,
|
|
8
|
+
value
|
|
9
|
+
}));
|
|
10
|
+
for (let i = 0; i < breakpointArray.length; i++) {
|
|
7
11
|
const bpSize = getSizeForBreakpoint(sizes, i);
|
|
8
|
-
const px = remToPx(
|
|
12
|
+
const px = remToPx(breakpointArray[i].value);
|
|
9
13
|
all.add(getImageWidth(bpSize, px, 1));
|
|
10
14
|
all.add(getImageWidth(bpSize, px, 2));
|
|
15
|
+
if (mobile && breakpointArray[i].key === 'sm') {
|
|
16
|
+
break;
|
|
17
|
+
}
|
|
11
18
|
}
|
|
12
19
|
return Array.from(all).sort();
|
|
13
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAU,CAAC;IAE9B,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAE/C,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7C,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAEtC,IAAI,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE;YAC7C,MAAM;SACP;KACF;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAChC,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const getSizesMap: (breakpoints:
|
|
1
|
+
import { ImageBreakpointSizes } from '../Image';
|
|
2
|
+
export declare const getSizesMap: (breakpoints: Record<string, string>, sizes: ImageBreakpointSizes, mobile?: boolean) => string;
|
|
@@ -1,22 +1,35 @@
|
|
|
1
1
|
import { getSizeForBreakpoint } from './getSizeForBreakpoint';
|
|
2
|
-
export const getSizesMap = (breakpoints, sizes) =>
|
|
3
|
-
.map((
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
export const getSizesMap = (breakpoints, sizes, mobile = false) => {
|
|
3
|
+
const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
|
|
4
|
+
key,
|
|
5
|
+
value
|
|
6
|
+
}));
|
|
7
|
+
const breakpointWidths = [];
|
|
8
|
+
for (let i = 0; i < breakpointArray.length; i++) {
|
|
9
|
+
breakpointWidths.push(breakpointArray[i].value);
|
|
10
|
+
if (mobile && breakpointArray[i].key === 'sm') {
|
|
11
|
+
break;
|
|
12
|
+
}
|
|
9
13
|
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
width
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
return breakpointWidths
|
|
15
|
+
.map((breakpoint, i) => {
|
|
16
|
+
const size = getSizeForBreakpoint(sizes, i);
|
|
17
|
+
let width;
|
|
18
|
+
if (size > 2) {
|
|
19
|
+
// Size is absolute value in px
|
|
20
|
+
width = size + 'px';
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
// Size is already a fraction (or unset). Convert it to vw (percentage
|
|
24
|
+
// of viewport width)
|
|
25
|
+
width = Math.round(100 * (size || 1)) + 'vw';
|
|
26
|
+
}
|
|
27
|
+
// Include a media query for all but the last size
|
|
28
|
+
if (i + 1 < breakpointWidths.length) {
|
|
29
|
+
return `(max-width: ${breakpoint}) ${width}`;
|
|
30
|
+
}
|
|
31
|
+
return width;
|
|
32
|
+
})
|
|
33
|
+
.join(', ');
|
|
34
|
+
};
|
|
22
35
|
//# sourceMappingURL=getSizesMap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSizesMap.js","sourceRoot":"","sources":["getSizesMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,
|
|
1
|
+
{"version":3,"file":"getSizesMap.js","sourceRoot":"","sources":["getSizesMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,MAAM,gBAAgB,GAAa,EAAE,CAAC;IAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/C,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE;YAC7C,MAAM;SACP;KACF;IAED,OAAO,gBAAgB;SACpB,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;QACrB,MAAM,IAAI,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC5C,IAAI,KAAK,CAAC;QACV,IAAI,IAAI,GAAG,CAAC,EAAE;YACZ,+BAA+B;YAC/B,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;SACrB;aAAM;YACL,sEAAsE;YACtE,qBAAqB;YACrB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;SAC9C;QACD,kDAAkD;QAClD,IAAI,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE;YACnC,OAAO,eAAe,UAAU,KAAK,KAAK,EAAE,CAAC;SAC9C;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetshop/ui",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"**/*.js",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react": "^18",
|
|
61
61
|
"react-dom": "^18"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "451005761243a71138a835d35d9d5084721b1e54"
|
|
64
64
|
}
|