2015-10-30 22:30:56 +03:00
|
|
|
import React from 'react';
|
2017-04-17 17:14:17 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2015-10-30 22:30:56 +03:00
|
|
|
import Editor from '../../../editor';
|
|
|
|
import Preview from '../../../preview';
|
|
|
|
import codeText from '../modules/examples/example.txt';
|
2017-01-05 04:42:18 +03:00
|
|
|
import style from './playground.css';
|
2015-10-30 22:30:56 +03:00
|
|
|
|
|
|
|
class Playground extends React.Component {
|
|
|
|
static propTypes = {
|
2017-04-17 17:14:17 +03:00
|
|
|
className: PropTypes.string
|
2015-10-30 22:30:56 +03:00
|
|
|
};
|
|
|
|
|
2015-10-31 01:03:00 +03:00
|
|
|
state = {
|
|
|
|
code: codeText
|
|
|
|
};
|
2015-10-30 22:30:56 +03:00
|
|
|
|
|
|
|
handleCodeChange = (code) => {
|
2017-01-26 20:05:32 +03:00
|
|
|
this.setState({ code });
|
2015-10-30 22:30:56 +03:00
|
|
|
};
|
|
|
|
|
2015-11-23 00:19:11 +03:00
|
|
|
loadCode (code) {
|
|
|
|
this.refs.editor.setCode(code);
|
|
|
|
}
|
|
|
|
|
2015-10-30 22:30:56 +03:00
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<aside className={this.props.className}>
|
2015-10-31 20:54:55 +03:00
|
|
|
<Editor
|
2017-01-26 20:05:32 +03:00
|
|
|
ref="editor"
|
2015-10-31 20:54:55 +03:00
|
|
|
className={style.editor}
|
|
|
|
codeText={this.state.code}
|
|
|
|
onChange={this.handleCodeChange}
|
|
|
|
/>
|
|
|
|
<Preview
|
|
|
|
className={style.preview}
|
|
|
|
code={this.state.code}
|
|
|
|
/>
|
2015-10-30 22:30:56 +03:00
|
|
|
</aside>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Playground;
|