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

focus the radio when opening PosePicker

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-05-02 22:07:47 -07:00
parent 752828b4b0
commit fae2a579c2
1 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/app/PosePicker.js
View file

@ -128,13 +128,22 @@ function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
<PoseButton <PoseButton
pose={poses.happyMasc} pose={poses.happyMasc}
speciesId={speciesId} speciesId={speciesId}
inputRef={poses.happyMasc.isSelected && checkedInputRef}
/> />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseButton pose={poses.sadMasc} speciesId={speciesId} /> <PoseButton
pose={poses.sadMasc}
speciesId={speciesId}
inputRef={poses.sadMasc.isSelected && checkedInputRef}
/>
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseButton pose={poses.sickMasc} speciesId={speciesId} /> <PoseButton
pose={poses.sickMasc}
speciesId={speciesId}
inputRef={poses.sickMasc.isSelected && checkedInputRef}
/>
</Cell> </Cell>
</tr> </tr>
<tr> <tr>
@ -142,13 +151,25 @@ function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
<EmojiImage src={twemojiFem} aria-label="Feminine" /> <EmojiImage src={twemojiFem} aria-label="Feminine" />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseButton pose={poses.happyFem} speciesId={speciesId} /> <PoseButton
pose={poses.happyFem}
speciesId={speciesId}
inputRef={poses.happyFem.isSelected && checkedInputRef}
/>
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseButton pose={poses.sadFem} speciesId={speciesId} /> <PoseButton
pose={poses.sadFem}
speciesId={speciesId}
inputRef={poses.sadFem.isSelected && checkedInputRef}
/>
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseButton pose={poses.sickFem} speciesId={speciesId} /> <PoseButton
pose={poses.sickFem}
speciesId={speciesId}
inputRef={poses.sickFem.isSelected && checkedInputRef}
/>
</Cell> </Cell>
</tr> </tr>
</tbody> </tbody>
@ -184,7 +205,7 @@ const GENDER_PRESENTATION_STRINGS = {
FEMININE: "Feminine", FEMININE: "Feminine",
}; };
function PoseButton({ pose, speciesId }) { function PoseButton({ pose, speciesId, inputRef }) {
const theme = useTheme(); const theme = useTheme();
if (!pose) { if (!pose) {
@ -212,6 +233,7 @@ function PoseButton({ pose, speciesId }) {
name="pose" name="pose"
value={`${pose.emotion}-${pose.genderPresentation}`} value={`${pose.emotion}-${pose.genderPresentation}`}
checked={pose.isSelected} checked={pose.isSelected}
ref={inputRef || null}
/> />
<Box <Box
rounded="full" rounded="full"