Add DropDown component and convert DownloadLink to use it

This commit is contained in:
Alex Liebowitz 2017-01-09 05:48:04 -05:00
parent a2641c1a98
commit 78e9a02b70
2 changed files with 83 additions and 92 deletions

View file

@ -1,6 +1,8 @@
import React from 'react';
import lbry from '../lbry.js';
import FormField from './form.js';
import Modal from './modal.js';
import {Menu, MenuItem} from './menu.js';
import {Icon, ToolTip} from './common.js';
@ -109,17 +111,62 @@ export let ToolTipLink = React.createClass({
}
});
export let DropDown = React.createClass({
propTypes: {
onCaretClick: React.PropTypes.func,
},
handleCaretClicked: function(event) {
/**
* The menu handles caret clicks via a window event listener, so we just need to prevent clicks
* on the caret from bubbling up to the link
*/
this.setState({
menuOpen: !this.state.menuOpen,
});
event.stopPropagation();
return false;
},
closeMenu: function(event) {
this.setState({
menuOpen: false,
});
},
getInitialState: function() {
return {
menuOpen: false,
};
},
render: function() {
const {onCaretClick, ...other} = this.props;
return (
<div>
<Link {...other}>
<span className="link-label">{this.props.label}</span>
<Icon icon="icon-caret-down" fixed={true} onClick={this.handleCaretClicked} />
</Link>
{this.state.menuOpen
? <Menu onClickOut={this.closeMenu}>
{this.props.children}
</Menu>
: null}
</div>
);
}
});
export let DownloadLink = React.createClass({
propTypes: {
type: React.PropTypes.string,
streamName: React.PropTypes.string,
sdHash: React.PropTypes.string,
metadata: React.PropTypes.object,
label: React.PropTypes.string,
button: React.PropTypes.string,
state: React.PropTypes.oneOf(['not-started', 'downloading', 'done']),
progress: React.PropTypes.number,
path: React.PropTypes.string,
hidden: React.PropTypes.bool,
deleteChecked: React.PropTypes.bool,
},
tryDownload: function() {
lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
@ -145,6 +192,30 @@ export let DownloadLink = React.createClass({
});
});
},
openMenu: function() {
this.setState({
menuOpen: !this.state.menuOpen,
});
},
handleDeleteCheckboxClicked: function(event) {
this.setState({
deleteChecked: event.target.checked,
});
},
handleRevealClicked: function() {
lbry.revealFile(this.props.path);
},
handleRemoveClicked: function() {
this.setState({
modal: 'confirmRemove',
});
},
handleRemoveConfirmed: function() {
lbry.deleteFile(this.props.sdHash || this.props.streamName, this.state.deleteChecked);
this.setState({
modal: null,
});
},
getDefaultProps: function() {
return {
state: 'not-started',
@ -154,6 +225,7 @@ export let DownloadLink = React.createClass({
return {
filePath: null,
modal: null,
menuOpen: false,
}
},
closeModal: function() {
@ -186,7 +258,10 @@ export let DownloadLink = React.createClass({
);
} else if (this.props.state == 'done') {
linkBlock = (
<Link button="alt" label="Open" icon='icon-external-link-square' onClick={this.handleClick} />
<DropDown button="alt" label="Open" onClick={this.handleClick} onCaretClick={this.openMenu}>
<MenuItem onClick={this.handleRevealClicked} label="Open in Folder" />
<MenuItem onClick={this.handleRemoveClicked} label="Remove..." />
</DropDown>
);
} else {
throw new Error(`Unknown download state ${this.props.state} passed to DownloadLink`);
@ -213,6 +288,12 @@ export let DownloadLink = React.createClass({
onConfirmed={this.closeModal}>
LBRY was unable to download the stream <strong>lbry://{this.props.streamName}</strong>.
</Modal>
<Modal isOpen={this.state.modal == 'confirmRemove'} type="confirm" confirmButtonLabel="Remove"
onConfirmed={this.handleRemoveConfirmed} onAborted={this.closeModal}>
<p>Are you sure you'd like to remove <cite>{this.props.metadata.title}</cite> from LBRY?</p>
<label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
</Modal>
</span>
);
}

View file

@ -1,101 +1,11 @@
import React from 'react';
import lbry from '../lbry.js';
import {Link, WatchLink} from '../component/link.js';
import {Menu, MenuItem} from '../component/menu.js';
import {Link} from '../component/link.js';
import FormField from '../component/form.js';
import FileTile from '../component/file-tile.js';
import Modal from '../component/modal.js';
import {BusyMessage, Thumbnail} from '../component/common.js';
var moreMenuStyle = {
position: 'absolute',
display: 'block',
top: '26px',
right: '13px',
};
var MyFilesRowMoreMenu = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
path: React.PropTypes.string.isRequired,
completed: React.PropTypes.bool.isRequired,
lbryUri: React.PropTypes.string.isRequired,
},
handleRevealClicked: function() {
lbry.revealFile(this.props.path);
},
handleRemoveClicked: function() {
lbry.deleteFile(this.props.lbryUri, false);
},
handleDeleteClicked: function() {
this.setState({
modal: 'confirmDelete',
});
},
handleDeleteConfirmed: function() {
lbry.deleteFile(this.props.lbryUri);
this.setState({
modal: null,
});
},
closeModal: function() {
this.setState({
modal: null,
});
},
getInitialState: function() {
return {
modal: null,
};
},
render: function() {
return (
<div style={moreMenuStyle}>
<Menu {...this.props}>
<section className="card">
<MenuItem onClick={this.handleRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
<MenuItem onClick={this.handleRemoveClicked} label="Remove from LBRY" />
<MenuItem onClick={this.handleDeleteClicked} label="Remove and delete file" />
</section>
</Menu>
<Modal isOpen={this.state.modal == 'confirmDelete'} contentLabel="Confirm delete" type="confirm" confirmButtonLabel="Delete File"
onConfirmed={this.handleDeleteConfirmed} onAborted={this.closeModal}>
Are you sure you'd like to delete <cite>{this.props.title}</cite>? This will {this.props.completed ? ' stop the download and ' : ''}
permanently remove the file from your system.
</Modal>
</div>
);
}
});
var moreButtonColumnStyle = {
height: '120px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
moreButtonContainerStyle = {
display: 'block',
position: 'relative',
},
moreButtonStyle = {
fontSize: '1.3em',
},
progressBarStyle = {
height: '15px',
width: '230px',
backgroundColor: '#444',
border: '2px solid #eee',
display: 'inline-block',
},
artStyle = {
maxHeight: '100px',
maxWidth: '100%',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
};
var MyFilesPage = React.createClass({
_fileTimeout: null,
_fileInfoCheckRate: 300,