diff --git a/CHANGELOG.md b/CHANGELOG.md index 6cf5b46..5f8c3fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -110,6 +110,12 @@ Features included draggable players and progress bar for score. ## [Unreleased] +### [v0.9.0] + +#### Added + +- Focus on next input element when pressing Enter + ### [v0.1.0] - 8/24/2020 fuslie adds notepad ftw on the stream diff --git a/README.md b/README.md index 681307b..c33baa7 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,8 @@ Thanks to the developer team: [Daniel Singer](https://github.com/chilblane) (A.K.A. chilblane) [Francis Tse](https://github.com/francistse23) (A.K.A. Furanki) [Kevin Han](https://github.com/kevinydhan) (A.K.A. khany) -[Charlie Chai](https://github.com/charlie-808) +[Charlie Chai](https://github.com/charlie-808) +[Griffin Suparto](https://github.com/Viou) Thanks to everyone who has suggested enhancements, reported bugs, are or any other support on this project such as: diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index b17836a..ce71315 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -1,9 +1,8 @@ import ColorsMenu from "../ColorsMenu"; import { IPlayer } from "utils/types"; -import Input from "components/common/Input"; import React from "react"; import { useData } from "context"; -import useStyles from "./Player.styles"; +import usePlayerStyles from "./Player.styles"; export interface IPlayerProps { id: string | number; @@ -17,9 +16,10 @@ export interface IPlayerProps { export default function Player(props: IPlayerProps): JSX.Element { const [isMenuShowing, setIsMenuShowing] = React.useState(false); + const htmlElRef = React.useRef(null); const { names } = useData()!; // eslint-disable-line - const classes = useStyles({ names, ...props }); + const playerStyles = usePlayerStyles({ names, ...props }); const { id, color, name, list, setList, index } = props; @@ -28,14 +28,24 @@ export default function Player(props: IPlayerProps): JSX.Element { event: React.ChangeEvent ) => { const players: Array = [...list]; - players[player].name = event.currentTarget.value; - setList(players); }; + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === "Enter") { + const currentInput = (htmlElRef.current as unknown) as HTMLInputElement; + const nextParent = + currentInput.parentElement?.parentElement?.nextElementSibling ?? + currentInput.parentElement?.parentElement?.parentElement + ?.firstElementChild; + const nextInput = nextParent?.lastChild?.firstChild as HTMLInputElement; + nextInput?.select(); + } + }; + return ( -
+
{isMenuShowing && ( )} -
+
{ if (names) { @@ -56,14 +66,17 @@ export default function Player(props: IPlayerProps): JSX.Element { />
{names && ( -
- + ) => handleChange(index, event) } + onKeyPress={handleKeyPress} value={name} + ref={htmlElRef} />
)}