Use EditableInput component in Toolbar

client/constants.js

@@ -30,8 +30,6 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 export const RESET_PROJECT = 'RESET_PROJECT';
-export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
-export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';

client/modules/IDE/actions/project.js

@@ -351,18 +351,6 @@ export function cloneProject(project) {
   };
 }
 
-export function showEditProjectName() {
-  return {
-    type: ActionTypes.SHOW_EDIT_PROJECT_NAME
-  };
-}
-
-export function hideEditProjectName() {
-  return {
-    type: ActionTypes.HIDE_EDIT_PROJECT_NAME
-  };
-}
-
 export function setProjectSavedTime(updatedAt) {
   return {
     type: ActionTypes.SET_PROJECT_SAVED_TIME,

client/modules/IDE/components/EditableInput.jsx

@@ -11,27 +11,36 @@ function EditableInput({
   emptyPlaceholder,
   InputComponent,
   inputProps,
-  onChange
+  onChange,
+  disabled,
+  'aria-label': ariaLabel
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
   const hasValue = currentValue !== '';
   const classes = `editable-input editable-input--${
     isEditing ? 'is-editing' : 'is-not-editing'
-  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
-  const inputRef = React.createRef();
+  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'} ${
+    disabled ? 'editable-input--disabled' : ''
+  }`;
+  const inputRef = React.useRef();
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current.focus();
+      inputRef.current?.focus();
     }
   }, [isEditing]);
 
   function beginEditing() {
     setIsEditing(true);
   }
 
+  function cancelEditing() {
+    setIsEditing(false);
+    setCurrentValue(value);
+  }
+
   function doneEditing() {
     setIsEditing(false);
 
@@ -51,6 +60,8 @@ function EditableInput({
   function checkForKeyAction(event) {
     if (event.key === 'Enter') {
       doneEditing();
+    } else if (event.key === 'Escape' || event.key === 'Esc') {
+      cancelEditing();
     }
   }
 
@@ -59,7 +70,11 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={t('EditableInput.EditValue', { display: displayValue })}
+        aria-label={
+          ariaLabel ?? t('EditableInput.EditValue', { display: displayValue })
+        }
+        aria-hidden={isEditing}
+        disabled={disabled}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -74,9 +89,10 @@ function EditableInput({
         type="text"
         {...inputProps}
         disabled={!isEditing}
+        aria-hidden={!isEditing}
         onBlur={doneEditing}
         onChange={updateValue}
-        onKeyPress={checkForKeyAction}
+        onKeyDown={checkForKeyAction}
         ref={inputRef}
         value={currentValue}
       />
@@ -89,7 +105,9 @@ EditableInput.defaultProps = {
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
-  value: ''
+  value: '',
+  disabled: false,
+  'aria-label': undefined
 };
 
 EditableInput.propTypes = {
@@ -99,7 +117,9 @@ EditableInput.propTypes = {
   inputProps: PropTypes.object, // eslint-disable-line
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  'aria-label': PropTypes.string
 };
 
 export default EditableInput;

client/modules/IDE/components/Header/ProjectName.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { useSketchActions } from '../../hooks';
+import { selectProjectName } from '../../selectors/project';
+import EditableInput from '../EditableInput';
+
+export default function ProjectName() {
+  const { t } = useTranslation();
+
+  const { changeSketchName, canEditProjectName } = useSketchActions();
+
+  const projectName = useSelector(selectProjectName);
+
+  return (
+    <EditableInput
+      value={projectName}
+      disabled={!canEditProjectName}
+      aria-label={t('Toolbar.EditSketchARIA')}
+      inputProps={{
+        maxLength: 128,
+        'aria-label': t('Toolbar.NewSketchNameARIA')
+      }}
+      validate={(text) => text.trim().length > 0}
+      onChange={changeSketchName}
+    />
+  );
+}

client/modules/IDE/components/Header/Toolbar.jsx

@@ -1,13 +1,9 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import {
-  hideEditProjectName,
-  showEditProjectName
-} from '../../actions/project';
 import {
   openPreferences,
   startAccessibleSketch,
@@ -19,12 +15,11 @@ import {
   setGridOutput,
   setTextOutput
 } from '../../actions/preferences';
-import { useSketchActions } from '../../hooks';
 
 import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
-import EditProjectNameIcon from '../../../../images/pencil.svg';
+import ProjectName from './ProjectName';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -35,34 +30,6 @@ const Toolbar = (props) => {
   const dispatch = useDispatch();
 
   const { t } = useTranslation();
-  const { changeSketchName, canEditProjectName } = useSketchActions();
-
-  const projectNameInputRef = useRef();
-  const [nameInputValue, setNameInputValue] = useState(project.name);
-
-  function handleKeyPress(event) {
-    if (event.key === 'Enter') {
-      dispatch(hideEditProjectName());
-      projectNameInputRef.current?.blur();
-    }
-  }
-
-  function handleProjectNameClick() {
-    if (canEditProjectName) {
-      dispatch(showEditProjectName());
-      setTimeout(() => {
-        projectNameInputRef.current?.focus();
-      }, 140);
-    }
-  }
-
-  function handleProjectNameSave() {
-    const newName = nameInputValue;
-    if (newName.length > 0) {
-      dispatch(hideEditProjectName());
-      changeSketchName(newName);
-    }
-  }
 
   const playButtonClass = classNames({
     'toolbar__play-button': true,
@@ -76,10 +43,6 @@ const Toolbar = (props) => {
     'toolbar__preferences-button': true,
     'toolbar__preferences-button--selected': preferencesIsVisible
   });
-  const nameContainerClass = classNames({
-    'toolbar__project-name-container': true,
-    'toolbar__project-name-container--editing': project.isEditingName
-  });
 
   return (
     <div className="toolbar">
@@ -130,34 +93,8 @@ const Toolbar = (props) => {
           {t('Toolbar.Auto-refresh')}
         </label>
       </div>
-      <div className={nameContainerClass}>
-        <button
-          className="toolbar__project-name"
-          onClick={handleProjectNameClick}
-          disabled={!canEditProjectName}
-          aria-label={t('Toolbar.EditSketchARIA')}
-        >
-          <span>{project.name}</span>
-          {canEditProjectName && (
-            <EditProjectNameIcon
-              className="toolbar__edit-name-button"
-              focusable="false"
-              aria-hidden="true"
-            />
-          )}
-        </button>
-        <input
-          type="text"
-          maxLength="128"
-          className="toolbar__project-name-input"
-          aria-label={t('Toolbar.NewSketchNameARIA')}
-          disabled={!canEditProjectName}
-          ref={projectNameInputRef}
-          value={nameInputValue}
-          onChange={(e) => setNameInputValue(e.target.value)}
-          onBlur={handleProjectNameSave}
-          onKeyPress={handleKeyPress}
-        />
+      <div className="toolbar__project-name-container">
+        <ProjectName />
         {(() => {
           if (project.owner) {
             return (

client/modules/IDE/reducers/project.js

@@ -37,10 +37,6 @@ const project = (state, action) => {
       };
     case ActionTypes.RESET_PROJECT:
       return initialState();
-    case ActionTypes.SHOW_EDIT_PROJECT_NAME:
-      return Object.assign({}, state, { isEditingName: true });
-    case ActionTypes.HIDE_EDIT_PROJECT_NAME:
-      return Object.assign({}, state, { isEditingName: false });
     case ActionTypes.SET_PROJECT_SAVED_TIME:
       return Object.assign({}, state, { updatedAt: action.value });
     case ActionTypes.START_SAVING_PROJECT:

client/styles/components/_editable-input.scss

@@ -6,6 +6,7 @@
 
 button.editable-input__label {
   display: flex;
+  align-items: center;
 
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
@@ -35,6 +36,13 @@ button.editable-input__label {
   height: 1.5rem;
 }
 
+.editable-input--disabled {
+  pointer-events: none;
+  .editable-input__icon {
+    display: none;
+  }
+}
+
 .editable-input--is-not-editing .editable-input__input,
 .editable-input--is-editing .editable-input__label {
   display: none;

client/styles/components/_toolbar.scss

@@ -98,40 +98,23 @@
 }
 
 .toolbar__project-name-container {
-	@include themify() {
-		border-color: getThemifyVariable('inactive-text-color');
-	}
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
   display: flex;
   align-items: center;
 }
 
-.toolbar__project-name {
+.toolbar .editable-input__label {
 	@include themify() {
 		color: getThemifyVariable('secondary-text-color');
-		&:hover {
-		color: getThemifyVariable('logo-color');
-		  & .toolbar__edit-name-button path {
-		  	fill: getThemifyVariable('logo-color');
-		  }
+		& path {
+			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-
-	.toolbar__project-name-container--editing & {
-		display: none;
-	}
 }
 
-.toolbar__project-name-input {
-	display: none;
-	border: 0px;
-	.toolbar__project-name-container--editing & {
-		display: block;
-	}
+.toolbar .editable-input__input {
+	border: 0;
 }
 
 .toolbar__project-owner {
@@ -160,15 +143,3 @@
 		color:getThemifyVariable('logo-color');
 	}
 }
-
-.toolbar__edit-name-button {
-	display: inline-block;
-	vertical-align: top;
-	width: #{18 / $base-font-size}rem;
-	height: #{18 / $base-font-size}rem;
-	@include themify() {
-		& path {
-			fill: getThemifyVariable('secondary-text-color');
-		}
-	}
-}