diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index e7a12d9d9..71f42ec06 100644
--- a/src/components/prompt/prompt.css
+++ b/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;
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index d2411468b..84032dd0c 100644
--- a/src/components/prompt/prompt.jsx
+++ b/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 (
-
-
-
- {this.props.label}
-
-
- (this.input = el)}
- onKeyPress={this.handleKeyPress}
- />
-
-
-
-
-
-
-
- );
- }
-}
+const PromptComponent = props => (
+
+
+ {props.title}
+
+
+
+ {props.label}
+
+
+
+
+
+
+
+
+
+
+);
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 = {
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index e319c920f..ecd816204 100644
--- a/src/containers/blocks.jsx
+++ b/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 {
diff --git a/src/containers/prompt.jsx b/src/containers/prompt.jsx
new file mode 100644
index 000000000..63354e35c
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+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;