From 78e9a02b7026f4ca5b1292976aa466e11d019da7 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Mon, 9 Jan 2017 05:48:04 -0500
Subject: [PATCH] Add DropDown component and convert DownloadLink to use it

---
 js/component/link.js | 83 ++++++++++++++++++++++++++++++++++++++-
 js/page/my_files.js  | 92 +-------------------------------------------
 2 files changed, 83 insertions(+), 92 deletions(-)

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 (
+      <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>
     );
   }
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 (
-      <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,