From 302f05b68eb29a5beec50bd97bed8104135b1407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 11:41:56 +0200 Subject: [PATCH] add link functionality --- .../accordion_list_item.js | 3 +++ .../accordion_list_item_table_editions.js | 12 +++++++--- .../ascribe_media/resource_viewer.js | 2 +- .../ascribe_table/table_item_wrapper.js | 24 +++++++++++++++++-- js/models/table_column_content_model.js | 3 ++- 5 files changed, 37 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index e9bb8742..c52f7e55 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -1,9 +1,12 @@ import React from 'react'; +import Router from 'react-router'; import AccordionListItemTable from './accordion_list_item_table'; import { getLangText } from '../../utils/lang_utils'; +let Link = Router.Link; + let AccordionListItem = React.createClass({ propTypes: { className: React.PropTypes.string, diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 97bc7659..70391e2d 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -1,4 +1,5 @@ import React from 'react'; +import Router from 'react-router'; import EditionListStore from '../../stores/edition_list_store'; import EditionListActions from '../../actions/edition_list_actions'; @@ -18,6 +19,8 @@ import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered'; import { getLangText } from '../../utils/lang_utils'; +let Link = Router.Link; + let AccordionListItemTableEditions = React.createClass({ propTypes: { @@ -108,7 +111,8 @@ let AccordionListItemTableEditions = React.createClass({ '#', TableItemText, 1, - true + true, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ), new TableColumnContentModel( (item) => { @@ -119,7 +123,8 @@ let AccordionListItemTableEditions = React.createClass({ getLangText('Bitcoin Address'), TableItemText, 5, - true + true, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ), new TableColumnContentModel( (item) => { @@ -130,7 +135,8 @@ let AccordionListItemTableEditions = React.createClass({ getLangText('Actions'), TableItemAclFiltered, 4, - false + false, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ) ]; diff --git a/js/components/ascribe_media/resource_viewer.js b/js/components/ascribe_media/resource_viewer.js index 4519bcb7..519b6cec 100644 --- a/js/components/ascribe_media/resource_viewer.js +++ b/js/components/ascribe_media/resource_viewer.js @@ -25,7 +25,7 @@ let ResourceViewer = React.createClass({ mixins: [InjectInHeadMixin], componentDidMount() { - this.inject('http://antani.com'); + //this.inject('http://antani.com'); }, render() { diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index c6251c4b..a6ffa36b 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/js/components/ascribe_table/table_item_wrapper.js @@ -1,16 +1,31 @@ import React from 'react'; +import Router from 'react-router'; import TableColumnContentModel from '../../models/table_column_content_model'; import TableColumnMixin from '../../mixins/table_column_mixin'; let TableItemWrapper = React.createClass({ - mixins: [TableColumnMixin], + mixins: [TableColumnMixin, Router.Navigation], propTypes: { columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), columnContent: React.PropTypes.object, columnWidth: React.PropTypes.number.isRequired }, + /** + * If a link is defined in columnContent, then we can use + * Router.Navigation.transitionTo to redirect the user + * programmatically + */ + transition(column) { + if(column.link) { + let params = {}; + params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey]; + + this.transitionTo(column.link.to, params); + } + }, + render() { return (
@@ -21,8 +36,13 @@ let TableItemWrapper = React.createClass({ let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth); + let transition = this.transition.bind(this, column); + return ( -
+
); diff --git a/js/models/table_column_content_model.js b/js/models/table_column_content_model.js index 5e93cce4..ecaa0748 100644 --- a/js/models/table_column_content_model.js +++ b/js/models/table_column_content_model.js @@ -1,12 +1,13 @@ class TableColumnContentModel { // ToDo: Add validation for all passed-in parameters - constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) { + constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, link) { this.transformFn = transformFn; this.columnName = columnName; this.displayName = displayName; this.displayType = displayType; this.rowWidth = rowWidth; this.canBeOrdered = canBeOrdered; + this.link = link; } }