Split prompt into container and component

src/components/prompt/prompt.css

@@ -25,6 +25,16 @@
     overflow: hidden;
 }
 
+.header {
+    font-size: 1.25rem;
+    height: 3.25rem;
+    background-color: $blue;
+    font-weight: 500;
+    color: #fff;
+    text-align: center;
+    line-height: 3.25rem;
+}
+
 .body {
     background: $ui-pane-gray;
     padding: 1.5rem 2.25rem;

src/components/prompt/prompt.jsx

@@ -1,70 +1,59 @@
 const React = require('react');
 const ReactModal = require('react-modal');
-const bindAll = require('lodash.bindall');
 const Box = require('../box/box.jsx');
 
 const styles = require('./prompt.css');
 
-class PromptComponent extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleOk',
-            'handleKeyPress'
-        ]);
-    }
-    handleKeyPress (event) {
-        if (event.key === 'Enter') this.handleOk();
-    }
-    handleOk () {
-        this.props.onOk(this.input.value);
-    }
-    render () {
-        return (
-            <ReactModal
-                isOpen
-                className={styles.modalContent}
-                overlayClassName={styles.modalOverlay}
-                onRequestClose={this.props.onCancel}
-            >
-                <Box className={styles.body}>
-                    <Box className={styles.label}>
-                        {this.props.label}
-                    </Box>
-                    <Box>
-                        <input
-                            autoFocus
-                            className={styles.input}
-                            placeholder={this.props.placeholder}
-                            ref={el => (this.input = el)}
-                            onKeyPress={this.handleKeyPress}
-                        />
-                    </Box>
-                    <Box className={styles.buttonRow}>
-                        <button
-                            className={styles.cancelButton}
-                            onClick={this.props.onCancel}
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            className={styles.okButton}
-                            onClick={this.handleOk}
-                        >
-                            OK
-                        </button>
-                    </Box>
-                </Box>
-            </ReactModal>
-        );
-    }
-}
+const PromptComponent = props => (
+    <ReactModal
+        isOpen
+        className={styles.modalContent}
+        contentLabel={props.title}
+        overlayClassName={styles.modalOverlay}
+        onRequestClose={props.onCancel}
+    >
+        <Box className={styles.header}>
+            {props.title}
+        </Box>
+        <Box className={styles.body}>
+            <Box className={styles.label}>
+                {props.label}
+            </Box>
+            <Box>
+                <input
+                    autoFocus
+                    className={styles.input}
+                    placeholder={props.placeholder}
+                    onChange={props.onChange}
+                    onKeyPress={props.onKeyPress}
+                />
+            </Box>
+            <Box className={styles.buttonRow}>
+                <button
+                    className={styles.cancelButton}
+                    onClick={props.onCancel}
+                >
+                    Cancel
+                </button>
+                <button
+                    className={styles.okButton}
+                    onClick={props.onOk}
+                >
+                    OK
+                </button>
+            </Box>
+        </Box>
+    </ReactModal>
+);
 
 PromptComponent.propTypes = {
     label: React.PropTypes.string.isRequired,
     onCancel: React.PropTypes.func.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+    onKeyPress: React.PropTypes.func.isRequired,
     onOk: React.PropTypes.func.isRequired,
-    placeholder: React.PropTypes.string
+    placeholder: React.PropTypes.string,
+    title: React.PropTypes.string.isRequired
 };
 
 PromptComponent.defaultProps = {

src/containers/blocks.jsx

@@ -4,7 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const VMScratchBlocks = require('../lib/blocks');
 const VM = require('scratch-vm');
-const Prompt = require('../components/prompt/prompt.jsx');
+const Prompt = require('./prompt.jsx');
 const BlocksComponent = require('../components/blocks/blocks.jsx');
 
 const addFunctionListener = (object, property, callback) => {
@@ -23,6 +23,7 @@ class Blocks extends React.Component {
         bindAll(this, [
             'attachVM',
             'detachVM',
+            'handlePromptStart',
             'handlePromptCallback',
             'handlePromptClose',
             'onScriptGlowOn',
@@ -34,6 +35,7 @@ class Blocks extends React.Component {
             'onWorkspaceMetricsChange',
             'setBlocks'
         ]);
+        this.ScratchBlocks.prompt = this.handlePromptStart;
         this.state = {
             workspaceMetrics: {},
             prompt: null
@@ -43,10 +45,6 @@ class Blocks extends React.Component {
         const workspaceConfig = defaultsDeep({}, Blocks.defaultOptions, this.props.options);
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
 
-        this.ScratchBlocks.prompt = (message, defaultValue, callback) => {
-            this.setState({prompt: {callback, message, defaultValue}});
-        };
-
         // @todo change this when blockly supports UI events
         addFunctionListener(this.workspace, 'translate', this.onWorkspaceMetricsChange);
         addFunctionListener(this.workspace, 'zoom', this.onWorkspaceMetricsChange);
@@ -134,6 +132,9 @@ class Blocks extends React.Component {
     setBlocks (blocks) {
         this.blocks = blocks;
     }
+    handlePromptStart (message, defaultValue, callback) {
+        this.setState({prompt: {callback, message, defaultValue}});
+    }
     handlePromptCallback (data) {
         this.state.prompt.callback(data);
         this.handlePromptClose();
@@ -157,6 +158,7 @@ class Blocks extends React.Component {
                     <Prompt
                         label={this.state.prompt.message}
                         placeholder={this.state.prompt.defaultValue}
+                        title="New Variable" // @todo the only prompt is for new variables
                         onCancel={this.handlePromptClose}
                         onOk={this.handlePromptCallback}
                     />

src/containers/prompt.jsx

@@ -0,0 +1,57 @@
+const React = require('react');
+const bindAll = require('lodash.bindall');
+const PromptComponent = require('../components/prompt/prompt.jsx');
+
+class Prompt extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleOk',
+            'handleCancel',
+            'handleChange',
+            'handleKeyPress'
+        ]);
+        this.state = {
+            inputValue: ''
+        };
+    }
+    handleKeyPress (event) {
+        if (event.key === 'Enter') this.handleOk();
+    }
+    handleOk () {
+        this.props.onOk(this.state.inputValue);
+    }
+    handleCancel () {
+        this.props.onCancel();
+    }
+    handleChange (e) {
+        this.setState({inputValue: e.target.value});
+    }
+    render () {
+        return (
+            <PromptComponent
+                label={this.props.label}
+                placeholder={this.props.placeholder}
+                title={this.props.title}
+                onCancel={this.handleCancel}
+                onChange={this.handleChange}
+                onKeyPress={this.handleKeyPress}
+                onOk={this.handleOk}
+            />
+        );
+    }
+}
+
+Prompt.propTypes = {
+    label: React.PropTypes.string.isRequired,
+    onCancel: React.PropTypes.func.isRequired,
+    onOk: React.PropTypes.func.isRequired,
+    placeholder: React.PropTypes.string,
+    title: React.PropTypes.string.isRequired
+};
+
+PromptComponent.defaultProps = {
+    placeholder: '...'
+};
+
+module.exports = Prompt;