2020-04-13 04:36:33 -04:00
|
|
|
import React, { useRef } from "react";
|
2020-04-13 04:15:00 -04:00
|
|
|
import { Box, Input, Button, Label, Flex } from "theme-ui";
|
|
|
|
|
|
|
|
import Modal from "../components/Modal";
|
|
|
|
|
|
|
|
function ChangeNicknameModal({
|
|
|
|
isOpen,
|
|
|
|
onRequestClose,
|
|
|
|
onChangeSubmit,
|
|
|
|
nickname,
|
|
|
|
onChange,
|
|
|
|
}) {
|
2020-04-13 04:36:33 -04:00
|
|
|
const inputRef = useRef();
|
|
|
|
function focusInput() {
|
|
|
|
inputRef.current && inputRef.current.focus();
|
|
|
|
}
|
|
|
|
|
2020-04-13 04:15:00 -04:00
|
|
|
return (
|
2020-04-13 04:36:33 -04:00
|
|
|
<Modal
|
|
|
|
isOpen={isOpen}
|
|
|
|
onRequestClose={onRequestClose}
|
|
|
|
onAfterOpen={focusInput}
|
|
|
|
>
|
2020-04-13 04:15:00 -04:00
|
|
|
<Box as="form" onSubmit={onChangeSubmit}>
|
|
|
|
<Label py={2} htmlFor="nicknameChange">
|
|
|
|
Change your nickname
|
|
|
|
</Label>
|
2020-04-13 04:36:33 -04:00
|
|
|
<Input
|
|
|
|
id="nicknameChange"
|
|
|
|
value={nickname}
|
|
|
|
onChange={onChange}
|
|
|
|
ref={inputRef}
|
|
|
|
/>
|
2020-04-13 04:15:00 -04:00
|
|
|
<Flex py={2}>
|
|
|
|
<Button sx={{ flexGrow: 1 }} disabled={!nickname}>
|
|
|
|
Change
|
|
|
|
</Button>
|
|
|
|
</Flex>
|
|
|
|
</Box>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ChangeNicknameModal;
|