Skip to content

Commit fa42031

Browse files
author
Evan Jacobs
committed
Add compatibility layer for React <0.12
1 parent 077d2f8 commit fa42031

File tree

4 files changed

+286
-209
lines changed

4 files changed

+286
-209
lines changed

‎Gruntfile.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ module.exports = function (grunt) {
2020
},
2121
jshint: {
2222
options: {
23-
indent: 2,
2423
camelcase: true,
2524
nonew: true,
2625
plusplus: true,

‎dist/react-input-placeholder.js‎

Lines changed: 142 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -6,113 +6,152 @@ var isPlaceholderSupported = (typeof document !== 'undefined') && 'placeholder'
66
* NOTE: only supports "controlled" inputs (http://facebook.github.io/react/docs/forms.html#controlled-components)
77
*/
88
var createShimmedElement = function(React, elementConstructor, name) {
9-
return React.createClass({
10-
displayName: name,
11-
12-
componentWillMount: function() {
13-
this.needsPlaceholding = this.props.placeholder && !isPlaceholderSupported;
14-
},
15-
componentWillReceiveProps: function(props) {
16-
this.needsPlaceholding = props.placeholder && !isPlaceholderSupported;
17-
},
18-
19-
// this component supports valueLink or value/onChange.
20-
// borrowed from LinkedValueMixin.js
21-
getValue: function() {
22-
if (this.props.valueLink) {
23-
return this.props.valueLink.value;
24-
}
25-
return this.props.value;
26-
},
27-
getOnChange: function() {
28-
if (this.props.valueLink) {
29-
return this._handleLinkedValueChange;
30-
}
31-
return this.props.onChange;
32-
},
33-
_handleLinkedValueChange: function(e) {
34-
this.props.valueLink.requestChange(e.target.value);
35-
},
36-
37-
// keep track of focus
38-
onFocus: function(e) {
39-
this.hasFocus = true;
40-
this.setSelectionIfNeeded(e.target);
41-
if (this.props.onFocus) { return this.props.onFocus(e); }
42-
},
43-
onBlur: function(e) {
44-
this.hasFocus = false;
45-
if (this.props.onBlur) { return this.props.onBlur(e); }
46-
},
47-
48-
setSelectionIfNeeded: function(node) {
49-
// if placeholder is visible, ensure cursor is at start of input
50-
if (this.needsPlaceholding && this.hasFocus && this.isPlaceholding &&
51-
(node.selectionStart !== 0 || node.selectionEnd !== 0)) {
52-
node.setSelectionRange(0, 0);
53-
return true;
54-
}
55-
return false;
56-
},
57-
58-
onChange: function(e) {
59-
if (this.isPlaceholding) {
60-
// remove placeholder when text is added
61-
var value = e.target.value,
62-
i = value.indexOf(this.props.placeholder);
63-
if (i !== -1) {
64-
e.target.value = value.slice(0, i);
65-
}
66-
}
67-
var onChange = this.getOnChange();
68-
if (onChange) { return onChange(e); }
69-
},
70-
71-
onSelect: function(e) {
72-
if (this.isPlaceholding) {
73-
this.setSelectionIfNeeded(e.target);
74-
return false;
75-
} else if (this.props.onSelect) {
76-
return this.props.onSelect(e);
77-
}
78-
},
79-
80-
componentDidUpdate: function() {
81-
this.setSelectionIfNeeded(this.getDOMNode());
82-
},
83-
84-
render: function() {
85-
var element = React.createElement(elementConstructor, this.props, this.props.children);
86-
87-
if (this.needsPlaceholding) {
88-
// override valueLink and event handlers
89-
element.props.onFocus = this.onFocus;
90-
element.props.onBlur = this.onBlur;
91-
element.props.onChange = this.onChange;
92-
element.props.onSelect = this.onSelect;
93-
element.props.valueLink = undefined;
94-
95-
var value = this.getValue();
96-
if (!value) {
97-
this.isPlaceholding = true;
98-
value = this.props.placeholder;
99-
element.props.type = 'text';
100-
element.props.className += ' placeholder';
101-
} else {
102-
this.isPlaceholding = false;
9+
return React.createClass({
10+
displayName: name,
11+
12+
componentWillMount: function() {
13+
this.needsPlaceholding = this.props.placeholder && !isPlaceholderSupported;
14+
},
15+
componentWillReceiveProps: function(props) {
16+
this.needsPlaceholding = props.placeholder && !isPlaceholderSupported;
17+
},
18+
19+
// this component supports valueLink or value/onChange.
20+
// borrowed from LinkedValueMixin.js
21+
getValue: function() {
22+
if (this.props.valueLink) {
23+
return this.props.valueLink.value;
24+
}
25+
26+
return this.props.value;
27+
},
28+
29+
getOnChange: function() {
30+
if (this.props.valueLink) {
31+
return this._handleLinkedValueChange;
32+
}
33+
34+
return this.props.onChange;
35+
},
36+
37+
_handleLinkedValueChange: function(e) {
38+
this.props.valueLink.requestChange(e.target.value);
39+
},
40+
41+
// keep track of focus
42+
onFocus: function(e) {
43+
this.hasFocus = true;
44+
this.setSelectionIfNeeded(e.target);
45+
46+
if (this.props.onFocus) {
47+
return this.props.onFocus(e);
48+
}
49+
},
50+
onBlur: function(e) {
51+
this.hasFocus = false;
52+
53+
if (this.props.onBlur) {
54+
return this.props.onBlur(e);
55+
}
56+
},
57+
58+
setSelectionIfNeeded: function(node) {
59+
// if placeholder is visible, ensure cursor is at start of input
60+
if (this.needsPlaceholding &&
61+
this.hasFocus &&
62+
this.isPlaceholding &&
63+
(node.selectionStart !== 0 || node.selectionEnd !== 0)) {
64+
node.setSelectionRange(0, 0);
65+
66+
return true;
67+
}
68+
69+
return false;
70+
},
71+
72+
onChange: function(e) {
73+
var onChange = this.getOnChange();
74+
var value;
75+
var index;
76+
77+
if (this.isPlaceholding) {
78+
// remove placeholder when text is added
79+
value = e.target.value;
80+
index = value.indexOf(this.props.placeholder);
81+
82+
if (index !== -1) {
83+
e.target.value = value.slice(0, index);
84+
}
85+
}
86+
87+
if (onChange) {
88+
return onChange(e);
89+
}
90+
},
91+
92+
onSelect: function(e) {
93+
if (this.isPlaceholding) {
94+
this.setSelectionIfNeeded(e.target);
95+
96+
return false;
97+
} else if (this.props.onSelect) {
98+
return this.props.onSelect(e);
99+
}
100+
},
101+
102+
componentDidUpdate: function() {
103+
this.setSelectionIfNeeded(this.getDOMNode());
104+
},
105+
106+
render: function() {
107+
var element;
108+
var value;
109+
110+
if (!('createElement' in React)) { /* start -- to be removed in 2.0.0 */
111+
element = this.transferPropsTo(elementConstructor());
112+
} else { /* -- end */
113+
element = React.createElement(elementConstructor, this.props, this.props.children);
114+
}
115+
116+
if (this.needsPlaceholding) {
117+
// override valueLink and event handlers
118+
element.props.onFocus = this.onFocus;
119+
element.props.onBlur = this.onBlur;
120+
element.props.onChange = this.onChange;
121+
element.props.onSelect = this.onSelect;
122+
element.props.valueLink = undefined;
123+
124+
value = this.getValue();
125+
126+
if (!value) {
127+
this.isPlaceholding = true;
128+
value = this.props.placeholder;
129+
element.props.type = 'text';
130+
element.props.className += ' placeholder';
131+
} else {
132+
this.isPlaceholding = false;
133+
}
134+
135+
element.props.value = value;
136+
}
137+
138+
return element;
103139
}
104-
element.props.value = value;
105-
}
106-
return element;
107-
}
108-
});
140+
});
109141
};
110142

111143
module.exports = function(React) {
112-
return {
113-
Input: createShimmedElement(React, 'input', 'Input'),
114-
Textarea: createShimmedElement(React, 'textarea', 'Textarea')
115-
};
144+
if (!('createElement' in React)) { /* start -- to be removed in 2.0.0 */
145+
return {
146+
Input: createShimmedElement(React, React.DOM.input, 'Input'),
147+
Textarea: createShimmedElement(React, React.DOM.textarea, 'Textarea')
148+
};
149+
} else { /* -- end */
150+
return {
151+
Input: React.createFactory(createShimmedElement(React, 'input', 'Input')),
152+
Textarea: React.createFactory(createShimmedElement(React, 'textarea', 'Textarea'))
153+
};
154+
}
116155
};
117156

118157
},{}],2:[function(require,module,exports){

‎dist/react-input-placeholder.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)