@graphcommerce/framer-scroller 5.2.0-canary.8 → 6.0.0-canary.20
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
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 6.0.0-canary.20
|
|
4
|
+
|
|
5
|
+
## 5.2.0-canary.19
|
|
6
|
+
|
|
7
|
+
## 5.2.0-canary.18
|
|
8
|
+
|
|
9
|
+
## 5.2.0-canary.17
|
|
10
|
+
|
|
11
|
+
## 5.2.0-canary.16
|
|
12
|
+
|
|
13
|
+
## 5.2.0-canary.15
|
|
14
|
+
|
|
15
|
+
## 5.2.0-canary.14
|
|
16
|
+
|
|
17
|
+
## 5.2.0-canary.13
|
|
18
|
+
|
|
19
|
+
## 5.2.0-canary.12
|
|
20
|
+
|
|
21
|
+
## 5.2.0-canary.11
|
|
22
|
+
|
|
23
|
+
## 5.2.0-canary.10
|
|
24
|
+
|
|
25
|
+
## 5.2.0-canary.9
|
|
26
|
+
|
|
3
27
|
## 5.2.0-canary.8
|
|
4
28
|
|
|
5
29
|
## 5.2.0-canary.7
|
|
@@ -28,8 +28,8 @@ export const ScrollerButton = m(
|
|
|
28
28
|
useTransform<number, number>([xProgress, yProgress, xMax, yMax], ([x, y, xM, yM]) => {
|
|
29
29
|
if (xM === 0 && yM === 0) return 0
|
|
30
30
|
|
|
31
|
-
if (direction === 'left') return x < 0.
|
|
32
|
-
if (direction === 'right') return x > 0.
|
|
31
|
+
if (direction === 'left') return x < 0.01 ? 0 : 1
|
|
32
|
+
if (direction === 'right') return x > 0.99 ? 0 : 1
|
|
33
33
|
if (direction === 'up') return y < 0.1 ? 0 : 1
|
|
34
34
|
if (direction === 'down') return y > 0.9 ? 0 : 1
|
|
35
35
|
|
|
@@ -41,14 +41,17 @@ export function ScrollerDot(props: ScrollerDotProps) {
|
|
|
41
41
|
sx={{
|
|
42
42
|
boxShadow: 'none',
|
|
43
43
|
background: 'transparent',
|
|
44
|
+
aspectRatio: '1/1',
|
|
45
|
+
height: 'auto',
|
|
46
|
+
minHeight: 'auto',
|
|
44
47
|
}}
|
|
45
48
|
>
|
|
46
49
|
<MotionBox
|
|
47
50
|
className={classes.circle}
|
|
48
51
|
sx={(theme) => ({
|
|
49
52
|
borderRadius: '99em',
|
|
50
|
-
width: 10,
|
|
51
|
-
height: 10,
|
|
53
|
+
width: { xs: 6, sm: 8, md: 10 },
|
|
54
|
+
height: { xs: 6, sm: 8, md: 10 },
|
|
52
55
|
background: theme.palette.text.primary,
|
|
53
56
|
})}
|
|
54
57
|
style={{ opacity }}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMotionValueValue } from '@graphcommerce/framer-utils'
|
|
2
2
|
import { extendableComponent } from '@graphcommerce/next-ui/Styles'
|
|
3
|
-
import { FabProps, styled, SxProps, Theme } from '@mui/material'
|
|
3
|
+
import { Box, FabProps, styled, SxProps, Theme } from '@mui/material'
|
|
4
4
|
import { m } from 'framer-motion'
|
|
5
5
|
import React from 'react'
|
|
6
6
|
import { useScrollerContext } from '../hooks/useScrollerContext'
|
|
@@ -26,17 +26,20 @@ export const ScrollerDots = m(
|
|
|
26
26
|
if (itemsArr.length <= 1) return null
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
|
-
<
|
|
29
|
+
<Box
|
|
30
30
|
{...containerProps}
|
|
31
31
|
className={classes.root}
|
|
32
32
|
ref={ref}
|
|
33
33
|
sx={[
|
|
34
34
|
{
|
|
35
35
|
width: 'fit-content',
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
maxWidth: '100%',
|
|
37
|
+
mx: 4,
|
|
38
|
+
py: 0,
|
|
39
|
+
px: 1,
|
|
40
|
+
borderRadius: 8,
|
|
41
|
+
background: 'transparent',
|
|
42
|
+
display: 'flex',
|
|
40
43
|
},
|
|
41
44
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
42
45
|
]}
|
|
@@ -45,7 +48,7 @@ export const ScrollerDots = m(
|
|
|
45
48
|
// eslint-disable-next-line react/no-array-index-key
|
|
46
49
|
<ScrollerDot key={idx} {...item} idx={idx} />
|
|
47
50
|
))}
|
|
48
|
-
</
|
|
51
|
+
</Box>
|
|
49
52
|
)
|
|
50
53
|
}),
|
|
51
54
|
)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useMatchMedia } from '@graphcommerce/next-ui'
|
|
1
|
+
import { useMatchMedia } from '@graphcommerce/next-ui/hooks/useMatchMedia'
|
|
2
2
|
import { PanInfo } from 'framer-motion'
|
|
3
3
|
import { inertia, InertiaOptions } from 'popmotion'
|
|
4
4
|
import { ScrollerContext } from '../types'
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/framer-scroller",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "
|
|
5
|
+
"version": "6.0.0-canary.20",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "tsc -W"
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"popmotion": "11.0.5",
|
|
19
|
-
"@graphcommerce/framer-utils": "
|
|
20
|
-
"@graphcommerce/image": "
|
|
19
|
+
"@graphcommerce/framer-utils": "6.0.0-canary.20",
|
|
20
|
+
"@graphcommerce/image": "6.0.0-canary.20"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@graphcommerce/eslint-config-pwa": "
|
|
24
|
-
"@graphcommerce/prettier-config-pwa": "
|
|
25
|
-
"@graphcommerce/typescript-config-pwa": "
|
|
23
|
+
"@graphcommerce/eslint-config-pwa": "6.0.0-canary.20",
|
|
24
|
+
"@graphcommerce/prettier-config-pwa": "6.0.0-canary.20",
|
|
25
|
+
"@graphcommerce/typescript-config-pwa": "6.0.0-canary.20"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@mui/material": "^5.10.16",
|
|
29
|
-
"@lingui/react": "
|
|
30
|
-
"@lingui/core": "
|
|
29
|
+
"@lingui/react": "3.17.1",
|
|
30
|
+
"@lingui/core": "3.17.1",
|
|
31
31
|
"framer-motion": "^7.0.0",
|
|
32
32
|
"next": "^13.1.1",
|
|
33
33
|
"react": "^18.2.0",
|