kiosk: use button control from react common

microsoft · Oct 13, 2023 · 7c5fb7d · 7c5fb7d
1 parent 5bb757a
commit 7c5fb7d
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 88 deletions.
diff --git a/kiosk/src/Components/AddingGame.tsx b/kiosk/src/Components/AddingGame.tsx
@@ -73,14 +73,14 @@ const AddingGame: React.FC<IProps> = ({}) => {
                     <h1 className="kioskCode">{kiosk.kioskCode}</h1>
                     <QRCodeSVG value={kioskUrl} />
                     <div className="kioskLink">
-                        <a
+                        <GenericButton
+                            title={kioskUrl}
+                            label={kioskUrl}
                             target="_blank"
-                            rel="noopener noreferrer"
                             onClick={kioskLinkClicked}
                             href={kioskUrl}
-                        >
-                            <div className="kioskLinkContent">{kioskUrl}</div>
-                        </a>
+                            tabIndex={-1}
+                        />
                     </div>
                 </div>
             );
@@ -100,7 +100,9 @@ const AddingGame: React.FC<IProps> = ({}) => {
                 <div className="addInstructions">
                     <h2>{lf("How to upload your game")}</h2>
                     <ol>
-                        <li>{lf("Use your mobile device to scan the QR code")}</li>
+                        <li>
+                            {lf("Use your mobile device to scan the QR code")}
+                        </li>
                         <li>
                             {lf("Use the new page to scan or enter your game's share code")}
                         </li>
@@ -112,8 +114,12 @@ const AddingGame: React.FC<IProps> = ({}) => {
                 <div style={{ flexGrow: 1 }} />
                 {qrDivContent()}
             </div>
-            <GenericButton autofocus={true} onClick={gotoMainMenu}>
-                {lf("Return to menu")}
+            <GenericButton
+                title={lf("Return to menu")}
+                label={lf("Return to menu")}
+                autofocus={true}
+                onClick={gotoMainMenu}
+            >
             </GenericButton>
         </div>
     );

diff --git a/kiosk/src/Components/ErrorModal.tsx b/kiosk/src/Components/ErrorModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Button } from "../../../react-common/components/controls/Button";
 
 interface IProps {
     errorType: string;
@@ -26,12 +26,12 @@ const ErrorModal: React.FC<IProps> = ({
                         <p>{errorDescription}</p>
                     </div>
                     <div className="common-modal-footer">
-                        <button
+                        <Button
+                            title={lf("Okay")}
+                            label={lf("Okay")}
                             className={`common-modal-button confirm error`}
                             onClick={cancelClicked}
-                        >
-                            {lf("Okay")}
-                        </button>
+                        />
                     </div>
                 </div>
             </div>

diff --git a/kiosk/src/Components/GameMenu.tsx b/kiosk/src/Components/GameMenu.tsx
@@ -17,9 +17,7 @@ export const GameMenu: React.FC<IProps> = () => {
         [kiosk.allGames, selectedGameId]
     );
 
-    const handleDeleteClick = (ev?: React.MouseEvent) => {
-        ev?.preventDefault();
-        ev?.stopPropagation();
+    const handleDeleteClick = () => {
         if (game) {
             GamepadManager.lockControl(GamepadManager.GamepadControl.AButton);
             dispatch(showModal(makeDeleteGameModal(game.id)));
@@ -30,6 +28,7 @@ export const GameMenu: React.FC<IProps> = () => {
         <div className="gameMenu">
             {game?.userAdded && !kiosk.locked && (
                 <GenericButton
+                    title={lf("Delete Game")}
                     classNameReplace="deleteGame"
                     onClick={handleDeleteClick}
                     exitDirections={[NavGrid.NavDirection.Up]}

diff --git a/kiosk/src/Components/GameOver.tsx b/kiosk/src/Components/GameOver.tsx
@@ -38,14 +38,16 @@ const GameOver: React.FC<IProps> = ({}) => {
             <h2>{lf("Would you like to retry?")}</h2>
             <div className="gameOverButtons">
                 <GenericButton
+                    title={lf("Retry")}
+                    label={lf("Retry")}
                     onClick={handleRetryButtonClick}
                     autofocus={true}
-                >
-                    {lf("Retry")}
-                </GenericButton>
-                <GenericButton onClick={gotoMainMenu}>
-                    {lf("Main Menu")}
-                </GenericButton>
+                />
+                <GenericButton
+                    title={lf("Main Menu")}
+                    label={lf("Main Menu")}
+                    onClick={gotoMainMenu}
+                />
             </div>
         </div>
     );

diff --git a/kiosk/src/Components/GameSlide.tsx b/kiosk/src/Components/GameSlide.tsx
@@ -13,12 +13,10 @@ interface IProps {
 const GameSlide: React.FC<IProps> = ({ game }) => {
     const { state: kiosk } = useContext(AppStateContext);
 
-    const handleSlideClick = (ev?: React.MouseEvent) => {
+    const handleSlideClick = () => {
         pxt.tickEvent("kiosk.gameLaunched", { game: game.id });
         playSoundEffect("select");
         launchGame(game.id);
-        ev?.preventDefault();
-        ev?.stopPropagation();
     };
 
     return (

diff --git a/kiosk/src/Components/GenericButton.tsx b/kiosk/src/Components/GenericButton.tsx
@@ -3,23 +3,34 @@ import { useMakeNavigable } from "../Hooks";
 import { classList } from "../Utils";
 import * as GamepadManager from "../Services/GamepadManager";
 import * as NavGrid from "../Services/NavGrid";
+import {
+    Button,
+    ButtonProps,
+} from "../../../react-common/components/controls/Button";
 
-interface IProps extends React.PropsWithChildren<{}> {
-    className?: string;
+interface IProps extends ButtonProps {
     classNameReplace?: string;
     autofocus?: boolean;
-    onClick?: (ev?: React.MouseEvent) => void;
     exitDirections?: NavGrid.NavDirection[];
 }
 
-const GenericButton: React.FC<IProps> = ({
-    children,
-    className,
-    classNameReplace,
-    autofocus,
-    onClick,
-    exitDirections,
-}) => {
+const GenericButton: React.FC<IProps> = (props: IProps) => {
+    const {
+        children,
+        className,
+        classNameReplace,
+        autofocus,
+        onClick,
+        exitDirections,
+    } = props;
+
+    const tabIndex = props.tabIndex !== undefined ? props.tabIndex : 0;
+
+    const classes = classList(
+        classNameReplace ? classNameReplace : "kioskButton",
+        className
+    );
+
     const [myRef, setMyRef] = useState<HTMLElement | null>(null);
 
     const handleKeyDown = useCallback(
@@ -37,20 +48,11 @@ const GenericButton: React.FC<IProps> = ({
         [myRef]
     );
 
-    const handleClick = (ev: React.MouseEvent) => {
-        onClick?.(ev);
-    };
-
     const handleRef = useCallback((node: HTMLElement | null) => {
         setMyRef(node);
     }, []);
 
-    useMakeNavigable(myRef, { autofocus, exitDirections });
-
-    const classes = classList(
-        classNameReplace ? classNameReplace : "kioskButton",
-        className
-    );
+    useMakeNavigable(myRef, { autofocus, exitDirections, tabIndex });
 
     useEffect(() => {
         GamepadManager.addKeydownListener(handleKeyDown);
@@ -59,14 +61,14 @@ const GenericButton: React.FC<IProps> = ({
 
     return (
         <>
-            <button
+            <Button
                 className={classes}
-                tabIndex={0}
-                onClick={handleClick}
-                ref={handleRef}
+                tabIndex={tabIndex}
+                buttonRef={handleRef}
+                {...props}
             >
                 {children}
-            </button>
+            </Button>
         </>
     );
 };

diff --git a/kiosk/src/Components/MainMenu.tsx b/kiosk/src/Components/MainMenu.tsx
@@ -42,11 +42,11 @@ const MainMenu: React.FC<IProps> = ({}) => {
                         {!kiosk.locked && (
                             <div className="mainMenuButton">
                                 <GenericButton
+                                    title={lf("Add your game")}
+                                    label={lf("Add your game")}
                                     onClick={gotoAddingGame}
                                     exitDirections={[NavGrid.NavDirection.Down]}
-                                >
-                                    {lf("Add your game")}
-                                </GenericButton>
+                                />
                             </div>
                         )}
                     </nav>

diff --git a/kiosk/src/Components/Modal.tsx b/kiosk/src/Components/Modal.tsx
@@ -56,12 +56,12 @@ export const Modal = (props: ModalProps) => {
                     <div className="common-modal-footer">
                         {actions.map((action, index) => (
                             <GenericButton
+                                title={action.label}
+                                label={action.label}
                                 key={index}
                                 onClick={action.onClick}
                                 autofocus={action.autofocus}
-                            >
-                                {action.label}
-                            </GenericButton>
+                            />
                         ))}
                     </div>
                 )}

diff --git a/kiosk/src/Components/ScanQR.tsx b/kiosk/src/Components/ScanQR.tsx
@@ -8,6 +8,7 @@ import { navigate } from "../Transforms/navigate";
 import { useMakeNavigable } from "../Hooks";
 import GenericButton from "./GenericButton";
 import * as GamepadManager from "../Services/GamepadManager";
+import { Button } from "../../../react-common/components/controls/Button";
 
 interface IProps {}
 
@@ -120,10 +121,10 @@ const ScanQR: React.FC<IProps> = ({}) => {
     };
     useMakeNavigable(shareLinkRef);
 
-    const [helpLinkRef, setHelpLinkRef] = useState<HTMLAnchorElement | null>(
+    const [helpLinkRef, setHelpLinkRef] = useState<HTMLButtonElement | null>(
         null
     );
-    const handleHelpLinkRef = (input: HTMLAnchorElement) => {
+    const handleHelpLinkRef = (input: HTMLButtonElement) => {
         setHelpLinkRef(input);
     };
     useMakeNavigable(helpLinkRef);
@@ -139,21 +140,21 @@ const ScanQR: React.FC<IProps> = ({}) => {
                 <div className="qrOption">
                     {!scannerVisible && (
                         <GenericButton
+                            title={lf("Scan QR code")}
+                            label={lf("Scan QR code")}
                             className="kioskButton"
                             onClick={renderQrScanner}
-                        >
-                            {lf("Scan QR code")}
-                        </GenericButton>
+                        />
                     )}
                     <div id="qrReader" ref={qrReaderRendered}></div>
                     {scannerVisible && (
                         <div className="scanning">
                             <GenericButton
+                                title={lf("Cancel Scan")}
+                                label={lf("Cancel Scan")}
                                 className="scanQrButton"
                                 onClick={stopQrScanner}
-                            >
-                                {lf("Cancel Scan")}
-                            </GenericButton>
+                            />
                             <p className="scanTip">
                                 {lf("Tip: Do not use the kiosk's QR code")}
                             </p>
@@ -186,16 +187,16 @@ const ScanQR: React.FC<IProps> = ({}) => {
                         </p>
                     )}
                 </div>
-                <a
-                    className="shareHelp"
-                    target="_blank"
-                    onClick={clickHelp}
-                    href="https://arcade.makecode.com/share"
-                    tabIndex={0}
-                    ref={handleHelpLinkRef}
-                >
-                    {lf("How do I get a game's share link or QR code?")}
-                </a>
+                <div className="shareHelp">
+                    <GenericButton
+                        title={lf("How do I get a game's share link or QR code?")}
+                        label={lf("How do I get a game's share link or QR code?")}
+                        target="_blank"
+                        onClick={clickHelp}
+                        href="https://arcade.makecode.com/share"
+                        buttonRef={handleHelpLinkRef}
+                    />
+                </div>
             </div>
             {!!addingError && (
                 <ErrorModal

diff --git a/kiosk/src/Hooks/useMakeNavigable.ts b/kiosk/src/Hooks/useMakeNavigable.ts
@@ -7,8 +7,13 @@ export function useMakeNavigable(
     opts?: {
         exitDirections?: NavGrid.NavDirection[];
         autofocus?: boolean;
+        tabIndex?: number;
     }
 ) {
+    if (opts?.tabIndex === -1) {
+        return;
+    }
+
     // Register this element with the NavGrid
     useEffect(() => {
         const unregister = NavGrid.registerNavigable(ref, opts);