Added ability to parse fieldset data. Added some basic stylings for content. Cleaned up code.

src/components/FlameLinkComponentCreations.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import FlameLinkStructure from './FlameLinkStructure';
 import Grid from '@material-ui/core/Grid';
 
-class Layout extends Component {
+class FlameLinkComponentCreations extends Component {
 
     getSchemaFieldData(schemaData){
         var arr = [];
@@ -13,7 +13,7 @@ class Layout extends Component {
     }
 
     createComponents(num){
-        return <FlameLinkStructure field={this[num]} type={this[num].type} key={this[num].key}/>
+        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
     render() {
@@ -25,4 +25,4 @@ class Layout extends Component {
     }
 }
 
-export default Layout;
+export default FlameLinkComponentCreations;

src/components/FlameLinkFieldSet.js

@@ -0,0 +1,31 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkFieldSetContent from './FlameLinkFieldSetContent';
+
+
+class FlameLinkFieldSet extends Component {
+
+
+    getFieldSetContent(content1, content2){
+        var arr = [];
+        for (var val in content2){
+            arr.push(val);
+        }  
+        var arrContent = [content1, content2];
+        return arr.map(this.createFieldSetComponents, arrContent);
+    }
+
+    createFieldSetComponents(num){
+        return <FlameLinkFieldSetContent field={this[1][num]} type={this[1][num].type} key={this[1][num].key} fieldKey={this[1][num].key} data={this[0]}/>
+    }
+
+    render() {
+        return(
+            <Grid item xs={12}>
+                    {this.getFieldSetContent(this.props.field, this.props.field2)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSet;

src/components/FlameLinkFieldSetContent.js

@@ -0,0 +1,43 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import FlameLinkImage from './FlameLinkImage';
+
+class FlameLinkFieldSetContent extends Component {
+
+    getContent(key, type, description, fieldsetContent){
+        if (type === 'text'){
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key}>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        )
+        }
+        if(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                    {fieldsetContent[key]}
+                    </Typography>
+                    )               
+        }
+        if (type === 'media'){
+            for (var val in fieldsetContent[key]){
+                return <FlameLinkImage content={fieldsetContent[key][val]}/>
+            } 
+        }
+    }
+
+    render() {
+        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}>
+                    {this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSetContent;

src/components/FlameLinkImage.js

@@ -15,7 +15,7 @@ class FlameLinkImage extends Component {
                     .then(url => this.setState({
                       mediaURL: url
                     }))
-            return <img src={this.state.mediaURL} width="100%" alt='' />
+            return <img src={this.state.mediaURL} width='100%' alt='' />
     }
 
     render() {

src/components/FlameLinkStructure.js

@@ -1,9 +1,18 @@
 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 '../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() {
@@ -13,55 +22,99 @@ class FlameLinkStructure extends Component {
           schemaContent: '',
         }
 
-        flamelinkApp.content.get('martenSchemaDemo')
+        flamelinkApp.content.get(global.schemaName)
         .then(result => this.setState({
           schemaContent: result
         }))
- 
       }
 
-    getContent(key, type, description){
+    getContent(schemaField, key, type, description){
         if (type === 'text'){
             if(description === 'h1'){
                 return  (
-                        <Typography variant="display2" id={this.props.field.key}>
-                        {this.state.schemaContent[key]}
+                        <Typography variant='display4' id={key}>
+                            {this.state.schemaContent[key]}
                         </Typography>
                         )                
             }
             if(description === 'h2'){
                 return  (
-                        <Typography variant="display3" id={this.props.field.key}>
-                        {this.state.schemaContent[key]}
+                        <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 component="p" id={this.props.field.key}>
-                        {this.state.schemaContent[key]}
+                        <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]){
                 return <FlameLinkImage content={this.state.schemaContent[key][val]}/>
             } 
         }
+        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}>
-                      {this.getContent(this.props.field.key, this.props.type, this.props.field.description)}
+            <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 FlameLinkStructure;
+export default withStyles(styles)(FlameLinkStructure);