feature (links): leverage default browser navigation and behavior for links #27,#26

This commit is contained in:
Mickael KERJEAN 2018-04-05 04:47:32 +10:00
parent c9c4ee1639
commit d88c845a06
2 changed files with 33 additions and 30 deletions

View file

@ -55,34 +55,39 @@ export class FilesPage extends React.Component {
if(this.observers.ls) this.observers.ls.unsubscribe(); if(this.observers.ls) this.observers.ls.unsubscribe();
} }
componentWillReceiveProps(nextProps){
let new_path = function(path){
if(path === undefined){ path = "/"; }
if(/\/$/.test(path) === false){ path = path + "/"; }
if(/^\//.test(path) === false){ path = "/"+ path; }
return path;
}(nextProps.match.params.path);
if(new_path !== this.state.path){
this.setState({path: new_path, loading: true});
this.onRefresh(new_path);
}
}
hideError(){ hideError(){
this.setState({error: false}); this.setState({error: false});
} }
onRefresh(path = this.state.path){ onRefresh(path = this.state.path){
this.resetHeight();
if(this.observers.ls) this.observers.ls.unsubscribe(); if(this.observers.ls) this.observers.ls.unsubscribe();
this.observers.ls = Files.ls(path).subscribe((files) => { this.observers.ls = Files.ls(path).subscribe((files) => {
this.setState({files: files, loading: false}) files = files.map((file) => {
let path = this.state.path+file.name;
file.link = file.type === "file" ? "/view"+path : "/files"+path+"/";
return file;
});
this.setState({files: files, loading: false});
}, (error) => { }, (error) => {
console.log("ERROR", error);
this.setState({error: error}); this.setState({error: error});
}); });
this.setState({error: false}); this.setState({error: false});
} }
onPathUpdate(path, type = 'directory'){
window.timestamp = new Date();
if(type === 'file'){
this.props.history.push('/view'+path);
}else{
this.setState({path: path, loading: true});
this.onRefresh(path)
if(path !== this.state.path){
this.props.history.push('/files'+path);
}
}
}
onCreate(path, type, file){ onCreate(path, type, file){
if(type === 'file'){ if(type === 'file'){
return Files.touch(path, file); return Files.touch(path, file);

View file

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { DragSource, DropTarget } from 'react-dnd'; import { DragSource, DropTarget } from 'react-dnd';
import './thing.scss'; import './thing.scss';
import { Card, NgIf, Icon, EventEmitter, Prompt } from '../../components/'; import { Card, NgIf, Icon, EventEmitter } from '../../components/';
import { pathBuilder } from '../../helpers/'; import { pathBuilder, prompt } from '../../helpers/';
const fileSource = { const fileSource = {
beginDrag(props, monitor, component) { beginDrag(props, monitor, component) {
@ -146,19 +147,16 @@ export class ExistingThing extends React.Component {
return connectDragSource(connectDropNativeFile(connectDropFile( return connectDragSource(connectDropNativeFile(connectDropFile(
<div className="component_thing"> <div className="component_thing">
<Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}> <Link to={this.props.file.link}>
<DateTime show={this.state.hover !== true || this.state.icon === 'loading'} timestamp={this.props.file.time} /> <Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}>
<Updater filename={this.props.file.name} <Icon name={this.props.file.icon || this.props.file.type} />
icon={this.props.file.icon || this.props.file.type} <Filename filename={this.props.file.name} onRename={this.onRename.bind(this)} is_renaming={this.state.is_renaming} />
can_move={this.props.file.can_move !== false} <FileSize type={this.props.file.type} size={this.props.file.size} />
can_delete={this.props.file.can_delete !== false} <Message message={this.state.message} />
show={this.state.hover === true && this.state.icon !== 'loading' && !('ontouchstart' in window)} <DateTime show={this.state.icon !== 'loading'} timestamp={this.props.file.time} />
onRename={this.onRename.bind(this)} <ActionButton onClickRename={this.onRenameRequest.bind(this)} onClickDelete={this.onDeleteRequest.bind(this)} can_move={this.props.file.can_move !== false} can_delete={this.props.file.can_delete !== false} />
onDelete={this.onDeleteRequest.bind(this)} /> </Card>
<FileSize type={this.props.file.type} size={this.props.file.size} /> </Link>
<Message message={this.state.message} />
</Card>
<Prompt appear={this.state.delete_request} error={this.state.delete_error} message={this.state.delete_message} onCancel={this.onDeleteCancel.bind(this)} onSubmit={this.onDeleteConfirm.bind(this)}/>
</div> </div>
))); )));
} }