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

Refactor PosePicker a bit

Browse source 
Just extracting some things to make the main function body leaner so
it's easier to add the alt styles stuff.
This commit is contained in:
Emi Matchu 2024-01-29 01:39:41 -08:00
parent 32f5d6d4a0
commit 57beca1b3c
1 changed files with 96 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
View file

@ -158,10 +158,56 @@ function PosePicker({
lazyBehavior="keepMounted" lazyBehavior="keepMounted"
> >
{({ isOpen }) => ( {({ isOpen }) => (
<ClassNames>
{({ css, cx }) => (
<> <>
<PopoverTrigger> <PopoverTrigger>
<PosePickerButton pose={pose} isOpen={isOpen} {...props} />
</PopoverTrigger>
<Portal>
<PopoverContent>
<Box p="4" position="relative">
{isInSupportMode ? (
<PosePickerSupport
speciesId={speciesId}
colorId={colorId}
pose={pose}
appearanceId={appearanceId}
initialFocusRef={initialFocusRef}
dispatchToOutfit={dispatchToOutfit}
/>
) : (
<>
<PosePickerTable
poseInfos={poseInfos}
onChange={onChange}
initialFocusRef={initialFocusRef}
/>
{numStandardPoses == 0 && <PosePickerEmptyExplanation />}
</>
)}
<SupportOnly>
<Box position="absolute" top="5" left="3">
<PosePickerSupportSwitch
isChecked={isInSupportMode}
onChange={(e) => setIsInSupportMode(e.target.checked)}
/>
</Box>
</SupportOnly>
</Box>
<PopoverArrow />
</PopoverContent>
</Portal>
</>
)}
</Popover>
);
}
function PosePickerButton({ pose, isOpen, ...props }, ref) {
const theme = useTheme();
return (
<ClassNames>
{({ css, cx }) => (
<Button <Button
variant="unstyled" variant="unstyled"
boxShadow="md" boxShadow="md"
@ -189,62 +235,15 @@ function PosePicker({
isOpen && "is-open", isOpen && "is-open",
)} )}
{...props} {...props}
ref={ref}
> >
<EmojiImage src={getIcon(pose)} alt="Choose a pose" /> <EmojiImage src={getIcon(pose)} alt="Choose a pose" />
</Button> </Button>
</PopoverTrigger>
<Portal>
<PopoverContent>
<Box p="4" position="relative">
{isInSupportMode ? (
<PosePickerSupport
speciesId={speciesId}
colorId={colorId}
pose={pose}
appearanceId={appearanceId}
initialFocusRef={initialFocusRef}
dispatchToOutfit={dispatchToOutfit}
/>
) : (
<>
<PosePickerTable
poseInfos={poseInfos}
onChange={onChange}
initialFocusRef={initialFocusRef}
/>
{numStandardPoses == 0 && (
<Box
fontSize="xs"
fontStyle="italic"
textAlign="center"
opacity="0.7"
marginTop="2"
>
We're still working on labeling these! For now,
we're just giving you one of the poses we have.
</Box>
)}
</>
)}
<SupportOnly>
<Box position="absolute" top="5" left="3">
<PosePickerSupportSwitch
isChecked={isInSupportMode}
onChange={(e) => setIsInSupportMode(e.target.checked)}
/>
</Box>
</SupportOnly>
</Box>
<PopoverArrow />
</PopoverContent>
</Portal>
</>
)} )}
</ClassNames> </ClassNames>
)}
</Popover>
); );
} }
PosePickerButton = React.forwardRef(PosePickerButton);
function PosePickerTable({ poseInfos, onChange, initialFocusRef }) { function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
return ( return (
@ -505,6 +504,21 @@ function PoseOption({
); );
} }
function PosePickerEmptyExplanation() {
return (
<Box
fontSize="xs"
fontStyle="italic"
textAlign="center"
opacity="0.7"
marginTop="2"
>
We're still working on labeling these! For now, we're just giving you one
of the poses we have.
</Box>
);
}
function EmojiImage({ src, alt, boxSize = 16 }) { function EmojiImage({ src, alt, boxSize = 16 }) {
return <img src={src} alt={alt} width={boxSize} height={boxSize} />; return <img src={src} alt={alt} width={boxSize} height={boxSize} />;
} }