Added ability to center images, resizing images (which I may need to revisit later), removed memory leak in FlamelinkImage.js
This commit is contained in:
		
							parent
							
								
									7df07ff7c4
								
							
						
					
					
						commit
						58a892bfa8
					
				@ -1,4 +1,5 @@
 | 
				
			|||||||
import React, { Component } from 'react';
 | 
					import React, { Component } from 'react';
 | 
				
			||||||
 | 
					import Typography from '@material-ui/core/Typography';
 | 
				
			||||||
import flamelinkApp from '../flamelink.js';
 | 
					import flamelinkApp from '../flamelink.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -9,21 +10,18 @@ class FlameLinkImage extends Component {
 | 
				
			|||||||
        this.state = {
 | 
					        this.state = {
 | 
				
			||||||
          mediaURL: '',
 | 
					          mediaURL: '',
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
    getImage(imagePath){
 | 
					        flamelinkApp.storage.getURL(global.mediaID)
 | 
				
			||||||
            flamelinkApp.storage.getURL(imagePath)
 | 
					 | 
				
			||||||
                    .then(url => this.setState({
 | 
					                    .then(url => this.setState({
 | 
				
			||||||
                      mediaURL: url
 | 
					                      mediaURL: url
 | 
				
			||||||
                    }))
 | 
					                    }))
 | 
				
			||||||
            return <img src={this.state.mediaURL} max-width="500" width="100%" alt='' />
 | 
					 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    render() {
 | 
					    render() {
 | 
				
			||||||
        return(
 | 
					        return(
 | 
				
			||||||
                <div>
 | 
					                <Typography align='center'>
 | 
				
			||||||
                    {this.getImage(this.props.content)}
 | 
					                    <img src={this.state.mediaURL} width="70%" alt='' />
 | 
				
			||||||
                </div>
 | 
					                </Typography>
 | 
				
			||||||
        );
 | 
					        );
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -18,6 +18,8 @@ class FlameLinkStructure extends Component {
 | 
				
			|||||||
    constructor() {
 | 
					    constructor() {
 | 
				
			||||||
        super();
 | 
					        super();
 | 
				
			||||||
        
 | 
					        
 | 
				
			||||||
 | 
					        global.mediaID = '';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        this.state = {
 | 
					        this.state = {
 | 
				
			||||||
          schemaContent: '',
 | 
					          schemaContent: '',
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
@ -89,7 +91,8 @@ class FlameLinkStructure extends Component {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
        if (type === 'media'){
 | 
					        if (type === 'media'){
 | 
				
			||||||
            for (var val in this.state.schemaContent[key]){
 | 
					            for (var val in this.state.schemaContent[key]){
 | 
				
			||||||
                return <FlameLinkImage content={this.state.schemaContent[key][val]}/>
 | 
					                global.mediaID = this.state.schemaContent[key][val];
 | 
				
			||||||
 | 
					                return <FlameLinkImage/>
 | 
				
			||||||
            } 
 | 
					            } 
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
        if (type === 'fieldset'){
 | 
					        if (type === 'fieldset'){
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user