code_preview.jsx 4.19 KB
Newer Older
1 2
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
Rodrigo Corsi's avatar
Rodrigo Corsi committed
3 4

import $ from 'jquery';
5
import PropTypes from 'prop-types';
6 7
import React from 'react';

Rodrigo Corsi's avatar
Rodrigo Corsi committed
8
import Constants from 'utils/constants.jsx';
9
import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx';
10
import loadingGif from 'images/load.gif';
Rodrigo Corsi's avatar
Rodrigo Corsi committed
11

12
import FileInfoPreview from 'components/file_info_preview';
13

Rodrigo Corsi's avatar
Rodrigo Corsi committed
14 15 16 17 18 19 20 21 22 23 24 25
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,
26
            success: true,
Rodrigo Corsi's avatar
Rodrigo Corsi committed
27 28 29 30 31 32 33
        };
    }

    componentDidMount() {
        this.updateStateFromProps(this.props);
    }

34
    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
Rodrigo Corsi's avatar
Rodrigo Corsi committed
35 36 37 38 39 40
        if (this.props.fileUrl !== nextProps.fileUrl) {
            this.updateStateFromProps(nextProps);
        }
    }

    updateStateFromProps(props) {
41
        const usedLanguage = SyntaxHighlighting.getLanguageFromFileExtension(props.fileInfo.extension);
Rodrigo Corsi's avatar
Rodrigo Corsi committed
42 43 44 45 46 47 48 49 50 51 52 53

        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',
54
            dataType: 'text',
Rodrigo Corsi's avatar
Rodrigo Corsi committed
55
            error: this.handleReceivedError,
56
            success: this.handleReceivedCode,
Rodrigo Corsi's avatar
Rodrigo Corsi committed
57 58 59 60
        });
    }

    handleReceivedCode(data) {
Joram Wilander's avatar
Joram Wilander committed
61 62 63 64
        let code = data;
        if (data.nodeName === '#document') {
            code = new XMLSerializer().serializeToString(data);
        }
65
        this.setState({
66
            code,
67
            loading: false,
68
            success: true,
69
        });
Rodrigo Corsi's avatar
Rodrigo Corsi committed
70 71 72 73 74 75
    }

    handleReceivedError() {
        this.setState({loading: false, success: false});
    }

76 77
    static supports(fileInfo) {
        return Boolean(SyntaxHighlighting.getLanguageFromFileExtension(fileInfo.extension));
Rodrigo Corsi's avatar
Rodrigo Corsi committed
78 79 80 81 82 83 84 85
    }

    render() {
        if (this.state.loading) {
            return (
                <div className='view-image__loading'>
                    <img
                        className='loader-image'
86
                        src={loadingGif}
Rodrigo Corsi's avatar
Rodrigo Corsi committed
87 88 89 90 91 92 93 94 95
                    />
                </div>
            );
        }

        if (!this.state.success) {
            return (
                <FileInfoPreview
                    fileInfo={this.props.fileInfo}
96
                    fileUrl={this.props.fileUrl}
Rodrigo Corsi's avatar
Rodrigo Corsi committed
97 98 99 100
                />
            );
        }

101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
        // 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'>
119
                    {`${this.props.fileInfo.name} - ${language}`}
120
                </span>
Asaad Mahmood's avatar
Asaad Mahmood committed
121 122 123 124 125 126 127 128 129 130 131 132
                <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>
133 134
            </div>
        );
Rodrigo Corsi's avatar
Rodrigo Corsi committed
135 136 137 138
    }
}

CodePreview.propTypes = {
139
    fileInfo: PropTypes.object.isRequired,
140
    fileUrl: PropTypes.string.isRequired,
Rodrigo Corsi's avatar
Rodrigo Corsi committed
141
};