mirror of
https://github.com/haiwen/seahub.git
synced 2025-10-21 19:00:12 +00:00
fix rename file or folder placeholder in grid mode (#8322)
* fix rename file or folder placeholder in grid mode * change label name
This commit is contained in:
@@ -2,7 +2,7 @@ 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, validateName } from '../../utils/utils';
|
import { Utils, validateName } from '../../utils/utils';
|
||||||
import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
|
import { Button, Modal, Input, ModalBody, ModalFooter, Alert, Label } from 'reactstrap';
|
||||||
import SeahubModalHeader from '@/components/common/seahub-modal-header';
|
import SeahubModalHeader from '@/components/common/seahub-modal-header';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
@@ -17,26 +17,25 @@ class Rename extends React.Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
newName: '',
|
newName: this.props.dirent.name,
|
||||||
errMessage: '',
|
errMessage: '',
|
||||||
isSubmitBtnActive: false,
|
isSubmitBtnActive: false,
|
||||||
};
|
};
|
||||||
this.newInput = React.createRef();
|
this.newInput = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillMount() {
|
|
||||||
this.setState({ newName: this.props.dirent.name });
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { dirent } = this.props;
|
this.updateName(this.props.dirent);
|
||||||
this.changeState(dirent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||||
this.changeState(nextProps.dirent);
|
this.updateName(nextProps.dirent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateName = (dirent) => {
|
||||||
|
this.setState({ newName: dirent.name });
|
||||||
|
};
|
||||||
|
|
||||||
handleChange = (e) => {
|
handleChange = (e) => {
|
||||||
if (!e.target.value.trim()) {
|
if (!e.target.value.trim()) {
|
||||||
this.setState({ isSubmitBtnActive: false });
|
this.setState({ isSubmitBtnActive: false });
|
||||||
@@ -76,11 +75,6 @@ class Rename extends React.Component {
|
|||||||
this.props.toggleCancel();
|
this.props.toggleCancel();
|
||||||
};
|
};
|
||||||
|
|
||||||
changeState = (dirent) => {
|
|
||||||
let name = dirent.name;
|
|
||||||
this.setState({ newName: name });
|
|
||||||
};
|
|
||||||
|
|
||||||
onAfterModelOpened = () => {
|
onAfterModelOpened = () => {
|
||||||
if (!this.newInput.current) return;
|
if (!this.newInput.current) return;
|
||||||
const { dirent } = this.props;
|
const { dirent } = this.props;
|
||||||
@@ -100,14 +94,15 @@ class Rename extends React.Component {
|
|||||||
<Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
|
<Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
|
||||||
<SeahubModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</SeahubModalHeader>
|
<SeahubModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</SeahubModalHeader>
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
<p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
|
<Label for={type === 'file' ? 'rename-file-name' : 'rename-folder-name'}>
|
||||||
|
{type === 'file' ? gettext('Rename file to') : gettext('Rename folder to')}
|
||||||
|
</Label>
|
||||||
<Input
|
<Input
|
||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
innerRef={this.newInput}
|
innerRef={this.newInput}
|
||||||
placeholder="newName"
|
|
||||||
value={this.state.newName}
|
value={this.state.newName}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
name={type === 'file' ? 'new-file-name' : 'new-folder-name'}
|
name={type === 'file' ? 'rename-file-name' : 'rename-folder-name'}
|
||||||
/>
|
/>
|
||||||
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
|
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
|
||||||
</ModalBody>
|
</ModalBody>
|
||||||
|
Reference in New Issue
Block a user