ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Refactor table_item logic

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-26 20:20:17 +02:00
parent abac948dd1
commit b875a9817c
3 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/components/ascribe_table/table_item.js
View File

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import TableColumnMixin from '../../mixins/table_column_mixin';
import TableColumnContentModel from '../../models/table_column_content_model'; import TableColumnContentModel from '../../models/table_column_content_model';
import TableItemWrapper from './table_item_wrapper';
let TableItem = React.createClass({ let TableItem = React.createClass({
mixins: [TableColumnMixin],
propTypes: { propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
@ -16,27 +15,16 @@ let TableItem = React.createClass({
}, },
render() { render() {
let calcColumnElementContent = () => {
return this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let columnClass = this.calcColumnClasses(this.props.columnList, i, 12);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);
});
};
return ( return (
<div <div
className={this.props.classNames + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'} className={this.props.classNames + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
onClick={this.props.onClick}> onClick={this.props.onClick}>
<div className="row"> <div className="row">
{calcColumnElementContent()} <TableItemWrapper
columnList={this.props.columnList}
columnContent={this.props.columnContent}
columnWidth={12}>
</TableItemWrapper>
</div> </div>
</div> </div>
); );

26
js/components/ascribe_table/table_item_subtable.js
View File

@ -1,15 +1,13 @@
import React from 'react'; import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model'; import TableColumnContentModel from '../../models/table_column_content_model';
import TableColumnMixin from '../../mixins/table_column_mixin';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions'; import EditionListActions from '../../actions/edition_list_actions';
// ToDo: Create Table-specific Utils to not lock it to projects utilities
import GeneralUtils from '../../utils/general_utils';
import Table from './table'; import Table from './table';
import TableItemWrapper from './table_item_wrapper';
import TableItemText from './table_item_text'; import TableItemText from './table_item_text';
import TableItemAcl from './table_item_acl'; import TableItemAcl from './table_item_acl';
import TableItemSelectable from './table_item_selectable'; import TableItemSelectable from './table_item_selectable';
@ -17,7 +15,6 @@ import TableItemSubtableButton from './table_item_subtable_button';
let TableItemSubtable = React.createClass({ let TableItemSubtable = React.createClass({
mixins: [TableColumnMixin],
propTypes: { propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object columnContent: React.PropTypes.object
@ -61,22 +58,6 @@ let TableItemSubtable = React.createClass({
render() { render() {
let calcColumnElementContent = () => {
return this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let columnClass = this.calcColumnClasses(this.props.columnList, i, 12);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);
});
};
let renderEditionListTable = () => { let renderEditionListTable = () => {
let columnList = [ let columnList = [
@ -109,7 +90,10 @@ let TableItemSubtable = React.createClass({
return ( return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item"> <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
<div className="row"> <div className="row">
{calcColumnElementContent()} <TableItemWrapper
columnList={this.props.columnList}
columnContent={this.props.columnContent}
columnWidth={10}></TableItemWrapper>
<div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column"> <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column">
<TableItemSubtableButton content="Editions" onClick={this.loadEditionList}> <TableItemSubtableButton content="Editions" onClick={this.loadEditionList}>
</TableItemSubtableButton> </TableItemSubtableButton>

34
js/components/ascribe_table/table_item_wrapper.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model';
import TableColumnMixin from '../../mixins/table_column_mixin';
let TableItemWrapper = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object,
columnWidth: React.PropTypes.number.isRequired
},
render() {
return (
<div>
{this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);
})}
</div>
);
}
});
export default TableItemWrapper;