haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-01 07:10:55 +00:00
Code Issues Releases Wiki Activity

change rename UI (#5625)

Browse Source
This commit is contained in:
Michael An 2023-09-05 20:21:24 +08:00 committed by GitHub
parent cb6b60d301
commit ae90c40dde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/rename.js
View File

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

1
frontend/src/utils/utils.js
View File

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

16
media/css/seahub_react.css
View File

@ -984,7 +984,8 @@ table td {
.rename-container input { .rename-container input {
box-sizing: content-box; box-sizing: content-box;
padding: 2px 3px; padding: 2px 3px;
width: 10rem; width: 20rem;
max-width: 100%;
height: 22px; height: 22px;
line-height: 19px; line-height: 19px;
border-radius: 2px; border-radius: 2px;
@ -1000,19 +1001,6 @@ table td {
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25); 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) { @media (max-width: 767px) {
.rename-container input { .rename-container input {
width: 10rem; width: 10rem;