@graphcommerce/next-ui 3.1.7 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.7...@graphcommerce/next-ui@3.2.0) (2021-10-09)
+
+
+### Bug Fixes
+
+* **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
+* **framer-slider:** route changes ([4cadbea](https://github.com/ho-nl/m2-pwa/commit/4cadbea3e494326377e74e2fa9370ab80f8d8c35))
+* make sure the gallery never gets higher than 100% ([1eae8c7](https://github.com/ho-nl/m2-pwa/commit/1eae8c7cfb2a9e67f03f1e4e4db5c95213d2dbe0))
+* poistioning on mobile ([bec497f](https://github.com/ho-nl/m2-pwa/commit/bec497fca426346b80b453a3871b9c66521a2161))
+* **sidebar-gallery:** differentiate drag from click ([acd408e](https://github.com/ho-nl/m2-pwa/commit/acd408e400f8285e2b3a9105b4694d5fd839dd99))
+* **sidebar-gallery:** push gallery to history one time ([2c45b64](https://github.com/ho-nl/m2-pwa/commit/2c45b64e171577f7b584662d56416eeae4a22554))
+* **sidebar-gallery:** route handling ([1c3b8b1](https://github.com/ho-nl/m2-pwa/commit/1c3b8b1687b0bf637da6c88d2d9b30a734b98d11))
+* **sidebar-gallery:** use fullscreen and fullscreen exit icons ([1328d22](https://github.com/ho-nl/m2-pwa/commit/1328d220030f766be2d4046abd87d45175e4fe38))
+* use better URL handling and remove drag temporarily ([0b99387](https://github.com/ho-nl/m2-pwa/commit/0b993876280270320eef5301130c5cc3eb339ea9))
+
+
+### Features
+
+* **sidebar-gallery:** toggle with browser back buttons ([a2f804b](https://github.com/ho-nl/m2-pwa/commit/a2f804b0cedb98df8f6a7b197aeeeeda43c6b1ba))
+
+
+
+
+
 ## [3.1.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.6...@graphcommerce/next-ui@3.1.7) (2021-10-08)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,3 +1,4 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
   CenterSlide,
   MotionImageAspect,
@@ -10,18 +11,14 @@ import {
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
 import clsx from 'clsx'
-import { m, useDomEvent } from 'framer-motion'
-import React, { useRef, useState } from 'react'
+import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect, useRef } from 'react'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImage from '../../SvgImage'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import {
-  iconChevronLeft,
-  iconChevronRight,
-  iconCollapseVertical,
-  iconExpandVertical,
-} from '../../icons'
+import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
 
 type StyleProps = {
   aspectRatio: [number, number]
@@ -42,7 +39,7 @@ const useStyles = makeStyles(
     rootZoomed: {
       position: 'relative',
       zIndex: theme.zIndex.modal,
-      marginTop: 0,
+      marginTop: `calc(${theme.page.headerInnerHeight.sm} * -1)`,
       [theme.breakpoints.up('md')]: {
         marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm})`,
       },
@@ -79,8 +76,12 @@ const useStyles = makeStyles(
       gridAutoFlow: `column`,
       gridTemplateColumns: `repeat(100, 100%)`,
       gridTemplateRows: `100%`,
+      cursor: 'zoom-in',
     },
-
+    scrollerZoomed: ({ clientHeight }: StyleProps) => ({
+      height: clientHeight,
+      cursor: 'inherit',
+    }),
     sidebarWrapper: {
       boxSizing: 'content-box',
       display: 'grid',
@@ -163,27 +164,41 @@ export type SidebarGalleryProps = {
   sidebar: React.ReactNode
   images: MotionImageAspectProps[]
   aspectRatio?: [number, number]
+  routeHash?: string
 } & UseStyles<typeof useStyles>
 
 export default function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio = [1, 1] } = props
-  const [zoomed, setZoomed] = useState(false)
-
+  const { sidebar, images, aspectRatio = [1, 1], routeHash = 'gallery' } = props
+  const router = useRouter()
+  const prevRoute = usePrevPageRouter()
   const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
   const classes = useStyles({ clientHeight, aspectRatio })
 
+  const route = `#${routeHash}`
+  // We're using the URL to manage the state of the gallery.
+  const zoomed = router.asPath.endsWith(route)
+
+  // cleanup if someone enters the page with #gallery
+  useEffect(() => {
+    if (!prevRoute?.pathname && zoomed) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.replace(router.asPath.replace(route, ''))
+    }
+  }, [prevRoute?.pathname, route, router, zoomed])
+
   const toggle = () => {
-    setZoomed(!zoomed)
     if (!zoomed) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.push(route, undefined, { shallow: true })
       document.body.style.overflow = 'hidden'
       window.scrollTo({ top: 0, behavior: 'smooth' })
+    } else {
+      router.back()
     }
   }
 
   const clsxZoom = (key: string) => clsx(classes?.[key], zoomed && classes?.[`${key}Zoomed`])
-
   const theme = useTheme()
-
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
   const handleEscapeKey = (e: KeyboardEvent | Event) => {
@@ -194,6 +209,16 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
+  const dragStart = useMotionValue<number>(0)
+  const onMouseDownScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (dragStart.get() === e.clientX) return
+    dragStart.set(e.clientX)
+  }
+  const onMouseUpScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    const currentDragLoc = e.clientX
+    if (Math.abs(currentDragLoc - dragStart.get()) < 8) toggle()
+  }
+
   useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
 
   return (
@@ -206,7 +231,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             if (!zoomed) document.body.style.overflow = ''
           }}
         >
-          <Scroller className={clsxZoom('scroller')} hideScrollbar>
+          <Scroller
+            className={clsxZoom('scroller')}
+            hideScrollbar
+            onMouseDown={onMouseDownScroller}
+            onMouseUp={onMouseUpScroller}
+          >
             {images.map((image, idx) => (
               <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
                 <MotionImageAspect
@@ -225,11 +255,11 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             ))}
           </Scroller>
           <m.div layout className={classes.topRight}>
-            <Fab color='inherit' size='small' className={classes.toggleIcon} onClick={toggle}>
+            <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
               {!zoomed ? (
-                <SvgImage src={iconExpandVertical} alt='Zoom in' loading='eager' />
+                <SvgImage src={iconFullscreen} alt='Zoom in' loading='eager' size='small' />
               ) : (
-                <SvgImage src={iconCollapseVertical} alt='Zoom out' loading='eager' />
+                <SvgImage src={iconFullscreenExit} alt='Zoom out' loading='eager' size='small' />
               )}
             </Fab>
           </m.div>
@@ -248,6 +278,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             <ScrollerDots layout />
           </div>
         </m.div>
+
         <div className={clsxZoom('sidebarWrapper')}>
           <m.div layout className={clsxZoom('sidebar')}>
             {sidebar}

package/FramerScroller/components/SidebarSlider.tsx

@@ -1,4 +1,3 @@
-import { relative } from 'path/posix'
 import {
   Scroller,
   ScrollerButton,
@@ -8,9 +7,10 @@ import {
 import { Theme } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
 import React, { ReactNode } from 'react'
-import { SvgImageSimple, iconChevronLeft, iconChevronRight } from '../..'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronLeft, iconChevronRight } from '../../icons'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -37,7 +37,6 @@ const useStyles = makeStyles(
       gridRowGap: theme.spacings.lg,
       alignContent: 'space-around',
       paddingRight: theme.page.horizontal,
-
       '& > *': {
         minWidth: responsiveVal(200, 400),
       },

package/icons/icon_fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>

package/icons/icon_fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>

package/icons/index.tsx

@@ -12,11 +12,9 @@ export { default as iconChevronRight } from './icon_chevron_right.svg'
 export { default as iconChevronUp } from './icon_chevron_up.svg'
 export { default as iconClose } from './icon_close.svg'
 export { default as iconCloseCircle } from './icon_close_circle.svg'
-export { default as iconCollapseVertical } from './icon_collapse_vertical.svg'
 export { default as iconCustomerService } from './icon_customer_service.svg'
 export { default as iconEmail } from './icon_email.svg'
 export { default as iconEmailOutline } from './icon_email_outline.svg'
-export { default as iconExpandVertical } from './icon_expand_vertical.svg'
 export { default as iconHeart } from './icon_heart.svg'
 export { default as iconHome } from './icon_home.svg'
 export { default as iconId } from './icon_id.svg'
@@ -40,3 +38,5 @@ export { default as iconStar } from './icon_star.svg'
 export { default as iconStarFilledMuted } from './icon_star_filled_muted.svg'
 export { default as iconStarYellow } from './icon_star_yellow.svg'
 export { default as iconParty } from './icon_party.svg'
+export { default as iconFullscreenExit } from './icon_fullscreen_exit.svg'
+export { default as iconFullscreen } from './icon_fullscreen.svg'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.1.7",
+  "version": "3.2.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.106.6",
-    "@graphcommerce/framer-scroller": "^0.2.7",
-    "@graphcommerce/framer-sheet": "^2.105.5",
-    "@graphcommerce/framer-utils": "^2.103.5",
+    "@graphcommerce/framer-next-pages": "^2.106.7",
+    "@graphcommerce/framer-scroller": "^0.2.8",
+    "@graphcommerce/framer-sheet": "^2.105.6",
+    "@graphcommerce/framer-utils": "^2.103.6",
     "@graphcommerce/graphql": "^2.103.5",
-    "@graphcommerce/image": "^2.104.6",
+    "@graphcommerce/image": "^2.104.7",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -55,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "7c6ad9b6fdf91e48b33013218d962ad15f931db8"
+  "gitHead": "b3dd4c996ac571874bb03d0a5c16b2c37f41abcb"
 }

package/icons/icon_collapse_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>

package/icons/icon_expand_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>