Skip to content

Commit a462412

Browse files
joemcbridejoemcbride
committed
Move dependencies to peer. Rename files. Add classNames.
* Rename CodeMirror to CodeMirrorSettings. * Simplify checking for node. * Add a number of places to provide a custom className. * Move react and codemirror to peer dependencies.
1 parent ca9b95c commit a462412

13 files changed

+87
-77
lines changed

‎lib/CodeMirror.client.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎lib/CodeMirror.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎lib/CodeMirrorEditor.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ var _react = require('react');
2020

2121
var _react2 = _interopRequireDefault(_react);
2222

23-
var _CodeMirror = require('./CodeMirror');
23+
var _CodeMirrorSettings = require('./CodeMirrorSettings');
2424

2525
var _is_mobile = require('./is_mobile');
2626

@@ -39,11 +39,11 @@ var CodeMirrorEditor = (function (_React$Component) {
3939
key: 'componentDidMount',
4040
value: function componentDidMount() {
4141

42-
if (_is_mobile.IS_MOBILE || _CodeMirror.IS_NODE) {
42+
if (_is_mobile.IS_MOBILE || !_CodeMirrorSettings.IS_BROWSER) {
4343
return;
4444
}
4545

46-
this.editor = _CodeMirror.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
46+
this.editor = _CodeMirrorSettings.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
4747
mode: this.props.mode,
4848
lineNumbers: this.props.lineNumbers,
4949
lineWrapping: false,
@@ -54,13 +54,6 @@ var CodeMirrorEditor = (function (_React$Component) {
5454
});
5555
this.editor.on('change', this.handleChange);
5656
}
57-
}, {
58-
key: 'componentDidUpdate',
59-
value: function componentDidUpdate() {
60-
if (this.props.readOnly) {
61-
this.editor.setValue(this.props.text);
62-
}
63-
}
6457
}, {
6558
key: 'handleChange',
6659
value: function handleChange() {
@@ -87,7 +80,7 @@ var CodeMirrorEditor = (function (_React$Component) {
8780

8881
return _react2['default'].createElement(
8982
'div',
90-
{ style: this.props.style, className: this.props.className },
83+
{ className: this.props.className },
9184
editor
9285
);
9386
}
@@ -96,20 +89,21 @@ var CodeMirrorEditor = (function (_React$Component) {
9689
return CodeMirrorEditor;
9790
})(_react2['default'].Component);
9891

99-
CodeMirrorEditor.PropTypes = {
92+
CodeMirrorEditor.propTypes = {
10093
text: _react2['default'].PropTypes.string,
10194
theme: _react2['default'].PropTypes.string,
10295
mode: _react2['default'].PropTypes.string,
10396
lineNumbers: _react2['default'].PropTypes.bool,
104-
className: _react2['default'].PropTypes.className,
97+
className: _react2['default'].PropTypes.string,
10598
readOnly: _react2['default'].PropTypes.bool,
10699
onChange: _react2['default'].PropTypes.func
107100
};
108101

109102
CodeMirrorEditor.defaultProps = {
110103
mode: 'javascript',
111104
theme: 'solarized light',
112-
lineNumbers: false
105+
lineNumbers: false,
106+
readOnly: false
113107
};
114108

115109
exports['default'] = CodeMirrorEditor;

‎lib/CodeMirrorSettings.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', {
4+
value: true
5+
});
6+
var IS_BROWSER = typeof window !== 'undefined';
7+
8+
var CodeMirror = {};
9+
10+
if (IS_BROWSER) {
11+
CodeMirror = require('codemirror');
12+
}
13+
14+
exports['default'] = {
15+
IS_BROWSER: IS_BROWSER,
16+
CodeMirror: CodeMirror
17+
};
18+
module.exports = exports['default'];

‎lib/Playground.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ var _classnames = require('classnames');
3030

3131
var _classnames2 = _interopRequireDefault(_classnames);
3232

33+
var _is_mobile = require('./is_mobile');
34+
3335
var React = modReact['default'];
3436

3537
var Playground = (function (_React$Component) {
@@ -64,8 +66,6 @@ var Playground = (function (_React$Component) {
6466
return this.props.displayError(error, transformed);
6567
} else {
6668

67-
console.log(error, transformed);
68-
6969
return React.createElement(
7070
'div',
7171
{ className: 'code-error' },
@@ -143,11 +143,23 @@ var Playground = (function (_React$Component) {
143143
codeToggleClasses['code-toggle'] = true;
144144
codeToggleClasses.expanded = this.state.showEditor;
145145

146+
if (this.props.toggleClass) {
147+
codeToggleClasses[this.props.toggleClass] = true;
148+
}
149+
146150
var toggleText = this.state.showEditor ? 'Hide Code' : 'Show Code';
147151

152+
var playgroundClasses = {};
153+
playgroundClasses.playground = true;
154+
playgroundClasses.mobile = _is_mobile.IS_MOBILE;
155+
156+
if (this.props.className) {
157+
playgroundClasses[this.props.className] = true;
158+
}
159+
148160
return React.createElement(
149161
'div',
150-
{ className: 'playground' },
162+
{ className: _classnames2['default'](playgroundClasses) },
151163
React.createElement(
152164
'div',
153165
{ className: _classnames2['default'](exampleClasses) },
@@ -174,7 +186,9 @@ Playground.propTypes = {
174186
displayError: React.PropTypes.func,
175187
theme: React.PropTypes.string,
176188
mode: React.PropTypes.string,
177-
lineNumbers: React.PropTypes.bool
189+
lineNumbers: React.PropTypes.bool,
190+
className: React.PropTypes.string,
191+
toggleClass: React.PropTypes.string
178192
};
179193

180194
Playground.defaultProps = {

‎lib/is_mobile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ Object.defineProperty(exports, '__esModule', {
77
var IS_MOBILE = typeof navigator !== 'undefined' && (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i));
88

99
exports['default'] = {
10-
IS_MOBILE: IS_MOBILE
10+
IS_MOBILE: IS_MOBILE != null ? true : false
1111
};
1212
module.exports = exports['default'];

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-playground",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "React Playground",
55
"main": "lib/index.js",
66
"scripts": {
@@ -15,6 +15,10 @@
1515
],
1616
"author": "Joe McBride",
1717
"license": "MIT",
18+
"peerDependencies": {
19+
"codemirror": ">=5.2.0",
20+
"react": ">=0.13.2"
21+
},
1822
"devDependencies": {
1923
"babel": "^5.2.17",
2024
"babel-core": "^5.2.17",
@@ -23,7 +27,6 @@
2327
"child-process-promise": "^1.0.2",
2428
"classnames": "^2.1.1",
2529
"client-loader": "0.0.1",
26-
"codemirror": "^5.2.0",
2730
"colors": "^1.1.0",
2831
"css-loader": "^0.12.0",
2932
"eslint": "^0.20.0",
@@ -40,7 +43,6 @@
4043
"lodash": "^3.8.0",
4144
"portfinder": "^0.4.0",
4245
"raw-loader": "^0.5.1",
43-
"react": "^0.13.2",
4446
"rimraf": "^2.3.3",
4547
"style-loader": "^0.12.2",
4648
"webpack": "^1.8.11",

‎src/CodeMirror.client.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/CodeMirror.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/CodeMirrorEditor.js

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {CodeMirror, IS_NODE} from './CodeMirror';
2+
import {CodeMirror, IS_BROWSER} from './CodeMirrorSettings';
33
import {IS_MOBILE} from './is_mobile';
44

55
class CodeMirrorEditor extends React.Component {
@@ -12,7 +12,7 @@ class CodeMirrorEditor extends React.Component {
1212

1313
componentDidMount() {
1414

15-
if (IS_MOBILE || IS_NODE) {
15+
if (IS_MOBILE || !IS_BROWSER) {
1616
return;
1717
}
1818

@@ -28,12 +28,6 @@ class CodeMirrorEditor extends React.Component {
2828
this.editor.on('change', this.handleChange);
2929
}
3030

31-
componentDidUpdate() {
32-
if (this.props.readOnly) {
33-
this.editor.setValue(this.props.text);
34-
}
35-
}
36-
3731
handleChange() {
3832
if (!this.props.readOnly && this.props.onChange) {
3933
this.props.onChange(this.editor.getValue());
@@ -52,27 +46,28 @@ class CodeMirrorEditor extends React.Component {
5246
}
5347

5448
return (
55-
<div style={this.props.style} className={this.props.className}>
49+
<div className={this.props.className}>
5650
{editor}
5751
</div>
5852
);
5953
}
6054
}
6155

62-
CodeMirrorEditor.PropTypes = {
56+
CodeMirrorEditor.propTypes = {
6357
text: React.PropTypes.string,
6458
theme: React.PropTypes.string,
6559
mode: React.PropTypes.string,
6660
lineNumbers: React.PropTypes.bool,
67-
className: React.PropTypes.className,
61+
className: React.PropTypes.string,
6862
readOnly: React.PropTypes.bool,
6963
onChange: React.PropTypes.func
7064
};
7165

7266
CodeMirrorEditor.defaultProps = {
7367
mode: 'javascript',
7468
theme: 'solarized light',
75-
lineNumbers: false
69+
lineNumbers: false,
70+
readOnly: false
7671
};
7772

7873
export default CodeMirrorEditor;

0 commit comments

Comments
 (0)