Skip to content

Commit

Permalink
Move dependencies to peer. Rename files. Add classNames.
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
joemcbride committed May 18, 2015
1 parent ca9b95c commit a462412
Show file tree
Hide file tree
Showing 13 changed files with 87 additions and 77 deletions.
17 changes: 0 additions & 17 deletions lib/CodeMirror.client.js

This file was deleted.

10 changes: 0 additions & 10 deletions lib/CodeMirror.js

This file was deleted.

22 changes: 8 additions & 14 deletions lib/CodeMirrorEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeMirror = require('./CodeMirror');
var _CodeMirrorSettings = require('./CodeMirrorSettings');

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

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

if (_is_mobile.IS_MOBILE || _CodeMirror.IS_NODE) {
if (_is_mobile.IS_MOBILE || !_CodeMirrorSettings.IS_BROWSER) {
return;
}

this.editor = _CodeMirror.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
this.editor = _CodeMirrorSettings.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
mode: this.props.mode,
lineNumbers: this.props.lineNumbers,
lineWrapping: false,
Expand All @@ -54,13 +54,6 @@ var CodeMirrorEditor = (function (_React$Component) {
});
this.editor.on('change', this.handleChange);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (this.props.readOnly) {
this.editor.setValue(this.props.text);
}
}
}, {
key: 'handleChange',
value: function handleChange() {
Expand All @@ -87,7 +80,7 @@ var CodeMirrorEditor = (function (_React$Component) {

return _react2['default'].createElement(
'div',
{ style: this.props.style, className: this.props.className },
{ className: this.props.className },
editor
);
}
Expand All @@ -96,20 +89,21 @@ var CodeMirrorEditor = (function (_React$Component) {
return CodeMirrorEditor;
})(_react2['default'].Component);

CodeMirrorEditor.PropTypes = {
CodeMirrorEditor.propTypes = {
text: _react2['default'].PropTypes.string,
theme: _react2['default'].PropTypes.string,
mode: _react2['default'].PropTypes.string,
lineNumbers: _react2['default'].PropTypes.bool,
className: _react2['default'].PropTypes.className,
className: _react2['default'].PropTypes.string,
readOnly: _react2['default'].PropTypes.bool,
onChange: _react2['default'].PropTypes.func
};

CodeMirrorEditor.defaultProps = {
mode: 'javascript',
theme: 'solarized light',
lineNumbers: false
lineNumbers: false,
readOnly: false
};

exports['default'] = CodeMirrorEditor;
Expand Down
18 changes: 18 additions & 0 deletions lib/CodeMirrorSettings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
});
var IS_BROWSER = typeof window !== 'undefined';

var CodeMirror = {};

if (IS_BROWSER) {
CodeMirror = require('codemirror');
}

exports['default'] = {
IS_BROWSER: IS_BROWSER,
CodeMirror: CodeMirror
};
module.exports = exports['default'];
22 changes: 18 additions & 4 deletions lib/Playground.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var React = modReact['default'];

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

console.log(error, transformed);

return React.createElement(
'div',
{ className: 'code-error' },
Expand Down Expand Up @@ -143,11 +143,23 @@ var Playground = (function (_React$Component) {
codeToggleClasses['code-toggle'] = true;
codeToggleClasses.expanded = this.state.showEditor;

if (this.props.toggleClass) {
codeToggleClasses[this.props.toggleClass] = true;
}

var toggleText = this.state.showEditor ? 'Hide Code' : 'Show Code';

var playgroundClasses = {};
playgroundClasses.playground = true;
playgroundClasses.mobile = _is_mobile.IS_MOBILE;

if (this.props.className) {
playgroundClasses[this.props.className] = true;
}

return React.createElement(
'div',
{ className: 'playground' },
{ className: _classnames2['default'](playgroundClasses) },
React.createElement(
'div',
{ className: _classnames2['default'](exampleClasses) },
Expand All @@ -174,7 +186,9 @@ Playground.propTypes = {
displayError: React.PropTypes.func,
theme: React.PropTypes.string,
mode: React.PropTypes.string,
lineNumbers: React.PropTypes.bool
lineNumbers: React.PropTypes.bool,
className: React.PropTypes.string,
toggleClass: React.PropTypes.string
};

Playground.defaultProps = {
Expand Down
2 changes: 1 addition & 1 deletion lib/is_mobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ Object.defineProperty(exports, '__esModule', {
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));

exports['default'] = {
IS_MOBILE: IS_MOBILE
IS_MOBILE: IS_MOBILE != null ? true : false
};
module.exports = exports['default'];
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-playground",
"version": "0.0.1",
"version": "0.0.2",
"description": "React Playground",
"main": "lib/index.js",
"scripts": {
Expand All @@ -15,6 +15,10 @@
],
"author": "Joe McBride",
"license": "MIT",
"peerDependencies": {
"codemirror": ">=5.2.0",
"react": ">=0.13.2"
},
"devDependencies": {
"babel": "^5.2.17",
"babel-core": "^5.2.17",
Expand All @@ -23,7 +27,6 @@
"child-process-promise": "^1.0.2",
"classnames": "^2.1.1",
"client-loader": "0.0.1",
"codemirror": "^5.2.0",
"colors": "^1.1.0",
"css-loader": "^0.12.0",
"eslint": "^0.20.0",
Expand All @@ -40,7 +43,6 @@
"lodash": "^3.8.0",
"portfinder": "^0.4.0",
"raw-loader": "^0.5.1",
"react": "^0.13.2",
"rimraf": "^2.3.3",
"style-loader": "^0.12.2",
"webpack": "^1.8.11",
Expand Down
6 changes: 0 additions & 6 deletions src/CodeMirror.client.js

This file was deleted.

4 changes: 0 additions & 4 deletions src/CodeMirror.js

This file was deleted.

19 changes: 7 additions & 12 deletions src/CodeMirrorEditor.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {CodeMirror, IS_NODE} from './CodeMirror';
import {CodeMirror, IS_BROWSER} from './CodeMirrorSettings';
import {IS_MOBILE} from './is_mobile';

class CodeMirrorEditor extends React.Component {
Expand All @@ -12,7 +12,7 @@ class CodeMirrorEditor extends React.Component {

componentDidMount() {

if (IS_MOBILE || IS_NODE) {
if (IS_MOBILE || !IS_BROWSER) {
return;
}

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

componentDidUpdate() {
if (this.props.readOnly) {
this.editor.setValue(this.props.text);
}
}

handleChange() {
if (!this.props.readOnly && this.props.onChange) {
this.props.onChange(this.editor.getValue());
Expand All @@ -52,27 +46,28 @@ class CodeMirrorEditor extends React.Component {
}

return (
<div style={this.props.style} className={this.props.className}>
<div className={this.props.className}>
{editor}
</div>
);
}
}

CodeMirrorEditor.PropTypes = {
CodeMirrorEditor.propTypes = {
text: React.PropTypes.string,
theme: React.PropTypes.string,
mode: React.PropTypes.string,
lineNumbers: React.PropTypes.bool,
className: React.PropTypes.className,
className: React.PropTypes.string,
readOnly: React.PropTypes.bool,
onChange: React.PropTypes.func
};

CodeMirrorEditor.defaultProps = {
mode: 'javascript',
theme: 'solarized light',
lineNumbers: false
lineNumbers: false,
readOnly: false
};

export default CodeMirrorEditor;
12 changes: 12 additions & 0 deletions src/CodeMirrorSettings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
let IS_BROWSER = typeof window !== 'undefined';

let CodeMirror = {};

if (IS_BROWSER) {
CodeMirror = require('codemirror');
}

export default {
IS_BROWSER: IS_BROWSER,
CodeMirror: CodeMirror
};
22 changes: 17 additions & 5 deletions src/Playground.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as modReact from 'react';
import CodeMirrorEditor from './CodeMirrorEditor';
import classNames from 'classnames';
import {IS_MOBILE} from './is_mobile';

const React = modReact.default;


class Playground extends React.Component {

constructor(props) {
Expand All @@ -31,8 +31,6 @@ class Playground extends React.Component {
return this.props.displayError(error, transformed);
} else {

console.log(error, transformed);

return (
<div className="code-error">
<h4>Oh snap! You got an error!</h4>
Expand Down Expand Up @@ -101,10 +99,22 @@ class Playground extends React.Component {
codeToggleClasses['code-toggle'] = true;
codeToggleClasses.expanded = this.state.showEditor;

if (this.props.toggleClass) {
codeToggleClasses[this.props.toggleClass] = true;
}

let toggleText = this.state.showEditor ? 'Hide Code' : 'Show Code';

let playgroundClasses = {};
playgroundClasses.playground = true;
playgroundClasses.mobile = IS_MOBILE;

if (this.props.className) {
playgroundClasses[this.props.className] = true;
}

return (
<div className="playground">
<div className={classNames(playgroundClasses)}>
<div className={classNames(exampleClasses)}>
{this.compile()}
</div>
Expand All @@ -123,7 +133,9 @@ Playground.propTypes = {
displayError: React.PropTypes.func,
theme: React.PropTypes.string,
mode: React.PropTypes.string,
lineNumbers: React.PropTypes.bool
lineNumbers: React.PropTypes.bool,
className: React.PropTypes.string,
toggleClass: React.PropTypes.string
};

Playground.defaultProps = {
Expand Down
2 changes: 1 addition & 1 deletion src/is_mobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ const IS_MOBILE = typeof navigator !== 'undefined' && (
);

export default {
IS_MOBILE: IS_MOBILE
IS_MOBILE: IS_MOBILE != null ? true : false
};

0 comments on commit a462412

Please sign in to comment.