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

Dropdown field new functionality

Browse Source
This commit is contained in:
James Barnsley
2018-05-06 20:25:59 +12:00
parent 75099b732b
commit 44d5f13372
8 changed files with 23586 additions and 25387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/js/components/Fields/DropdownField.js
View File

@ -34,12 +34,23 @@ export default class DropdownField extends React.Component{
}
handleChange(value, is_selected){
this.setState({
expanded: !this.state.expanded
});
if (this.isMultiSelect()){
if (value == 'select-all'){
var new_value = [];
for (var i = 0; i < this.props.options.length; i++){
new_value.push(this.props.options[i].value);
}
return this.props.handleChange(new_value);
}
} else {
this.setState({
expanded: !this.state.expanded
});
}
var current_value = this.props.value;
if (current_value instanceof Array){
if (this.isMultiSelect()){
if (is_selected){
var index = current_value.indexOf(value);
current_value.splice(index, 1);
@ -61,6 +72,10 @@ export default class DropdownField extends React.Component{
});
}
isMultiSelect(){
return this.props.value instanceof Array;
}
render(){
if (!this.props.options){
return null;
@ -89,32 +104,40 @@ export default class DropdownField extends React.Component{
current_value = this.props.options[0].value;
}
var icon = <FontAwesome name="check" />
if (this.props.reverse !== undefined){
if (this.props.reverse){
icon = <FontAwesome className="reverse" name="caret-down" />
} else {
icon = <FontAwesome className="reverse" name="caret-up" />
}
var selected_icon = <FontAwesome name="check" />
if (this.props.selected_icon){
selected_icon = <FontAwesome name={this.props.selected_icon} />
}
var options = Object.assign([], this.props.options);
if (this.isMultiSelect()){
options.push({
value: 'select-all',
label: 'Select all',
className: 'grey-text'
});
}
return (
<div className={className} data-key={this.props.name.replace(' ','_').toLowerCase()}>
<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={ () => this.handleToggle() }>
<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={e => this.handleToggle()}>
{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp; </span> : null}
<span className="text">{ this.props.name }</span>
<span className="text">
{this.props.name}
{this.isMultiSelect() ? ' ('+current_value.length+')' : null}
</span>
</div>
<div className="options">
{
this.props.options.map(option => {
if (current_value instanceof Array){
options.map(option => {
if (this.isMultiSelect()){
var is_selected = current_value.indexOf(option.value) > -1;
} else {
var is_selected = current_value == option.value;
}
return (
<div className="option" key={option.value} onClick={e => this.handleChange(option.value, is_selected)}>
{!this.props.no_status_icon && is_selected ? icon : null}
<div className={"option "+(option.className ? option.className : '')} key={option.value} onClick={e => this.handleChange(option.value, is_selected)}>
{!this.props.no_status_icon && is_selected ? selected_icon : null}
{option.label}
</div>
)

8
src/js/views/Search.js
View File

@ -322,10 +322,7 @@ class Search extends React.Component{
}
];
var provider_options = [{
value: 'all',
label: 'All'
}];
var provider_options = [];
for (var i = 0; i < this.props.uri_schemes.length; i++){
provider_options.push({
value: this.props.uri_schemes[i],
@ -340,7 +337,7 @@ class Search extends React.Component{
name="Sort"
value={this.props.sort}
options={sort_options}
reverse={this.props.sort_reverse}
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu()}}
/>
<DropdownField
@ -348,7 +345,6 @@ class Search extends React.Component{
name="Source"
value={this.props.search_uri_schemes}
options={provider_options}
reverse={this.props.sort_reverse}
handleChange={value => {this.props.uiActions.set({search_uri_schemes: value}); this.props.uiActions.hideContextMenu()}}
/>
</span>

2
src/js/views/library/LibraryAlbums.js
View File

@ -254,7 +254,7 @@ class LibraryAlbums extends React.Component{
name="Sort"
value={this.props.sort}
options={sort_options}
reverse={this.props.sort_reverse}
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }}
/>
<DropdownField

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

@ -217,9 +217,28 @@ class LibraryArtists extends React.Component{
var options = (
<span>
<FilterField handleChange={value => this.setState({filter: value, limit: this.state.per_page})} />
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={sort_options} reverse={this.props.sort_reverse} handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={ this.props.view } options={view_options} handleChange={value => {this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu()}} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_artists_source: val}); this.props.uiActions.hideContextMenu() }} />
<DropdownField
icon="sort"
name="Sort"
value={ this.props.sort }
options={sort_options}
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
/>
<DropdownField
icon="eye"
name="View"
value={ this.props.view }
options={view_options}
handleChange={value => {this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu()}}
/>
<DropdownField
icon="database"
name="Source"
value={this.props.source}
options={source_options}
handleChange={value => {this.props.uiActions.set({ library_artists_source: value}); this.props.uiActions.hideContextMenu() }}
/>
</span>
)

29
src/js/views/library/LibraryPlaylists.js
View File

@ -234,10 +234,31 @@ class LibraryPlaylists extends React.Component{
var options = (
<span>
<FilterField handleChange={value => this.setState({filter: value})} />
<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_playlists_view: val}); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_playlists_source: val}); this.props.uiActions.hideContextMenu() }} />
<FilterField
handleChange={value => this.setState({filter: value})}
/>
<DropdownField
icon="sort"
name="Sort"
value={this.props.sort}
options={sort_options}
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
/>
<DropdownField
icon="eye"
name="View"
value={this.props.view}
options={view_options}
handleChange={value => {this.props.uiActions.set({ library_playlists_view: value}); this.props.uiActions.hideContextMenu() }}
/>
<DropdownField
icon="database"
name="Source"
value={this.props.source}
options={source_options}
handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
/>
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New