@graphcommerce/magento-product 3.0.12 → 3.0.16
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 +12 -0
- package/components/ProductListFiltersContainer/index.tsx +11 -10
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.14...@graphcommerce/magento-product@3.0.15) (2021-10-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
|
|
12
|
+
* **product-list-filters-container:** drop shadow fades in too fast ([2e8f848](https://github.com/ho-nl/m2-pwa/commit/2e8f84809baa3fe6c2861f8992f46b6a07842ec6))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [3.0.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.7...@graphcommerce/magento-product@3.0.8) (2021-09-30)
|
|
7
19
|
|
|
8
20
|
|
|
@@ -68,12 +68,13 @@ export type ProductListFiltersContainerProps = PropsWithChildren<UseStyles<typeo
|
|
|
68
68
|
|
|
69
69
|
export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
|
|
70
70
|
const { children } = props
|
|
71
|
-
|
|
72
71
|
const classes = useStyles(props)
|
|
73
72
|
const { scrollY } = useViewportScroll()
|
|
73
|
+
|
|
74
74
|
const [isSticky, setIsSticky] = useState<boolean>(false)
|
|
75
|
-
const [startPosition, setStartPosition] = useState(100)
|
|
76
|
-
const [spacing, setSpacing] = useState(20)
|
|
75
|
+
const [startPosition, setStartPosition] = useState<number>(100)
|
|
76
|
+
const [spacing, setSpacing] = useState<number>(20)
|
|
77
|
+
|
|
77
78
|
const scrollHalfway = startPosition + spacing
|
|
78
79
|
|
|
79
80
|
const wrapperRef = useRef<HTMLDivElement>(null)
|
|
@@ -87,8 +88,9 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
87
88
|
const nextOffset =
|
|
88
89
|
(wrapperRef.current?.parentElement?.nextElementSibling as HTMLElement | null)?.offsetTop ??
|
|
89
90
|
0
|
|
91
|
+
const modifier = 5
|
|
90
92
|
|
|
91
|
-
setSpacing(nextOffset - elemHeigh - offset + 20)
|
|
93
|
+
setSpacing((nextOffset - elemHeigh - offset + 20) * modifier)
|
|
92
94
|
setStartPosition(offset)
|
|
93
95
|
})
|
|
94
96
|
if (wrapperRef.current) observer.observe(wrapperRef.current)
|
|
@@ -108,11 +110,10 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
108
110
|
return scrollY.onChange(onCheckStickyChange)
|
|
109
111
|
}, [isSticky, scrollHalfway, scrollY])
|
|
110
112
|
|
|
111
|
-
const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
|
|
113
|
+
const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.1])
|
|
114
|
+
const boxShadow = useMotionTemplate`
|
|
115
|
+
0 4px 12px 0 rgba(0, 0, 0, ${opacity})
|
|
116
|
+
`
|
|
116
117
|
|
|
117
118
|
return (
|
|
118
119
|
<m.div className={classes.wrapper} ref={wrapperRef}>
|
|
@@ -122,7 +123,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
122
123
|
</ScrollerButton>
|
|
123
124
|
<m.div
|
|
124
125
|
className={clsx(classes.container, isSticky && classes.containerSticky)}
|
|
125
|
-
style={{
|
|
126
|
+
style={{ boxShadow }}
|
|
126
127
|
>
|
|
127
128
|
<Scroller
|
|
128
129
|
className={clsx(classes.scroller, isSticky && classes.scrollerSticky)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-product",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.16",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
6
|
"browserslist": [
|
|
@@ -14,19 +14,19 @@
|
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@graphcommerce/browserslist-config-pwa": "^3.0.1",
|
|
17
|
-
"@graphcommerce/eslint-config-pwa": "^3.0.
|
|
17
|
+
"@graphcommerce/eslint-config-pwa": "^3.0.5",
|
|
18
18
|
"@graphcommerce/prettier-config-pwa": "^3.0.2",
|
|
19
19
|
"@graphcommerce/typescript-config-pwa": "^3.1.0",
|
|
20
20
|
"@playwright/test": "^1.15.0"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@apollo/client": "^3.
|
|
24
|
-
"@graphcommerce/framer-scroller": "^0.2.
|
|
25
|
-
"@graphcommerce/graphql": "^2.103.
|
|
26
|
-
"@graphcommerce/image": "^2.104.
|
|
27
|
-
"@graphcommerce/magento-cart": "^3.
|
|
28
|
-
"@graphcommerce/magento-store": "^3.0.
|
|
29
|
-
"@graphcommerce/next-ui": "^3.1.
|
|
23
|
+
"@apollo/client": "^3.4.16",
|
|
24
|
+
"@graphcommerce/framer-scroller": "^0.2.6",
|
|
25
|
+
"@graphcommerce/graphql": "^2.103.5",
|
|
26
|
+
"@graphcommerce/image": "^2.104.6",
|
|
27
|
+
"@graphcommerce/magento-cart": "^3.1.2",
|
|
28
|
+
"@graphcommerce/magento-store": "^3.0.13",
|
|
29
|
+
"@graphcommerce/next-ui": "^3.1.5",
|
|
30
30
|
"@graphql-typed-document-node/core": "^3.1.0",
|
|
31
31
|
"@material-ui/core": "^4.12.3",
|
|
32
32
|
"@material-ui/lab": "^4.0.0-alpha.60",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"schema-dts": "^1.0.0",
|
|
39
39
|
"type-fest": "^2.3.4"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
|
|
42
42
|
}
|