header-ui
Version:
Header UI
132 lines (118 loc) • 6.02 kB
JSX
/**
* Created by Jignesh on 28-07-2017.
*/
import React from 'react'
import {
Card,
CardHeader,
CardContent
} from '@material-ui/core'
class CloudBoostApi extends React.Component {
constructor() {
super();
this.state = {
}
}
copyToClipboard(element) {
const range = document.createRange();
const selection = window.getSelection();
// Clear selection from any previous data.
selection.removeAllRanges();
// Make the range select the entire content of the contentHolder paragraph.
range.selectNodeContents(document.querySelector(element));
// Add that range to the selection.
selection.addRange(range);
// Copy the selection to clipboard.
document.execCommand('copy');
// Clear selection if you want to.
selection.removeAllRanges();
}
render() {
let appId = this.props.appId;
let jsKey = this.props.jsKey;
let masterKey = this.props.masterKey;
return (
<div>
<div className="method">
<a id="CloudBoostApi" name="cbapi" className="section-anchor" />
<a id="CloudBoostApi-install" name="CloudBoostApi-install" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Install Cloudboost using NPM"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard"
title="Copy.."
onClick={this.copyToClipboard.bind(this, "#pre_install")} />
<pre id="pre_install">
{`npm install cloudboost`}
</pre>
</div>
</CardContent>
</Card>
<a id="CloudBoostApi-include" name="CloudBoostApi-include" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Include CloudBoost SDK in Project"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard"
title="Copy.."
onClick={this.copyToClipboard.bind(this, "#cb_include")} />
<pre id="cb_include">
<span className="code-red">{`let`}</span>{` CB = require('`}<span className="code-yellow">{`cloudboost`}</span>`);
</pre>
</div>
</CardContent>
</Card>
<a id="CloudBoost-initialize" name="CloudBoost-initialize" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Initialize App"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard"
title="Copy.."
onClick={this.copyToClipboard.bind(this, "#cb_initialize")}>
</span>
<pre id="cb_initialize">
{`CB.CloudApp.init(`}<span className="code-yellow">{appId?`'`+appId+`'`:`'YOUR APP ID'`}</span>{`,`}<span className="code-yellow">{jsKey?`'`+jsKey+`'`:`'YOUR APP KEY'`}</span>);
</pre>
</div>
</CardContent>
<CardHeader title="CloudApp.init( appId, appKey )"
subheader="Init's the app." />
<CardContent>
<div className="method-description">
<div className="method-list">
<h6>Argument</h6>
<dl className="argument-list">
<dt>appId</dt>
<dd className>Application ID
<span>with which your app is registered. You can find this on your CloudBoost Dashboard</span>
</dd>
<div className="clearfix" />
<dt>appKey</dt>
<dd className>Client / Master keyD
<span>Secret Key for your app. You can find this on your CloudBoost Dashboard</span>
</dd>
<div className="clearfix" />
</dl>
<h6>Returns</h6>
<p><code>void</code></p>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
}
export default CloudBoostApi;