ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Add dynamical rowWidth functionailty to table

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-20 16:10:02 +02:00
parent 526b241fea
commit 37641650eb
5 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/components/piece_list.js
View File

@ -23,19 +23,21 @@ let PieceList = React.createClass({
// Specifiy how a TableItemX should look like
let columnMap = {
'thumbnail': {
'display_name': 'Thumbnail',
'display_type': TableItemImg
'displayName': 'Thumbnail',
'displayType': TableItemImg,
'rowWidth': 2
},
'artist_name': {
'display_name': 'Artist',
'display_type': TableItemText
'displayName': 'Artist',
'displayType': TableItemText,
'rowWidth': 3
},
'title': {
'display_name': 'Title',
'display_type': TableItemText
'displayName': 'Title',
'displayType': TableItemText,
'rowWidth': 6
}
};
return (
<AltContainer store={PieceListStore}>
<Table class="piecesTable" columnMap={columnMap} />

8
js/components/table_header.js
View File

@ -12,15 +12,17 @@ let TableHeader = React.createClass({
render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
let columnClasses = this.calcColumnClasses(this.props.columnMap);
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="row">
{columnMapValuesList.map((val, i) => {
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return (
<div className={columnClasses + ' ascribe-table-header-column'} key={i}>
{val.display_name}
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
{val.displayName}
</div>
);
})}

11
js/components/table_item.js
View File

@ -10,8 +10,9 @@ let TableItem = React.createClass({
// ToDo: Specify that every columnMap should look like this:
// {
// 'name-of-the-data-point': {
// 'display_name': String,
// 'display_type': ReactComponent
// 'displayName': String,
// 'displayType': ReactComponent,
// 'rowWidth': number
// }
//
// }
@ -22,7 +23,6 @@ let TableItem = React.createClass({
render() {
let columnContent = this.props.columnContent;
let columnClasses = this.calcColumnClasses(this.props.columnMap);
let columnMapKeysList = Object.keys(this.props.columnMap);
/**
@ -32,10 +32,11 @@ let TableItem = React.createClass({
let calcColumnElementContent = () => {
return columnMapKeysList.map((key, i) => {
let TypeElement = this.props.columnMap[key].display_type;
let TypeElement = this.props.columnMap[key].displayType;
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return (
<div className={columnClasses} key={i}>
<div className={columnClass} key={i}>
<TypeElement content={this.props.columnContent[key]} width="50" />
</div>
);

13
js/mixins/table_column_mixin.js
View File

@ -5,11 +5,18 @@ let TableColumnMixin = {
* Generates the bootstrap grid column declarations automatically using
* the columnMap.
*/
calcColumnClasses(obj) {
calcColumnClasses(obj, i) {
let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
let numOfColumns = GeneralUtils.valuesOfObject(obj).length;
return bootstrapClasses.join( numOfColumns + ' ') + numOfColumns;
let rowData = GeneralUtils.valuesOfObject(obj);
let listOfRowValues = rowData.map((val) => val.rowWidth );
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
if(numOfColumns > 12) {
throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
} else {
return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
}
}
};

9
js/utils/general_utils.js
View File

@ -25,6 +25,15 @@ let GeneralUtils = {
return Object
.keys(obj)
.map(key => obj[key]);
},
/**
* Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
*/
sumNumList(l) {
let sum = 0;
l.forEach((num) => sum += parseFloat(num) || 0);
return sum;
}
};