Merge pull request #3457 from ethcore/ng-save-sorting

Save sort order in LocalStorage
This commit is contained in:
Gav Wood 2016-11-16 11:19:19 +08:00 committed by GitHub
commit 130fd3f9c1
5 changed files with 88 additions and 18 deletions

View File

@ -15,6 +15,8 @@
// 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';
@ -22,11 +24,15 @@ 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
@ -37,8 +43,10 @@ export default class ActionbarSort extends Component {
showDefault: true
}
state = {
menuOpen: false
store = new SortStore(this.props);
componentDidMount () {
this.store.restoreSavedOrder();
}
render () {
@ -51,12 +59,12 @@ export default class ActionbarSort extends Component {
className={ styles.sortButton }
label=''
icon={ <SortIcon /> }
onClick={ this.handleMenuOpen }
onClick={ this.store.handleMenuOpen }
/>
}
open={ this.state.menuOpen }
onRequestChange={ this.handleMenuChange }
onItemTouchTap={ this.handleSortChange }
open={ this.store.menuOpen }
onRequestChange={ this.store.handleMenuChange }
onItemTouchTap={ this.store.handleSortChange }
targetOrigin={ { horizontal: 'right', vertical: 'top' } }
anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
touchTapCloseDelay={ 0 }
@ -109,16 +117,4 @@ export default class ActionbarSort extends Component {
);
}
handleSortChange = (event, child) => {
const order = child.props.value;
this.props.onChange(order);
}
handleMenuOpen = () => {
this.setState({ menuOpen: true });
}
handleMenuChange = (open) => {
this.setState({ menuOpen: open });
}
}

View File

@ -0,0 +1,71 @@
// 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 { action, observable } from 'mobx';
import store from 'store';
const LS_STORE_KEY = '_parity::sortStore';
export default class SortStore {
@observable menuOpen = false;
constructor (props) {
const { id, onChange } = props;
this.onChange = onChange;
this.id = id;
}
@action handleMenuOpen = () => {
this.menuOpen = true;
}
@action handleMenuChange = (open) => {
this.menuOpen = open;
}
@action handleSortChange = (event, child) => {
const order = child.props.value;
this.onChange(order);
this.saveOrder(order);
}
@action restoreSavedOrder = () => {
const order = this.getSavedOrder();
this.onChange(order);
}
getSavedOrder = () => {
return (this.getSavedOrders())[this.id];
}
getSavedOrders = () => {
return store.get(LS_STORE_KEY) || {};
}
setSavedOrders = (orders) => {
store.set(LS_STORE_KEY, orders);
}
saveOrder = (order) => {
const orders = {
...this.getSavedOrders(),
[ this.id ]: order
};
this.setSavedOrders(orders);
}
}

View File

@ -90,6 +90,7 @@ class Accounts extends Component {
return (
<ActionbarSort
key='sortAccounts'
id='sortAccounts'
order={ this.state.sortOrder }
onChange={ onChange } />
);

View File

@ -75,6 +75,7 @@ class Addresses extends Component {
return (
<ActionbarSort
key='sortAccounts'
id='sortAddresses'
order={ this.state.sortOrder }
onChange={ onChange } />
);

View File

@ -82,6 +82,7 @@ class Contracts extends Component {
return (
<ActionbarSort
key='sortAccounts'
id='sortContracts'
order={ this.state.sortOrder }
metas={ [
{ key: 'timestamp', label: 'date' }