@graphcommerce/next-ui 4.8.3 → 4.8.4
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 +14 -0
- package/FramerScroller/SidebarGallery.tsx +6 -10
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.8.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1509](https://github.com/graphcommerce-org/graphcommerce/pull/1509) [`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed) Thanks [@paales](https://github.com/paales)! - SidebarGallery improvements (product page):
|
|
8
|
+
|
|
9
|
+
- Prevent vertical scrolling
|
|
10
|
+
- Disable zoom fab when there are no images
|
|
11
|
+
- Hide scroller dots when there in only one image
|
|
12
|
+
- Make sure the prev/next buttons are shown as expected
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [[`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed)]:
|
|
15
|
+
- @graphcommerce/framer-scroller@2.1.15
|
|
16
|
+
|
|
3
17
|
## 4.8.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -114,6 +114,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
|
|
|
114
114
|
const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
|
|
115
115
|
const ratio = `calc(${height} / ${width} * 100%)`
|
|
116
116
|
|
|
117
|
+
const hasImages = images.length > 0
|
|
118
|
+
|
|
117
119
|
return (
|
|
118
120
|
<ScrollerProvider scrollSnapAlign='center'>
|
|
119
121
|
<Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
|
|
@@ -197,6 +199,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
|
|
|
197
199
|
width={image.width}
|
|
198
200
|
height={image.height}
|
|
199
201
|
loading={idx === 0 ? 'eager' : 'lazy'}
|
|
202
|
+
sx={{ display: 'block' }}
|
|
200
203
|
sizes={{
|
|
201
204
|
0: '100vw',
|
|
202
205
|
[theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
|
|
@@ -221,11 +224,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
|
|
|
221
224
|
<Fab
|
|
222
225
|
size='small'
|
|
223
226
|
className={classes.toggleIcon}
|
|
227
|
+
disabled={!hasImages}
|
|
224
228
|
onMouseUp={toggle}
|
|
225
229
|
aria-label='Toggle Fullscreen'
|
|
226
|
-
sx={{
|
|
227
|
-
boxShadow: theme.shadows[6],
|
|
228
|
-
}}
|
|
230
|
+
sx={{ boxShadow: 6 }}
|
|
229
231
|
>
|
|
230
232
|
{!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
|
|
231
233
|
</Fab>
|
|
@@ -286,13 +288,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
|
|
|
286
288
|
},
|
|
287
289
|
}}
|
|
288
290
|
>
|
|
289
|
-
<ScrollerDots
|
|
290
|
-
layout
|
|
291
|
-
sx={{
|
|
292
|
-
background: alpha(theme.palette.background.paper, 1),
|
|
293
|
-
boxShadow: theme.shadows[6],
|
|
294
|
-
}}
|
|
295
|
-
/>
|
|
291
|
+
<ScrollerDots layout sx={{ backgroundColor: 'background.paper', boxShadow: 6 }} />
|
|
296
292
|
</Box>
|
|
297
293
|
</MotionBox>
|
|
298
294
|
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/next-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "4.8.
|
|
5
|
+
"version": "4.8.4",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@emotion/server": "^11.4.0",
|
|
21
21
|
"@emotion/styled": "^11.6.0",
|
|
22
22
|
"@graphcommerce/framer-next-pages": "3.2.2",
|
|
23
|
-
"@graphcommerce/framer-scroller": "2.1.
|
|
23
|
+
"@graphcommerce/framer-scroller": "2.1.15",
|
|
24
24
|
"@graphcommerce/framer-utils": "3.1.3",
|
|
25
25
|
"@graphcommerce/image": "3.1.6",
|
|
26
26
|
"react-is": "^17.0.0",
|