diff --git a/js/component/link.js b/js/component/link.js
index a667dabdd..71cb50ff3 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -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 (
+
+
+ {this.props.label}
+
+
+ {this.state.menuOpen
+ ?
+ {this.props.children}
+
+ : null}
+
+ );
+ }
+});
+
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 = (
-
+
+
+
+
);
} 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 lbry://{this.props.streamName} .
+
+ Are you sure you'd like to remove {this.props.metadata.title} from LBRY?
+
+ Delete this file from my computer
+
);
}
diff --git a/js/page/my_files.js b/js/page/my_files.js
index eed82b670..b0b510c5d 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -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 (
-
-
-
- {/* @TODO: Switch to OS specific wording */}
-
-
-
-
-
- Are you sure you'd like to delete {this.props.title} ? This will {this.props.completed ? ' stop the download and ' : ''}
- permanently remove the file from your system.
-
-
- );
- }
-});
-
-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,