diff options
Diffstat (limited to 'webapp/components/code_preview.jsx')
-rw-r--r-- | webapp/components/code_preview.jsx | 142 |
1 files changed, 0 insertions, 142 deletions
diff --git a/webapp/components/code_preview.jsx b/webapp/components/code_preview.jsx deleted file mode 100644 index fc2d7314e..000000000 --- a/webapp/components/code_preview.jsx +++ /dev/null @@ -1,142 +0,0 @@ -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import $ from 'jquery'; -import PropTypes from 'prop-types'; -import React from 'react'; - -import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx'; -import Constants from 'utils/constants.jsx'; - -import FileInfoPreview from './file_info_preview.jsx'; - -import loadingGif from 'images/load.gif'; - -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) { - const usedLanguage = SyntaxHighlighting.getLanguageFromFileExtension(props.fileInfo.extension); - - 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', - dataType: 'text', - error: this.handleReceivedError, - success: this.handleReceivedCode - }); - } - - handleReceivedCode(data) { - let code = data; - if (data.nodeName === '#document') { - code = new XMLSerializer().serializeToString(data); - } - this.setState({ - code, - loading: false, - success: true - }); - } - - handleReceivedError() { - this.setState({loading: false, success: false}); - } - - static supports(fileInfo) { - return Boolean(SyntaxHighlighting.getLanguageFromFileExtension(fileInfo.extension)); - } - - render() { - if (this.state.loading) { - return ( - <div className='view-image__loading'> - <img - className='loader-image' - src={loadingGif} - /> - </div> - ); - } - - if (!this.state.success) { - return ( - <FileInfoPreview - fileInfo={this.props.fileInfo} - fileUrl={this.props.fileUrl} - /> - ); - } - - // add line numbers when viewing a code file preview - const lines = this.state.code.match(/\r\n|\r|\n|$/g).length; - let strlines = ''; - for (let i = 1; i <= lines; i++) { - if (strlines) { - strlines += '\n' + i; - } else { - strlines += i; - } - } - - const language = SyntaxHighlighting.getLanguageName(this.state.lang); - - const highlighted = SyntaxHighlighting.highlight(this.state.lang, this.state.code); - - return ( - <div className='post-code'> - <span className='post-code__language'> - {`${this.props.fileInfo.name} - ${language}`} - </span> - <div className='post-code__container'> - <code className='hljs'> - <table> - <tbody> - <tr> - <td className='post-code__lineno'>{strlines}</td> - <td dangerouslySetInnerHTML={{__html: highlighted}}/> - </tr> - </tbody> - </table> - </code> - </div> - </div> - ); - } -} - -CodePreview.propTypes = { - fileInfo: PropTypes.object.isRequired, - fileUrl: PropTypes.string.isRequired -}; |