-
Notifications
You must be signed in to change notification settings - Fork 686
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MiniCart Height Fix #1387
MiniCart Height Fix #1387
Changes from 6 commits
927ad4e
a203ede
db18698
fd9fa4d
2e67196
deaa1bd
b420f2b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,8 @@ | ||
import React from 'react'; | ||
import React, { useEffect, useRef, useState } from 'react'; | ||
import { arrayOf, bool, func, number, object, shape, string } from 'prop-types'; | ||
import debounce from 'lodash.debounce'; | ||
|
||
import { useWindowSize } from '@magento/peregrine'; | ||
|
||
import Body from './body'; | ||
import Footer from './footer'; | ||
|
@@ -26,12 +29,35 @@ const MiniCart = props => { | |
} = props; | ||
const { editItem, isEditingItem, isLoading, isUpdatingItem } = cart; | ||
|
||
// Hooks. | ||
const { innerHeight } = useWindowSize(); | ||
const [viewportHeight, setViewportHeight] = useState(innerHeight); | ||
// We need innerHeight to be mutable so its value is not captured in | ||
// our debounced function. | ||
const innerHeightMutableRef = useRef(innerHeight); | ||
|
||
// Always update the innerHeight mutable ref with innerHeight's latest value. | ||
innerHeightMutableRef.current = innerHeight; | ||
|
||
const setViewportHeightDebounced = debounce(() => { | ||
// We're really just doing setViewportHeight(innerHeight) here | ||
// but because we're within a debounced function, innerHeight | ||
// gets captured (never updates). | ||
// So we use this ref instead to ensure we always have the latest value. | ||
setViewportHeight(innerHeightMutableRef.current); | ||
}, 1000); | ||
const setViewportHeightDebouncedRef = useRef(setViewportHeightDebounced); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I didn't add a comment in the code here but just FYI we also had to make the debounced function a ref because otherwise a new debounced function would get created each time through this function and they would ALL fire after the debounce delay. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we not just There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good question - I had that thought too but for some reason tried If you think it's better I can switch it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isn't this also going to multiple references to |
||
useEffect(setViewportHeightDebouncedRef.current, [innerHeight]); | ||
|
||
// Members. | ||
const classes = mergeClasses(defaultClasses, props.classes); | ||
const currencyCode = getCurrencyCode(cart); | ||
const cartItems = cart.details.items; | ||
const numItems = cart.details.items_qty; | ||
const rootClass = isOpen ? classes.root_open : classes.root; | ||
const rootStyle = { | ||
'--minicart-height-unit': `${viewportHeight * 0.01}px` | ||
}; | ||
const subtotal = cart.totals.subtotal; | ||
|
||
const showFooter = !(isCartEmpty || isLoading || isEditingItem); | ||
|
@@ -46,7 +72,7 @@ const MiniCart = props => { | |
) : null; | ||
|
||
return ( | ||
<aside className={rootClass}> | ||
<aside className={rootClass} style={rootStyle}> | ||
<Header closeDrawer={closeDrawer} isEditingItem={isEditingItem} /> | ||
<Body | ||
beginEditItem={beginEditItem} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change has nothing to do with this PR but it failed linting and I couldn't push without it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cough
--no-verify
cough I mean what? Good job thanks!