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;