-
Notifications
You must be signed in to change notification settings - Fork 47
/
index.js
153 lines (127 loc) · 4.6 KB
/
index.js
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
var mixin = require('smart-mixin');
var assign = require('object-assign');
var mixinProto = mixin({
// lifecycle stuff is as you'd expect
componentDidMount: mixin.MANY,
UNSAFE_componentWillMount: mixin.MANY,
UNSAFE_componentWillReceiveProps: mixin.MANY,
shouldComponentUpdate: mixin.ONCE,
UNSAFE_componentWillUpdate: mixin.MANY,
componentDidUpdate: mixin.MANY,
componentWillUnmount: mixin.MANY,
getChildContext: mixin.MANY_MERGED
});
function setDefaultProps(reactMixin) {
var getDefaultProps = reactMixin.getDefaultProps;
if (getDefaultProps) {
reactMixin.defaultProps = getDefaultProps();
delete reactMixin.getDefaultProps;
}
}
function setInitialState(reactMixin) {
var getInitialState = reactMixin.getInitialState;
var UNSAFE_componentWillMount = reactMixin.UNSAFE_componentWillMount;
function applyInitialState(instance) {
var state = instance.state || {};
assign(state, getInitialState.call(instance));
instance.state = state;
}
if (getInitialState) {
if (!UNSAFE_componentWillMount) {
reactMixin.UNSAFE_componentWillMount = function() {
applyInitialState(this);
};
} else {
reactMixin.UNSAFE_componentWillMount = function() {
applyInitialState(this);
UNSAFE_componentWillMount.call(this);
};
}
delete reactMixin.getInitialState;
}
}
function mixinClass(reactClass, reactMixin) {
setDefaultProps(reactMixin);
setInitialState(reactMixin);
var prototypeMethods = {};
var staticProps = {};
Object.keys(reactMixin).forEach(function(key) {
if (key === 'mixins') {
return; // Handled below to ensure proper order regardless of property iteration order
}
if (key === 'statics') {
return; // gets special handling
} else if (typeof reactMixin[key] === 'function') {
prototypeMethods[key] = reactMixin[key];
} else {
staticProps[key] = reactMixin[key];
}
});
mixinProto(reactClass.prototype, prototypeMethods);
var mergePropTypes = function(left, right, key) {
if (!left) return right;
if (!right) return left;
var result = {};
Object.keys(left).forEach(function(leftKey) {
if (!right[leftKey]) {
result[leftKey] = left[leftKey];
}
});
Object.keys(right).forEach(function(rightKey) {
if (left[rightKey]) {
result[rightKey] = function checkBothContextTypes() {
return right[rightKey].apply(this, arguments) && left[rightKey].apply(this, arguments);
};
} else {
result[rightKey] = right[rightKey];
}
});
return result;
};
mixin({
childContextTypes: mergePropTypes,
contextTypes: mergePropTypes,
propTypes: mixin.MANY_MERGED_LOOSE,
defaultProps: mixin.MANY_MERGED_LOOSE
})(reactClass, staticProps);
// statics is a special case because it merges directly onto the class
if (reactMixin.statics) {
Object.getOwnPropertyNames(reactMixin.statics).forEach(function(key) {
var left = reactClass[key];
var right = reactMixin.statics[key];
if (left !== undefined && right !== undefined) {
throw new TypeError('Cannot mixin statics because statics.' + key + ' and Component.' + key + ' are defined.');
}
reactClass[key] = left !== undefined ? left : right;
});
}
// If more mixins are defined, they need to run. This emulate's react's behavior.
// See behavior in code at:
// https://github.com/facebook/react/blob/41aa3496aa632634f650edbe10d617799922d265/src/isomorphic/classic/class/ReactClass.js#L468
// Note the .reverse(). In React, a fresh constructor is created, then all mixins are mixed in recursively,
// then the actual spec is mixed in last.
//
// With ES6 classes, the properties are already there, so smart-mixin mixes functions (a, b) -> b()a(), which is
// the opposite of how React does it. If we reverse this array, we basically do the whole logic in reverse,
// which makes the result the same. See the test for more.
// See also:
// https://github.com/facebook/react/blob/41aa3496aa632634f650edbe10d617799922d265/src/isomorphic/classic/class/ReactClass.js#L853
if (reactMixin.mixins) {
reactMixin.mixins.reverse().forEach(mixinClass.bind(null, reactClass));
}
return reactClass;
}
module.exports = (function() {
var reactMixin = mixinProto;
reactMixin.onClass = function(reactClass, mixin) {
// we mutate the mixin so let's clone it
mixin = assign({}, mixin);
return mixinClass(reactClass, mixin);
};
reactMixin.decorate = function(mixin) {
return function(reactClass) {
return reactMixin.onClass(reactClass, mixin);
};
};
return reactMixin;
})();