header-ui
Version:
Header UI
291 lines (267 loc) • 14.1 kB
JSX
import React from 'react';
//ui items
import { Close, ExpandMore } from '@material-ui/icons';
import {
Card,
CardHeader,
CardContent,
AppBar,
Button,
Collapse,
Toolbar,
Dialog,
} from '@material-ui/core';
//doc components
import CloudTable from './cloudTable.jsx'
import CloudObject from './cloudObject.jsx'
import CloudUser from './cloudUser.jsx'
import CloudRole from './cloudRole.jsx'
import CloudFile from './cloudFile.jsx'
import CloudEvent from './cloudEvent.jsx'
import CloudCache from './cloudCache.jsx'
import CloudQueue from './cloudQueue.jsx'
import CloudBoostApi from './cloudBoostApi.jsx'
//css
import './drawer.css';
class QuickDocs extends React.Component {
constructor(props) {
super(props);
this.state = {
migrateTo: "",
showCBAPI: false,
showObject: false,
showUser: false,
showRole: false,
showFile: false,
showEvent: false,
showCache: false,
showQueue: false,
showTable: false,
}
}
learnMore() {
let win = window.open("https://tutorials.cloudboost.io/", '_blank')
win.focus()
}
componentWillMount(){
this.setState({migrateTo:this.props.migrateTo});
}
componentWillReceiveProps(nextProps) {
if (this.state.migrateTo !== nextProps.migrateTo) {
this.setState({migrateTo: nextProps.migrateTo}, this.forceUpdate);
}
}
onCardStateChange = (newState, view) => {
if (newState)
this.setState({migrateTo: view});
else
this.setState({migrateTo: ""});
};
render() {
const styles = {
bgInfo: {backgroundColor: "#d9edf7"},
bgPrimary: {backgroundColor: "#549afc"},
title: {
fontSize: 20,
letterSpacing: "-.5px",
fontWeight: 500,
lineHeight: "1.1",
fontFamily: "Avenir Next,Helvetica Neue,Helvetica,sans-serif",
color: "#fff"
}
};
return (
<div>
{
this.props.openDrawer &&
<Dialog
fullScreen
onClose={() => this.props.toggleDrawer(false)}
open={this.props.openDrawer}
style={{overflow: "hide"}}
>
<AppBar
className="doc-bar"
style={{
backgroundColor: "#4F8EF7",
height: 60
}}
>
<Toolbar>
<Button color="inherit" aria-label="Close">
<Close
color="#fff"
onClick={() => this.props.toggleDrawer(false)}
/>
</Button>
<span style={styles.title}>Quick Documentation</span>
<Button
onClick={this.learnMore.bind(this)}
label="More..."
>
<span style={{...styles.title, fontSize: 14}}>Learn More...</span>
</Button>
</Toolbar>
</AppBar>
<div className="drawerSelector">
<Card className="drawer-header" id="cbapi">
<CardHeader
title="Install CloudBoost"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Install and Integrate Cloudboost SDK in your project"
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showCBAPI: !this.state.showCBAPI })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showCBAPI} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudBoostApi {...this.props.manageApp}/>
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="objects">
<CardHeader
title="Cloud Object"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="CloudObjects helps you to store JSON like structured in CloudBoost. "
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showObject: !this.state.showObject })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showObject} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudObject />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="tables">
<CardHeader
title="Cloud Table"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud Table helps you to store your desired data in row-column format."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showTable: !this.state.showTable })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showTable} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudTable />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="user">
<CardHeader
title="Cloud User"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud User helps you to create User for your application."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showUser: !this.state.showUser })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showUser} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudUser />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="role">
<CardHeader
title="Cloud Role"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud Role helps you to assign a specific role to a particular user of your Application."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showRole: !this.state.showRole })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showRole} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudRole />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="file">
<CardHeader
title="Cloud File"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud File helps you to store information onto the CloudBoost Server in BLOB/File formats."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showFile: !this.state.showFile })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showFile} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudFile />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="analytics">
<CardHeader
title="Cloud Event"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud Events helps you to track User Activity around your Application."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showEvent: !this.state.showEvent })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showEvent} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudEvent />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="cache">
<CardHeader
title="Cloud Cache"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud Cache helps you maintain data."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showCache: !this.state.showCache })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showCache} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudCache />
</CardContent>
</Collapse>
</Card>
<Card className="drawer-header" id="queue">
<CardHeader
title="Cloud Queue"
subheaderTypographyProps={{ style: { fontSize: '12px !important' } }} subheader="Cloud Queue helps you to line up your events."
style={{fontWeight:"normal !important"}}
action={
<Button onClick={() => this.setState({ showQueue: !this.state.showQueue })}>
<ExpandMore />
</Button>
}
/>
<Collapse in={this.state.showQueue} timeout="auto" unmountOnExit>
<CardContent style={{paddingTop:0}}>
<CloudQueue />
</CardContent>
</Collapse>
</Card>
</div>
</Dialog>
}
</div>
)
}
}
export default QuickDocs;