Refactor PosePicker a bit
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:
parent
32f5d6d4a0
commit
57beca1b3c
1 changed files with 96 additions and 82 deletions
|
|
@ -158,94 +158,93 @@ function PosePicker({
|
||||||
lazyBehavior="keepMounted"
|
lazyBehavior="keepMounted"
|
||||||
>
|
>
|
||||||
{({ isOpen }) => (
|
{({ isOpen }) => (
|
||||||
<ClassNames>
|
<>
|
||||||
{({ css, cx }) => (
|
<PopoverTrigger>
|
||||||
<>
|
<PosePickerButton pose={pose} isOpen={isOpen} {...props} />
|
||||||
<PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<Button
|
<Portal>
|
||||||
variant="unstyled"
|
<PopoverContent>
|
||||||
boxShadow="md"
|
<Box p="4" position="relative">
|
||||||
d="flex"
|
{isInSupportMode ? (
|
||||||
alignItems="center"
|
<PosePickerSupport
|
||||||
justifyContent="center"
|
speciesId={speciesId}
|
||||||
_focus={{ borderColor: "gray.50" }}
|
colorId={colorId}
|
||||||
_hover={{ borderColor: "gray.50" }}
|
pose={pose}
|
||||||
outline="initial"
|
appearanceId={appearanceId}
|
||||||
className={cx(
|
initialFocusRef={initialFocusRef}
|
||||||
css`
|
dispatchToOutfit={dispatchToOutfit}
|
||||||
border: 1px solid transparent !important;
|
/>
|
||||||
transition: border-color 0.2s !important;
|
) : (
|
||||||
|
<>
|
||||||
&:focus,
|
<PosePickerTable
|
||||||
&:hover,
|
poseInfos={poseInfos}
|
||||||
&.is-open {
|
onChange={onChange}
|
||||||
border-color: ${theme.colors.gray["50"]} !important;
|
initialFocusRef={initialFocusRef}
|
||||||
}
|
/>
|
||||||
|
{numStandardPoses == 0 && <PosePickerEmptyExplanation />}
|
||||||
&.is-open {
|
</>
|
||||||
border-width: 2px !important;
|
)}
|
||||||
}
|
<SupportOnly>
|
||||||
`,
|
<Box position="absolute" top="5" left="3">
|
||||||
isOpen && "is-open",
|
<PosePickerSupportSwitch
|
||||||
)}
|
isChecked={isInSupportMode}
|
||||||
{...props}
|
onChange={(e) => setIsInSupportMode(e.target.checked)}
|
||||||
>
|
/>
|
||||||
<EmojiImage src={getIcon(pose)} alt="Choose a pose" />
|
|
||||||
</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>
|
</Box>
|
||||||
<PopoverArrow />
|
</SupportOnly>
|
||||||
</PopoverContent>
|
</Box>
|
||||||
</Portal>
|
<PopoverArrow />
|
||||||
</>
|
</PopoverContent>
|
||||||
)}
|
</Portal>
|
||||||
</ClassNames>
|
</>
|
||||||
)}
|
)}
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PosePickerButton({ pose, isOpen, ...props }, ref) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ClassNames>
|
||||||
|
{({ css, cx }) => (
|
||||||
|
<Button
|
||||||
|
variant="unstyled"
|
||||||
|
boxShadow="md"
|
||||||
|
d="flex"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
_focus={{ borderColor: "gray.50" }}
|
||||||
|
_hover={{ borderColor: "gray.50" }}
|
||||||
|
outline="initial"
|
||||||
|
className={cx(
|
||||||
|
css`
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
transition: border-color 0.2s !important;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&.is-open {
|
||||||
|
border-color: ${theme.colors.gray["50"]} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
border-width: 2px !important;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
isOpen && "is-open",
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
<EmojiImage src={getIcon(pose)} alt="Choose a pose" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</ClassNames>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
PosePickerButton = React.forwardRef(PosePickerButton);
|
||||||
|
|
||||||
function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
|
function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
|
||||||
return (
|
return (
|
||||||
<Box display="flex" flexDirection="column" alignItems="center">
|
<Box display="flex" flexDirection="column" alignItems="center">
|
||||||
|
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue