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 dynamically addable components to table component

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-20 15:44:15 +02:00
parent f4700e9842
commit 526b241fea
8 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css
View File

@ -0,0 +1,3 @@
.ascribe-table-header-column {
font-weight: bold;
}

1
index.html
View File

@ -6,6 +6,7 @@
<title>ascribe</title> <title>ascribe</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/main.css"></link>
</head> </head>
<body> <body>
<div id="main" class="container"></div> <div id="main" class="container"></div>

4
js/components/piece_list.js
View File

@ -19,9 +19,11 @@ let PieceList = React.createClass({
render() { render() {
// TODO:
// Specifiy how a TableItemX should look like
let columnMap = { let columnMap = {
'thumbnail': { 'thumbnail': {
'display_name': 'thumbnail', 'display_name': 'Thumbnail',
'display_type': TableItemImg 'display_type': TableItemImg
}, },
'artist_name': { 'artist_name': {

2
js/components/table.js
View File

@ -13,7 +13,7 @@ let Table = React.createClass({
return ( return (
<div> <div>
<TableHeader className="ascribe-table-header" columnMap={this.props.columnMap}/> <TableHeader columnMap={this.props.columnMap}/>
{this.props.itemList.map((item, i) => { {this.props.itemList.map((item, i) => {
return ( return (
<TableItem columnMap={this.props.columnMap} columnContent={item} key={i} /> <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />

2
js/components/table_header.js
View File

@ -19,7 +19,7 @@ let TableHeader = React.createClass({
<div className="row"> <div className="row">
{columnMapValuesList.map((val, i) => { {columnMapValuesList.map((val, i) => {
return ( return (
<div className={columnClasses} key={i}> <div className={columnClasses + ' ascribe-table-header-column'} key={i}>
{val.display_name} {val.display_name}
</div> </div>
); );

34
js/components/table_item.js
View File

@ -6,6 +6,15 @@ import TableItemText from './table_item_text';
let TableItem = React.createClass({ let TableItem = React.createClass({
mixins: [TableColumnMixin], mixins: [TableColumnMixin],
// ToDo: Specify that every columnMap should look like this:
// {
// 'name-of-the-data-point': {
// 'display_name': String,
// 'display_type': ReactComponent
// }
//
// }
propTypes: { propTypes: {
columnMap: React.PropTypes.object.isRequired, columnMap: React.PropTypes.object.isRequired,
columnContent: React.PropTypes.object.isRequired columnContent: React.PropTypes.object.isRequired
@ -18,24 +27,19 @@ let TableItem = React.createClass({
/** /**
* An element in the Table can have a certain display_type. * An element in the Table can have a certain display_type.
* For example it can be an Image or a text, or a button. * A display_type is just
* This method is recognizing different types and injecting them into the DOM.
*/ */
let calcColumnElementContent = () => { let calcColumnElementContent = () => {
return columnMapKeysList.map((key, i) => { return columnMapKeysList.map((key, i) => {
if(this.props.columnMap[key].display_type === TableItemImg) {
return ( let TypeElement = this.props.columnMap[key].display_type;
<div className={columnClasses}>
<TableItemImg src={this.props.columnContent[key]} width="50" key={i} /> return (
</div> <div className={columnClasses} key={i}>
); <TypeElement content={this.props.columnContent[key]} width="50" />
} else if(this.props.columnMap[key].display_type === TableItemText) { </div>
return ( );
<div className={columnClasses}>
<TableItemText text={this.props.columnContent[key]} key={i} />
</div>
);
}
}); });
}; };

6
js/components/table_item_img.js
View File

@ -5,14 +5,12 @@ import React from 'react';
*/ */
let TableItemImg = React.createClass({ let TableItemImg = React.createClass({
propTypes: { propTypes: {
src: React.PropTypes.string.isRequired, content: React.PropTypes.string.isRequired,
width: React.PropTypes.number,
height: React.PropTypes.number
}, },
render() { render() {
return ( return (
<img src={this.props.src} width={this.props.width} height={this.props.height} /> <img src={this.props.content} width="50" />
); );
} }
}); });

4
js/components/table_item_text.js
View File

@ -2,13 +2,13 @@ import React from 'react';
let TableItemText = React.createClass({ let TableItemText = React.createClass({
propTypes: { propTypes: {
text: React.PropTypes.string.isRequired content: React.PropTypes.string.isRequired
}, },
render() { render() {
return ( return (
<span> <span>
{this.props.text} {this.props.content}
</span> </span>
); );
} }