ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

Refactor: Finally found pattern for making components truly generic

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-22 13:58:09 +02:00
parent 654d9b93c3
commit 486f058cb8
4 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/components/ascribe_table/table.js
View File

@ -8,14 +8,15 @@ import TableColumnModel from '../../models/table_column_model';
let Table = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel))
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
changeOrder: React.PropTypes.func.isRequired
},
render() {
if(this.props.itemList && this.props.itemList.length > 0) {
return (
<div className="ascribe-table">
<TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
<TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} changeOrder={this.props.changeOrder} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
{this.props.itemList.map((item, i) => {
return (
<TableItem columnList={this.props.columnList} columnContent={item} key={i} />

4
js/components/ascribe_table/table_header.js
View File

@ -12,7 +12,7 @@ let TableHeader = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
itemList: React.PropTypes.array.isRequired,
fetchList: React.PropTypes.func.isRequired,
changeOrder: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired,
orderBy: React.PropTypes.string.isRequired
},
@ -36,7 +36,7 @@ let TableHeader = React.createClass({
canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy}
fetchList={this.props.fetchList}>
changeOrder={this.props.changeOrder}>
</TableHeaderItem>
);
})}

6
js/components/ascribe_table/table_header_item.js
View File

@ -9,13 +9,13 @@ let TableHeaderItem = React.createClass({
displayName: React.PropTypes.string.isRequired,
columnName: React.PropTypes.string.isRequired,
canBeOrdered: React.PropTypes.bool.isRequired,
changeOrder: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired,
orderBy: React.PropTypes.string.isRequired,
fetchList: React.PropTypes.func.isRequired
orderBy: React.PropTypes.string.isRequired
},
changeOrder() {
this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc);
this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
},
render() {

10
js/components/piece_list.js
View File

@ -26,8 +26,11 @@ let PieceList = React.createClass({
},
paginationGoToPage(page) {
return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc);
return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
},
tableChangeOrder(orderBy, orderAsc) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, orderBy, orderAsc);
},
render() {
@ -46,7 +49,6 @@ let PieceList = React.createClass({
return {
'itemList': props.pieceList,
'itemListCount': props.pieceListCount,
'fetchList': props.fetchPieceList,
'orderBy': props.orderBy,
'orderAsc': props.orderAsc,
'search': props.search,
@ -54,7 +56,7 @@ let PieceList = React.createClass({
'pageSize': props.pageSize
}
}}>
<Table columnList={columnList} />
<Table columnList={columnList} changeOrder={this.tableChangeOrder} />
<Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
</AltContainer>
);