From 5273fa333107600a6dd4c18f7923cdaf2b09473a Mon Sep 17 00:00:00 2001 From: Griffin Suparto <suparto.g@gmail.com> Date: Sun, 27 Sep 2020 14:42:30 -0400 Subject: [PATCH 1/2] feat: issue #17/ focus on next player name input when pressing enter feat: issue #17/ focus on next player name input when pressing enter --- CHANGELOG.md | 6 ++++++ README.md | 3 ++- src/components/Player/Player.tsx | 35 +++++++++++++++++++++++--------- 3 files changed, 33 insertions(+), 11 deletions(-) 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..c7be213 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -1,9 +1,9 @@ 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"; +import useInputStyles from "../common/Input/Input.styles"; export interface IPlayerProps { id: string | number; @@ -17,9 +17,11 @@ 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 inputStyles = useInputStyles(); const { id, color, name, list, setList, index } = props; @@ -28,14 +30,24 @@ export default function Player(props: IPlayerProps): JSX.Element { event: React.ChangeEvent<HTMLInputElement> ) => { const players: Array<IPlayer> = [...list]; - players[player].name = event.currentTarget.value; - setList(players); }; + const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => { + 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 ( - <div className={`${classes.container} player-handle`}> + <div className={`${playerStyles.container} player-handle`}> {isMenuShowing && ( <ColorsMenu isMenuShowing={isMenuShowing} @@ -43,7 +55,7 @@ export default function Player(props: IPlayerProps): JSX.Element { currentColor={id} /> )} - <div className={classes.icon}> + <div className={playerStyles.icon}> <img onClick={() => { if (names) { @@ -56,14 +68,17 @@ export default function Player(props: IPlayerProps): JSX.Element { /> </div> {names && ( - <div className={classes.name}> - <Input + <div className={playerStyles.name}> + <input + type="text" placeholder="Player" - className={classes.input} + className={`${playerStyles.input} ${inputStyles.root}`} onChange={(event: React.ChangeEvent<HTMLInputElement>) => handleChange(index, event) } + onKeyPress={handleKeyPress} value={name} + ref={htmlElRef} /> </div> )} From f0bc868fed48ee1e6d0a12d21518eb42e7f0faf6 Mon Sep 17 00:00:00 2001 From: Griffin Suparto <suparto.g@gmail.com> Date: Sun, 27 Sep 2020 19:06:55 -0400 Subject: [PATCH 2/2] feat: issue #17/ styling fix --- src/components/Player/Player.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index c7be213..ce71315 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -3,7 +3,6 @@ import { IPlayer } from "utils/types"; import React from "react"; import { useData } from "context"; import usePlayerStyles from "./Player.styles"; -import useInputStyles from "../common/Input/Input.styles"; export interface IPlayerProps { id: string | number; @@ -21,7 +20,6 @@ export default function Player(props: IPlayerProps): JSX.Element { const { names } = useData()!; // eslint-disable-line const playerStyles = usePlayerStyles({ names, ...props }); - const inputStyles = useInputStyles(); const { id, color, name, list, setList, index } = props; @@ -72,7 +70,7 @@ export default function Player(props: IPlayerProps): JSX.Element { <input type="text" placeholder="Player" - className={`${playerStyles.input} ${inputStyles.root}`} + className={playerStyles.input} onChange={(event: React.ChangeEvent<HTMLInputElement>) => handleChange(index, event) }