secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Sort dropdown to show current sort order

Browse Source
This commit is contained in:
James Barnsley
2017-01-24 08:02:30 +13:00
parent 32effdc4dd
commit ee6b8073e8
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/js/components/DropdownField.js
View File

@ -40,13 +40,19 @@ export default class DropdownField extends React.Component{
}
render(){
if( !this.props.options ) return null
if (!this.props.options) return null
var classname = 'dropdown-field'
if( this.state.expanded ) classname += ' expanded'
if (this.state.expanded) classname += ' expanded'
var current_value = this.props.options[0].value
if( this.props.value ) current_value = this.props.value
if (this.props.value) current_value = this.props.value
var icon = <FontAwesome name="check" />
if (typeof(this.props.reverse) !== 'undefined'){
if (this.props.reverse) icon = <FontAwesome className="reverse" name="caret-up" />
else icon = <FontAwesome className="reverse" name="caret-down" />
}
return (
<div className={classname} data-key={this.props.name.replace(' ','_').toLowerCase()}>
@ -59,8 +65,8 @@ export default class DropdownField extends React.Component{
this.props.options.map( option => {
return (
<div className="option" key={ option.value } onClick={ e => this.handleChange(option.value) }>
{ option.value == current_value ? <FontAwesome name="check" /> : null }
{ option.label }
{option.value == current_value ? icon : null}
{option.label}
</div>
)
})

33
src/js/views/library/LibraryArtists.js
View File

@ -45,14 +45,19 @@ class LibraryArtists extends React.Component{
if( this.props.view == 'list' ){
var columns = [
{
width: 60,
label: 'Name',
width: 70,
name: 'name'
},
{
width: 10,
label: 'Followers',
width: 15,
name: 'followers.total'
},
{
label: 'Popularity',
width: 15,
name: 'popularity'
}
]
return (
@ -87,30 +92,34 @@ class LibraryArtists extends React.Component{
var view_options = [
{
value: 'thumbnails',
label: 'Thumbnails'
label: 'Thumbnails',
value: 'thumbnails'
},
{
value: 'list',
label: 'List'
label: 'List',
value: 'list'
}
]
var sort_options = [
{
value: 'name',
label: 'Name'
label: 'Name',
value: 'name'
},
{
value: 'followers.total',
label: 'Followers'
label: 'Followers',
value: 'followers.total'
},
{
label: 'Popularity',
value: 'popularity'
}
]
var actions = (
<span>
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={ sort_options } handleChange={ value => this.setSort(value) } />
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={sort_options} reverse={this.props.sort_reverse} handleChange={ value => this.setSort(value) } />
<DropdownField icon="eye" name="View" value={ this.props.view } options={view_options} handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
</span>
)