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

fix PosePicker portal for Chakra UI Next

Browse source 
Oh oops, Chakra UI Next deprecates usePortal for the popover, so it wasn't escaping properly! Add a Portal component to let it escape the top area again!
This commit is contained in:
Emi Matchu 2020-07-31 23:31:51 -07:00
parent 7f8401ff4b
commit 4aece9d703
1 changed files with 90 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import {
PopoverArrow, PopoverArrow,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
Portal,
VisuallyHidden, VisuallyHidden,
useTheme, useTheme,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
@ -62,7 +63,6 @@ function PosePicker({
return ( return (
<Popover <Popover
placement="bottom-end" placement="bottom-end"
usePortal
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={onLockFocus}
onClose={onUnlockFocus} onClose={onUnlockFocus}
@ -109,93 +109,95 @@ function PosePicker({
)} )}
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent> <Portal>
<Box p="4"> <PopoverContent>
<table width="100%"> <Box p="4">
<thead> <table width="100%">
<tr> <thead>
<th /> <tr>
<Cell as="th"> <th />
<EmojiImage src={twemojiSmile} alt="Happy" /> <Cell as="th">
</Cell> <EmojiImage src={twemojiSmile} alt="Happy" />
<Cell as="th"> </Cell>
<EmojiImage src={twemojiCry} alt="Sad" /> <Cell as="th">
</Cell> <EmojiImage src={twemojiCry} alt="Sad" />
<Cell as="th"> </Cell>
<EmojiImage src={twemojiSick} alt="Sick" /> <Cell as="th">
</Cell> <EmojiImage src={twemojiSick} alt="Sick" />
</tr> </Cell>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<Cell as="th"> <tr>
<EmojiImage src={twemojiMasc} alt="Masculine" /> <Cell as="th">
</Cell> <EmojiImage src={twemojiMasc} alt="Masculine" />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.happyMasc} <PoseOption
onChange={onChange} poseInfo={poseInfos.happyMasc}
inputRef={ onChange={onChange}
poseInfos.happyMasc.isSelected && checkedInputRef inputRef={
} poseInfos.happyMasc.isSelected && checkedInputRef
/> }
</Cell> />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.sadMasc} <PoseOption
onChange={onChange} poseInfo={poseInfos.sadMasc}
inputRef={ onChange={onChange}
poseInfos.sadMasc.isSelected && checkedInputRef inputRef={
} poseInfos.sadMasc.isSelected && checkedInputRef
/> }
</Cell> />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.sickMasc} <PoseOption
onChange={onChange} poseInfo={poseInfos.sickMasc}
inputRef={ onChange={onChange}
poseInfos.sickMasc.isSelected && checkedInputRef inputRef={
} poseInfos.sickMasc.isSelected && checkedInputRef
/> }
</Cell> />
</tr> </Cell>
<tr> </tr>
<Cell as="th"> <tr>
<EmojiImage src={twemojiFem} alt="Feminine" /> <Cell as="th">
</Cell> <EmojiImage src={twemojiFem} alt="Feminine" />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.happyFem} <PoseOption
onChange={onChange} poseInfo={poseInfos.happyFem}
inputRef={ onChange={onChange}
poseInfos.happyFem.isSelected && checkedInputRef inputRef={
} poseInfos.happyFem.isSelected && checkedInputRef
/> }
</Cell> />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.sadFem} <PoseOption
onChange={onChange} poseInfo={poseInfos.sadFem}
inputRef={ onChange={onChange}
poseInfos.sadFem.isSelected && checkedInputRef inputRef={
} poseInfos.sadFem.isSelected && checkedInputRef
/> }
</Cell> />
<Cell as="td"> </Cell>
<PoseOption <Cell as="td">
poseInfo={poseInfos.sickFem} <PoseOption
onChange={onChange} poseInfo={poseInfos.sickFem}
inputRef={ onChange={onChange}
poseInfos.sickFem.isSelected && checkedInputRef inputRef={
} poseInfos.sickFem.isSelected && checkedInputRef
/> }
</Cell> />
</tr> </Cell>
</tbody> </tr>
</table> </tbody>
</Box> </table>
<PopoverArrow /> </Box>
</PopoverContent> <PopoverArrow />
</PopoverContent>
</Portal>
</> </>
)} )}
</Popover> </Popover>