Kill ReactLink, LinkedStateMixin, valueLink and checkedLink (#8165)
This should be safe because we've been warning for this. The LinkedStateMixin is technically exposed on React.addons without a warning but presumably you wouldn't be using it without a valueLink or checkedLink. I do this primarily to clear up what the custom onChange listeners are doing. Renamed the final prop type helper to ReactControlledValuePropTypes.
Sebastian Markbåge committed
Oct 31, 2016 at 16:45 UTC
34fd4f4aa0225e5e23a2973ce7786d61a3b25bd4
13 files changed
+29
-640
src/addons/ReactWithAddons.js
-2
@@ -11,7 +11,6 @@
11
12
'use strict';
13
14
-var LinkedStateMixin = require('LinkedStateMixin');
14
var React = require('React');
15
var ReactAddonsDOMDependencies = require('ReactAddonsDOMDependencies');
16
var ReactComponentWithPureRenderMixin =
@@ -25,7 +24,6 @@ var update = require('update');
24
25
React.addons = {
26
CSSTransitionGroup: ReactCSSTransitionGroup,
28
- LinkedStateMixin: LinkedStateMixin,
27
PureRenderMixin: ReactComponentWithPureRenderMixin,
28
TransitionGroup: ReactTransitionGroup,
29
src/addons/link/LinkedStateMixin.js
deleted
-38
@@ -1,38 +0,0 @@
1
-/**
2
- * Copyright 2013-present, Facebook, Inc.
3
- * All rights reserved.
4
- *
5
- * This source code is licensed under the BSD-style license found in the
6
- * LICENSE file in the root directory of this source tree. An additional grant
7
- * of patent rights can be found in the PATENTS file in the same directory.
8
- *
9
- * @providesModule LinkedStateMixin
10
- */
11
-
12
-'use strict';
13
-
14
-var ReactLink = require('ReactLink');
15
-var ReactStateSetters = require('ReactStateSetters');
16
-
17
-/**
18
- * A simple mixin around ReactLink.forState().
19
- * See https://facebook.github.io/react/docs/two-way-binding-helpers.html
20
- */
21
-var LinkedStateMixin = {
22
- /**
23
- * Create a ReactLink that's linked to part of this component's state. The
24
- * ReactLink will have the current value of this.state[key] and will call
25
- * setState() when a change is requested.
26
- *
27
- * @param {string} key state key to update.
28
- * @return {ReactLink} ReactLink instance linking to the state.
29
- */
30
- linkState: function(key) {
31
- return new ReactLink(
32
- this.state[key],
33
- ReactStateSetters.createStateKeySetter(this, key)
34
- );
35
- },
36
-};
37
-
38
-module.exports = LinkedStateMixin;
src/addons/link/ReactLink.js
deleted
-73
@@ -1,73 +0,0 @@
1
-/**
2
- * Copyright 2013-present, Facebook, Inc.
3
- * All rights reserved.
4
- *
5
- * This source code is licensed under the BSD-style license found in the
6
- * LICENSE file in the root directory of this source tree. An additional grant
7
- * of patent rights can be found in the PATENTS file in the same directory.
8
- *
9
- * @providesModule ReactLink
10
- */
11
-
12
-'use strict';
13
-
14
-/**
15
- * ReactLink encapsulates a common pattern in which a component wants to modify
16
- * a prop received from its parent. ReactLink allows the parent to pass down a
17
- * value coupled with a callback that, when invoked, expresses an intent to
18
- * modify that value. For example:
19
- *
20
- * React.createClass({
21
- * getInitialState: function() {
22
- * return {value: ''};
23
- * },
24
- * render: function() {
25
- * var valueLink = new ReactLink(this.state.value, this._handleValueChange);
26
- * return <input valueLink={valueLink} />;
27
- * },
28
- * _handleValueChange: function(newValue) {
29
- * this.setState({value: newValue});
30
- * }
31
- * });
32
- *
33
- * We have provided some sugary mixins to make the creation and
34
- * consumption of ReactLink easier; see LinkedValueUtils and LinkedStateMixin.
35
- */
36
-
37
-var React = require('React');
38
-
39
-/**
40
- * Deprecated: An an easy way to express two-way binding with React.
41
- * See https://facebook.github.io/react/docs/two-way-binding-helpers.html
42
- *
43
- * @param {*} value current value of the link
44
- * @param {function} requestChange callback to request a change
45
- */
46
-function ReactLink(value, requestChange) {
47
- this.value = value;
48
- this.requestChange = requestChange;
49
-}
50
-
51
-/**
52
- * Creates a PropType that enforces the ReactLink API and optionally checks the
53
- * type of the value being passed inside the link. Example:
54
- *
55
- * MyComponent.propTypes = {
56
- * tabIndexLink: ReactLink.PropTypes.link(React.PropTypes.number)
57
- * }
58
- */
59
-function createLinkTypeChecker(linkType) {
60
- var shapes = {
61
- value: linkType === undefined ?
62
- React.PropTypes.any.isRequired :
63
- linkType.isRequired,
64
- requestChange: React.PropTypes.func.isRequired,
65
- };
66
- return React.PropTypes.shape(shapes);
67
-}
68
-
69
-ReactLink.PropTypes = {
70
- link: createLinkTypeChecker,
71
-};
72
-
73
-module.exports = ReactLink;
src/addons/link/__tests__/LinkedStateMixin-test.js
deleted
-46
@@ -1,46 +0,0 @@
1
-/**
2
- * Copyright 2013-present, Facebook, Inc.
3
- * All rights reserved.
4
- *
5
- * This source code is licensed under the BSD-style license found in the
6
- * LICENSE file in the root directory of this source tree. An additional grant
7
- * of patent rights can be found in the PATENTS file in the same directory.
8
- *
9
- * @emails react-core
10
- */
11
-
12
-'use strict';
13
-
14
-
15
-describe('LinkedStateMixin', () => {
16
- var LinkedStateMixin;
17
- var React;
18
- var ReactTestUtils;
19
-
20
- beforeEach(() => {
21
- LinkedStateMixin = require('LinkedStateMixin');
22
- React = require('React');
23
- ReactTestUtils = require('ReactTestUtils');
24
- });
25
-
26
- it('should create a ReactLink for state', () => {
27
- var Component = React.createClass({
28
- mixins: [LinkedStateMixin],
29
-
30
- getInitialState: function() {
31
- return {value: 'initial value'};
32
- },
33
-
34
- render: function() {
35
- return <span>value is {this.state.value}</span>;
36
- },
37
- });
38
- var component = ReactTestUtils.renderIntoDocument(<Component />);
39
- var link = component.linkState('value');
40
- expect(component.state.value).toBe('initial value');
41
- expect(link.value).toBe('initial value');
42
- link.requestChange('new value');
43
- expect(component.state.value).toBe('new value');
44
- expect(component.linkState('value').value).toBe('new value');
45
- });
46
-});
src/addons/link/__tests__/ReactLinkPropTypes-test.js
deleted
-159
@@ -1,159 +0,0 @@
1
-/**
2
- * Copyright 2013-present, Facebook, Inc.
3
- * All rights reserved.
4
- *
5
- * This source code is licensed under the BSD-style license found in the
6
- * LICENSE file in the root directory of this source tree. An additional grant
7
- * of patent rights can be found in the PATENTS file in the same directory.
8
- *
9
- * @emails react-core
10
- */
11
-
12
-'use strict';
13
-
14
-var emptyFunction = require('emptyFunction');
15
-var LinkPropTypes = require('ReactLink').PropTypes;
16
-var React = require('React');
17
-
18
-var invalidMessage = 'Invalid prop `testProp` supplied to `testComponent`.';
19
-var requiredMessage = 'The prop `testProp` is marked as required in ' +
20
- '`testComponent`, but its value is `undefined`.';
21
-
22
-function typeCheckFail(declaration, value, message) {
23
- var props = {testProp: value};
24
- var error = declaration(
25
- props,
26
- 'testProp',
27
- 'testComponent',
28
- 'prop',
29
- );
30
- expect(error instanceof Error).toBe(true);
31
- expect(error.message).toBe(message);
32
-}
33
-
34
-function typeCheckPass(declaration, value) {
35
- var props = {testProp: value};
36
- var error = declaration(
37
- props,
38
- 'testProp',
39
- 'testComponent',
40
- 'prop',
41
- );
42
- expect(error).toBe(null);
43
-}
44
-
45
-describe('ReactLink', () => {
46
- it('should fail if the argument does not implement the Link API', () => {
47
- typeCheckFail(
48
- LinkPropTypes.link(React.PropTypes.any),
49
- {},
50
- 'The prop `testProp.value` is marked as required in `testComponent`, ' +
51
- 'but its value is `undefined`.'
52
- );
53
- typeCheckFail(
54
- LinkPropTypes.link(React.PropTypes.any),
55
- {value: 123},
56
- 'The prop `testProp.requestChange` is marked as required in ' +
57
- '`testComponent`, but its value is `undefined`.'
58
- );
59
- typeCheckFail(
60
- LinkPropTypes.link(React.PropTypes.any),
61
- {requestChange: emptyFunction},
62
- 'The prop `testProp.value` is marked as required in `testComponent`, ' +
63
- 'but its value is `undefined`.'
64
- );
65
- typeCheckFail(
66
- LinkPropTypes.link(React.PropTypes.any),
67
- {value: null, requestChange: null},
68
- 'The prop `testProp.value` is marked as required in `testComponent`, ' +
69
- 'but its value is `null`.'
70
- );
71
- });
72
-
73
- it('should allow valid links even if no type was specified', () => {
74
- typeCheckPass(
75
- LinkPropTypes.link(),
76
- {value: 42, requestChange: emptyFunction}
77
- );
78
- typeCheckPass(
79
- LinkPropTypes.link(),
80
- {value: {}, requestChange: emptyFunction,
81
- });
82
- });
83
-
84
- it('should allow no link to be passed at all', () => {
85
- typeCheckPass(
86
- LinkPropTypes.link(React.PropTypes.string),
87
- undefined
88
- );
89
- });
90
-
91
- it('should allow valid links with correct value format', () => {
92
- typeCheckPass(
93
- LinkPropTypes.link(React.PropTypes.any),
94
- {value: 42, requestChange: emptyFunction}
95
- );
96
- typeCheckPass(
97
- LinkPropTypes.link(React.PropTypes.number),
98
- {value: 42, requestChange: emptyFunction}
99
- );
100
- typeCheckPass(
101
- LinkPropTypes.link(React.PropTypes.node),
102
- {value: 42, requestChange: emptyFunction}
103
- );
104
- });
105
-
106
- it('should fail if the link`s value type does not match', () => {
107
- typeCheckFail(
108
- LinkPropTypes.link(React.PropTypes.string),
109
- {value: 123, requestChange: emptyFunction},
110
- 'Invalid prop `testProp.value` of type `number` supplied to `testComponent`,' +
111
- ' expected `string`.'
112
- );
113
- });
114
-
115
- it('should be implicitly optional and not warn without values', () => {
116
- typeCheckPass(LinkPropTypes.link(), null);
117
- typeCheckPass(LinkPropTypes.link(), undefined);
118
- typeCheckPass(LinkPropTypes.link(React.PropTypes.string), null);
119
- typeCheckPass(LinkPropTypes.link(React.PropTypes.string), undefined);
120
- });
121
-
122
- it('should warn for missing required values', () => {
123
- var specifiedButIsNullMsg = 'The prop `testProp` is marked as required ' +
124
- 'in `testComponent`, but its value is `null`.';
125
- typeCheckFail(LinkPropTypes.link().isRequired, null, specifiedButIsNullMsg);
126
- typeCheckFail(LinkPropTypes.link().isRequired, undefined, requiredMessage);
127
- typeCheckFail(
128
- LinkPropTypes.link(React.PropTypes.string).isRequired,
129
- null,
130
- specifiedButIsNullMsg
131
- );
132
- typeCheckFail(
133
- LinkPropTypes.link(React.PropTypes.string).isRequired,
134
- undefined,
135
- requiredMessage
136
- );
137
- });
138
-
139
- it('should be compatible with React.PropTypes.oneOfType', () => {
140
- typeCheckPass(
141
- React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
142
- {value: 123, requestChange: emptyFunction}
143
- );
144
- typeCheckFail(
145
- React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
146
- 123,
147
- invalidMessage
148
- );
149
- typeCheckPass(
150
- LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
151
- {value: 123, requestChange: emptyFunction}
152
- );
153
- typeCheckFail(
154
- LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
155
- {value: 'imastring', requestChange: emptyFunction},
156
- 'Invalid prop `testProp.value` supplied to `testComponent`.'
157
- );
158
- });
159
-});
src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
-2
@@ -26,9 +26,7 @@ if (__DEV__) {
26
27
autoFocus: true,
28
defaultValue: true,
29
- valueLink: true,
29
defaultChecked: true,
31
- checkedLink: true,
30
innerHTML: true,
31
suppressContentEditableWarning: true,
32
onFocusIn: true,
src/renderers/dom/shared/utils/ReactControlledValuePropTypes.js
renamed
+3
-71
@@ -6,7 +6,7 @@
6
* LICENSE file in the root directory of this source tree. An additional grant
7
* of patent rights can be found in the PATENTS file in the same directory.
8
*
9
- * @providesModule LinkedValueUtils
9
+ * @providesModule ReactControlledValuePropTypes
10
*/
11
12
'use strict';
@@ -14,7 +14,6 @@
14
var React = require('React');
15
16
var getComponentName = require('getComponentName');
17
-var invariant = require('invariant');
17
var warning = require('warning');
18
19
var hasReadOnlyValue = {
@@ -27,32 +26,6 @@ var hasReadOnlyValue = {
26
'submit': true,
27
};
28
30
-function _assertSingleLink(inputProps) {
31
- invariant(
32
- inputProps.checkedLink == null || inputProps.valueLink == null,
33
- 'Cannot provide a checkedLink and a valueLink. If you want to use ' +
34
- 'checkedLink, you probably don\'t want to use valueLink and vice versa.'
35
- );
36
-}
37
-function _assertValueLink(inputProps) {
38
- _assertSingleLink(inputProps);
39
- invariant(
40
- inputProps.value == null && inputProps.onChange == null,
41
- 'Cannot provide a valueLink and a value or onChange event. If you want ' +
42
- 'to use value or onChange, you probably don\'t want to use valueLink.'
43
- );
44
-}
45
-
46
-function _assertCheckedLink(inputProps) {
47
- _assertSingleLink(inputProps);
48
- invariant(
49
- inputProps.checked == null && inputProps.onChange == null,
50
- 'Cannot provide a checkedLink and a checked property or onChange event. ' +
51
- 'If you want to use checked or onChange, you probably don\'t want to ' +
52
- 'use checkedLink'
53
- );
54
-}
55
-
29
var propTypes = {
30
value: function(props, propName, componentName) {
31
if (!props[propName] ||
@@ -101,7 +74,7 @@ function getDeclarationErrorAddendum(owner) {
74
* Provide a linked `value` attribute for controlled forms. You should not use
75
* this outside of the ReactDOM controlled form components.
76
*/
104
-var LinkedValueUtils = {
77
+var ReactControlledValuePropTypes = {
78
checkPropTypes: function(tagName, props, owner) {
79
for (var propName in propTypes) {
80
if (propTypes.hasOwnProperty(propName)) {
@@ -122,47 +95,6 @@ var LinkedValueUtils = {
95
}
96
}
97
},
125
-
126
- /**
127
- * @param {object} inputProps Props for form component
128
- * @return {*} current value of the input either from value prop or link.
129
- */
130
- getValue: function(inputProps) {
131
- if (inputProps.valueLink) {
132
- _assertValueLink(inputProps);
133
- return inputProps.valueLink.value;
134
- }
135
- return inputProps.value;
136
- },
137
-
138
- /**
139
- * @param {object} inputProps Props for form component
140
- * @return {*} current checked status of the input either from checked prop
141
- * or link.
142
- */
143
- getChecked: function(inputProps) {
144
- if (inputProps.checkedLink) {
145
- _assertCheckedLink(inputProps);
146
- return inputProps.checkedLink.value;
147
- }
148
- return inputProps.checked;
149
- },
150
-
151
- /**
152
- * @param {object} inputProps Props for form component
153
- * @param {SyntheticEvent} event change event to handle
154
- */
155
- executeOnChange: function(inputProps, event) {
156
- if (inputProps.valueLink) {
157
- _assertValueLink(inputProps);
158
- return inputProps.valueLink.requestChange(event.target.value);
159
- } else if (inputProps.checkedLink) {
160
- _assertCheckedLink(inputProps);
161
- return inputProps.checkedLink.requestChange(event.target.checked);
162
- } else if (inputProps.onChange) {
163
- return inputProps.onChange.call(undefined, event);
164
- }
165
- },
98
};
99
168
-module.exports = LinkedValueUtils;
100
+module.exports = ReactControlledValuePropTypes;
src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
-137
@@ -19,7 +19,6 @@ describe('ReactDOMInput', () => {
19
var ReactDOM;
20
var ReactDOMServer;
21
var ReactDOMFeatureFlags;
22
- var ReactLink;
22
var ReactTestUtils;
23
var inputValueTracking;
24
@@ -36,7 +35,6 @@ describe('ReactDOMInput', () => {
35
ReactDOM = require('ReactDOM');
36
ReactDOMServer = require('ReactDOMServer');
37
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
39
- ReactLink = require('ReactLink');
38
ReactTestUtils = require('ReactTestUtils');
39
inputValueTracking = require('inputValueTracking');
40
spyOn(console, 'error');
@@ -373,39 +371,6 @@ describe('ReactDOMInput', () => {
371
expect(cNode.checked).toBe(true);
372
});
373
376
- it('should support ReactLink', () => {
377
- var link = new ReactLink('yolo', jest.fn());
378
- var instance = <input type="text" valueLink={link} />;
379
-
380
- instance = ReactTestUtils.renderIntoDocument(instance);
381
-
382
- expect(ReactDOM.findDOMNode(instance).value).toBe('yolo');
383
- expect(link.value).toBe('yolo');
384
- expect(link.requestChange.mock.calls.length).toBe(0);
385
-
386
- ReactDOM.findDOMNode(instance).value = 'test';
387
- ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(instance));
388
-
389
- expect(link.requestChange.mock.calls.length).toBe(1);
390
- expect(link.requestChange.mock.calls[0][0]).toEqual('test');
391
- });
392
-
393
- it('should warn with value and no onChange handler', () => {
394
- var link = new ReactLink('yolo', jest.fn());
395
- ReactTestUtils.renderIntoDocument(<input type="text" valueLink={link} />);
396
- expect(console.error.calls.count()).toBe(1);
397
- expect(console.error.calls.argsFor(0)[0]).toContain(
398
- '`valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.'
399
- );
400
-
401
- ReactTestUtils.renderIntoDocument(
402
- <input type="text" value="zoink" onChange={jest.fn()} />
403
- );
404
- expect(console.error.calls.count()).toBe(1);
405
- ReactTestUtils.renderIntoDocument(<input type="text" value="zoink" />);
406
- expect(console.error.calls.count()).toBe(2);
407
- });
408
-
374
it('should warn with value and no onChange handler and readOnly specified', () => {
375
ReactTestUtils.renderIntoDocument(
376
<input type="text" value="zoink" readOnly={true} />
@@ -429,71 +394,6 @@ describe('ReactDOMInput', () => {
394
ReactTestUtils.Simulate.change(instance);
395
});
396
432
- it('should throw if both value and valueLink are provided', () => {
433
- var node = document.createElement('div');
434
- var link = new ReactLink('yolo', jest.fn());
435
- var instance = <input type="text" valueLink={link} />;
436
-
437
- expect(() => ReactDOM.render(instance, node)).not.toThrow();
438
-
439
- instance =
440
- <input
441
- type="text"
442
- valueLink={link}
443
- value="test"
444
- onChange={emptyFunction}
445
- />;
446
- expect(() => ReactDOM.render(instance, node)).toThrow();
447
-
448
- instance = <input type="text" valueLink={link} onChange={emptyFunction} />;
449
- expect(() => ReactDOM.render(instance, node)).toThrow();
450
-
451
- });
452
-
453
- it('should support checkedLink', () => {
454
- var link = new ReactLink(true, jest.fn());
455
- var instance = <input type="checkbox" checkedLink={link} />;
456
-
457
- instance = ReactTestUtils.renderIntoDocument(instance);
458
-
459
- expect(ReactDOM.findDOMNode(instance).checked).toBe(true);
460
- expect(link.value).toBe(true);
461
- expect(link.requestChange.mock.calls.length).toBe(0);
462
-
463
- ReactDOM.findDOMNode(instance).checked = false;
464
- ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(instance));
465
-
466
- expect(link.requestChange.mock.calls.length).toBe(1);
467
- expect(link.requestChange.mock.calls[0][0]).toEqual(false);
468
- });
469
-
470
- it('should warn with checked and no onChange handler', () => {
471
- var node = document.createElement('div');
472
- var link = new ReactLink(true, jest.fn());
473
- ReactDOM.render(<input type="checkbox" checkedLink={link} />, node);
474
- expect(console.error.calls.count()).toBe(1);
475
- expect(console.error.calls.argsFor(0)[0]).toContain(
476
- '`checkedLink` prop on `input` is deprecated; set `value` and `onChange` instead.'
477
- );
478
-
479
- ReactTestUtils.renderIntoDocument(
480
- <input
481
- type="checkbox"
482
- checked="false"
483
- onChange={jest.fn()}
484
- />
485
- );
486
- expect(console.error.calls.count()).toBe(1);
487
-
488
- ReactTestUtils.renderIntoDocument(
489
- <input type="checkbox" checked="false" readOnly={true} />
490
- );
491
- expect(console.error.calls.count()).toBe(1);
492
-
493
- ReactTestUtils.renderIntoDocument(<input type="checkbox" checked="false" />);
494
- expect(console.error.calls.count()).toBe(2);
495
- });
496
-
397
it('should warn with checked and no onChange handler with readOnly specified', () => {
398
ReactTestUtils.renderIntoDocument(
399
<input type="checkbox" checked="false" readOnly={true} />
@@ -506,28 +406,6 @@ describe('ReactDOMInput', () => {
406
expect(console.error.calls.count()).toBe(1);
407
});
408
509
- it('should throw if both checked and checkedLink are provided', () => {
510
- var node = document.createElement('div');
511
- var link = new ReactLink(true, jest.fn());
512
- var instance = <input type="checkbox" checkedLink={link} />;
513
-
514
- expect(() => ReactDOM.render(instance, node)).not.toThrow();
515
-
516
- instance =
517
- <input
518
- type="checkbox"
519
- checkedLink={link}
520
- checked="false"
521
- onChange={emptyFunction}
522
- />;
523
- expect(() => ReactDOM.render(instance, node)).toThrow();
524
-
525
- instance =
526
- <input type="checkbox" checkedLink={link} onChange={emptyFunction} />;
527
- expect(() => ReactDOM.render(instance, node)).toThrow();
528
-
529
- });
530
-
409
it('should update defaultValue to empty string', () => {
410
var container = document.createElement('div');
411
ReactDOM.render(<input type="text" defaultValue={'foo'} />, container);
@@ -535,21 +413,6 @@ describe('ReactDOMInput', () => {
413
expect(container.firstChild.defaultValue).toBe('');
414
});
415
538
- it('should throw if both checkedLink and valueLink are provided', () => {
539
- var node = document.createElement('div');
540
- var link = new ReactLink(true, jest.fn());
541
- var instance = <input type="checkbox" checkedLink={link} />;
542
-
543
- expect(() => ReactDOM.render(instance, node)).not.toThrow();
544
-
545
- instance = <input type="checkbox" valueLink={link} />;
546
- expect(() => ReactDOM.render(instance, node)).not.toThrow();
547
-
548
- instance =
549
- <input type="checkbox" checkedLink={link} valueLink={emptyFunction} />;
550
- expect(() => ReactDOM.render(instance, node)).toThrow();
551
- });
552
-
416
it('should warn if value is null', () => {
417
ReactTestUtils.renderIntoDocument(<input type="text" value={null} />);
418
expect(console.error.calls.argsFor(0)[0]).toContain(
src/renderers/dom/shared/wrappers/__tests__/ReactDOMSelect-test.js
-36
@@ -16,7 +16,6 @@ describe('ReactDOMSelect', () => {
16
var React;
17
var ReactDOM;
18
var ReactDOMServer;
19
- var ReactLink;
19
var ReactTestUtils;
20
21
var noop = function() {};
@@ -25,7 +24,6 @@ describe('ReactDOMSelect', () => {
24
React = require('React');
25
ReactDOM = require('ReactDOM');
26
ReactDOMServer = require('ReactDOMServer');
28
- ReactLink = require('ReactLink');
27
ReactTestUtils = require('ReactTestUtils');
28
});
29
@@ -347,40 +345,6 @@ describe('ReactDOMSelect', () => {
345
expect(node.options[2].selected).toBe(true); // gorilla
346
});
347
350
- it('should support ReactLink', () => {
351
- var link = new ReactLink('giraffe', jest.fn());
352
- var stub =
353
- <select valueLink={link}>
354
- <option value="monkey">A monkey!</option>
355
- <option value="giraffe">A giraffe!</option>
356
- <option value="gorilla">A gorilla!</option>
357
- </select>;
358
-
359
- spyOn(console, 'error');
360
-
361
- stub = ReactTestUtils.renderIntoDocument(stub);
362
-
363
- expect(console.error.calls.count()).toBe(1);
364
- expect(console.error.calls.argsFor(0)[0]).toContain(
365
- '`valueLink` prop on `select` is deprecated; set `value` and `onChange` instead.'
366
- );
367
-
368
- var node = ReactDOM.findDOMNode(stub);
369
-
370
- expect(node.options[0].selected).toBe(false); // monkey
371
- expect(node.options[1].selected).toBe(true); // giraffe
372
- expect(node.options[2].selected).toBe(false); // gorilla
373
- expect(link.requestChange.mock.calls.length).toBe(0);
374
-
375
- node.options[1].selected = false;
376
- node.options[2].selected = true;
377
- ReactTestUtils.Simulate.change(node);
378
-
379
- expect(link.requestChange.mock.calls.length).toBe(1);
380
- expect(link.requestChange.mock.calls[0][0]).toEqual('gorilla');
381
-
382
- });
383
-
348
it('should support server-side rendering', () => {
349
var stub =
350
<select value="giraffe" onChange={noop}>
src/renderers/dom/shared/wrappers/__tests__/ReactDOMTextarea-test.js
-25
@@ -17,7 +17,6 @@ describe('ReactDOMTextarea', () => {
17
var React;
18
var ReactDOM;
19
var ReactDOMServer;
20
- var ReactLink;
20
var ReactTestUtils;
21
22
var renderTextarea;
@@ -26,7 +25,6 @@ describe('ReactDOMTextarea', () => {
25
React = require('React');
26
ReactDOM = require('ReactDOM');
27
ReactDOMServer = require('ReactDOMServer');
29
- ReactLink = require('ReactLink');
28
ReactTestUtils = require('ReactTestUtils');
29
30
renderTextarea = function(component, container) {
@@ -340,29 +338,6 @@ describe('ReactDOMTextarea', () => {
338
expect(console.error.calls.count()).toBe(2);
339
});
340
343
- it('should support ReactLink', () => {
344
- var link = new ReactLink('yolo', jest.fn());
345
- var instance = <textarea valueLink={link} />;
346
-
347
- spyOn(console, 'error');
348
- instance = renderTextarea(instance);
349
- expect(console.error.calls.count()).toBe(1);
350
- expect(console.error.calls.argsFor(0)[0]).toContain(
351
- '`valueLink` prop on `textarea` is deprecated; set `value` and `onChange` instead.'
352
- );
353
-
354
-
355
- expect(instance.value).toBe('yolo');
356
- expect(link.value).toBe('yolo');
357
- expect(link.requestChange.mock.calls.length).toBe(0);
358
-
359
- instance.value = 'test';
360
- ReactTestUtils.Simulate.change(instance);
361
-
362
- expect(link.requestChange.mock.calls.length).toBe(1);
363
- expect(link.requestChange.mock.calls[0][0]).toEqual('test');
364
- });
365
-
341
it('should unmount', () => {
342
var container = document.createElement('div');
343
renderTextarea(<textarea />, container);
src/renderers/dom/stack/client/wrappers/ReactDOMInput.js
+9
-23
@@ -12,15 +12,13 @@
12
'use strict';
13
14
var DOMPropertyOperations = require('DOMPropertyOperations');
15
-var LinkedValueUtils = require('LinkedValueUtils');
15
+var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
16
var ReactDOMComponentTree = require('ReactDOMComponentTree');
17
var ReactUpdates = require('ReactUpdates');
18
19
var invariant = require('invariant');
20
var warning = require('warning');
21
22
-var didWarnValueLink = false;
23
-var didWarnCheckedLink = false;
22
var didWarnValueDefaultValue = false;
23
var didWarnCheckedDefaultChecked = false;
24
var didWarnControlledToUncontrolled = false;
@@ -56,8 +54,8 @@ function isControlled(props) {
54
*/
55
var ReactDOMInput = {
56
getHostProps: function(inst, props) {
59
- var value = LinkedValueUtils.getValue(props);
60
- var checked = LinkedValueUtils.getChecked(props);
57
+ var value = props.value;
58
+ var checked = props.checked;
59
60
var hostProps = Object.assign({
61
// Make sure we set .type before any other properties (setting .value
@@ -83,7 +81,7 @@ var ReactDOMInput = {
81
82
mountWrapper: function(inst, props) {
83
if (__DEV__) {
86
- LinkedValueUtils.checkPropTypes(
84
+ ReactControlledValuePropTypes.checkPropTypes(
85
'input',
86
props,
87
inst._currentElement._owner
@@ -91,20 +89,6 @@ var ReactDOMInput = {
89
90
var owner = inst._currentElement._owner;
91
94
- if (props.valueLink !== undefined && !didWarnValueLink) {
95
- warning(
96
- false,
97
- '`valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.'
98
- );
99
- didWarnValueLink = true;
100
- }
101
- if (props.checkedLink !== undefined && !didWarnCheckedLink) {
102
- warning(
103
- false,
104
- '`checkedLink` prop on `input` is deprecated; set `value` and `onChange` instead.'
105
- );
106
- didWarnCheckedLink = true;
107
- }
92
if (
93
props.checked !== undefined &&
94
props.defaultChecked !== undefined &&
@@ -189,7 +173,6 @@ var ReactDOMInput = {
173
}
174
}
175
192
- // TODO: Shouldn't this be getChecked(props)?
176
var checked = props.checked;
177
if (checked != null) {
178
DOMPropertyOperations.setValueForProperty(
@@ -200,7 +183,7 @@ var ReactDOMInput = {
183
}
184
185
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
203
- var value = LinkedValueUtils.getValue(props);
186
+ var value = props.value;
187
if (value != null) {
188
189
// Cast `value` to a string to ensure the value is set correctly. While
@@ -285,7 +268,10 @@ var ReactDOMInput = {
268
function _handleChange(event) {
269
var props = this._currentElement.props;
270
288
- var returnValue = LinkedValueUtils.executeOnChange(props, event);
271
+ var returnValue;
272
+ if (props.onChange) {
273
+ returnValue = props.onChange.call(undefined, event);
274
+ }
275
276
// Here we use asap to wait until all updates have propagated, which
277
// is important when using controlled components within layers:
src/renderers/dom/stack/client/wrappers/ReactDOMSelect.js
+9
-15
@@ -11,13 +11,12 @@
11
12
'use strict';
13
14
-var LinkedValueUtils = require('LinkedValueUtils');
14
+var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
15
var ReactDOMComponentTree = require('ReactDOMComponentTree');
16
var ReactUpdates = require('ReactUpdates');
17
18
var warning = require('warning');
19
20
-var didWarnValueLink = false;
20
var didWarnValueDefaultValue = false;
21
22
function updateOptionsIfPendingUpdateAndMounted() {
@@ -25,7 +24,7 @@ function updateOptionsIfPendingUpdateAndMounted() {
24
this._wrapperState.pendingUpdate = false;
25
26
var props = this._currentElement.props;
28
- var value = LinkedValueUtils.getValue(props);
27
+ var value = props.value;
28
29
if (value != null) {
30
updateOptions(this, Boolean(props.multiple), value);
@@ -51,20 +50,12 @@ var valuePropNames = ['value', 'defaultValue'];
50
*/
51
function checkSelectPropTypes(inst, props) {
52
var owner = inst._currentElement._owner;
54
- LinkedValueUtils.checkPropTypes(
53
+ ReactControlledValuePropTypes.checkPropTypes(
54
'select',
55
props,
56
owner
57
);
58
60
- if (props.valueLink !== undefined && !didWarnValueLink) {
61
- warning(
62
- false,
63
- '`valueLink` prop on `select` is deprecated; set `value` and `onChange` instead.'
64
- );
65
- didWarnValueLink = true;
66
- }
67
-
59
for (var i = 0; i < valuePropNames.length; i++) {
60
var propName = valuePropNames[i];
61
if (props[propName] == null) {
@@ -156,7 +147,7 @@ var ReactDOMSelect = {
147
checkSelectPropTypes(inst, props);
148
}
149
159
- var value = LinkedValueUtils.getValue(props);
150
+ var value = props.value;
151
inst._wrapperState = {
152
pendingUpdate: false,
153
initialValue: value != null ? value : props.defaultValue,
@@ -198,7 +189,7 @@ var ReactDOMSelect = {
189
var wasMultiple = inst._wrapperState.wasMultiple;
190
inst._wrapperState.wasMultiple = Boolean(props.multiple);
191
201
- var value = LinkedValueUtils.getValue(props);
192
+ var value = props.value;
193
if (value != null) {
194
inst._wrapperState.pendingUpdate = false;
195
updateOptions(inst, Boolean(props.multiple), value);
@@ -216,7 +207,10 @@ var ReactDOMSelect = {
207
208
function _handleChange(event) {
209
var props = this._currentElement.props;
219
- var returnValue = LinkedValueUtils.executeOnChange(props, event);
210
+ var returnValue;
211
+ if (props.onChange) {
212
+ returnValue = props.onChange.call(undefined, event);
213
+ }
214
215
if (this._rootNodeID) {
216
this._wrapperState.pendingUpdate = true;
src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js
+8
-13
@@ -11,14 +11,13 @@
11
12
'use strict';
13
14
-var LinkedValueUtils = require('LinkedValueUtils');
14
+var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
15
var ReactDOMComponentTree = require('ReactDOMComponentTree');
16
var ReactUpdates = require('ReactUpdates');
17
18
var invariant = require('invariant');
19
var warning = require('warning');
20
21
-var didWarnValueLink = false;
21
var didWarnValDefaultVal = false;
22
23
function forceUpdateIfMounted() {
@@ -67,18 +66,11 @@ var ReactDOMTextarea = {
66
67
mountWrapper: function(inst, props) {
68
if (__DEV__) {
70
- LinkedValueUtils.checkPropTypes(
69
+ ReactControlledValuePropTypes.checkPropTypes(
70
'textarea',
71
props,
72
inst._currentElement._owner
73
);
75
- if (props.valueLink !== undefined && !didWarnValueLink) {
76
- warning(
77
- false,
78
- '`valueLink` prop on `textarea` is deprecated; set `value` and `onChange` instead.'
79
- );
80
- didWarnValueLink = true;
81
- }
74
if (
75
props.value !== undefined &&
76
props.defaultValue !== undefined &&
@@ -97,7 +89,7 @@ var ReactDOMTextarea = {
89
}
90
91
100
- var value = LinkedValueUtils.getValue(props);
92
+ var value = props.value;
93
var initialValue = value;
94
95
// Only bother fetching default value if we're going to use it
@@ -144,7 +136,7 @@ var ReactDOMTextarea = {
136
var props = inst._currentElement.props;
137
138
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
147
- var value = LinkedValueUtils.getValue(props);
139
+ var value = props.value;
140
if (value != null) {
141
// Cast `value` to a string to ensure the value is set correctly. While
142
// browsers typically do this as necessary, jsdom doesn't.
@@ -175,7 +167,10 @@ var ReactDOMTextarea = {
167
168
function _handleChange(event) {
169
var props = this._currentElement.props;
178
- var returnValue = LinkedValueUtils.executeOnChange(props, event);
170
+ var returnValue;
171
+ if (props.onChange) {
172
+ returnValue = props.onChange.call(undefined, event);
173
+ }
174
ReactUpdates.asap(forceUpdateIfMounted, this);
175
return returnValue;
176
}