Implement renaming for scenes, external layouts and external events

newIDE/app/src/MainFrame/index.js

@@ -229,6 +229,30 @@ export default class MainFrame extends Component {
     });
   };
 
+  renameLayout = (oldName, newName) => {
+    const { currentProject } = this.state;
+    if (!currentProject.hasLayoutNamed(oldName)) return;
+
+    currentProject.getLayout(oldName).setName(newName);
+    this.forceUpdate();
+  }
+
+  renameExternalLayout = (oldName, newName) => {
+    const { currentProject } = this.state;
+    if (!currentProject.hasExternalLayoutNamed(oldName)) return;
+
+    currentProject.getExternalLayout(oldName).setName(newName);
+    this.forceUpdate();
+  }
+
+  renameExternalEvents = (oldName, newName) => {
+    const { currentProject } = this.state;
+    if (!currentProject.hasExternalEventsNamed(oldName)) return;
+
+    currentProject.getExternalEvents(oldName).setName(newName);
+    this.forceUpdate();
+  }
+
   _launchLayoutPreview = (project, layout) =>
     watchPromiseInState(this, 'previewLoading', () =>
       this.props.onLayoutPreview(project, layout)).catch(err => {
@@ -526,6 +550,9 @@ export default class MainFrame extends Component {
                   onDeleteLayout={this.deleteLayout}
                   onDeleteExternalLayout={this.deleteExternalLayout}
                   onDeleteExternalEvents={this.deleteExternalEvents}
+                  onRenameLayout={this.renameLayout}
+                  onRenameExternalLayout={this.renameExternalLayout}
+                  onRenameExternalEvents={this.renameExternalEvents}
                   onSaveProject={this.save}
                   onCloseProject={this.closeProject}
                   onExportProject={this.openExportDialog}

newIDE/app/src/ProjectManager/index.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { List, ListItem } from 'material-ui/List';
+import TextField from 'material-ui/TextField';
 import { mapFor } from '../Utils/MapFor';
 import ListIcon from './ListIcon';
 import { makeAddItem } from './AddItem';
@@ -15,53 +16,88 @@ const styles = {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   },
+  itemTextField: {
+    top: -16,
+  },
 };
 
 const ProjectStructureItem = props => (
   <ListItem style={styles.projectStructureItem} {...props} />
 );
 
-const Item = props => {
-  const rightIconButton = props.rightIconButton ||
-    <IconMenu
-      iconButtonElement={
-        <IconButton
-          onTouchTap={e =>
-            e.preventDefault() /*Prevent bubbling the event to ListItem*/}
-        >
-          <MoreVertIcon />
-        </IconButton>
-      }
-      menuTemplate={[
-        {
-          label: 'Edit',
-          click: () => props.onEdit(),
+class Item extends Component {
+  componentDidUpdate(prevProps) {
+    if (!prevProps.editingName && this.props.editingName) {
+      setTimeout(
+        () => {
+          if (this.textField) this.textField.focus();
         },
-        {
-          label: 'Rename',
-          click: () => props.onEditName(),
-        },
-        {
-          label: 'Delete',
-          click: () => props.onDelete(),
-        },
-      ]}
-    />;
+        100
+      );
+    }
+  }
 
-  return (
-    <ListItem
-      style={props.style}
-      primaryText={<div style={styles.itemName}>{props.primaryText}</div>}
-      rightIconButton={rightIconButton}
-      onTouchTap={props.onEdit}
-    />
-  );
-};
+  render() {
+    const rightIconButton = this.props.rightIconButton ||
+      <IconMenu
+        iconButtonElement={
+          <IconButton
+            onTouchTap={e =>
+              e.preventDefault() /*Prevent bubbling the event to ListItem*/}
+          >
+            <MoreVertIcon />
+          </IconButton>
+        }
+        menuTemplate={[
+          {
+            label: 'Edit',
+            click: () => this.props.onEdit(),
+          },
+          {
+            label: 'Rename',
+            click: () => this.props.onEditName(),
+          },
+          {
+            label: 'Delete',
+            click: () => this.props.onDelete(),
+          },
+        ]}
+      />;
+    const label = this.props.editingName
+      ? <TextField
+          id="rename-item-field"
+          ref={textField => this.textField = textField}
+          defaultValue={this.props.primaryText}
+          onBlur={e => this.props.onRename(e.target.value)}
+          onKeyPress={event => {
+            if (event.charCode === 13) {
+              // enter key pressed
+              this.textField.blur();
+            }
+          }}
+          fullWidth
+          style={styles.itemTextField}
+        />
+      : <div style={styles.itemName}>{this.props.primaryText}</div>;
+
+    return (
+      <ListItem
+        style={this.props.style}
+        primaryText={label}
+        rightIconButton={rightIconButton}
+        onTouchTap={this.props.onEdit}
+      />
+    );
+  }
+}
 
 const AddItem = makeAddItem(Item);
 
 export default class ProjectManager extends React.Component {
-  state = {};
+  state = {
+    renamedItemKind: null,
+    renamedItemName: '',
+  };
 
   _renderMenu() {
     // If there is already a main menu (as the native one made with
@@ -99,8 +135,19 @@ export default class ProjectManager extends React.Component {
     );
   }
 
+  _onEditName = (kind, name) => {
+    this.setState({
+      renamedItemKind: kind,
+      renamedItemName: name,
+    });
+  };
+
   render() {
     const { project } = this.props;
+    const {
+      renamedItemKind,
+      renamedItemName,
+    } = this.state;
 
     return (
       <List>
@@ -122,12 +169,21 @@ export default class ProjectManager extends React.Component {
               <Item
                 key={i}
                 primaryText={name}
+                editingName={
+                  renamedItemKind === 'layout' && renamedItemName === name
+                }
                 onEdit={() => this.props.onOpenLayout(name)}
                 onDelete={() => this.props.onDeleteLayout(layout)}
+                onRename={(newName) => this.props.onRenameLayout(name, newName)}
+                onEditName={() => this._onEditName('layout', name)}
               />
             );
           }).concat(
-            <AddItem key={'add-scene'} onClick={this.props.onAddLayout} primaryText="Click to add a scene" />
+            <AddItem
+              key={'add-scene'}
+              onClick={this.props.onAddLayout}
+              primaryText="Click to add a scene"
+            />
           )}
         />
         <ProjectStructureItem
@@ -143,8 +199,15 @@ export default class ProjectManager extends React.Component {
               <Item
                 key={i}
                 primaryText={name}
+                editingName={
+                  renamedItemKind === 'external-events' &&
+                    renamedItemName === name
+                }
                 onEdit={() => this.props.onOpenExternalEvents(name)}
-                onDelete={() => this.props.onDeleteExternalEvents(externalEvents)}
+                onDelete={() =>
+                  this.props.onDeleteExternalEvents(externalEvents)}
+                onRename={(newName) => this.props.onRenameExternalEvents(name, newName)}
+                onEditName={() => this._onEditName('external-events', name)}
               />
             );
           }).concat(
@@ -168,8 +231,15 @@ export default class ProjectManager extends React.Component {
               <Item
                 key={i}
                 primaryText={name}
+                editingName={
+                  renamedItemKind === 'external-layout' &&
+                    renamedItemName === name
+                }
                 onEdit={() => this.props.onOpenExternalLayout(name)}
-                onDelete={() => this.props.onDeleteExternalLayout(externalLayout)}
+                onDelete={() =>
+                  this.props.onDeleteExternalLayout(externalLayout)}
+                onRename={(newName) => this.props.onRenameExternalLayout(name, newName)}
+                onEditName={() => this._onEditName('external-layout', name)}
               />
             );
           }).concat(