2016-11-07 20:24:38 +00:00
|
|
|
import React, {Component, PropTypes} from 'react';
|
|
|
|
import classnames from 'classnames';
|
2016-11-11 22:01:21 +00:00
|
|
|
import {Dropdown, DropdownButton, DropdownItem} from './base/dropdown';
|
2016-11-10 02:40:53 +00:00
|
|
|
import {METHODS, DEBOUNCE_MILLIS, isMac} from '../../common/constants';
|
2016-11-10 05:47:20 +00:00
|
|
|
import {trackEvent} from '../../analytics';
|
2016-11-07 20:24:38 +00:00
|
|
|
|
|
|
|
|
|
|
|
class RequestUrlBar extends Component {
|
|
|
|
_handleFormSubmit (e) {
|
|
|
|
e.preventDefault();
|
2016-11-16 17:18:39 +00:00
|
|
|
this.props.handleSend();
|
2016-11-07 20:24:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
_handleUrlChange (url) {
|
|
|
|
clearTimeout(this._timeout);
|
|
|
|
this._timeout = setTimeout(() => {
|
|
|
|
this.props.onUrlChange(url);
|
|
|
|
}, DEBOUNCE_MILLIS);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
this._bodyKeydownHandler = e => {
|
|
|
|
if (!this._input) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// meta+l
|
|
|
|
const metaPressed = isMac() ? e.metaKey : e.ctrlKey;
|
|
|
|
if (metaPressed && e.keyCode === 76) {
|
|
|
|
e.preventDefault();
|
|
|
|
this._input.focus();
|
|
|
|
this._input.select();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
document.body.addEventListener('keydown', this._bodyKeydownHandler);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
|
|
|
document.body.removeEventListener('keydown', this._bodyKeydownHandler);
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const {onMethodChange, url, method} = this.props;
|
|
|
|
return (
|
|
|
|
<div className="urlbar">
|
|
|
|
<Dropdown>
|
2016-11-11 22:01:21 +00:00
|
|
|
<DropdownButton type="button">
|
|
|
|
{method} <i className="fa fa-caret-down"/>
|
|
|
|
</DropdownButton>
|
|
|
|
{METHODS.map(method => (
|
2016-11-23 03:07:35 +00:00
|
|
|
<DropdownItem key={method} className={`method-${method}`} onClick={() => {
|
2016-11-11 22:01:21 +00:00
|
|
|
onMethodChange(method);
|
2016-11-23 03:07:35 +00:00
|
|
|
trackEvent('Request', 'Method Change', method);
|
2016-11-11 22:01:21 +00:00
|
|
|
}}>
|
|
|
|
{method}
|
|
|
|
</DropdownItem>
|
|
|
|
))}
|
2016-11-07 20:24:38 +00:00
|
|
|
</Dropdown>
|
|
|
|
<form onSubmit={this._handleFormSubmit.bind(this)}>
|
|
|
|
<div className="form-control">
|
|
|
|
<input
|
|
|
|
ref={n => this._input = n}
|
|
|
|
type="text"
|
|
|
|
placeholder="https://api.myproduct.com/v1/users"
|
|
|
|
defaultValue={url}
|
|
|
|
onClick={e => e.preventDefault()}
|
|
|
|
onChange={e => this._handleUrlChange(e.target.value)}/>
|
|
|
|
</div>
|
|
|
|
<button type="submit">Send</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
RequestUrlBar.propTypes = {
|
2016-11-16 17:18:39 +00:00
|
|
|
handleSend: PropTypes.func.isRequired,
|
2016-11-07 20:24:38 +00:00
|
|
|
onUrlChange: PropTypes.func.isRequired,
|
|
|
|
onMethodChange: PropTypes.func.isRequired,
|
|
|
|
url: PropTypes.string.isRequired,
|
|
|
|
method: PropTypes.string.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
export default RequestUrlBar;
|