Add speed limit dropdown

client/source/scripts/components/action-bar/SortDropdown.js

@@ -14,10 +14,6 @@ export default class SortDropdown extends React.Component {
   constructor() {
     super();
 
-    this.state = {
-      isExpanded: false
-    };
-
     methodsToBind.forEach((method) => {
       this[method] = this[method].bind(this);
     });
@@ -34,62 +30,75 @@ export default class SortDropdown extends React.Component {
 
   getMenuItems() {
     return [
-      {
-        displayName: 'Name',
-        property: 'name'
-      },
-      {
-        displayName: 'ETA',
-        property: 'eta'
-      },
-      {
-        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'
-      }
+      [
+        {
+          displayName: 'Name',
+          property: 'sortBy',
+          value: 'name'
+        },
+        {
+          displayName: 'ETA',
+          property: 'sortBy',
+          value: 'eta'
+        },
+        {
+          displayName: 'Download Speed',
+          property: 'sortBy',
+          value: 'downloadRate'
+        },
+        {
+          displayName: 'Upload Speed',
+          property: 'sortBy',
+          value: 'uploadRate'
+        },
+        {
+          displayName: 'Ratio',
+          property: 'sortBy',
+          value: 'ratio'
+        },
+        {
+          displayName: 'Percent Complete',
+          property: 'sortBy',
+          value: 'percentComplete'
+        },
+        {
+          displayName: 'Downloaded',
+          property: 'sortBy',
+          value: 'downloadTotal'
+        },
+        {
+          displayName: 'Uploaded',
+          property: 'sortBy',
+          value: 'uploadTotal'
+        },
+        {
+          displayName: 'File Size',
+          property: 'sortBy',
+          value: 'sizeBytes'
+        },
+        {
+          displayName: 'Date Added',
+          property: 'sortBy',
+          value: 'added'
+        }
+      ]
     ];
   }
 
   handleItemSelect(sortBy) {
     let direction = this.props.selectedItem.direction;
 
-    if (this.props.selectedItem.property === sortBy.property) {
+    if (this.props.selectedItem.value === sortBy.value) {
       direction = direction === 'asc' ? 'desc' : 'asc';
     } else {
       direction = 'asc';
     }
 
     let sortProperty = {
+      direction,
       displayName: sortBy.displayName,
-      property: sortBy.property,
-      direction
+      property: 'sortBy',
+      value: sortBy.value
     };
 
     this.props.onSortChange(sortProperty);

client/source/scripts/components/generic/Dropdown.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import classnames from 'classnames';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
 import React from 'react';
@@ -5,6 +6,7 @@ import React from 'react';
 const methodsToBind = [
   'getDropdownButton',
   'getDropdownMenu',
+  'getDropdownMenuItems',
   'handleDropdownBlur',
   'handleDropdownClick',
   'handleDropdownFocus',
@@ -57,16 +59,12 @@ export default class Dropdown extends React.Component {
     );
   }
 
-  getDropdownMenu() {
-    let menuItems = this.props.menuItems.map(function(property, index) {
-      let classes = classnames({
-        'dropdown__item': true,
-        'is-selected': this.props.selectedItem.property === property.property
-      })
+  getDropdownMenu(items) {
+    let dropdownLists = items.map(function(itemList, index) {
       return (
-        <li className={classes} key={index} onClick={this.handleItemSelect.bind(this, property)}>
-          {property.displayName}
-        </li>
+        <div className="dropdown__list" key={index}>
+          {this.getDropdownMenuItems(itemList)}
+        </div>
       );
     }, this);
 
@@ -76,12 +74,27 @@ export default class Dropdown extends React.Component {
           {this.getDropdownButton()}
         </div>
         <ul className="dropdown__items">
-          {menuItems}
+          {dropdownLists}
         </ul>
       </div>
     );
   }
 
+  getDropdownMenuItems(listItems) {
+    return listItems.map(function(property, index) {
+      let classes = classnames({
+        'dropdown__item': true,
+        'is-selected': this.props.selectedItem.property === property.property &&
+          this.props.selectedItem.value === property.value
+      })
+      return (
+        <li className={classes} key={index} onClick={this.handleItemSelect.bind(this, property)}>
+          {property.displayName}
+        </li>
+      );
+    }, this);
+  }
+
   render() {
     let dropdownWrapperClass = classnames({
       [this.props.dropdownWrapperClass]: true,
@@ -91,7 +104,7 @@ export default class Dropdown extends React.Component {
     let menu = null;
 
     if (this.state.isExpanded) {
-      menu = this.getDropdownMenu();
+      menu = this.getDropdownMenu(this.props.menuItems);
     }
 
     return (
@@ -112,3 +125,7 @@ Dropdown.defaultProps = {
   dropdownWrapperClass: 'dropdown',
   dropdownButtonClass: 'dropdown__trigger'
 };
+
+Dropdown.propTypes = {
+  menuItems: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.object)).isRequired
+};

client/source/scripts/components/sidebar/SpeedLimitDropdown.js

@@ -1,17 +1,10 @@
 import React from 'react';
 
+import ClientActions from '../../actions/ClientActions';
 import Dropdown from '../generic/Dropdown';
 import Icon from '../icons/Icon';
 
 class Sidebar extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      isEpanded: false
-    };
-  }
-
   getDropdownHeader() {
     return (
       <a className="client-stats client-stat--limits">
@@ -22,57 +15,144 @@ class Sidebar extends React.Component {
 
   getMenuItems() {
     return [
-      {
-        displayName: '1',
-        property: '1'
-      },
-      {
-        displayName: '2',
-        property: '2'
-      },
-      {
-        displayName: '3',
-        property: '3'
-      },
-      {
-        displayName: '4',
-        property: '4'
-      },
-      {
-        displayName: '5',
-        property: '5'
-      },
-      {
-        displayName: '6',
-        property: '6'
-      },
-      {
-        displayName: '7',
-        property: '7'
-      },
-      {
-        displayName: '8',
-        property: '8'
-      },
-      {
-        displayName: '9',
-        property: '9'
-      },
-      {
-        displayName: '10',
-        property: '10'
-      }
+      [
+        {
+          displayName: '0.25',
+          property: 'upload',
+          value: '256'
+        },
+        {
+          displayName: '0.5',
+          property: 'upload',
+          value: '512'
+        },
+        {
+          displayName: '1',
+          property: 'upload',
+          value: '1024'
+        },
+        {
+          displayName: '10',
+          property: 'upload',
+          value: '10240'
+        },
+        {
+          displayName: '100',
+          property: 'upload',
+          value: '102400'
+        },
+        {
+          displayName: '1000',
+          property: 'upload',
+          value: '1048576'
+        },
+        {
+          displayName: '5',
+          property: 'upload',
+          value: '5'
+        },
+        {
+          displayName: '6',
+          property: 'upload',
+          value: '6'
+        },
+        {
+          displayName: '7',
+          property: 'upload',
+          value: '7'
+        },
+        {
+          displayName: '8',
+          property: 'upload',
+          value: '8'
+        },
+        {
+          displayName: '9',
+          property: 'upload',
+          value: '9'
+        },
+        {
+          displayName: '10',
+          property: 'upload',
+          value: '10'
+        }
+      ], [
+        {
+          displayName: '0.25',
+          property: 'download',
+          value: '256'
+        },
+        {
+          displayName: '0.5',
+          property: 'download',
+          value: '512'
+        },
+        {
+          displayName: '1',
+          property: 'download',
+          value: '1024'
+        },
+        {
+          displayName: '10',
+          property: 'download',
+          value: '10240'
+        },
+        {
+          displayName: '100',
+          property: 'download',
+          value: '102400'
+        },
+        {
+          displayName: '1000',
+          property: 'download',
+          value: '1048576'
+        },
+        {
+          displayName: '5',
+          property: 'download',
+          value: '5'
+        },
+        {
+          displayName: '6',
+          property: 'download',
+          value: '6'
+        },
+        {
+          displayName: '7',
+          property: 'download',
+          value: '7'
+        },
+        {
+          displayName: '8',
+          property: 'download',
+          value: '8'
+        },
+        {
+          displayName: '9',
+          property: 'download',
+          value: '9'
+        },
+        {
+          displayName: '10',
+          property: 'download',
+          value: '10'
+        }
+      ]
     ];
   }
 
+  handleItemSelect(data) {
+    ClientActions.setThrottle(data.property, data.value);
+  }
+
   render() {
     return (
-      <div className="client-stats sidebar__item">
+      <div className="client-stats sidebar__item sidebar__item--speed-limit">
         <Dropdown
           handleItemSelect={this.handleItemSelect}
           header={this.getDropdownHeader()}
           menuItems={this.getMenuItems()}
-          selectedItem={'1'}
+          selectedItem={'10000'}
           />
       </div>
     );