1
0
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:
Michael An
2025-10-17 21:59:51 +08:00
committed by GitHub
parent 0f08073a08
commit 6fde72d58c

View File

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