diff --git a/embark-ui/src/components/FiddleLayout.js b/embark-ui/src/components/FiddleLayout.js index aeb0d4b66..fc95306b0 100644 --- a/embark-ui/src/components/FiddleLayout.js +++ b/embark-ui/src/components/FiddleLayout.js @@ -4,21 +4,25 @@ import { Grid } from "tabler-react"; +import ApplicationPreviewContainer from '../containers/ApplicationPreviewContainer'; import TextEditorContainer from '../containers/TextEditorContainer'; import FileExplorerContainer from '../containers/FileExplorerContainer'; class FiddleLayout extends React.Component { render() { return ( - - - Fiddle - - - - - - + + + + Fiddle + + + + + + + + ); } } diff --git a/embark-ui/src/containers/ApplicationPreviewContainer.js b/embark-ui/src/containers/ApplicationPreviewContainer.js new file mode 100644 index 000000000..443e41810 --- /dev/null +++ b/embark-ui/src/containers/ApplicationPreviewContainer.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +class ApplicationPreviewContainer extends React.Component { + constructor(props) { + super(props); + this.state = { + previewUrl: props.previewUrl || 'http://localhost:8000' + }; + } + + render() { + return ( +
+
+ this.locationInput = input} value={this.props.previewUrl} /> +
+ +
+
+ +
+ ); + } + + handlePreviewChange(ev) { + try { + let url = ev.target.contentWindow.location.toString(); + this.setState({previewUrl: url}); + } catch(e) { + // Nothing here. + } + } + + handlePreviewGo() { + this.previewIframe.src = this.locationInput.value; + } +} + +ApplicationPreviewContainer.propTypes = { + previewUrl: PropTypes.string +}; + +export default ApplicationPreviewContainer; +