change rename UI (#5625)

frontend/src/components/rename.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../utils/constants';
+import { Utils } from '../utils/utils';
 import toaster from './toast';
 
 const propTypes = {
@@ -17,15 +18,16 @@ class Rename extends React.Component {
     this.state = {
       name: props.name
     };
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
-    this.refs.renameInput.focus();
+    this.inputRef.current.focus();
     if (this.props.hasSuffix) {
       var endIndex = this.props.name.lastIndexOf('.');
-      this.refs.renameInput.setSelectionRange(0, endIndex, 'forward');
+      this.inputRef.current.setSelectionRange(0, endIndex, 'forward');
     } else {
-      this.refs.renameInput.setSelectionRange(0, -1);
+      this.inputRef.current.setSelectionRange(0, -1);
     }
   }
 
@@ -33,14 +35,13 @@ class Rename extends React.Component {
     this.setState({name: e.target.value});
   }
 
-  onClick = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-  }
-
-  onKeyPress = (e) => {
-    if (e.key === 'Enter') {
+  onKeyDown = (e) => {
+    if (e.keyCode === Utils.keyCodes.enter) {
       this.onRenameConfirm(e);
+    } else if (e.keyCode === Utils.keyCodes.esc) {
+      this.onRenameCancel(e);
     }
+    e.nativeEvent.stopImmediatePropagation();
   }
 
   onRenameConfirm = (e) => {
@@ -87,14 +88,11 @@ class Rename extends React.Component {
     return (
       <div className="rename-container">
         <input
-          ref="renameInput"
+          ref={this.inputRef}
           value={this.state.name}
           onChange={this.onChange}
-          onKeyPress={this.onKeyPress}
-          onClick={this.onClick}
+          onKeyDown={this.onKeyDown}
         />
-        <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>
     );
   }

frontend/src/utils/utils.js

@@ -8,6 +8,7 @@ import { compareTwoString } from './compare-two-string';
 export const Utils = {
 
   keyCodes:  {
+    enter: 13,
     esc:   27,
     space: 32,
     tab:   9,

media/css/seahub_react.css

@@ -984,7 +984,8 @@ table td {
 .rename-container input {
     box-sizing: content-box;
     padding: 2px 3px;
-    width: 10rem;
+    width: 20rem;
+    max-width: 100%;
     height: 22px;
     line-height: 19px;
     border-radius: 2px;
@@ -1000,19 +1001,6 @@ table td {
     box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.rename-container button {
-    margin-left: 0.25rem;
-    padding: 5px 6px;
-    font-size: 1rem;
-    line-height: 1;
-    color: #666;
-    min-width: 0;
-}
-
-.rename-container .confirm {
-    color: green;
-}
-
 @media (max-width: 767px) {
     .rename-container input {
         width: 10rem;