1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 18:29:23 +00:00

add rename-input component

This commit is contained in:
shanshuirenjia
2018-12-12 10:12:19 +08:00
parent 48bfa35a66
commit 224664b49d
3 changed files with 89 additions and 16 deletions

View File

@@ -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",

View File

@@ -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;

View File

@@ -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>
)
{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}