use EditableInput in Toolbar

Author: lindapaiste

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/Toolbar.jsx

@@ -11,53 +11,19 @@ import * as projectActions from '../actions/project';
 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 EditableInput from './EditableInput';
 
 class Toolbar extends React.Component {
   constructor(props) {
     super(props);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
-    this.handleProjectNameClick = this.handleProjectNameClick.bind(this);
     this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
-
-    this.state = {
-      projectNameInputValue: props.project.name
-    };
-  }
-
-  handleKeyPress(event) {
-    if (event.key === 'Enter') {
-      this.props.hideEditProjectName();
-      this.projectNameInput.blur();
-    }
-  }
-
-  handleProjectNameChange(event) {
-    this.setState({ projectNameInputValue: event.target.value });
   }
 
-  handleProjectNameClick() {
-    if (this.canEditProjectName) {
-      this.props.showEditProjectName();
-      setTimeout(() => {
-        this.projectNameInput?.focus();
-      }, 140);
-    }
-  }
-
-  handleProjectNameSave() {
-    const newProjectName = this.state.projectNameInputValue.trim();
-    if (newProjectName.length === 0) {
-      this.setState({
-        projectNameInputValue: this.props.project.name
-      });
-    } else {
-      this.props.setProjectName(newProjectName);
-      this.props.hideEditProjectName();
-      if (this.props.project.id) {
-        this.props.saveProject();
-      }
+  handleProjectNameSave(value) {
+    const newProjectName = value.trim();
+    this.props.setProjectName(newProjectName);
+    if (this.props.project.id) {
+      this.props.saveProject();
     }
   }
 
@@ -84,11 +50,6 @@ class Toolbar extends React.Component {
       'toolbar__preferences-button': true,
       'toolbar__preferences-button--selected': this.props.preferencesIsVisible
     });
-    const nameContainerClass = classNames({
-      'toolbar__project-name-container': true,
-      'toolbar__project-name-container--editing': this.props.project
-        .isEditingName
-    });
 
     const canEditProjectName = this.canEditProjectName();
 
@@ -139,34 +100,17 @@ class Toolbar extends React.Component {
             {this.props.t('Toolbar.Auto-refresh')}
           </label>
         </div>
-        <div className={nameContainerClass}>
-          <button
-            className="toolbar__project-name"
-            onClick={this.handleProjectNameClick}
+        <div className="toolbar__project-name-container">
+          <EditableInput
+            value={this.props.project.name}
             disabled={!canEditProjectName}
             aria-label={this.props.t('Toolbar.EditSketchARIA')}
-          >
-            <span>{this.props.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={this.props.t('Toolbar.NewSketchNameARIA')}
-            value={this.state.projectNameInputValue}
-            onChange={this.handleProjectNameChange}
-            ref={(element) => {
-              this.projectNameInput = element;
+            inputProps={{
+              maxLength: 128,
+              'aria-label': this.props.t('Toolbar.NewSketchNameARIA')
             }}
-            onBlur={this.handleProjectNameSave}
-            onKeyPress={this.handleKeyPress}
+            validate={(text) => text.trim().length > 0}
+            onChange={this.handleProjectNameSave}
           />
           {(() => {
             if (this.props.owner) {
@@ -205,11 +149,8 @@ Toolbar.propTypes = {
   }),
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
-    isEditingName: PropTypes.bool,
     id: PropTypes.string
   }).isRequired,
-  showEditProjectName: PropTypes.func.isRequired,
-  hideEditProjectName: PropTypes.func.isRequired,
   infiniteLoop: PropTypes.bool.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   setAutorefresh: PropTypes.func.isRequired,

client/modules/IDE/components/Toolbar.unit.test.jsx

@@ -31,7 +31,6 @@ const renderComponent = (extraProps = {}) => {
       },
       project: {
         name: 'testname',
-        isEditingName: false,
         id: 'id'
       },
       t: jest.fn()
@@ -46,28 +45,31 @@ const renderComponent = (extraProps = {}) => {
 
 describe('<ToolbarComponent />', () => {
   it('sketch owner can switch to sketch name editing mode', async () => {
-    const props = renderComponent();
+    renderComponent();
     const sketchName = screen.getByLabelText('Edit sketch name');
 
     fireEvent.click(sketchName);
 
-    await waitFor(() => expect(props.showEditProjectName).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.getByLabelText('New sketch name')).toHaveFocus();
+      expect(screen.getByLabelText('New sketch name')).toBeEnabled();
+    });
   });
 
   it("non-owner can't switch to sketch editing mode", async () => {
-    const props = renderComponent({ currentUser: 'not-me' });
+    renderComponent({ currentUser: 'not-me' });
     const sketchName = screen.getByLabelText('Edit sketch name');
 
     fireEvent.click(sketchName);
 
     expect(sketchName).toBeDisabled();
     await waitFor(() =>
-      expect(props.showEditProjectName).not.toHaveBeenCalled()
+      expect(screen.getByLabelText('New sketch name')).toBeDisabled()
     );
   });
 
   it('sketch owner can change name', async () => {
-    const props = renderComponent({ project: { isEditingName: true } });
+    const props = renderComponent();
 
     const sketchNameInput = screen.getByLabelText('New sketch name');
     fireEvent.change(sketchNameInput, {
@@ -82,7 +84,7 @@ describe('<ToolbarComponent />', () => {
   });
 
   it("sketch owner can't change to empty name", async () => {
-    const props = renderComponent({ project: { isEditingName: true } });
+    const props = renderComponent();
 
     const sketchNameInput = screen.getByLabelText('New sketch name');
     fireEvent.change(sketchNameInput, { target: { value: '' } });

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;