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