Rearrange app directory structure

2026-05-28 09:27:35 +00:00 · 2015-11-07 23:13:21 -08:00
parent 072c000236
commit eb1ea0806d
91 changed files with 488 additions and 2975 deletions
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Icon from '../icons/Icon';
+
+export default class Action extends React.Component {
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    let classString = 'action action--' + this.props.slug;
+
+    return (
+      <div className={classString} onClick={this.props.clickHandler}>
+        <Icon icon={this.props.icon} />
+        <span className="action__label">{this.props.label}</span>
+      </div>
+    );
+  }
+
+}
@@ -0,0 +1,137 @@
+import classnames from 'classnames';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+import React from 'react';
+
+import Action from './Action';
+
+const methodsToBind = [
+  'componentDidMount',
+  'componentWillUnmount',
+  'getChildren',
+  '_handleDestinationChange',
+  '_handleUrlChange',
+  '_handleAddTorrent',
+  '_handleButtonClick',
+  '_handleExternalClick',
+  '_handleExternalClick'
+];
+
+export default class AddTorrentPanel extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      isExpanded: false
+    };
+
+    methodsToBind.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('click', this._handleExternalClick);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this._handleExternalClick);
+  }
+
+  getChildren() {
+    return (
+      <div className="dropdown__content" onClick={this._handleMenuWrapperClick}>
+        <div className="dropdown__content__header">Add Torrent</div>
+        <div className="dropdown__content__container">
+          <div className="form__row">
+            <label className="form__label">
+              Torrents
+            </label>
+            <input className="textbox"
+              onChange={this._handleUrlChange}
+              placeholder="Torrent URLs"
+              value={this.state.url}
+              type="text" />
+          </div>
+          <div className="form__row">
+            <label className="form__label">
+              Destination
+            </label>
+            <input className="textbox"
+              onChange={this._handleDestinationChange}
+              placeholder="Destination"
+              value={this.state.destination}
+              type="text" />
+          </div>
+          <div className="form__row">
+            <button className="button button--primary" onClick={this._handleAddTorrent}>Add Torrent</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    let classSet = classnames({
+      'dropdown': true,
+      'dropdown--align-right': true,
+      'is-expanded': this.state.isExpanded
+    });
+    let children = null;
+
+    if (this.state.isExpanded) {
+      children = this.getChildren();
+    }
+
+    return (
+      <div className={classSet}>
+        <Action label="Add Torrent" slug="add-torrent" icon="add" clickHandler={this._handleButtonClick} />
+        <CSSTransitionGroup
+          transitionName="dropdown__content"
+          transitionEnterTimeout={250}
+          transitionLeaveTimeout={250}>
+          {children}
+        </CSSTransitionGroup>
+      </div>
+    );
+  }
+
+  _handleDestinationChange(event) {
+    this.setState({
+      destination: event.target.value
+    })
+  }
+
+  _handleUrlChange(event) {
+    this.setState({
+      url: event.target.value
+    })
+  }
+
+  _handleAddTorrent() {
+    // TorrentActions.add({
+    //   url: this.state.url,
+    //   destination: this.state.destination
+    // });
+  }
+
+  _handleButtonClick(evt) {
+    evt.stopPropagation();
+    this.setState({
+      isExpanded: !this.state.isExpanded
+    });
+  }
+
+  _handleExternalClick() {
+    if (this.state.isExpanded) {
+      this.setState({
+        isExpanded: false
+      });
+    }
+  }
+
+  _handleMenuWrapperClick(evt) {
+    evt.stopPropagation();
+  }
+
+}
@@ -0,0 +1,164 @@
+import classnames from 'classnames';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+import React from 'react';
+
+import UIActions from '../../actions/UIActions';
+
+const methodsToBind = [
+  'componentDidMount',
+  'componentWillUnmount',
+  'getHeader',
+  'getMenu',
+  'onItemSelect',
+  'onDropdownClick',
+  'onExternalClick'
+];
+
+export default class SortDropdown extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      isExpanded: true
+    };
+
+    methodsToBind.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('click', this.onExternalClick);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.onExternalClick);
+  }
+
+  getHeader() {
+    return (
+      <a className="dropdown__button" onClick={this.onDropdownClick}>
+        <label className="dropdown__label">Sort By</label>
+        <span className="dropdown__value">{this.props.selectedItem.displayName}</span>
+      </a>
+    );
+  }
+
+  getMenu() {
+    let sortableProperties = [
+      {
+        displayName: 'Name',
+        property: 'name'
+      },
+      {
+        displayName: 'ETA',
+        property: 'seconds'
+      },
+      {
+        displayName: 'Download Speed',
+        property: 'downloadRate'
+      },
+      {
+        displayName: 'Upload Speed',
+        property: 'uploadRate'
+      },
+      {
+        displayName: 'Ratio',
+        property: 'ratio'
+      },
+      {
+        displayName: 'Percent Complete',
+        property: 'percentComplete'
+      },
+      {
+        displayName: 'Downloaded',
+        property: 'downloadTotal'
+      },
+      {
+        displayName: 'Uploaded',
+        property: 'uploadTotal'
+      },
+      {
+        displayName: 'File Size',
+        property: 'sizeBytes'
+      },
+      {
+        displayName: 'Date Added',
+        property: 'added'
+      }
+    ];
+
+    let menuItems = sortableProperties.map(function(property, index) {
+      let classes = classnames({
+        'dropdown__item': true,
+        'is-selected': this.props.selectedItem.property === property.property
+      })
+      return (
+        <li className={classes} key={index} onClick={this.onItemSelect.bind(this, property)}>
+          {property.displayName}
+        </li>
+      );
+    }, this);
+
+    return (
+      <div className="dropdown__content">
+        <div className="dropdown__header">
+          {this.getHeader()}
+        </div>
+        <ul className="dropdown__items">
+          {menuItems}
+        </ul>
+      </div>
+    );
+  }
+
+  onDropdownClick(event) {
+    event.stopPropagation();
+    this.setState({
+      isExpanded: !this.state.isExpanded
+    });
+  }
+
+  onExternalClick() {
+    if (this.state.isExpanded) {
+      this.setState({
+        isExpanded: false
+      });
+    }
+  }
+
+  onItemSelect(sortBy) {
+    this.setState({
+      isExpanded: false,
+      sortBy
+    });
+    this.props.onSortChange(sortBy);
+  }
+
+  render() {
+    let classes = classnames({
+      'dropdown': true,
+      'is-expanded': this.state.isExpanded
+    });
+
+    let menu = null;
+
+    if (this.state.isExpanded) {
+      menu = this.getMenu();
+    }
+
+    return (
+      <div className={classes}>
+        {this.getHeader()}
+        <CSSTransitionGroup
+          transitionName="dropdown__content"
+          transitionEnterTimeout={250}
+          transitionLeaveTimeout={250}>
+          {menu}
+        </CSSTransitionGroup>
+      </div>
+    );
+  }
+
+}