Change LinkedValueMixin to a util class
This makes it clear that .getValue() is not a public API.
Ben Alpert committed
Dec 30, 2013 at 14:23 UTC
95a80591dd5996df23cff36de2a83c084114a4ae
6 files changed
+118
-114
src/addons/link/ReactLink.js
+1
-1
@@ -39,7 +39,7 @@
39
* });
40
*
41
* We have provided some sugary mixins to make the creation and
42
- * consumption of ReactLink easier; see LinkedValueMixin and LinkedStateMixin.
42
+ * consumption of ReactLink easier; see LinkedValueUtils and LinkedStateMixin.
43
*/
44
45
/**
src/dom/components/LinkedValueMixin.js
deleted
-93
@@ -1,93 +0,0 @@
1
-/**
2
- * Copyright 2013 Facebook, Inc.
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- *
16
- * @providesModule LinkedValueMixin
17
- * @typechecks static-only
18
- */
19
-
20
-"use strict";
21
-
22
-var invariant = require('invariant');
23
-
24
-var hasReadOnlyValue = {
25
- 'checkbox': true,
26
- 'hidden': true,
27
- 'radio': true
28
-};
29
-
30
-/**
31
- * Provide a linked `value` attribute for controlled forms. You should not use
32
- * this outside of the ReactDOM controlled form components.
33
- */
34
-var LinkedValueMixin = {
35
- propTypes: {
36
- value: function(props, propName, componentName) {
37
- if (__DEV__) {
38
- if (props[propName] &&
39
- !hasReadOnlyValue[props.type] &&
40
- !props.onChange &&
41
- !props.readOnly &&
42
- !props.disabled) {
43
- console.warn(
44
- 'You provided a `value` prop to a form field without an ' +
45
- '`onChange` handler. This will render a read-only field. If ' +
46
- 'the field should be mutable use `defaultValue`. Otherwise, set ' +
47
- 'either `onChange` or `readOnly`.'
48
- );
49
- }
50
- }
51
- }
52
- },
53
-
54
- _assertLink: function() {
55
- invariant(
56
- this.props.value == null && this.props.onChange == null,
57
- 'Cannot provide a valueLink and a value or onChange event. If you ' +
58
- 'want to use value or onChange, you probably don\'t want to use ' +
59
- 'valueLink'
60
- );
61
- },
62
-
63
- /**
64
- * @return {*} current value of the input either from value prop or link.
65
- */
66
- getValue: function() {
67
- if (this.props.valueLink) {
68
- this._assertLink();
69
- return this.props.valueLink.value;
70
- }
71
- return this.props.value;
72
- },
73
-
74
- /**
75
- * @return {function} change callback either from onChange prop or link.
76
- */
77
- getOnChange: function() {
78
- if (this.props.valueLink) {
79
- this._assertLink();
80
- return this._handleLinkedValueChange;
81
- }
82
- return this.props.onChange;
83
- },
84
-
85
- /**
86
- * @param {SyntheticEvent} e change event to handle
87
- */
88
- _handleLinkedValueChange: function(e) {
89
- this.props.valueLink.requestChange(e.target.value);
90
- }
91
-};
92
-
93
-module.exports = LinkedValueMixin;
src/dom/components/LinkedValueUtils.js
new
+97
@@ -0,0 +1,97 @@
1
+/**
2
+ * Copyright 2013 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @providesModule LinkedValueUtils
17
+ * @typechecks static-only
18
+ */
19
+
20
+"use strict";
21
+
22
+var invariant = require('invariant');
23
+
24
+var hasReadOnlyValue = {
25
+ 'checkbox': true,
26
+ 'hidden': true,
27
+ 'radio': true
28
+};
29
+
30
+function _assertLink(input) {
31
+ invariant(
32
+ input.props.value == null && input.props.onChange == null,
33
+ 'Cannot provide a valueLink and a value or onChange event. If you want ' +
34
+ 'to use value or onChange, you probably don\'t want to use valueLink.'
35
+ );
36
+}
37
+
38
+/**
39
+ * @param {SyntheticEvent} e change event to handle
40
+ */
41
+function _handleLinkedValueChange(e) {
42
+ /*jshint validthis:true */
43
+ this.props.valueLink.requestChange(e.target.value);
44
+}
45
+
46
+/**
47
+ * Provide a linked `value` attribute for controlled forms. You should not use
48
+ * this outside of the ReactDOM controlled form components.
49
+ */
50
+var LinkedValueUtils = {
51
+ Mixin: {
52
+ propTypes: {
53
+ value: function(props, propName, componentName) {
54
+ if (__DEV__) {
55
+ if (props[propName] &&
56
+ !hasReadOnlyValue[props.type] &&
57
+ !props.onChange &&
58
+ !props.readOnly &&
59
+ !props.disabled) {
60
+ console.warn(
61
+ 'You provided a `value` prop to a form field without an ' +
62
+ '`onChange` handler. This will render a read-only field. If ' +
63
+ 'the field should be mutable use `defaultValue`. Otherwise, ' +
64
+ 'set either `onChange` or `readOnly`.'
65
+ );
66
+ }
67
+ }
68
+ }
69
+ }
70
+ },
71
+
72
+ /**
73
+ * @param {ReactComponent} input Form component
74
+ * @return {*} current value of the input either from value prop or link.
75
+ */
76
+ getValue: function(input) {
77
+ if (input.props.valueLink) {
78
+ _assertLink(input);
79
+ return input.props.valueLink.value;
80
+ }
81
+ return input.props.value;
82
+ },
83
+
84
+ /**
85
+ * @param {ReactComponent} input Form component
86
+ * @return {function} change callback either from onChange prop or link.
87
+ */
88
+ getOnChange: function(input) {
89
+ if (input.props.valueLink) {
90
+ _assertLink(input);
91
+ return _handleLinkedValueChange;
92
+ }
93
+ return input.props.onChange;
94
+ }
95
+};
96
+
97
+module.exports = LinkedValueUtils;
src/dom/components/ReactDOMInput.js
+7
-7
@@ -18,9 +18,9 @@
18
19
"use strict";
20
21
-var DOMPropertyOperations = require('DOMPropertyOperations');
22
-var LinkedValueMixin = require('LinkedValueMixin');
21
var AutoFocusMixin = require('AutoFocusMixin');
22
+var DOMPropertyOperations = require('DOMPropertyOperations');
23
+var LinkedValueUtils = require('LinkedValueUtils');
24
var ReactCompositeComponent = require('ReactCompositeComponent');
25
var ReactDOM = require('ReactDOM');
26
var ReactMount = require('ReactMount');
@@ -52,7 +52,7 @@ var instancesByReactID = {};
52
var ReactDOMInput = ReactCompositeComponent.createClass({
53
displayName: 'ReactDOMInput',
54
55
- mixins: [LinkedValueMixin, AutoFocusMixin],
55
+ mixins: [AutoFocusMixin, LinkedValueUtils.Mixin],
56
57
getInitialState: function() {
58
var defaultValue = this.props.defaultValue;
@@ -76,7 +76,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
76
props.checked =
77
this.props.checked != null ? this.props.checked : this.state.checked;
78
79
- var value = this.getValue();
79
+ var value = LinkedValueUtils.getValue(this);
80
props.value = value != null ? value : this.state.value;
81
82
props.onChange = this._handleChange;
@@ -105,7 +105,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
105
);
106
}
107
108
- var value = this.getValue();
108
+ var value = LinkedValueUtils.getValue(this);
109
if (value != null) {
110
// Cast `value` to a string to ensure the value is set correctly. While
111
// browsers typically do this as necessary, jsdom doesn't.
@@ -115,10 +115,10 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
115
116
_handleChange: function(event) {
117
var returnValue;
118
- var onChange = this.getOnChange();
118
+ var onChange = LinkedValueUtils.getOnChange(this);
119
if (onChange) {
120
this._isChanging = true;
121
- returnValue = onChange(event);
121
+ returnValue = onChange.call(this, event);
122
this._isChanging = false;
123
}
124
this.setState({
src/dom/components/ReactDOMSelect.js
+5
-5
@@ -18,8 +18,8 @@
18
19
"use strict";
20
21
-var LinkedValueMixin = require('LinkedValueMixin');
21
var AutoFocusMixin = require('AutoFocusMixin');
22
+var LinkedValueUtils = require('LinkedValueUtils');
23
var ReactCompositeComponent = require('ReactCompositeComponent');
24
var ReactDOM = require('ReactDOM');
25
@@ -61,7 +61,7 @@ function selectValueType(props, propName, componentName) {
61
function updateOptions() {
62
/*jshint validthis:true */
63
var multiple = this.props.multiple;
64
- var propValue = this.getValue();
64
+ var propValue = LinkedValueUtils.getValue(this);
65
var value = propValue != null ? propValue : this.state.value;
66
var options = this.getDOMNode().options;
67
var selectedValue, i, l;
@@ -102,7 +102,7 @@ function updateOptions() {
102
var ReactDOMSelect = ReactCompositeComponent.createClass({
103
displayName: 'ReactDOMSelect',
104
105
- mixins: [LinkedValueMixin, AutoFocusMixin],
105
+ mixins: [AutoFocusMixin, LinkedValueUtils.Mixin],
106
107
propTypes: {
108
defaultValue: selectValueType,
@@ -142,10 +142,10 @@ var ReactDOMSelect = ReactCompositeComponent.createClass({
142
143
_handleChange: function(event) {
144
var returnValue;
145
- var onChange = this.getOnChange();
145
+ var onChange = LinkedValueUtils.getOnChange(this);
146
if (onChange) {
147
this._isChanging = true;
148
- returnValue = onChange(event);
148
+ returnValue = onChange.call(this, event);
149
this._isChanging = false;
150
}
151
src/dom/components/ReactDOMTextarea.js
+8
-8
@@ -18,9 +18,9 @@
18
19
"use strict";
20
21
-var DOMPropertyOperations = require('DOMPropertyOperations');
22
-var LinkedValueMixin = require('LinkedValueMixin');
21
var AutoFocusMixin = require('AutoFocusMixin');
22
+var DOMPropertyOperations = require('DOMPropertyOperations');
23
+var LinkedValueUtils = require('LinkedValueUtils');
24
var ReactCompositeComponent = require('ReactCompositeComponent');
25
var ReactDOM = require('ReactDOM');
26
@@ -48,7 +48,7 @@ var textarea = ReactDOM.textarea;
48
var ReactDOMTextarea = ReactCompositeComponent.createClass({
49
displayName: 'ReactDOMTextarea',
50
51
- mixins: [LinkedValueMixin, AutoFocusMixin],
51
+ mixins: [AutoFocusMixin, LinkedValueUtils.Mixin],
52
53
getInitialState: function() {
54
var defaultValue = this.props.defaultValue;
@@ -78,7 +78,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
78
if (defaultValue == null) {
79
defaultValue = '';
80
}
81
- var value = this.getValue();
81
+ var value = LinkedValueUtils.getValue(this);
82
return {
83
// We save the initial value so that `ReactDOMComponent` doesn't update
84
// `textContent` (unnecessary since we update value).
@@ -97,7 +97,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
97
render: function() {
98
// Clone `this.props` so we don't mutate the input.
99
var props = merge(this.props);
100
- var value = this.getValue();
100
+ var value = LinkedValueUtils.getValue(this);
101
102
invariant(
103
props.dangerouslySetInnerHTML == null,
@@ -114,7 +114,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
114
},
115
116
componentDidUpdate: function(prevProps, prevState, prevContext) {
117
- var value = this.getValue();
117
+ var value = LinkedValueUtils.getValue(this);
118
if (value != null) {
119
var rootNode = this.getDOMNode();
120
// Cast `value` to a string to ensure the value is set correctly. While
@@ -125,10 +125,10 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
125
126
_handleChange: function(event) {
127
var returnValue;
128
- var onChange = this.getOnChange();
128
+ var onChange = LinkedValueUtils.getOnChange(this);
129
if (onChange) {
130
this._isChanging = true;
131
- returnValue = onChange(event);
131
+ returnValue = onChange.call(this, event);
132
this._isChanging = false;
133
}
134
this.setState({value: event.target.value});