123 lines
4.4 KiB
JavaScript
123 lines
4.4 KiB
JavaScript
import React, { Component} from 'react';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import flamelinkApp from '../../utilities/flamelink.js';
|
|
import FlameLinkImage from './FlameLinkImage';
|
|
import FlameLinkFieldSet from './FlameLinkFieldSet';
|
|
|
|
const styles = theme => ({
|
|
flamelinkItem: {
|
|
paddingRight: 20,
|
|
paddingLeft: 20,
|
|
paddingTop: 20,
|
|
},
|
|
});
|
|
|
|
class FlameLinkStructure extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
global.mediaID = '';
|
|
|
|
this.state = {
|
|
schemaContent: '',
|
|
}
|
|
|
|
flamelinkApp.content.get(this.props.schemaName)
|
|
.then(result => this.setState({
|
|
schemaContent: result
|
|
}))
|
|
}
|
|
|
|
getContent(schemaField, key, type, description){
|
|
if (type === 'text'){
|
|
if(description === 'h1'){
|
|
return (
|
|
<Typography variant='display4' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if(description === 'h2'){
|
|
return (
|
|
<Typography variant='display3' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if(description === 'h3'){
|
|
return (
|
|
<Typography variant='display2' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if(description === 'h4'){
|
|
return (
|
|
<Typography variant='display1' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if(description === 'h5'){
|
|
return (
|
|
<Typography variant='headline' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if(description === 'h6'){
|
|
return (
|
|
<Typography variant='title' id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
else{
|
|
return (
|
|
<Typography variant='body2' component="p" id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
}
|
|
if(type === 'textarea'){
|
|
return (
|
|
<Typography variant='body2' component="p" id={key}>
|
|
{this.state.schemaContent[key]}
|
|
</Typography>
|
|
)
|
|
}
|
|
if (type === 'media'){
|
|
for (var val in this.state.schemaContent[key]){
|
|
global.mediaID = this.state.schemaContent[key][val];
|
|
return <FlameLinkImage/>
|
|
}
|
|
}
|
|
if (type === 'fieldset'){
|
|
if(this.state.schemaContent === ''){
|
|
return
|
|
}
|
|
else{
|
|
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { classes } = this.props;
|
|
|
|
const lg = this.props.field.gridColumns.lg;
|
|
const md = this.props.field.gridColumns.md;
|
|
const sm = this.props.field.gridColumns.sm;
|
|
const xs = this.props.field.gridColumns.xs;
|
|
return(
|
|
<Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
|
|
{this.getContent(this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(FlameLinkStructure); |