diff options
Diffstat (limited to 'web/src/js/components/flowview/messages.js')
| -rw-r--r-- | web/src/js/components/flowview/messages.js | 196 |
1 files changed, 43 insertions, 153 deletions
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js index cb166026..fa75efbe 100644 --- a/web/src/js/components/flowview/messages.js +++ b/web/src/js/components/flowview/messages.js @@ -6,6 +6,7 @@ var actions = require("../../actions.js"); var flowutils = require("../../flow/utils.js"); var utils = require("../../utils.js"); var ContentView = require("./contentview.js"); +var ValueEditor = require("../editor.js").ValueEditor; var Headers = React.createClass({ propTypes: { @@ -63,16 +64,16 @@ var Headers = React.createClass({ var rows = this.props.message.headers.map(function (header, i) { - var kEdit = <HeaderInlineInput + var kEdit = <HeaderEditor ref={i + "-key"} content={header[0]} - onChange={this.onChange.bind(null, i, 0)} + onDone={this.onChange.bind(null, i, 0)} onRemove={this.onRemove.bind(null, i, 0)} onTab={this.onTab.bind(null, i, 0)}/>; - var vEdit = <HeaderInlineInput + var vEdit = <HeaderEditor ref={i + "-value"} content={header[1]} - onChange={this.onChange.bind(null, i, 1)} + onDone={this.onChange.bind(null, i, 1)} onRemove={this.onRemove.bind(null, i, 1)} onTab={this.onTab.bind(null, i, 1)}/>; return ( @@ -92,88 +93,9 @@ var Headers = React.createClass({ } }); - -var InlineInput = React.createClass({ - mixins: [common.ChildFocus], - propTypes: { - content: React.PropTypes.string.isRequired, //must be string to match strict equality. - onChange: React.PropTypes.func.isRequired, - }, - getInitialState: function () { - return { - editable: false - }; - }, +var HeaderEditor = React.createClass({ render: function () { - var Tag = this.props.tag || "span"; - var className = "inline-input " + (this.props.className || ""); - var html = {__html: _.escape(this.props.content)}; - return <Tag - {...this.props} - tabIndex="0" - className={className} - contentEditable={this.state.editable || undefined} - onInput={this.onInput} - onFocus={this.onFocus} - onBlur={this.onBlur} - onKeyDown={this.onKeyDown} - dangerouslySetInnerHTML={html} - />; - }, - onKeyDown: function (e) { - e.stopPropagation(); - switch (e.keyCode) { - case utils.Key.ESC: - this.blur(); - break; - case utils.Key.ENTER: - e.preventDefault(); - if (!e.ctrlKey) { - this.blur(); - } else { - this.props.onDone && this.props.onDone(); - } - break; - default: - this.props.onKeyDown && this.props.onKeyDown(e); - break; - } - }, - blur: function () { - this.getDOMNode().blur(); - window.getSelection().removeAllRanges(); - this.context.returnFocus && this.context.returnFocus(); - }, - focus: function () { - React.findDOMNode(this).focus(); - var range = document.createRange(); - range.selectNodeContents(this.getDOMNode()); - var sel = window.getSelection(); - sel.removeAllRanges(); - sel.addRange(range); - }, - onFocus: function () { - this.setState({editable: true}, this.focus); - }, - onBlur: function (e) { - this.setState({editable: false}); - this.handleChange(); - this.props.onDone && this.props.onDone(); - }, - onInput: function () { - this.handleChange(); - }, - handleChange: function () { - var content = this.getDOMNode().textContent; - if (content !== this.props.content) { - this.props.onChange(content); - } - } -}); - -var HeaderInlineInput = React.createClass({ - render: function () { - return <InlineInput ref="input" {...this.props} onKeyDown={this.onKeyDown}/>; + return <ValueEditor ref="input" {...this.props} onKeyDown={this.onKeyDown} inline/>; }, focus: function () { this.getDOMNode().focus(); @@ -195,65 +117,6 @@ var HeaderInlineInput = React.createClass({ } }); -var ValidateInlineInput = React.createClass({ - propTypes: { - onChange: React.PropTypes.func.isRequired, - isValid: React.PropTypes.func.isRequired, - immediate: React.PropTypes.bool - }, - getInitialState: function () { - return { - content: this.props.content, - originalContent: this.props.content - }; - }, - focus: function () { - this.getDOMNode().focus(); - }, - onChange: function (val) { - this.setState({ - content: val - }); - if (this.props.immediate && val !== this.state.originalContent && this.props.isValid(val)) { - this.props.onChange(val); - } - }, - onDone: function () { - if (this.state.content === this.state.originalContent) { - return true; - } - if (this.props.isValid(this.state.content)) { - this.props.onChange(this.state.content); - } else { - this.setState({ - content: this.state.originalContent - }); - } - }, - componentWillReceiveProps: function (nextProps) { - if (nextProps.content !== this.state.content) { - this.setState({ - content: nextProps.content, - originalContent: nextProps.content - }) - } - }, - render: function () { - var className = this.props.className || ""; - if (this.props.isValid(this.state.content)) { - className += " has-success"; - } else { - className += " has-warning" - } - return <InlineInput {...this.props} - className={className} - content={this.state.content} - onChange={this.onChange} - onDone={this.onDone} - />; - } -}); - var RequestLine = React.createClass({ render: function () { var flow = this.props.flow; @@ -261,11 +124,25 @@ var RequestLine = React.createClass({ var httpver = "HTTP/" + flow.request.httpversion.join("."); return <div className="first-line request-line"> - <InlineInput ref="method" content={flow.request.method} onChange={this.onMethodChange}/> + <ValueEditor + ref="method" + content={flow.request.method} + onDone={this.onMethodChange} + inline/> - <ValidateInlineInput ref="url" content={url} onChange={this.onUrlChange} isValid={this.isValidUrl} /> + <ValueEditor + ref="url" + content={url} + onDone={this.onUrlChange} + isValid={this.isValidUrl} + inline/> - <ValidateInlineInput ref="httpVersion" immediate content={httpver} onChange={this.onHttpVersionChange} isValid={flowutils.isValidHttpVersion} /> + <ValueEditor + ref="httpVersion" + content={httpver} + onDone={this.onHttpVersionChange} + isValid={flowutils.isValidHttpVersion} + inline/> </div> }, isValidUrl: function (url) { @@ -300,12 +177,25 @@ var ResponseLine = React.createClass({ var flow = this.props.flow; var httpver = "HTTP/" + flow.response.httpversion.join("."); return <div className="first-line response-line"> - <ValidateInlineInput ref="httpVersion" immediate content={httpver} onChange={this.onHttpVersionChange} isValid={flowutils.isValidHttpVersion} /> + <ValueEditor + ref="httpVersion" + content={httpver} + onDone={this.onHttpVersionChange} + isValid={flowutils.isValidHttpVersion} + inline/> - <ValidateInlineInput ref="code" immediate content={flow.response.code + ""} onChange={this.onCodeChange} isValid={this.isValidCode} /> + <ValueEditor + ref="code" + content={flow.response.code + ""} + onDone={this.onCodeChange} + isValid={this.isValidCode} + inline/> - <InlineInput ref="msg" content={flow.response.msg} onChange={this.onMsgChange}/> - + <ValueEditor + ref="msg" + content={flow.response.msg} + onDone={this.onMsgChange} + inline/> </div>; }, isValidCode: function (code) { @@ -361,7 +251,7 @@ var Request = React.createClass({ this.refs.headers.edit(); break; default: - throw "Unimplemented: "+ k; + throw "Unimplemented: " + k; } }, onHeaderChange: function (nextHeaders) { @@ -401,7 +291,7 @@ var Response = React.createClass({ this.refs.headers.edit(); break; default: - throw "Unimplemented: "+ k; + throw "Unimplemented: " + k; } }, onHeaderChange: function (nextHeaders) { |