-
-
-
-
-
-
-
-
-
-
+
);
@@ -115,6 +129,11 @@ export default class AddTorrents extends React.Component {
}
render() {
- return this.getContent();
+ return (
+
+ );
}
}
diff --git a/client/source/scripts/components/modals/Modal.js b/client/source/scripts/components/modals/Modal.js
new file mode 100644
index 00000000..7f2d913a
--- /dev/null
+++ b/client/source/scripts/components/modals/Modal.js
@@ -0,0 +1,63 @@
+import _ from 'lodash';
+import classnames from 'classnames';
+import React from 'react';
+
+export default class Modal extends React.Component {
+ getModalButtons(actions) {
+ let buttons = actions.map((action, index) => {
+ let classes = classnames('button', {
+ 'button--deemphasize': action.type === 'secondary',
+ 'button--primary': action.type === 'primary'
+ });
+
+ return (
+
+ );
+ });
+
+ return (
+
+ {buttons}
+
+ );
+ }
+
+ getClickHandler(action) {
+ return () => {
+ if (action.triggerDismiss) {
+ this.props.dismiss();
+ }
+
+ if (action.clickHandler) {
+ action.clickHandler();
+ }
+ }
+ }
+
+ handleMenuWrapperClick(event) {
+ event.stopPropagation();
+ }
+
+ render() {
+ let contentClasses = classnames('modal__content',
+ `modal__content--align-${this.props.alignment}`);
+
+ return (
+
+
{this.props.heading}
+
+ {this.props.content}
+
+
+ {this.getModalButtons(this.props.actions)}
+
+
+ );
+ }
+}
+
+Modal.defaultProps = {
+ alignment: 'left'
+};
diff --git a/client/source/scripts/components/modals/Modals.js b/client/source/scripts/components/modals/Modals.js
index fbf42e76..82dc3c0a 100644
--- a/client/source/scripts/components/modals/Modals.js
+++ b/client/source/scripts/components/modals/Modals.js
@@ -3,6 +3,7 @@ import React from 'react';
import AddTorrents from './AddTorrents';
import EventTypes from '../../constants/EventTypes';
+import Modal from './Modal';
import UIActions from '../../actions/UIActions';
import UIStore from '../../stores/UIStore';
@@ -11,7 +12,7 @@ const METHODS_TO_BIND = [
'onModalChange'
];
-export default class Modal extends React.Component {
+export default class Modals extends React.Component {
constructor() {
super();
@@ -32,12 +33,16 @@ export default class Modal extends React.Component {
UIStore.unlisten(EventTypes.UI_MODAL_CHANGE, this.onModalChange);
}
+ dismissModal() {
+ UIActions.dismissModal();
+ }
+
handleModalClick(event) {
event.stopPropagation();
}
handleOverlayClick() {
- UIActions.dismissModal();
+ this.dismissModal();
}
onModalChange() {
@@ -47,7 +52,24 @@ export default class Modal extends React.Component {
render() {
let modal = null;
- switch (this.state.activeModal) {
+ let modalOptions = null;
+ let modalType = this.state.activeModal;
+
+ if (modalType && modalType.type) {
+ modalOptions = modalType;
+ modalType = modalType.type;
+ }
+
+ switch (modalType) {
+ case 'confirm':
+ modal = (
+
+ );
+ break;
case 'add-torrents':
modal = (
diff --git a/client/source/scripts/components/torrent-list/ActionBar.js b/client/source/scripts/components/torrent-list/ActionBar.js
index 79f91077..eeed5591 100644
--- a/client/source/scripts/components/torrent-list/ActionBar.js
+++ b/client/source/scripts/components/torrent-list/ActionBar.js
@@ -4,9 +4,11 @@ import Action from './Action';
import Add from '../icons/Add';
import EventTypes from '../../constants/EventTypes';
import Pause from '../icons/Pause';
+import Remove from '../icons/Remove';
import SortDropdown from './SortDropdown';
import Start from '../icons/Start';
import Stop from '../icons/Stop';
+import stringUtil from '../../../../../util/stringUtil';
import TorrentActions from '../../actions/TorrentActions';
import TorrentFilterStore from '../../stores/TorrentFilterStore';
import TorrentStore from '../../stores/TorrentStore';
@@ -14,6 +16,7 @@ import UIActions from '../../actions/UIActions';
const METHODS_TO_BIND = [
'handleAddTorrents',
+ 'handleRemoveTorrents',
'handleSortChange',
'handleStart',
'handleStop',
@@ -46,6 +49,55 @@ export default class ActionBar extends React.Component {
UIActions.displayModal('add-torrents');
}
+ handleRemoveTorrentConfirm(torrents) {
+ TorrentActions.deleteTorrents(torrents);
+ }
+
+ handleRemoveTorrentDecline() {
+ console.log('decline');
+ }
+
+ handleRemoveTorrents() {
+ let selectedTorrents = TorrentStore.getSelectedTorrents() || [];
+ let selectedTorrentCount = selectedTorrents.length;
+
+ let actions = [
+ {
+ clickHandler: this.handleRemoveTorrentDecline,
+ content: 'No',
+ triggerDismiss: true,
+ type: 'secondary'
+ },
+ {
+ clickHandler: this.handleRemoveTorrentConfirm.bind(this, selectedTorrents),
+ content: 'Yes',
+ triggerDismiss: true,
+ type: 'primary'
+ }
+ ];
+ let torrentText = stringUtil.pluralize('torrent', selectedTorrentCount);
+ let content = `You are about to remove ${selectedTorrentCount} ${torrentText}.`;
+
+ if (selectedTorrentCount === 0) {
+ actions = [
+ {
+ clickHandler: null,
+ content: 'OK',
+ triggerDismiss: true,
+ type: 'primary'
+ }
+ ];
+ content = 'You haven\'t selected any torrents.';
+ }
+
+ UIActions.displayModal({
+ actions,
+ content,
+ heading: 'Are you sure?',
+ type: 'confirm'
+ });
+ }
+
handleSortChange(sortBy) {
UIActions.setTorrentsSort(sortBy);
}
@@ -83,6 +135,8 @@ export default class ActionBar extends React.Component {
}
clickHandler={this.handleAddTorrents} />
+
}
+ clickHandler={this.handleRemoveTorrents} />
diff --git a/client/source/scripts/components/torrent-list/Torrent.js b/client/source/scripts/components/torrent-list/Torrent.js
index f6e698d9..037287f1 100644
--- a/client/source/scripts/components/torrent-list/Torrent.js
+++ b/client/source/scripts/components/torrent-list/Torrent.js
@@ -57,7 +57,7 @@ export default class Torrent extends React.Component {
});
return (
-