@graphcommerce/framer-scroller 0.2.6 → 0.2.10

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.8...@graphcommerce/framer-scroller@0.2.9) (2021-10-11)
+
+
+### Bug Fixes
+
+* **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
+
+
+
+
+
+## [0.2.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.7...@graphcommerce/framer-scroller@0.2.8) (2021-10-09)
+
+
+### Bug Fixes
+
+* **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
+
+
+
+
+
 ## [0.2.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.0...@graphcommerce/framer-scroller@0.2.2) (2021-09-27)
 
 

package/components/ScrollerDots.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { UseStyles } from '@graphcommerce/next-ui'
 import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { HTMLMotionProps, m } from 'framer-motion'
@@ -6,11 +7,6 @@ import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
 
-export type DotsProps = {
-  classes?: Record<'dots' | 'dot' | 'circle', string>
-  fabProps?: Omit<FabProps, 'onClick' | 'children'>
-} & HTMLMotionProps<'div'>
-
 const useStyles = makeStyles(
   (theme: Theme) => ({
     dots: {
@@ -18,6 +14,7 @@ const useStyles = makeStyles(
       display: 'grid',
       gridAutoFlow: 'column',
       padding: `0 7px`,
+      borderRadius: '20px',
     },
     dot: {
       boxShadow: 'none',
@@ -34,8 +31,13 @@ const useStyles = makeStyles(
   { name: 'ScrollerDots' },
 )
 
+export type DotsProps = {
+  fabProps?: Omit<FabProps, 'onClick' | 'children'>
+} & HTMLMotionProps<'div'> &
+  UseStyles<typeof useStyles>
+
 const ScrollerDots = m(
-  React.forwardRef<any, DotsProps>((props, ref) => {
+  React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
     const { fabProps, ...containerProps } = props
     const { dots, dot, circle, ...classes } = useStyles(props)
     const { items, getScrollSnapPositions } = useScrollerContext()

package/hooks/useScroller.ts

@@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core'
 import clsx from 'clsx'
 import {
   HTMLMotionProps,
-  PanInfo,
   motionValue,
-  useDomEvent,
+  MotionValue,
   PanHandlers,
-  m,
+  PanInfo,
+  useDomEvent,
   useTransform,
-  MotionValue,
 } from 'framer-motion'
 import React, { ReactHTML, useState } from 'react'
 import { ScrollSnapProps } from '../types'
@@ -100,7 +99,10 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   })
 
   const scrollStart = useConstant(() => ({ x: motionValue(0), y: motionValue(0) }))
-  const onPanStart: PanHandlers['onPanStart'] = () => {
+  const onPanStart: PanHandlers['onPanStart'] = (event) => {
+    // If we're not dealing with the mouse we don't need to do anything
+    if (!isHTMLMousePointerEvent(event)) return
+
     scrollStart.x.set(scroll.x.get())
     scrollStart.y.set(scroll.y.get())
     disableSnap()
@@ -120,6 +122,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   const onPanEnd: PanHandlers['onPanEnd'] = (event, info) => {
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
+
     setPanning(false)
     animatePan(info, enableSnap)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "0.2.6",
+  "version": "0.2.10",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,16 +16,16 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.5",
-    "@graphcommerce/image": "^2.104.6",
+    "@graphcommerce/framer-utils": "^2.103.7",
+    "@graphcommerce/image": "^2.104.9",
     "@material-ui/core": "^4.12.3",
     "popmotion": "9.3.6"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.5",
-    "@graphcommerce/prettier-config-pwa": "^3.0.2",
-    "@graphcommerce/typescript-config-pwa": "^3.1.0",
+    "@graphcommerce/browserslist-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.6",
+    "@graphcommerce/prettier-config-pwa": "^3.0.3",
+    "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.15.0"
   },
   "peerDependencies": {
@@ -35,5 +35,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^1.0.1"
   },
-  "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
+  "gitHead": "06977d2e65b4ab4eb4a472fc56f8b1a99512f1bd"
 }

package/hooks/useItemVisibility.ts

@@ -1,22 +0,0 @@
-import { useEffect } from 'react'
-import { ItemState } from '../types'
-import { useScrollerContext } from './useScrollerContext'
-
-export function useWatchItems(callback: (item: ItemState, items: ItemState[]) => void) {
-  const { items } = useScrollerContext()
-
-  useEffect(() => {
-    const watched: (() => void)[] = []
-
-    const handleItemChange = (itemArr: ItemState[]) => {
-      itemArr.forEach((item) => {
-        watched.push(item.visibility.onChange(() => callback(item, items.get())))
-      })
-    }
-
-    watched.push(items.onChange(handleItemChange))
-    handleItemChange(items.get())
-
-    return () => watched.forEach((w) => w())
-  })
-}