All files / javascripts/SqlLab/components HighlightedSql.jsx

89.66% Statements 26/29
64.29% Branches 9/14
100% Functions 2/2
89.66% Lines 26/29
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 911x 1x 1x 1x   1x           1x                 9x   3x         3x 3x 3x 3x       3x 3x 3x             4x 4x 4x           1x 1x 1x 1x                 1x                         4x                   1x 1x      
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { github } from 'react-syntax-highlighter/dist/styles';
import ModalTrigger from '../../components/ModalTrigger';
 
const defaultProps = {
  maxWidth: 50,
  maxLines: 5,
  shrink: false,
};
 
const propTypes = {
  sql: React.PropTypes.string.isRequired,
  rawSql: React.PropTypes.string,
  maxWidth: React.PropTypes.number,
  maxLines: React.PropTypes.number,
  shrink: React.PropTypes.bool,
};
 
class HighlightedSql extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalBody: null,
    };
  }
  shrinkSql() {
    const props = this.props;
    const sql = props.sql || '';
    let lines = sql.split('\n');
    Iif (lines.length >= props.maxLines) {
      lines = lines.slice(0, props.maxLines);
      lines.push('{...}');
    }
    return lines.map((line) => {
      Eif (line.length > props.maxWidth) {
        return line.slice(0, props.maxWidth) + '{...}';
      }
      return line;
    })
    .join('\n');
  }
  triggerNode() {
    const props = this.props;
    let shownSql = props.shrink ? this.shrinkSql(props.sql) : props.sql;
    return (
      <SyntaxHighlighter language="sql" style={github}>
        {shownSql}
      </SyntaxHighlighter>);
  }
  generateModal() {
    const props = this.props;
    let rawSql;
    Eif (props.rawSql && props.rawSql !== this.props.sql) {
      rawSql = (
        <div>
          <h4>Raw SQL</h4>
          <SyntaxHighlighter language="sql" style={github}>
            {props.rawSql}
          </SyntaxHighlighter>
        </div>
      );
    }
    this.setState({
      modalBody: (
        <div>
          <h4>Source SQL</h4>
          <SyntaxHighlighter language="sql" style={github}>
            {this.props.sql}
          </SyntaxHighlighter>
          {rawSql}
        </div>
      ),
    });
  }
  render() {
    return (
      <ModalTrigger
        modalTitle="SQL"
        triggerNode={this.triggerNode()}
        modalBody={this.state.modalBody}
        beforeOpen={this.generateModal.bind(this)}
      />
    );
  }
}
HighlightedSql.propTypes = propTypes;
HighlightedSql.defaultProps = defaultProps;
 
export default HighlightedSql;