1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-24 10:26:09 +01:00
onion/js/components/table_header.js

87 lines
2.5 KiB
JavaScript
Raw Normal View History

2015-05-20 14:48:57 +02:00
import React from 'react';
import TableColumnMixin from '../mixins/table_column_mixin';
import GeneralUtils from '../utils/general_utils';
2015-05-20 16:44:45 +02:00
2015-05-20 14:48:57 +02:00
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
2015-05-20 19:19:57 +02:00
columnMap: React.PropTypes.object.isRequired,
itemList: React.PropTypes.array.isRequired,
2015-05-21 12:12:25 +02:00
fetchList: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired
2015-05-20 19:19:57 +02:00
},
sortIndex(i) {
2015-05-21 12:12:25 +02:00
let orderAsc;
if(this.props.orderAsc) {
orderAsc = false;
} else {
orderAsc = true;
}
this.props.fetchList(1, 10, null, Object.keys(this.props.columnMap)[i], orderAsc);
2015-05-20 14:48:57 +02:00
},
render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
2015-05-20 19:19:57 +02:00
let calcHeaderText = (val, i, columnClass) => {
let s = "";
if(columnMapValuesList[i].canBeOrdered) {
2015-05-21 12:12:25 +02:00
let boundClick = this.sortIndex.bind(this, i);
let carretDirection = 'glyphicon-triangle-';
if(this.props.orderAsc) {
carretDirection += 'top';
} else {
carretDirection += 'bottom';
}
2015-05-20 19:19:57 +02:00
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
<span>
{val.displayName}
2015-05-21 12:12:25 +02:00
<span className={'glyphicon ' + carretDirection}></span>
2015-05-20 19:19:57 +02:00
</span>
</div>
);
} else {
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
<span>
{val.displayName}
</span>
</div>
);
}
};
2015-05-20 14:48:57 +02:00
return (
2015-05-20 17:32:06 +02:00
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
2015-05-20 14:48:57 +02:00
<div className="row">
{columnMapValuesList.map((val, i) => {
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
2015-05-20 14:48:57 +02:00
return (
2015-05-20 19:19:57 +02:00
<div key={i}>
{calcHeaderText(val, i, columnClass)}
2015-05-20 14:48:57 +02:00
</div>
);
})}
</div>
</div>
);
}
});
2015-05-20 16:44:45 +02:00
export default TableHeader;