OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

fix bug to resize PosePicker when it changes

Browse source 
Previously, toggling between the two PosePicker modes could dramatically disrupt the layout, because Popover didn't know to re-measure itself.

In this change, we add a hacky workaround to simulate a window resize event in moments when we know the content is changing. (The realistic ideal solution would still have these manual triggers, but would use an official API in Chakra to notify the Popper instance directly.)
This commit is contained in:
Emi Matchu 2020-08-29 14:19:43 -07:00
parent 05e5c5ad3e
commit d41f80518a
2 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/WardrobePage/PosePicker.js
View file

@ -68,6 +68,16 @@ function PosePicker({
false
);
// Resize the Popover when we toggle support mode, because it probably will
// affect the content size.
React.useLayoutEffect(() => {
// HACK: To trigger a Popover resize, we simulate a window resize event,
// because Popover listens for window resizes to reposition itself.
// I've also filed an issue requesting an official API!
// https://github.com/chakra-ui/chakra-ui/issues/1853
window.dispatchEvent(new Event("resize"));
}, [isInSupportMode]);
if (loading) {
return null;
}
@ -141,7 +151,7 @@ function PosePicker({
</PopoverTrigger>
<Portal>
<PopoverContent>
<Box p="4" position="relative" minWidth="200px" minHeight="150px">
<Box p="4" position="relative">
{isInSupportMode ? (
<PosePickerSupport
speciesId={speciesId}

14
src/app/WardrobePage/support/PosePickerSupport.js
View file

@ -76,6 +76,20 @@ function PosePickerSupport({
{ variables: { speciesId, colorId } }
);
// Resize the Popover when we toggle loading state, because it probably will
// affect the content size.
//
// NOTE: This also triggers an additional necessary resize when the component
// first mounts, because PosePicker lazy-loads it, so it actually
// mounting affects size too.
React.useLayoutEffect(() => {
// HACK: To trigger a Popover resize, we simulate a window resize event,
// because Popover listens for window resizes to reposition itself.
// I've also filed an issue requesting an official API!
// https://github.com/chakra-ui/chakra-ui/issues/1853
window.dispatchEvent(new Event("resize"));
}, [loading]);
if (loading) {
return (
<Box display="flex" justifyContent="center">