From bdc5e147ef9224600658860c42ce5696e246eeb3 Mon Sep 17 00:00:00 2001 From: John Furrow Date: Sun, 3 Jan 2016 20:58:18 -0500 Subject: [PATCH] Add speed limit dropdown --- .../components/action-bar/SortDropdown.js | 103 +++++----- .../scripts/components/generic/Dropdown.js | 39 ++-- .../components/sidebar/SpeedLimitDropdown.js | 180 +++++++++++++----- 3 files changed, 214 insertions(+), 108 deletions(-) diff --git a/client/source/scripts/components/action-bar/SortDropdown.js b/client/source/scripts/components/action-bar/SortDropdown.js index 3827c265..f2f27db4 100644 --- a/client/source/scripts/components/action-bar/SortDropdown.js +++ b/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); diff --git a/client/source/scripts/components/generic/Dropdown.js b/client/source/scripts/components/generic/Dropdown.js index 1f48c77c..8e84d680 100644 --- a/client/source/scripts/components/generic/Dropdown.js +++ b/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 ( -
  • - {property.displayName} -
    • +
    + {this.getDropdownMenuItems(itemList)} +
    ); }, this); @@ -76,12 +74,27 @@ export default class Dropdown extends React.Component { {this.getDropdownButton()} ); } + 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 ( +
  • + {property.displayName} +
    • + ); + }, 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 +}; diff --git a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js index 14f000d5..de902148 100644 --- a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js +++ b/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 ( @@ -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 ( -
    +
    );