fix(ui): fix #5: Rename subviews on sidebar

Author: TristanWright

dist/Simput.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ContentEditable from 'tonic-ui/lib/react/widget/ContentEditable';
 
 require('./style.css');
 
@@ -24,9 +25,16 @@ export default React.createClass({
         return {
             viewId: null,
             index: 0,
+            editingIndex: -1,
         };
     },
 
+    componentDidUpdate() {
+        if (this.state.editingIndex !== -1) {
+            this.refs.editable.setFocus();
+        }
+    },
+
     addView(viewId) {
         const viewList = this.props.data.data[viewId] || [],
             index = viewList.length,
@@ -44,6 +52,14 @@ export default React.createClass({
         this.activateSection(viewId, index > 0 ? index - 1 : 0);
     },
 
+    editView(viewId, index) {
+        this.setState({editingIndex: viewId + '-' + index});
+    },
+
+    stopEditingView() {
+        this.setState({editingIndex: -1});
+    },
+
     activateSection(viewId, index) {
         const viewList = this.props.data.data[viewId] || [];
         if(viewList.length <= index) {
@@ -77,8 +93,16 @@ export default React.createClass({
                             </i>
                             <ul style={{ display: (hasSubList && viewSize !== undefined) ? 'block' : 'none' }}>
                             { viewList.map( (viewData, viewIdx) => {
+                                if (this.state.editingIndex === viewId + '-' + viewIdx) {
+                                    return <li key={ 'view-' + viewId + '-' + viewIdx } style={{ fontWeight: fontWeight(viewId, viewIdx) }}>
+                                        <ContentEditable ref="editable" html={viewData.name} blurOnEnter
+                                            onChange={ (e) => {viewData.name = e.target.value;} }/>
+                                        <i className='fa fa-fw fa-check' onClick={ this.stopEditingView }></i>
+                                    </li>;
+                                }
                                 return <li key={ 'view-' + viewId + '-' + viewIdx } style={{ fontWeight: fontWeight(viewId, viewIdx) }}>
                                         <span onClick={ this.activateSection.bind(this, viewId, viewIdx) }>{ viewData.name }</span>
+                                        <i className='fa fa-fw fa-pencil' onClick={ this.editView.bind(this, viewId, viewIdx) }></i>
                                         <i className='fa fa-fw fa-trash' onClick={ this.removeView.bind(this, viewId, viewIdx) }></i>
                                     </li>;
                             })}

lib/ViewMenu/index.js

@@ -15,4 +15,8 @@
 .Outline li {
     cursor: pointer;
     max-width: 30vw;
-}
+}
+
+.ContentEditable {
+    display: inline-block;
+}

lib/ViewMenu/style.css

@@ -56,7 +56,7 @@
     "react-dom": "0.14.6",
 
     "tonic-io": "1.2.2",
-    "tonic-ui": "1.3.1",
+    "tonic-ui": "1.3.7",
 
     "font-awesome": "4.5.0",
     "mout": "0.11.1",