Add ref to focus in Collection List, handle whitespace errors in renaming sketch and collection

Author: catarak

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
       renameOpen: false,
       renameValue: '',
     };
+    this.renameInput = React.createRef();
   }
 
   onFocusComponent = () => {
@@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
     this.setState({
       renameOpen: true,
       renameValue: this.props.collection.name,
-    });
+    }, () => this.renameInput.current.focus());
   }
 
   handleRenameChange = (e) => {
@@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
   }
 
   handleRenameEnter = (e) => {
-    const isValid = this.state.renameValue !== '';
-
     if (e.key === 'Enter') {
-      if (isValid) {
-        this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
-      }
-
-      // this.resetName();
+      this.updateName();
       this.closeAll();
     }
   }
 
-  // resetName = () => {
-  //   this.setState({
-  //     renameValue: this.props.collection.name
-  //   });
-  // }
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
+    }
+  }
 
   renderActions = () => {
     const { optionsOpen } = this.state;
@@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
             value={renameValue}
             onChange={this.handleRenameChange}
             onKeyUp={this.handleRenameEnter}
-            // onBlur={this.resetName}
+            onBlur={this.handleRenameBlur}
             onClick={e => e.stopPropagation()}
+            ref={this.renameInput}
           />
         }
       </React.Fragment>

client/modules/IDE/components/SketchList.jsx

@@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component {
 
   openRename = () => {
     this.setState({
-      renameOpen: true
+      renameOpen: true,
+      renameValue: this.props.sketch.name
     }, () => this.renameInput.current.focus());
   }
 
@@ -95,15 +96,27 @@ class SketchListRowBase extends React.Component {
 
   handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
-      // TODO pass this func
-      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
+      this.updateName();
       this.closeAll();
     }
   }
 
+  handleRenameBlur = () => {
+    this.updateName();
+    this.closeAll();
+  }
+
+  updateName = () => {
+    const isValid = this.state.renameValue.trim().length !== 0;
+    if (isValid) {
+      this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
+    }
+  }
+
   resetSketchName = () => {
     this.setState({
-      renameValue: this.props.sketch.name
+      renameValue: this.props.sketch.name,
+      renameOpen: false
     });
   }
 
@@ -256,7 +269,7 @@ class SketchListRowBase extends React.Component {
           value={renameValue}
           onChange={this.handleRenameChange}
           onKeyUp={this.handleRenameEnter}
-          onBlur={this.resetSketchName}
+          onBlur={this.handleRenameBlur}
           onClick={e => e.stopPropagation()}
           ref={this.renameInput}
         />