Merge pull request #112 from UoaWDCC/VPS-061/double-click-focusses-input

VPS 061/Double click on speech box, focus on text input
UoaWDCC · Aug 6, 2023 · 90d0910 · 90d0910
2 parents abe1e08 + 5062908
commit 90d0910
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 20 deletions.
diff --git a/...rs/pages/AuthoringTool/CanvasSideBar/ComponentProperties/SpeechTextPropertiesComponent.js b/...rs/pages/AuthoringTool/CanvasSideBar/ComponentProperties/SpeechTextPropertiesComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import {
   FormControl,
   InputLabel,
@@ -11,10 +11,11 @@ import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
 import FormatAlignCenterIcon from "@material-ui/icons/FormatAlignCenter";
 import FormatAlignRightIcon from "@material-ui/icons/FormatAlignRight";
 import FormatAlignJustifyIcon from "@material-ui/icons/FormatAlignJustify";
-import SceneContext from "../../../../../context/SceneContext";
-import CustomInputLabelStyles from "../CustomPropertyInputStyles/CustomInputLabelStyles";
+import SceneContext from "context/SceneContext";
+import AuthoringToolContext from "context/AuthoringToolContext";
 
-import styles from "../../../../../styling/CanvasSideBar.module.scss";
+import styles from "styling/CanvasSideBar.module.scss";
+import CustomInputLabelStyles from "../CustomPropertyInputStyles/CustomInputLabelStyles";
 import useStyles from "./TextPropertiesComponent.styles";
 
 const CustomInputLabel = CustomInputLabelStyles()(InputLabel);
@@ -31,7 +32,13 @@ export default function SpeechTextPropertiesComponent({
 }) {
   const textComponentStyles = useStyles();
   const { updateComponentProperty } = useContext(SceneContext);
-  // const reference = React.createRef();
+
+  const { addPropertyRef } = useContext(AuthoringToolContext);
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    addPropertyRef("text", textRef);
+  }, []);
 
   return (
     <>
@@ -40,6 +47,7 @@ export default function SpeechTextPropertiesComponent({
         <OutlinedInput
           className={textComponentStyles.textArea}
           value={component.text}
+          inputRef={textRef}
           fullWidth
           multiline
           rows={5}

diff --git a/...ntainers/pages/AuthoringTool/CanvasSideBar/ComponentProperties/TextPropertiesComponent.js b/...ntainers/pages/AuthoringTool/CanvasSideBar/ComponentProperties/TextPropertiesComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import {
   FormControl,
   InputLabel,
@@ -13,11 +13,13 @@ import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
 import FormatAlignCenterIcon from "@material-ui/icons/FormatAlignCenter";
 import FormatAlignRightIcon from "@material-ui/icons/FormatAlignRight";
 import FormatAlignJustifyIcon from "@material-ui/icons/FormatAlignJustify";
-import SceneContext from "../../../../../context/SceneContext";
+
+import AuthoringToolContext from "context/AuthoringToolContext";
+import SceneContext from "context/SceneContext";
+
+import styles from "styling/CanvasSideBar.module.scss";
 import CustomInputLabelStyles from "../CustomPropertyInputStyles/CustomInputLabelStyles";
 import CustomCheckBoxStyles from "../CustomPropertyInputStyles/CustomCheckBoxStyles";
-
-import styles from "../../../../../styling/CanvasSideBar.module.scss";
 import useStyles from "./TextPropertiesComponent.styles";
 
 const CustomInputLabel = CustomInputLabelStyles()(InputLabel);
@@ -32,7 +34,15 @@ const sizes = [6, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36, 42, 48, 60, 72];
 export default function TextPropertiesComponent({ component, componentIndex }) {
   const textComponentStyles = useStyles();
   const { updateComponentProperty } = useContext(SceneContext);
-  // const reference = React.createRef();
+
+  const addPropertyRef = useContext(AuthoringToolContext)?.addPropertyRef;
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    if (addPropertyRef) {
+      addPropertyRef("text", textRef);
+    }
+  }, []);
 
   return (
     <>
@@ -41,6 +51,7 @@ export default function TextPropertiesComponent({ component, componentIndex }) {
         <OutlinedInput
           className={textComponentStyles.textArea}
           value={component.text}
+          inputRef={textRef}
           fullWidth
           multiline
           rows={5}

diff --git a/frontend/src/containers/pages/AuthoringTool/Components/SpeechTextComponent.js b/frontend/src/containers/pages/AuthoringTool/Components/SpeechTextComponent.js
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
+import AuthoringToolContext from "context/AuthoringToolContext";
 import SpeechTextboxArrow from "components/SpeechboxArrow";
 import { Typography } from "@material-ui/core";
 import useStyles from "./components.styles";
@@ -19,7 +20,8 @@ export default function SpeechTextComponent({ id, onClick, component }) {
   const { defaultComponentStyling, speechTextComponentStyles } =
     useStyles(component);
   const [speechTextboxArrowWidth, setArrowWidth] = useState(null);
-
+  const context = useContext(AuthoringToolContext);
+  const textRef = context?.propertiesRefs?.text;
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
@@ -30,6 +32,7 @@ export default function SpeechTextComponent({ id, onClick, component }) {
         minWidth: speechTextboxArrowWidth + 10, // speechbox slightly wider than arrow
       }}
       onClick={onClick}
+      onDoubleClick={() => textRef?.current?.focus()}
       id={id}
     >
       <SpeechTextboxArrow

diff --git a/frontend/src/containers/pages/AuthoringTool/Components/TextComponent.js b/frontend/src/containers/pages/AuthoringTool/Components/TextComponent.js
@@ -1,5 +1,6 @@
 import { Typography } from "@material-ui/core";
-import React from "react";
+import React, { useContext } from "react";
+import AuthoringToolContext from "context/AuthoringToolContext";
 import useStyles from "./components.styles";
 // import TextPropertiesComponent from "../CanvasSideBar/ComponentProperties/TextPropertiesComponent";
 
@@ -15,20 +16,17 @@ import useStyles from "./components.styles";
  * />
  */
 export default function TextComponent({ id, onClick, component }) {
-  const handleDoubleClick = () => {
-    const reference = document.querySelector("textarea");
-    reference.focus();
-  };
-
   const styles = useStyles(component);
-  // const { updateComponentProperty } = useContext(SceneContext);
+
+  const context = useContext(AuthoringToolContext);
+  const textRef = context?.propertiesRefs?.text;
 
   return (
     <Typography
       className={`${styles.defaultComponentStyling} ${styles.textComponentStyles}`}
       id={id}
       onClick={onClick}
-      onDoubleClick={handleDoubleClick}
+      onDoubleClick={() => textRef?.current?.focus()}
     >
       {component.text}
     </Typography>

diff --git a/frontend/src/context/AuthoringToolContextProvider.js b/frontend/src/context/AuthoringToolContextProvider.js
@@ -15,6 +15,7 @@ export default function AuthoringToolContextProvider({ children }) {
   const [shiftPressed, setShiftPressed] = useState(false);
 
   const selectRef = useRef(select);
+  const [propertiesRefs, setPropertiesRefs] = useState({}); // stores refs of property inputs
 
   function selectElement({ currentTarget }) {
     const image = currentTarget.firstElementChild?.nodeName === "IMG";
@@ -45,6 +46,12 @@ export default function AuthoringToolContextProvider({ children }) {
     }
   }
 
+  function addPropertyRef(propertyName, propertyRef) {
+    setPropertiesRefs((current) => {
+      return { ...current, [propertyName]: propertyRef };
+    });
+  }
+
   return (
     <AuthoringToolContext.Provider
       value={{
@@ -57,6 +64,8 @@ export default function AuthoringToolContextProvider({ children }) {
         shiftPressed,
         setShiftPressed,
         deleteElement,
+        propertiesRefs,
+        addPropertyRef,
       }}
     >
       {children}