diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-07-28 18:37:21 -0400 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-07-29 10:18:58 -0400 |
commit | de01a7e6797a0d5c73bccc709639ff4ba328b744 (patch) | |
tree | e61c1044456152f63e43e3183ec84776ab7fe31f /web/react/components/view_image.jsx | |
parent | 782e7b03adc6cf322dd7d9a95490d264399a5a90 (diff) | |
download | chat-de01a7e6797a0d5c73bccc709639ff4ba328b744.tar.gz chat-de01a7e6797a0d5c73bccc709639ff4ba328b744.tar.bz2 chat-de01a7e6797a0d5c73bccc709639ff4ba328b744.zip |
Cleaned up ViewImageModal and FileAttachment and added some extra comments
Diffstat (limited to 'web/react/components/view_image.jsx')
-rw-r--r-- | web/react/components/view_image.jsx | 19 |
1 files changed, 16 insertions, 3 deletions
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index c7fb1b785..4b2f8f650 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -5,6 +5,8 @@ var Client = require('../utils/client.jsx'); var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + displayName: "ViewImageModal", + canSetState: false, handleNext: function() { var id = this.state.imgId + 1; if (id > this.props.filenames.length-1) { @@ -90,6 +92,12 @@ module.exports = React.createClass({ $(self.refs.imageFooter.getDOMNode()).removeClass("footer--show"); } ); + + // keep track of whether or not this component is mounted so we can safely set the state asynchronously + this.canSetState = true; + }, + componentWillUnmount: function() { + this.canSetState = false; }, getPublicLink: function(e) { data = {}; @@ -130,6 +138,7 @@ module.exports = React.createClass({ var fileType = utils.getFileType(fileInfo.ext); if (fileType === "image") { + // image files just show a preview of the file content = ( <a href={fileUrl} target="_blank"> <img ref="image" src={this.getPreviewImagePath(filename)}/> @@ -160,13 +169,16 @@ module.exports = React.createClass({ var self = this; utils.getFileSize(utils.getFileUrl(filename), function(fileSize) { - var fileSizes = self.state.fileSizes; - fileSizes[filename] = fileSize; - self.setState(fileSizes); + if (self.canSetState) { + var fileSizes = self.state.fileSizes; + fileSizes[filename] = fileSize; + self.setState(fileSizes); + } }); } } } else { + // display a progress indicator when the preview for an image is still loading var percentage = Math.floor(this.state.progress[this.state.imgId]); content = ( <div> @@ -216,6 +228,7 @@ module.exports = React.createClass({ </div> ); }, + // Returns the path to a preview image that can be used to represent a file. getPreviewImagePath: function(filename) { var fileInfo = utils.splitFileLocation(filename); var fileType = utils.getFileType(fileInfo.ext); |