1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
namespace app.utils {
'use strict';
const { _, React, ReactDOM } = global;
class NgComponent {
isFirstRender = true;
state = {};
props = {};
$onChanges(changes) {
const oldProps = _.mapValues(changes, 'previousValue');
const newProps = _.mapValues(changes, 'currentValue');
const nextProps = _.assign({}, this.props, newProps);
if (this.isFirstRender) {
_.assign(this, { props: nextProps });
this.componentWillMount();
this.render();
this.isFirstRender = false;
} else {
if (!this.didPropsChange(newProps, oldProps)) return;
this.componentWillReceiveProps(nextProps);
const shouldUpdate = this.shouldComponentUpdate(nextProps, this.state);
_.assign(this, { props: nextProps });
if (!shouldUpdate) return;
this.componentWillUpdate(this.props, this.state);
this.render();
this.componentDidUpdate(this.props, this.state);
}
}
$postLink() {
this.componentDidMount()
}
$onDestroy() {
this.componentWillUnmount()
}
didPropsChange(newProps, oldProps) {
return _.some(newProps, (v, k) => v !== oldProps[k]);
}
componentWillMount() {}
componentDidMount() {}
componentWillReceiveProps(props) { }
shouldComponentUpdate(nextProps, nextState) { return true }
componentWillUpdate(props, state) {}
componentDidUpdate(props, state) {}
componentWillUnmount() {}
render() {}
}
export function react2Angular(ReactComponent, bindingNames = undefined) {
const propNames = bindingNames
|| (ReactComponent.propTypes && Object.keys(ReactComponent.propTypes))
|| [];
return {
bindings: _.fromPairs(propNames.map(_ => [_, '<'])),
controller: ['$element', class extends NgComponent {
constructor(private $element) {
super();
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(this.$element[0]);
}
render() {
ReactDOM.render(React.createElement(ReactComponent, this.props), this.$element[0]);
}
}]
};
}
}