header-ui
Version:
Header UI
243 lines (222 loc) • 13.2 kB
JSX
import React from 'react';
import {
Card,
CardHeader,
CardContent
} from '@material-ui/core';
class CloudFile 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();
}
handleExpandChange = (expanded) => {
this.setState({ expanded: expanded });
};
handleToggle = (event, toggle) => {
this.setState({ expanded: toggle });
};
handleExpand = () => {
this.setState({ expanded: true });
};
handleReduce = () => {
this.setState({ expanded: false });
};
render() {
return (
<div>
<div className="method">
<a id="CloudObject" name="CloudObject" className="section-anchor" />
<a id="CloudFile-constructor" name="CloudObject-constructor" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Instantiate a CloudFile Object"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
{/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Overlay subtitle" />}
>*/}
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_initiatecf")}>
</span>
<pre id="pre_initiatecf">
<span className="code-red">{`var`}</span>{` documentFile = `}<span className="code-red">{`new`}</span>{` Blob([`}<span className="code-yellow">{`"'This is the content of
my document blob'`}</span>{`],{type :`}<span className="code-yellow"> {`'text/plain'}`}</span>{`});`}
<span className="code-red">{`
var`}</span>{` file = `}<span className="code-red">{`new `}</span>{`CB.CloudFile(documentFile);`
}
</pre>
</div>{/* method-example */}
</CardContent>
<CardHeader title="Constructor : CloudFile( file/BLOB, typeOfFile )" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader=" Instantiates a CloudFile object." />
<CardContent>
<div className="method-description">
<div className="method-list">
<h6>Argument</h6>
<dl className="argument-list">
<dt>file</dt>
<dd className>file/BLOB object <span>The file/BLOB that you want to save</span></dd>
<div className="clearfix" />
<dt>type</dt>
<dd className>Object <span>Specify the type of text stored in File/BLOB</span></dd>
<div className="clearfix" />
</dl>
<h6>Returns</h6>
<p>void</p>
</div>
</div>
</CardContent>
</Card>
<a id="CloudFile-save" name="CloudObject-set" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Save a CloudFile"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
{/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Overlay subtitle" />}
>*/}
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_savecf")}>
</span>
<pre id="pre_savecf">
<span className="code-red">{`var`}</span>{` documentFile = `}<span className="code-red">{`new`}</span>{` Blob([`}<span className="code-yellow">{`"'This is the content of
my document blob'`}</span>{`],{type :`}<span className="code-yellow"> {`'text/plain'}`}</span>{`});`}
<span className="code-red">{`
var`}</span>{` file = `}<span className="code-red">{`new `}</span>{`CB.CloudFile(documentFile);
file.save({
success: `}<span className="code-red">{`function`}</span>{`(obj) {
//got the file object successfully
//with the url to the file
},
error: `}<span className="code-red">{`function`}</span>{`(err) {
//error in uploading file
}
});`
}
</pre>
</div>{/* method-example */}
</CardContent>
<CardHeader title="CloudFile.save( [callback] )" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Saves the CloudFile object." />
<CardContent>
<div className="method-description">
<div className="method-list">
<h6>Arguments</h6>
<dl className="argument-list">
<dt>callback</dt>
<dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
<div className="clearfix" />
</dl>
<h6>Returns</h6>
<p>It returns a CloudFile object having url attribute set to the URL of the blob uploaded to the server if the operation is successful otherwise returns an error object along with JQuery promise (if callback is not provided).</p>
</div>
</div>
</CardContent>
</Card>
<a id="CloudFile-delete" name="CloudObject-get" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Delete saved File"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
{/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Overlay subtitle" />}
>*/}
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_delcf")}>
</span>
<pre id="pre_delcf">
{`file.`}<span className="code-red">{`delete`}</span>{`({
success: `}<span className="code-red">{`function`}</span>{`(fileObj) {
//file deletion successful
},
error: `}<span className="code-red">{`function`}</span>{`(err) {
//error in deleting file
}
});`}
</pre>
</div>{/* method-example */}
</CardContent>
<CardHeader title="CloudFile.delete( [callback] )" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Deletes the CloudFile object." />
<CardContent>
<div className="method-description">
<div className="method-list">
<h6>Argument</h6>
<dl className="argument-list">
<dt>callback</dt>
<dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
<div className="clearfix" />
</dl>
<h6>Returns</h6>
<p>It returns a CloudFile object having url attribute set to null if the operation is successful otherwise returns an error object along with JQuery promise (if callback is not provided).</p>
</div>
</div>
</CardContent>
</Card>
<a id="CloudFile-fetch" name="CloudObject-unset" className="section-anchor" />
<Card style={{marginBottom:16}}>
<CardHeader
title="Fetch A File"
style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
/>
<CardContent>
{/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Overlay subtitle" />}
>*/}
<div className="method-example" id="api-summary-example">
<span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_fetchcf")}>
</span>
<pre id="pre_fetchcf">
<span className="code-red">{
`var`}</span>{` query = `}<span className="code-red">{`new`}</span>{` CB.CloudQuery(`}<span className="code-yellow">{`"Custom"`}</span>{`);
query.find().then(`}<span className="code-red">{`function`}</span>{`(res)
`}<span className="code-red">{`var`}</span>{` file = res.get(`}<span className="code-yellow">{`'file'`}</span>{`);
file.fetch({
success: `}<span className="code-red">{`function`}</span>{`(fileObj) {
//Gets File Object
},
error: `}<span className="code-red">{`function`}</span>{`(err) {
//error in geting file
}
},`}<span className="code-red">{`function`}</span>{`(){
//error querying object
});
});`
} </pre>
</div>{/* method-example */}
</CardContent>
<CardHeader title="CloudFile.fetch( [callback] ) " subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Fetches the CloudFile object which has the URL along with other Properties of File." />
<CardContent>
<div className="method-description">
<div className="method-list">
<h6>Argument</h6>
<dl className="argument-list">
<dt>callback</dt>
<dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
<div className="clearfix" />
</dl>
<h6>Returns</h6>
<p>It returns a CloudFile object having url if the operation is successful otherwise returns an error object along with JQuery promise (if callback is not provided).</p>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
}
export default CloudFile;