Skip to content

Commit a59aa6a

Browse files
author
nadavl
committed
Redux infrastructure
1 parent 9a86798 commit a59aa6a

File tree

8 files changed

+704
-332
lines changed

8 files changed

+704
-332
lines changed

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
},
2424
"homepage": "http://mobxjs.github.com/mobx",
2525
"devDependencies": {
26+
"redux-devtools": "^3.2.0",
2627
"ts-loader": "^0.8.1",
2728
"typescript": "^1.8.2",
2829
"webpack": "^1.9.6",
@@ -34,6 +35,8 @@
3435
"mobx-react": "^3.0.1",
3536
"mobx-react-devtools": "^4.0.2",
3637
"react": "^0.14.0",
37-
"react-dom": "^0.14.0"
38+
"react-dom": "^0.14.0",
39+
"react-redux": "^4.4.1",
40+
"redux": "^3.3.1"
3841
}
3942
}

‎src/app/action_types.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const ActionTypes = {
2+
PAN_START: 'PAN_START',
3+
PAN_STOP: 'PAN_START',
4+
PAN: 'PAN',
5+
RESET_ZOOM: 'RESET_ZOOM',
6+
SET_ZOOM_LEVEL: 'SET_ZOOM_LEVEL'
7+
};
8+
9+
export default ActionTypes;

‎src/app/pan.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import * as React from 'react';
22

33
export default class Pan extends React.Component<{}, {}> {
4+
5+
constructor (props) {
6+
super(props);
7+
}
8+
49
render () {
510
return (
611
<div className="cy-panzoom-panner">

‎src/app/slider.tsx

+94-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,107 @@
11
import * as React from 'react';
2+
import {connect} from 'react-redux';
3+
import ActionTypes from './action_types';
4+
5+
class HostAPI {
6+
pan: Function;
7+
resetZoom: Function = () => {
8+
console.log(`HostAPI reset zoom`);
9+
};
10+
zoom: Function = (zoomLevel) => {
11+
console.log(`HostAPI zooming to ${zoomLevel}`);
12+
};
13+
}
14+
15+
const hostAPI = new HostAPI();
16+
17+
const Actions = {
18+
resetZoom: () => {
19+
console.log('reset zoom action');
20+
hostAPI.resetZoom();
21+
22+
return {
23+
type: ActionTypes.RESET_ZOOM
24+
}
25+
},
26+
zoom: (direction: 'in' | 'out', currentZoom: number) => {
27+
console.log(`zoom ${direction} action. currentZoom: ${currentZoom}`);
28+
const zoomLevel = direction === 'in' ? currentZoom * 1.1 : currentZoom * 0.9;
29+
hostAPI.zoom(zoomLevel);
30+
31+
return {
32+
type: ActionTypes.SET_ZOOM_LEVEL,
33+
zoomLevel
34+
}
35+
}
36+
};
37+
38+
const mapStateToProps = (state) => {
39+
console.log('stateToProps: ', state);
40+
return {
41+
zoomLevel: state.zoomLevel
42+
}
43+
};
44+
45+
const mapDispatchToProps = (dispatch) => {
46+
console.log('dispatchToProps: ', dispatch);
47+
return {
48+
resetZoom: () => {
49+
dispatch(Actions.resetZoom());
50+
},
51+
zoomIn: (zoomLevel) => {
52+
dispatch(Actions.zoom('in', zoomLevel));
53+
},
54+
zoomOut: (zoomLevel) => {
55+
dispatch(Actions.zoom('out', zoomLevel));
56+
}
57+
}
58+
};
59+
60+
interface SliderProps extends React.Props<any> {
61+
resetZoom: Function;
62+
zoomIn: Function;
63+
zoomOut: Function;
64+
zoomLevel: number;
65+
}
66+
67+
// @connect<any, any, any>(
68+
// mapStateToProps,
69+
// mapDispatchToProps
70+
// )
71+
class SliderComp extends React.Component<SliderProps, {}> {
72+
73+
constructor (props) {
74+
super(props);
75+
}
276

3-
export default class Slider extends React.Component<{}, {}> {
477
render () {
78+
579
return (
680
<div>
7-
<div className="cy-panzoom-reset cy-panzoom-zoom-button"><span className="icon fa fa-expand"/></div>
8-
<div className="cy-panzoom-zoom-in cy-panzoom-zoom-button"><span className="icon fa fa-plus"/></div>
9-
<div className="cy-panzoom-zoom-out cy-panzoom-zoom-button"><span className="icon fa fa-minus"/></div>
81+
<div className="cy-panzoom-reset cy-panzoom-zoom-button" onClick={this.props.resetZoom}>
82+
<span className="icon fa fa-expand"/>
83+
</div>
84+
<div className="cy-panzoom-zoom-in cy-panzoom-zoom-button" onClick={() => this.props.zoomIn(this.props.zoomLevel)}>
85+
<span className="icon fa fa-plus"/>
86+
</div>
87+
<div className="cy-panzoom-zoom-out cy-panzoom-zoom-button" onClick={() => this.props.zoomOut(this.props.zoomLevel)}>
88+
<span className="icon fa fa-minus"/>
89+
</div>
1090
<div className="cy-panzoom-slider">
1191
<div className="cy-panzoom-slider-background"/>
12-
<div className="cy-panzoom-slider-handle" style={{top: '32.2203px'}}><span className="icon fa fa-minus"/>
92+
<div className="cy-panzoom-slider-handle" style={{top: '32.2203px'}}>
93+
<span className="icon fa fa-minus"/>
1394
</div>
1495
<div className="cy-panzoom-no-zoom-tick" style={{top: 43}}/>
1596
</div>
1697
</div>
1798
)
1899
}
19-
}
100+
}
101+
102+
const Slider = connect <any, any, any>( //TODO: use specific types
103+
mapStateToProps,
104+
mapDispatchToProps
105+
)(SliderComp);
106+
107+
export default Slider;

‎src/app/toolbar.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import Pan from './pan';
33
import Slider from './slider';
44

55
export default class Toolbar extends React.Component<{}, {}> {
6+
7+
constructor (props) {
8+
super(props);
9+
}
10+
611
render () {
712
return (
813
<div className="cy-panzoom" style={{position: 'absolute'}}>
914
<Pan/>
10-
<Slider/>
15+
<Slider />
1116
</div>
1217
);
1318
}

‎src/index.tsx

+39-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,43 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33
import Toolbar from './app/toolbar';
4+
import {createStore, combineReducers} from 'redux';
5+
import {Provider} from 'react-redux';
6+
import ActionTypes from './app/action_types';
47

5-
ReactDOM.render(<Toolbar />, document.getElementById('root'));
8+
const Reducers = {
9+
zoomLevel: (state = 1, action) => {
10+
console.log(`reducers zoom level`);
11+
switch (action.type) {
12+
case ActionTypes.SET_ZOOM_LEVEL:
13+
return action.zoomLevel || 1;
14+
case ActionTypes.RESET_ZOOM:
15+
return 1;
16+
default:
17+
return state;
18+
}
19+
},
20+
21+
panPosition: (state = { x: 0, y: 0 }, action) => {
22+
switch (action.type) {
23+
case ActionTypes.PAN:
24+
return action.panPosition;
25+
case ActionTypes.PAN_START:
26+
case ActionTypes.PAN_STOP:
27+
default:
28+
return state;
29+
}
30+
}
31+
};
32+
33+
const panZoom = combineReducers({
34+
zoomLevel: Reducers.zoomLevel,
35+
panPosition: Reducers.panPosition
36+
});
37+
38+
ReactDOM.render(
39+
<Provider store={createStore(panZoom)}>
40+
<Toolbar />
41+
</Provider>,
42+
document.getElementById('root')
43+
);

‎typings/react/react-dom.d.ts

+26-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Type definitions for React v0.14 (react-dom)
22
// Project: http://facebook.github.io/react/
33
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
4-
// Definitions: https://github.com/borisyankov/DefinitelyTyped
4+
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
55

66
/// <reference path="react.d.ts" />
77

@@ -10,18 +10,22 @@ declare namespace __React {
1010
function findDOMNode<E extends Element>(instance: ReactInstance): E;
1111
function findDOMNode(instance: ReactInstance): Element;
1212

13+
function render<P extends DOMAttributes, T extends Element>(
14+
element: DOMElement<P, T>,
15+
container: Element,
16+
callback?: (element: T) => any): T;
1317
function render<P>(
14-
element: DOMElement<P>,
18+
element: SFCElement<P>,
1519
container: Element,
16-
callback?: (element: Element) => any): Element;
17-
function render<P, S>(
18-
element: ClassicElement<P>,
20+
callback?: () => any): void;
21+
function render<P, T extends Component<P, {}>>(
22+
element: CElement<P, T>,
1923
container: Element,
20-
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
21-
function render<P, S>(
24+
callback?: (component: T) => any): T;
25+
function render<P>(
2226
element: ReactElement<P>,
2327
container: Element,
24-
callback?: (component: Component<P, S>) => any): Component<P, S>;
28+
callback?: (component?: Component<P, {}> | Element) => any): Component<P, {}> | Element | void;
2529

2630
function unmountComponentAtNode(container: Element): boolean;
2731

@@ -31,21 +35,26 @@ declare namespace __React {
3135
function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
3236
function unstable_batchedUpdates(callback: () => any): void;
3337

34-
function unstable_renderSubtreeIntoContainer<P>(
38+
function unstable_renderSubtreeIntoContainer<P extends DOMAttributes, T extends Element>(
39+
parentComponent: Component<any, any>,
40+
element: DOMElement<P, T>,
41+
container: Element,
42+
callback?: (element: T) => any): T;
43+
function unstable_renderSubtreeIntoContainer<P, T extends Component<P, {}>>(
3544
parentComponent: Component<any, any>,
36-
nextElement: DOMElement<P>,
45+
element: CElement<P, T>,
3746
container: Element,
38-
callback?: (element: Element) => any): Element;
39-
function unstable_renderSubtreeIntoContainer<P, S>(
47+
callback?: (component: T) => any): T;
48+
function render<P>(
4049
parentComponent: Component<any, any>,
41-
nextElement: ClassicElement<P>,
50+
element: SFCElement<P>,
4251
container: Element,
43-
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
44-
function unstable_renderSubtreeIntoContainer<P, S>(
52+
callback?: () => any): void;
53+
function unstable_renderSubtreeIntoContainer<P>(
4554
parentComponent: Component<any, any>,
46-
nextElement: ReactElement<P>,
55+
element: ReactElement<P>,
4756
container: Element,
48-
callback?: (component: Component<P, S>) => any): Component<P, S>;
57+
callback?: (component?: Component<P, {}> | Element) => any): Component<P, {}> | Element | void;
4958
}
5059

5160
namespace __DOMServer {

0 commit comments

Comments
 (0)