The library for web and native user interfaces.
Fix live editor on mobile devices
petehunt committed
May 29, 2013 at 13:24 UTC
e20747ef9bd206df6d03cc4c2ccb074eadf4a8df
2 files changed
+25
-3
docs/_config.yml
+2
-2
@@ -1,6 +1,7 @@
1
---
2
-markdown: redcarpet
2
name: React
3
+markdown: redcarpet
4
+baseurl: /react
5
react_version: 0.3.0
6
redcarpet:
7
extensions:
@@ -11,4 +12,3 @@ exclude:
12
- Gemfile.lock
13
- README.md
14
- Rakefile
14
-baseurl: /react
docs/_js/live_editor.js
+23
-1
@@ -2,8 +2,22 @@
2
* @jsx React.DOM
3
*/
4
5
+
6
+var IS_MOBILE = (
7
+ navigator.userAgent.match(/Android/i)
8
+ || navigator.userAgent.match(/webOS/i)
9
+ || navigator.userAgent.match(/iPhone/i)
10
+ || navigator.userAgent.match(/iPad/i)
11
+ || navigator.userAgent.match(/iPod/i)
12
+ || navigator.userAgent.match(/BlackBerry/i)
13
+ || navigator.userAgent.match(/Windows Phone/i)
14
+);
15
+
16
var CodeMirrorEditor = React.createClass({
17
componentDidMount: function(root) {
18
+ if (IS_MOBILE) {
19
+ return;
20
+ }
21
this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
22
mode: 'javascript',
23
lineNumbers: false,
@@ -21,9 +35,17 @@ var CodeMirrorEditor = React.createClass({
35
},
36
render: function() {
37
// wrap in a div to fully contain CodeMirror
38
+ var editor;
39
+
40
+ if (IS_MOBILE) {
41
+ editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
42
+ } else {
43
+ editor = <textarea ref="editor">{this.props.codeText}</textarea>;
44
+ }
45
+
46
return (
47
<div class={this.props.className}>
26
- <textarea ref="editor">{this.props.codeText}</textarea>
48
+ {editor}
49
</div>
50
);
51
}