All files / javascripts/SqlLab/components ColumnElement.jsx

0% Statements 0/14
0% Branches 0/4
0% Functions 0/1
0% Lines 0/13
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                                                                                                                       
import React from 'react';
 
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
const propTypes = {
  column: React.PropTypes.object.isRequired,
};
 
const iconMap = {
  pk: 'fa-key',
  fk: 'fa-link',
  index: 'fa-bookmark',
};
const tooltipTitleMap = {
  pk: 'Primary Key',
  fk: 'Foreign Key',
  index: 'Index',
};
 
class ColumnElement extends React.PureComponent {
  render() {
    const col = this.props.column;
    let name = col.name;
    let icons;
    if (col.keys && col.keys.length > 0) {
      name = <strong>{col.name}</strong>;
      icons = col.keys.map((key, i) => (
        <span key={i} className="ColumnElement">
          <OverlayTrigger
            placement="right"
            overlay={
              <Tooltip id="idx-json" bsSize="lg">
                <strong>{tooltipTitleMap[key.type]}</strong>
                <hr />
                <pre className="text-small">
                  {JSON.stringify(key, null, '  ')}
                </pre>
              </Tooltip>
              }
          >
            <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
          </OverlayTrigger>
        </span>
      ));
    }
    return (
      <div className="clearfix table-column">
        <div className="pull-left m-l-10 col-name">
          {name}{icons}
        </div>
        <div className="pull-right text-muted">
          <small> {col.type}</small>
        </div>
      </div>);
  }
}
ColumnElement.propTypes = propTypes;
 
export default ColumnElement;