ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

add checkbox select functionality

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-01 14:10:11 +02:00
parent f653564b51
commit 7c4d4afbd4
7 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import Table from '../ascribe_table/table';
import TableItemSelectable from '../ascribe_table/table_item_selectable';
import TableItem from '../ascribe_table/table_item';
import TableColumnContentModel from '../../models/table_column_content_model';
@ -37,10 +37,10 @@ let AccordionListItemTable = React.createClass({
itemList={this.props.itemList}>
{this.props.itemList.map((item, i) => {
return (
<TableItemSelectable
<TableItem
className="ascribe-table-item-selectable"
key={i}>
</TableItemSelectable>
</TableItem>
);
})}
</Table>

13
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -9,6 +9,7 @@ import TableColumnContentModel from '../../models/table_column_content_model';
import TableItemImg from '../ascribe_table/table_item_img';
import TableItemText from '../ascribe_table/table_item_text';
import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
let AccordionListItemTableEditions = React.createClass({
@ -39,12 +40,16 @@ let AccordionListItemTableEditions = React.createClass({
EditionListActions.fetchEditionList(this.props.parentId);
},
render() {
selectItem(pieceId, editionId) {
EditionListActions.selectEdition({pieceId, editionId});
},
render() {
let columnList = [
new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false)
new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 5, false)
];
return (

23
js/components/ascribe_table/table_item_checkbox.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
let TableItemCheckbox = React.createClass({
propTypes: {
editionId: React.PropTypes.number,
pieceId: React.PropTypes.number,
selectItem: React.PropTypes.func,
selected: React.PropTypes.bool
},
selectItem() {
this.props.selectItem(this.props.pieceId, this.props.editionId);
},
render() {
return (
<input type="checkbox" onChange={this.selectItem} checked={this.props.selected}/>
);
}
});
export default TableItemCheckbox;

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

@ -24,24 +24,14 @@ let TableItemSelectable = React.createClass({
'ascribe-table-item-selected': this.props.columnContent.selected
});
if(this.props.onClick) {
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}
onClick={this.selectItem}>
</TableItem>
);
} else {
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}>
</TableItem>
);
}
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}
onClick={this.selectItem}>
</TableItem>
);
}
});

4
js/components/ascribe_table/table_item_wrapper.js
View File

@ -17,11 +17,13 @@ let TableItemWrapper = React.createClass({
{this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let typeElementProps = column.transformFn(this.props.columnContent);
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" />
<TypeElement {...typeElementProps} />
</div>
);

3
js/models/table_column_content_model.js
View File

@ -1,6 +1,7 @@
class TableColumnContentModel {
// ToDo: Add validation for all passed-in parameters
constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
this.transformFn = transformFn;
this.columnName = columnName;
this.displayName = displayName;
this.displayType = displayType;

4
js/stores/edition_list_store.js
View File

@ -21,9 +21,8 @@ class EditionListStore {
}
onSelectEdition({pieceId, editionId}) {
this.editionList[pieceId].forEach((edition) => {
if(edition.edition_number === editionId) {
if(edition.id === editionId) {
if(edition.selected) {
edition.selected = false;
} else {
@ -31,7 +30,6 @@ class EditionListStore {
}
}
});
}
};