121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
|
// This file is part of Parity.
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
|
|
import IconMenu from 'material-ui/IconMenu';
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
|
|
import SortIcon from 'material-ui/svg-icons/content/sort';
|
|
|
|
import { Button } from '../../';
|
|
|
|
import SortStore from './sortStore';
|
|
import styles from './sort.css';
|
|
|
|
@observer
|
|
export default class ActionbarSort extends Component {
|
|
static propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
|
|
order: PropTypes.string,
|
|
showDefault: PropTypes.bool,
|
|
metas: PropTypes.array
|
|
};
|
|
|
|
static defaultProps = {
|
|
metas: [],
|
|
showDefault: true
|
|
}
|
|
|
|
store = new SortStore(this.props);
|
|
|
|
componentDidMount () {
|
|
this.store.restoreSavedOrder();
|
|
}
|
|
|
|
render () {
|
|
const { showDefault } = this.props;
|
|
|
|
return (
|
|
<IconMenu
|
|
iconButtonElement={
|
|
<Button
|
|
className={ styles.sortButton }
|
|
label=''
|
|
icon={ <SortIcon /> }
|
|
onClick={ this.store.handleMenuOpen }
|
|
/>
|
|
}
|
|
open={ this.store.menuOpen }
|
|
onRequestChange={ this.store.handleMenuChange }
|
|
onItemTouchTap={ this.store.handleSortChange }
|
|
targetOrigin={ { horizontal: 'right', vertical: 'top' } }
|
|
anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
|
|
touchTapCloseDelay={ 0 }
|
|
>
|
|
{
|
|
showDefault
|
|
? this.renderMenuItem('', 'Default')
|
|
: null
|
|
}
|
|
{ this.renderMenuItem('tags', 'Sort by tags') }
|
|
{ this.renderMenuItem('name', 'Sort by name') }
|
|
{ this.renderMenuItem('eth', 'Sort by ETH') }
|
|
|
|
{ this.renderSortByMetas() }
|
|
</IconMenu>
|
|
);
|
|
}
|
|
|
|
renderSortByMetas () {
|
|
const { metas } = this.props;
|
|
|
|
return metas
|
|
.map((meta, index) => {
|
|
return this
|
|
.renderMenuItem(meta.key, `Sort by ${meta.label}`, index);
|
|
});
|
|
}
|
|
|
|
renderMenuItem (value, label, key = null) {
|
|
const { order } = this.props;
|
|
|
|
const props = {};
|
|
|
|
if (key !== null) {
|
|
props.key = key;
|
|
}
|
|
|
|
const checked = order === value;
|
|
|
|
return (
|
|
<MenuItem
|
|
checked={ checked }
|
|
value={ value }
|
|
primaryText={ label }
|
|
innerDivStyle={ {
|
|
paddingLeft: checked ? 50 : 16
|
|
} }
|
|
{ ...props }
|
|
/>
|
|
);
|
|
}
|
|
|
|
}
|