diff --git a/js/components/ascribe_table/models/table_models.js b/js/components/ascribe_table/models/table_models.js index 8bf57358..245a2310 100644 --- a/js/components/ascribe_table/models/table_models.js +++ b/js/components/ascribe_table/models/table_models.js @@ -31,4 +31,15 @@ export class TransitionModel { this.valueKey = valueKey; this.callback = callback; } + + toReactRouterLinkProps(queryValue) { + let props = { + to: this.to, + params: {} + }; + + props.params[this.queryKey] = queryValue; + + return props; + } } \ No newline at end of file diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index 33e72c67..7f503c88 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/js/components/ascribe_table/table_item_wrapper.js @@ -4,6 +4,8 @@ import Router from 'react-router'; import { ColumnModel } from './models/table_models'; import TableColumnMixin from '../../mixins/table_column_mixin'; +let Link = Router.Link; + let TableItemWrapper = React.createClass({ mixins: [TableColumnMixin, Router.Navigation], propTypes: { @@ -12,23 +14,6 @@ let TableItemWrapper = React.createClass({ columnWidth: React.PropTypes.number.isRequired }, - /** - * If a transition is defined in columnContent, then we can use - * Router.Navigation.transitionTo to redirect the user - * programmatically - */ - transition(column) { - if(column.transition) { - let params = {}; - params[column.transition.queryKey] = this.props.columnContent[column.transition.valueKey]; - this.transitionTo(column.transition.to, params); - - if(column.transition.callback) { - column.transition.callback(); - } - } - }, - render() { return (
@@ -39,17 +24,35 @@ let TableItemWrapper = React.createClass({ let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth); - let transition = this.transition.bind(this, column); + // + - return ( -
- -
- ); + if(!column.transition) { + return ( +
+ +
+ ); + } else { + let linkProps = column.transition.toReactRouterLinkProps(this.props.columnContent[column.transition.valueKey]); + /** + * If a transition is defined in columnContent, then we can use + * Router.Navigation.transitionTo to redirect the user + * programmatically + */ + return ( + + + + ); + } })}
); diff --git a/sass/main.scss b/sass/main.scss index cc7ae4e3..2fe60cac 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -73,10 +73,6 @@ font-family: 'Source Sans Pro'; font-size: .8em; height:3em; - - &:not(:first-child) { - cursor: pointer; - } } .ascribe-table-item-column > * {