The library for web and native user interfaces.
Rename `props` to `propTypes`
This does two things: - Rename `props` to `propTypes`. - Rename `ReactProps` to `ReactPropTypes` (and `React.Props` to `React.PropTypes`)
Paul O'Shannessy committed
Jul 10, 2013 at 14:45 UTC
d76262731237365198ddd84216d108da96820055
7 files changed
+67
-29
src/core/React.js
+2
-2
@@ -22,7 +22,7 @@ var ReactCompositeComponent = require('ReactCompositeComponent');
22
var ReactComponent = require('ReactComponent');
23
var ReactDOM = require('ReactDOM');
24
var ReactMount = require('ReactMount');
25
-var ReactProps = require('ReactProps');
25
+var ReactPropTypes = require('ReactPropTypes');
26
var ReactServerRendering = require('ReactServerRendering');
27
28
var ReactDefaultInjection = require('ReactDefaultInjection');
@@ -31,7 +31,7 @@ ReactDefaultInjection.inject();
31
32
var React = {
33
DOM: ReactDOM,
34
- Props: ReactProps,
34
+ PropTypes: ReactPropTypes,
35
initializeTouchEvents: function(shouldUseTouch) {
36
ReactMount.useTouchEvents = shouldUseTouch;
37
},
src/core/ReactCompositeComponent.js
+9
-9
@@ -81,12 +81,12 @@ var ReactCompositeComponentInterface = {
81
mixins: SpecPolicy.DEFINE_MANY,
82
83
/**
84
- * Definition of props for this component.
84
+ * Definition of prop types for this component.
85
*
86
- * @type {array}
86
+ * @type {object}
87
* @optional
88
*/
89
- props: SpecPolicy.DEFINE_ONCE,
89
+ propTypes: SpecPolicy.DEFINE_ONCE,
90
91
92
@@ -278,8 +278,8 @@ var RESERVED_SPEC_KEYS = {
278
}
279
}
280
},
281
- props: function(Constructor, props) {
282
- Constructor.propDeclarations = props;
281
+ propTypes: function(Constructor, propTypes) {
282
+ Constructor.propTypes = propTypes;
283
}
284
};
285
@@ -602,11 +602,11 @@ var ReactCompositeComponentMixin = {
602
props[propName] = defaultProps[propName];
603
}
604
}
605
- var propDeclarations = this.constructor.propDeclarations;
606
- if (propDeclarations) {
605
+ var propTypes = this.constructor.propTypes;
606
+ if (propTypes) {
607
var componentName = this.constructor.displayName;
608
- for (propName in propDeclarations) {
609
- var checkProp = propDeclarations[propName];
608
+ for (propName in propTypes) {
609
+ var checkProp = propTypes[propName];
610
if (checkProp) {
611
checkProp(props, propName, componentName);
612
}
src/core/ReactPropTypes.js
renamed
+6
-6
@@ -13,7 +13,7 @@
13
* See the License for the specific language governing permissions and
14
* limitations under the License.
15
*
16
- * @providesModule ReactProps
16
+ * @providesModule ReactPropTypes
17
*/
18
19
"use strict";
@@ -25,9 +25,9 @@ var invariant = require('invariant');
25
* Collection of methods that allow declaration and validation of props that are
26
* supplied to React components. Example usage:
27
*
28
- * var Props = require('ReactProps');
28
+ * var Props = require('ReactPropTypes');
29
* var MyArticle = React.createClass({
30
- * props: {
30
+ * propTypes: {
31
* // An optional string prop named "description".
32
* description: Props.string,
33
*
@@ -43,14 +43,14 @@ var invariant = require('invariant');
43
* A more formal specification of how these methods are used:
44
*
45
* type := array|bool|object|number|string|oneOf([...])|instanceOf(...)
46
- * decl := ReactProps.{type}(.isRequired)?
46
+ * decl := ReactPropTypes.{type}(.isRequired)?
47
*
48
* Each and every declaration produces a function with the same signature. This
49
* allows the creation of custom validation functions. For example:
50
*
51
- * var Props = require('ReactProps');
51
+ * var Props = require('ReactPropTypes');
52
* var MyLink = React.createClass({
53
- * props: {
53
+ * propTypes: {
54
* // An optional string or URI prop named "href".
55
* href: function(props, propName, componentName) {
56
* var propValue = props[propName];
src/core/__tests__/ReactCompositeComponent-test.js
+6
-6
@@ -24,7 +24,7 @@ var MorphingAutoBindComponent;
24
var ChildUpdates;
25
var React;
26
var ReactCurrentOwner;
27
-var ReactProps;
27
+var ReactPropTypes;
28
var ReactTestUtils;
29
var ReactID;
30
var ReactDoNotBindDeprecated;
@@ -40,7 +40,7 @@ describe('ReactCompositeComponent', function() {
40
React = require('React');
41
ReactCurrentOwner = require('ReactCurrentOwner');
42
ReactDoNotBindDeprecated = require('ReactDoNotBindDeprecated');
43
- ReactProps = require('ReactProps');
43
+ ReactPropTypes = require('ReactPropTypes');
44
ReactTestUtils = require('ReactTestUtils');
45
ReactID = require('ReactID');
46
@@ -220,7 +220,7 @@ describe('ReactCompositeComponent', function() {
220
221
it('should normalize props with default values', function() {
222
var Component = React.createClass({
223
- props: {key: ReactProps.string.isRequired},
223
+ propTypes: {key: ReactPropTypes.string.isRequired},
224
getDefaultProps: function() {
225
return {key: 'testKey'};
226
},
@@ -247,7 +247,7 @@ describe('ReactCompositeComponent', function() {
247
248
it('should check default prop values', function() {
249
var Component = React.createClass({
250
- props: {key: ReactProps.string.isRequired},
250
+ propTypes: {key: ReactPropTypes.string.isRequired},
251
getDefaultProps: function() {
252
return {key: null};
253
},
@@ -267,8 +267,8 @@ describe('ReactCompositeComponent', function() {
267
268
it('should check declared prop types', function() {
269
var Component = React.createClass({
270
- props: {
271
- key: ReactProps.string.isRequired
270
+ propTypes: {
271
+ key: ReactPropTypes.string.isRequired
272
},
273
render: function() {
274
return <span>{this.props.key}</span>;
src/core/__tests__/ReactCompositeComponentMixin-test.js
+39
-1
@@ -26,6 +26,9 @@ var ReactTestUtils;
26
var reactComponentExpect;
27
28
var TestComponent;
29
+var TestComponentWithPropTypes;
30
+var mixinPropValidator;
31
+var componentPropValidator;
32
33
describe('ReactCompositeComponent-mixin', function() {
34
@@ -33,6 +36,8 @@ describe('ReactCompositeComponent-mixin', function() {
36
React = require('React');
37
ReactTestUtils = require('ReactTestUtils');
38
reactComponentExpect = require('reactComponentExpect');
39
+ mixinPropValidator = mocks.getMockFunction();
40
+ componentPropValidator = mocks.getMockFunction();
41
42
var MixinA = {
43
componentDidMount: function() {
@@ -53,8 +58,14 @@ describe('ReactCompositeComponent-mixin', function() {
58
}
59
};
60
61
+ var MixinD = {
62
+ propTypes: {
63
+ value: mixinPropValidator
64
+ }
65
+ };
66
+
67
TestComponent = React.createClass({
57
- mixins: [MixinB, MixinC],
68
+ mixins: [MixinB, MixinC, MixinD],
69
70
componentDidMount: function() {
71
this.props.listener('Component didMount');
@@ -65,6 +76,15 @@ describe('ReactCompositeComponent-mixin', function() {
76
}
77
});
78
79
+ TestComponentWithPropTypes = React.createClass({
80
+ mixins: [MixinD],
81
+ propTypes: {
82
+ value: componentPropValidator
83
+ },
84
+ render: function() {
85
+ return <div />;
86
+ }
87
+ });
88
});
89
90
it('should support chaining delegate functions', function() {
@@ -79,4 +99,22 @@ describe('ReactCompositeComponent-mixin', function() {
99
['Component didMount']
100
]);
101
});
102
+
103
+ it('should validate prop types via mixins', function() {
104
+ expect(TestComponent.componentConstructor.propTypes).toBeDefined();
105
+ expect(TestComponent.componentConstructor.propTypes.value)
106
+ .toBe(mixinPropValidator);
107
+ });
108
+
109
+ it('should override mixin prop types with class prop types', function() {
110
+ // Sanity check...
111
+ expect(componentPropValidator).toNotBe(mixinPropValidator);
112
+ // Actually check...
113
+ expect(TestComponentWithPropTypes.componentConstructor.propTypes)
114
+ .toBeDefined();
115
+ expect(TestComponentWithPropTypes.componentConstructor.propTypes.value)
116
+ .toNotBe(mixinPropValidator);
117
+ expect(TestComponentWithPropTypes.componentConstructor.propTypes.value)
118
+ .toBe(componentPropValidator);
119
+ });
120
});
src/core/__tests__/ReactCompositeComponentSpec-test.js
+4
-4
@@ -53,10 +53,10 @@ describe('ReactCompositeComponent-spec', function() {
53
.toBe('TestComponent');
54
});
55
56
- it('should copy prop declarations onto the Constructor', function() {
56
+ it('should copy prop types onto the Constructor', function() {
57
var propValidator = mocks.getMockFunction();
58
var TestComponent = React.createClass({
59
- props: {
59
+ propTypes: {
60
value: propValidator
61
},
62
render: function() {
@@ -64,8 +64,8 @@ describe('ReactCompositeComponent-spec', function() {
64
}
65
});
66
67
- expect(TestComponent.componentConstructor.propDeclarations).toBeDefined();
68
- expect(TestComponent.componentConstructor.propDeclarations.value)
67
+ expect(TestComponent.componentConstructor.propTypes).toBeDefined();
68
+ expect(TestComponent.componentConstructor.propTypes.value)
69
.toBe(propValidator);
70
});
71
});
src/core/__tests__/ReactPropTypes-test.js
renamed
+1
-1
@@ -19,7 +19,7 @@
19
20
"use strict";
21
22
-var Props = require('ReactProps');
22
+var Props = require('ReactPropTypes');
23
24
function typeCheck(declaration, value) {
25
var props = {};