60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
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;
|