[WIP] Add http to copied url and move function to componentWillReceiveProps (#1780)

* Add http to copied url and move function to componentWillReceiveProps

* Added getText() to CopyToClipbaord to enable ajax calls for getting copy text

* Set ajax call to synchronous (document.execCommand only works in synchronous mode
This commit is contained in:
vera-liu 2016-12-06 17:49:41 -08:00 committed by GitHub
parent c1558578d7
commit 74edb936a5
4 changed files with 21 additions and 25 deletions

View File

@ -7,14 +7,7 @@ const propTypes = {
};
export default class CopyQueryTabUrl extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
shortUrl: '',
};
}
componentWillMount() {
getUrl(callback) {
const qe = this.props.queryEditor;
const params = [];
if (qe.dbId) params.push('dbid=' + qe.dbId);
@ -25,20 +18,13 @@ export default class CopyQueryTabUrl extends React.PureComponent {
const queryString = params.join('&');
const queryLink = window.location.pathname + '?' + queryString;
getShortUrl(queryLink, this.onShortUrlSuccess.bind(this));
}
onShortUrlSuccess(data) {
this.setState({
shortUrl: data,
});
getShortUrl(queryLink, callback);
}
render() {
return (
<CopyToClipboard
inMenu
text={this.state.shortUrl}
copyNode={(
<div>
<i className="fa fa-clipboard" /> <span>share query</span>
@ -46,6 +32,7 @@ export default class CopyQueryTabUrl extends React.PureComponent {
)}
tooltipText="copy URL to clipboard"
shouldShowText={false}
getText={this.getUrl.bind(this)}
/>
);
}

View File

@ -3,9 +3,10 @@ import { Tooltip, OverlayTrigger, MenuItem } from 'react-bootstrap';
const propTypes = {
copyNode: PropTypes.node,
getText: PropTypes.func,
onCopyEnd: PropTypes.func,
shouldShowText: PropTypes.bool,
text: PropTypes.string.isRequired,
text: PropTypes.string,
inMenu: PropTypes.bool,
tooltipText: PropTypes.string,
};
@ -36,12 +37,19 @@ export default class CopyToClipboard extends React.Component {
setTimeout(this.resetTooltipText, 200);
}
onClick() {
if (this.props.getText) {
this.props.getText((d) => { this.copyToClipboard(d); });
} else {
this.copyToClipboard(this.props.text);
}
}
resetTooltipText() {
this.setState({ hasCopied: false });
}
copyToClipboard() {
const textToCopy = this.props.text;
copyToClipboard(textToCopy) {
const textArea = document.createElement('textarea');
textArea.style.position = 'fixed';
@ -50,7 +58,6 @@ export default class CopyToClipboard extends React.Component {
document.body.appendChild(textArea);
textArea.select();
try {
if (!document.execCommand('copy')) {
throw new Error('Not successful');
@ -87,7 +94,7 @@ export default class CopyToClipboard extends React.Component {
overlay={this.renderTooltip()}
trigger={['hover']}
bsStyle="link"
onClick={this.copyToClipboard}
onClick={this.onClick.bind(this)}
onMouseOut={this.onMouseOut}
>
{this.props.copyNode}
@ -101,7 +108,7 @@ export default class CopyToClipboard extends React.Component {
<OverlayTrigger placement="top" overlay={this.renderTooltip()} trigger={['hover']}>
<MenuItem>
<span
onClick={this.copyToClipboard}
onClick={this.onClick.bind(this)}
onMouseOut={this.onMouseOut}
>
{this.props.copyNode}

View File

@ -55,15 +55,16 @@ export function getParamsFromUrl() {
return newParams;
}
export function getShortUrl(longUrl, callBack) {
export function getShortUrl(longUrl, callback) {
$.ajax({
type: 'POST',
url: '/r/shortner/',
async: false,
data: {
data: '/' + longUrl,
},
success: (data) => {
callBack(data);
callback(data);
},
error: (error) => {
/* eslint no-console: 0 */
@ -71,6 +72,7 @@ export function getShortUrl(longUrl, callBack) {
console.warn('Something went wrong...');
console.warn(error);
}
callback(longUrl);
},
});
}

View File

@ -1115,7 +1115,7 @@ class R(BaseSupersetView):
obj = models.Url(url=url)
db.session.add(obj)
db.session.commit()
return("{request.headers[Host]}/r/{obj.id}".format(
return("http://{request.headers[Host]}/r/{obj.id}".format(
request=request, obj=obj))
@expose("/msg/")