Skip to content

Commit

Permalink
feat(UIView): resolves are now injected as root props
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Previously `resolve`s were accessible as properties of a `resolves` props injected in the routed component. They are now each injected as a prop. This way components don't need to be aware of the router and can be more reusable.

before:
```jsx
render () {
  const { foo } = this.props.resolves;
  return <div>{foo}</div>;
}
```

after:
```jsx
render () {
  const { foo } = this.props;
  return <div>{foo}</div>
}
```
  • Loading branch information
elboman committed Dec 16, 2017
1 parent 0c5a755 commit ff67239
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 6 deletions.
8 changes: 6 additions & 2 deletions examples/typescript/components/Nest.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import * as React from 'react';
import { UIViewInjectedProps } from '@uirouter/react';

export class Nest extends React.Component<UIViewInjectedProps, any> {
interface NextInjectedProps extends UIViewInjectedProps {
foo: string;
}

export class Nest extends React.Component<NextInjectedProps, any> {
uiCanExit = () => {
return new Promise(resolve => {
setTimeout(() => {
Expand All @@ -11,7 +15,7 @@ export class Nest extends React.Component<UIViewInjectedProps, any> {
};

render() {
const { foo } = this.props.resolves;
const { foo } = this.props;
return (
<div>
<h2>Nested</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/components/UIView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export class UIView extends Component<UIViewProps, UIViewState> {
}

this.uiViewData.config = newConfig;
let props = { resolves, transition: trans };
let props = { ...resolves, transition: trans };

// attach any style or className to the rendered component
// specified on the UIView itself
Expand Down
10 changes: 7 additions & 3 deletions src/components/__tests__/UIView.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,19 @@ describe('<UIView>', () => {

it('injects the right props', () => {
const Comp = () => <span>component</span>;
router.stateRegistry.register({ name: '__state', component: Comp });
router.stateRegistry.register({
name: '__state',
component: Comp,
resolve: [{ resolveFn: () => true, token: 'myresolve' }],
});
const wrapper = mount(
<UIRouter router={router}>
<UIView />
</UIRouter>,
);
return router.stateService.go('__state').then(() => {
wrapper.update();
expect(wrapper.find(Comp).props().resolves).not.toBeUndefined();
expect(wrapper.find(Comp).props().myresolve).not.toBeUndefined();
expect(wrapper.find(Comp).props().transition).not.toBeUndefined();
});
});
Expand All @@ -148,7 +152,7 @@ describe('<UIView>', () => {
);
return router.stateService.go('__state').then(() => {
wrapper.update();
expect(wrapper.find(Comp).props().resolves.foo).toBe('bar');
expect(wrapper.find(Comp).props().foo).toBe('bar');
});
});

Expand Down

0 comments on commit ff67239

Please sign in to comment.