Merge branch 'master' of https://github.com/Kedyn/fusliez-notes

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

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:

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,22 +28,32 @@ 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}
           setIsMenuShowing={setIsMenuShowing}
           currentColor={id}
         />
       )}
-      <div className={classes.icon}>
+      <div className={playerStyles.icon}>
         <img
           onClick={() => {
             if (names) {
@@ -56,14 +66,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}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               handleChange(index, event)
             }
+            onKeyPress={handleKeyPress}
             value={name}
+            ref={htmlElRef}
           />
         </div>
       )}