1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00

add real href to edition list

This commit is contained in:
Tim Daubenschütz 2015-06-04 16:07:37 +02:00
parent 6da18e9a85
commit 4fd5cdcdb5
3 changed files with 40 additions and 30 deletions

View File

@ -31,4 +31,15 @@ export class TransitionModel {
this.valueKey = valueKey; this.valueKey = valueKey;
this.callback = callback; this.callback = callback;
} }
toReactRouterLinkProps(queryValue) {
let props = {
to: this.to,
params: {}
};
props.params[this.queryKey] = queryValue;
return props;
}
} }

View File

@ -4,6 +4,8 @@ import Router from 'react-router';
import { ColumnModel } from './models/table_models'; import { ColumnModel } from './models/table_models';
import TableColumnMixin from '../../mixins/table_column_mixin'; import TableColumnMixin from '../../mixins/table_column_mixin';
let Link = Router.Link;
let TableItemWrapper = React.createClass({ let TableItemWrapper = React.createClass({
mixins: [TableColumnMixin, Router.Navigation], mixins: [TableColumnMixin, Router.Navigation],
propTypes: { propTypes: {
@ -12,23 +14,6 @@ let TableItemWrapper = React.createClass({
columnWidth: React.PropTypes.number.isRequired 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() { render() {
return ( return (
<div> <div>
@ -39,17 +24,35 @@ let TableItemWrapper = React.createClass({
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth); let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
let transition = this.transition.bind(this, column); //
return ( if(!column.transition) {
<div return (
className={columnClass + ' ascribe-table-item-column'} <div
key={i} className={columnClass + ' ascribe-table-item-column'}
onClick={transition}> key={i}>
<TypeElement {...typeElementProps} /> <TypeElement {...typeElementProps} />
</div> </div>
); );
} 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 (
<Link
className={columnClass + ' ascribe-table-item-column'}
key={i}
onClick={column.transition.callback}
{...linkProps}>
<TypeElement {...typeElementProps} />
</Link>
);
}
})} })}
</div> </div>
); );

View File

@ -73,10 +73,6 @@
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-size: .8em; font-size: .8em;
height:3em; height:3em;
&:not(:first-child) {
cursor: pointer;
}
} }
.ascribe-table-item-column > * { .ascribe-table-item-column > * {