ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +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({ let Table = React.createClass({
propTypes: { propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)) columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
changeOrder: React.PropTypes.func.isRequired
}, },
render() { render() {
if(this.props.itemList && this.props.itemList.length > 0) { if(this.props.itemList && this.props.itemList.length > 0) {
return ( return (
<div className="ascribe-table"> <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) => { {this.props.itemList.map((item, i) => {
return ( return (
<TableItem columnList={this.props.columnList} columnContent={item} key={i} /> <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: { propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)), columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
itemList: React.PropTypes.array.isRequired, itemList: React.PropTypes.array.isRequired,
fetchList: React.PropTypes.func.isRequired, changeOrder: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired, orderAsc: React.PropTypes.bool.isRequired,
orderBy: React.PropTypes.string.isRequired orderBy: React.PropTypes.string.isRequired
}, },
@ -36,7 +36,7 @@ let TableHeader = React.createClass({
canBeOrdered={canBeOrdered} canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy} orderBy={this.props.orderBy}
fetchList={this.props.fetchList}> changeOrder={this.props.changeOrder}>
</TableHeaderItem> </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, displayName: React.PropTypes.string.isRequired,
columnName: React.PropTypes.string.isRequired, columnName: React.PropTypes.string.isRequired,
canBeOrdered: React.PropTypes.bool.isRequired, canBeOrdered: React.PropTypes.bool.isRequired,
changeOrder: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired, orderAsc: React.PropTypes.bool.isRequired,
orderBy: React.PropTypes.string.isRequired, orderBy: React.PropTypes.string.isRequired
fetchList: React.PropTypes.func.isRequired
}, },
changeOrder() { changeOrder() {
this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc); this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
}, },
render() { render() {

10
js/components/piece_list.js
View File

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