add rename-input component

frontend/package-lock.json

@@ -180,7 +180,7 @@
       "dependencies": {
         "reactstrap": {
           "version": "5.0.0",
-          "resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
           "integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==",
           "requires": {
             "classnames": "^2.2.3",

frontend/src/components/rename-input.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  type: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onRenameConfirm: PropTypes.func.isRequired,
+  onRenameCancel: PropTypes.func.isRequired,
+};
+class RenameInput extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: props.name
+    };
+  }
+
+  componentDidMount() {
+    this.refs.renameInput.focus();
+    if (this.props.type === 'file') {
+      var endIndex = this.props.name.lastIndexOf('.');
+      this.refs.renameInput.setSelectionRange(0, endIndex, 'forward');
+    } else {
+      this.refs.renameInput.setSelectionRange(0, -1);
+    }
+  }
+
+  onChange = (e) => {
+    this.setState({name: e.target.value});
+  }
+
+  onClick = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  onKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.onRenameConfirm(e);
+    }
+  }
+
+  onRenameConfirm = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onRenameConfirm(this.state.name);
+  }
+
+  onRenameCancel = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onRenameCancel();
+  }
+
+  render() {
+    return (
+      <div className="rename-container">
+        <input 
+          ref="renameInput" 
+          value={this.state.name} 
+          onChange={this.onChange} 
+          onKeyPress={this.onKeyPress} 
+          onClick={this.onClick} 
+        />
+        <button className="btn btn-secondary sf2-icon-confirm confirm" onClick={this.onRenameConfirm}></button>
+        <button className="btn btn-secondary sf2-icon-cancel cancel" onClick={this.onRenameCancel}></button>
+      </div>
+    );
+  }
+}
+
+RenameInput.propTypes = propTypes;
+
+export default RenameInput;

frontend/src/pages/my-libs/my-libs.js

@@ -13,6 +13,7 @@ import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import TransferDialog from '../../components/dialog/transfer-dialog';
 import LibHistorySetting from '../../components/dialog/lib-history-setting-dialog';
 import LibDetail from '../../components/dirent-detail/lib-details';
+import RenameInput from '../../components/rename-input';
 
 class Content extends Component {
 
@@ -440,21 +441,21 @@ class Item extends Component {
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        {
-          this.state.showChangeLibName ? (
-            <td>
-              <input value={this.state.repoName} onChange={this.onChangeLibName} />
-              <button type='button' className='sf2-icon-tick text-success' onClick={this.updateLibName} />
-              <button type='button' className='sf2-icon-x2' onClick={this.rename}/>
-            </td>
-          ) : (
-            <td>
-              {data.repo_name ?
-                <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link> :
-                gettext('Broken (please contact your administrator to fix this library)')}
-            </td>
-          )
-        }
+        <td>
+          {this.state.showChangeLibName && (
+            <RenameInput 
+              name={data.repo_name} 
+              onRenameConfirm={this.updateLibName} 
+              onRenameCancel={this.rename}
+            />
+          )}
+          {!this.state.showChangeLibName && data.repo_name && (
+            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link>
+          )}
+          {!this.state.showChangeLibName && !data.repo_name && 
+            (gettext('Broken (please contact your administrator to fix this library)'))
+          }
+        </td>
         <td>{data.repo_name ? desktopOperations : ''}</td>
         <td>{Utils.formatSize({bytes: data.size})}</td>
         {storages.length ? <td>{data.storage_name}</td> : null}