🚧 create updatedName field in files reducer

This commit is contained in:
ghalestrilo 2020-04-07 19:47:51 -03:00
parent a47245b289
commit 7d05aa78e3
3 changed files with 22 additions and 13 deletions

View file

@ -47,13 +47,19 @@ export class FileNode extends React.Component {
}, 200);
}
getName() {
const { updatedName, name } = this.props;
return updatedName || name;
}
handleFileClick(e) {
e.stopPropagation();
if (this.props.name !== 'root' && !this.isDeleting) {
if (this.getName() !== 'root' && !this.isDeleting) {
this.props.setSelectedFile(this.props.id);
}
}
handleFileNameChange(event) {
this.props.updateFileName(this.props.id, event.target.value);
}
@ -66,9 +72,9 @@ export class FileNode extends React.Component {
validateFileName() {
const oldFileExtension = this.originalFileName.match(/\.[0-9a-z]+$/i);
const newFileExtension = this.props.name.match(/\.[0-9a-z]+$/i);
const hasPeriod = this.props.name.match(/\.+/);
const newFileName = this.props.name;
const newFileExtension = this.getName().match(/\.[0-9a-z]+$/i);
const hasPeriod = this.getName().match(/\.+/);
const newFileName = this.getName();
const hasNoExtension = oldFileExtension && !newFileExtension;
const hasExtensionIfFolder = this.props.fileType === 'folder' && hasPeriod;
const notSameExtension = oldFileExtension && newFileExtension
@ -115,8 +121,8 @@ export class FileNode extends React.Component {
render() {
const itemClass = classNames({
'sidebar__root-item': this.props.name === 'root',
'sidebar__file-item': this.props.name !== 'root',
'sidebar__root-item': this.getName() === 'root',
'sidebar__file-item': this.getName() !== 'root',
'sidebar__file-item--selected': this.props.isSelectedFile,
'sidebar__file-item--open': this.state.isOptionsOpen,
'sidebar__file-item--editing': this.state.isEditingName,
@ -126,7 +132,7 @@ export class FileNode extends React.Component {
return (
<div className={itemClass}>
{(() => { // eslint-disable-line
if (this.props.name !== 'root') {
if (this.getName() !== 'root') {
return (
<div className="file-item__content" onContextMenu={this.toggleFileOptions}>
<span className="file-item__spacer"></span>
@ -155,11 +161,11 @@ export class FileNode extends React.Component {
</div>
);
})()}
<button className="sidebar__file-item-name" onClick={this.handleFileClick}>{this.props.name}</button>
<button className="sidebar__file-item-name" onClick={this.handleFileClick}>{this.getName()}</button>
<input
type="text"
className="sidebar__file-item-input"
value={this.props.name}
value={this.getName()}
maxLength="128"
onChange={this.handleFileNameChange}
ref={(element) => { this.fileNameInput = element; }}
@ -225,7 +231,7 @@ export class FileNode extends React.Component {
<li>
<button
onClick={() => {
this.originalFileName = this.props.name;
this.originalFileName = this.getName();
this.showEditFileName();
setTimeout(() => this.fileNameInput.focus(), 0);
setTimeout(() => this.hideFileOptions(), 0);
@ -240,7 +246,7 @@ export class FileNode extends React.Component {
<li>
<button
onClick={() => {
if (window.confirm(`Are you sure you want to delete ${this.props.name}?`)) {
if (window.confirm(`Are you sure you want to delete ${this.getName()}?`)) {
this.isDeleting = true;
this.props.resetSelectedFile(this.props.id);
setTimeout(() => this.props.deleteFile(this.props.id, this.props.parentId), 100);
@ -278,6 +284,7 @@ FileNode.propTypes = {
parentId: PropTypes.string,
children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
name: PropTypes.string.isRequired,
updatedName: PropTypes.string,
fileType: PropTypes.string.isRequired,
isSelectedFile: PropTypes.bool,
isFolderClosed: PropTypes.bool,
@ -295,7 +302,8 @@ FileNode.propTypes = {
FileNode.defaultProps = {
parentId: '0',
isSelectedFile: false,
isFolderClosed: false
isFolderClosed: false,
updatedName: '',
};
function mapStateToProps(state, ownProps) {

View file

@ -141,6 +141,7 @@ class Sidebar extends React.Component {
Sidebar.propTypes = {
files: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
updatedName: PropTypes.string,
id: PropTypes.string.isRequired
})).isRequired,
setSelectedFile: PropTypes.func.isRequired,

View file

@ -163,7 +163,7 @@ const files = (state, action) => {
return file;
}
return Object.assign({}, file, { name: action.name });
return Object.assign({}, file, { updatedName: action.name });
});
case ActionTypes.DELETE_FILE:
{