diff options
author | Rodrigo Corsi <rodrigocorsi@gmail.com> | 2016-03-08 09:38:09 -0300 |
---|---|---|
committer | Rodrigo Corsi <rodrigocorsi@gmail.com> | 2016-03-17 12:47:07 -0300 |
commit | 529513606b74fce60cbb066b381b27fbb6ea9d52 (patch) | |
tree | 6f8df5ea8eca135334633d721f474be4e9c7fb12 /webapp/components | |
parent | 6b9d89522475c84e7833d17179b3af65b92240d6 (diff) | |
download | chat-529513606b74fce60cbb066b381b27fbb6ea9d52.tar.gz chat-529513606b74fce60cbb066b381b27fbb6ea9d52.tar.bz2 chat-529513606b74fce60cbb066b381b27fbb6ea9d52.zip |
Created component CodePreview
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/code_preview.jsx | 101 | ||||
-rw-r--r-- | webapp/components/view_image.jsx | 11 |
2 files changed, 112 insertions, 0 deletions
diff --git a/webapp/components/code_preview.jsx b/webapp/components/code_preview.jsx new file mode 100644 index 000000000..8d2bc6269 --- /dev/null +++ b/webapp/components/code_preview.jsx @@ -0,0 +1,101 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import * as syntaxHightlighting from 'utils/syntax_hightlighting.jsx'; +import Constants from 'utils/constants.jsx'; +import FileInfoPreview from './file_info_preview.jsx'; + +import React from 'react'; + +export default class CodePreview extends React.Component { + constructor(props) { + super(props); + + this.updateStateFromProps = this.updateStateFromProps.bind(this); + this.handleReceivedError = this.handleReceivedError.bind(this); + this.handleReceivedCode = this.handleReceivedCode.bind(this); + + this.state = { + code: '', + lang: '', + loading: true, + success: true + }; + } + + componentDidMount() { + this.updateStateFromProps(this.props); + } + + componentWillReceiveProps(nextProps) { + if (this.props.fileUrl !== nextProps.fileUrl) { + this.updateStateFromProps(nextProps); + } + } + + updateStateFromProps(props) { + var usedLanguage = syntaxHightlighting.getLang(props.filename); + + if (!usedLanguage || props.fileInfo.size > Constants.CODE_PREVIEW_MAX_FILE_SIZE) { + this.setState({code: '', lang: '', loading: false, success: false}); + return; + } + + this.setState({code: '', lang: usedLanguage, loading: true}); + + $.ajax({ + async: true, + url: props.fileUrl, + type: 'GET', + error: this.handleReceivedError, + success: this.handleReceivedCode + }); + } + + handleReceivedCode(data) { + const parsed = syntaxHightlighting.formatCode(this.state.lang, data, this.props.filename) + this.setState({code: parsed, loading: false, success: true}); + } + + handleReceivedError() { + this.setState({loading: false, success: false}); + } + + static support(filename) { + return typeof syntaxHightlighting.getLang(filename) !== 'undefined'; + } + + render() { + if (this.state.loading) { + return ( + <div className='view-image__loading'> + <img + className='loader-image' + src='/static/images/load.gif' + /> + </div> + ); + } + + if (!this.state.success) { + return ( + <FileInfoPreview + filename={this.props.filename} + fileUrl={this.props.fileUrl} + fileInfo={this.props.fileInfo} + formatMessage={this.props.formatMessage} + /> + ); + } + + return <div dangerouslySetInnerHTML={{__html: this.state.code}}/>; + } +} + +CodePreview.propTypes = { + filename: React.PropTypes.string.isRequired, + fileUrl: React.PropTypes.string.isRequired, + fileInfo: React.PropTypes.object.isRequired, + formatMessage: React.PropTypes.func.isRequired +}; diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx index 2b7e03382..7572f88ae 100644 --- a/webapp/components/view_image.jsx +++ b/webapp/components/view_image.jsx @@ -7,6 +7,7 @@ import * as Client from 'utils/client.jsx'; import * as Utils from 'utils/utils.jsx'; import AudioVideoPreview from './audio_video_preview.jsx'; import Constants from 'utils/constants.jsx'; +import CodePreview from './code_preview.jsx'; import FileInfoPreview from './file_info_preview.jsx'; import FileStore from 'stores/file_store.jsx'; import ViewImagePopoverBar from './view_image_popover_bar.jsx'; @@ -254,6 +255,15 @@ class ViewImageModal extends React.Component { formatMessage={this.props.intl.formatMessage} /> ); + } else if (CodePreview.support(filename)) { + content = ( + <CodePreview + filename={filename} + fileUrl={fileUrl} + fileInfo={fileInfo} + formatMessage={this.props.intl.formatMessage} + /> + ); } else { content = ( <FileInfoPreview @@ -323,6 +333,7 @@ class ViewImageModal extends React.Component { onClick={this.props.onModalDismissed} > <div + className='modal-back' onMouseEnter={this.onMouseEnterImage} onMouseLeave={this.onMouseLeaveImage} onClick={(e) => e.stopPropagation()} |