All files / javascripts/SqlLab/components HighlightedSql.jsx

90% Statements 27/30
64.29% Branches 9/14
100% Functions 2/2
90% Lines 27/30
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 91 92 93 941x 1x 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 { Well } from 'react-bootstrap';
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 (
      <Well>
        <SyntaxHighlighter language="sql" style={github}>
          {shownSql}
        </SyntaxHighlighter>
      </Well>);
  }
  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;