[sql-lab] fix scrolling in left hand panel for table meta data (#2641)

* fix scrolling in left hand panel for table meta data

* add height prop

* this prop is not used
This commit is contained in:
Alanna Scott 2017-04-18 23:24:04 -07:00 committed by GitHub
parent e6063f2ddf
commit 899caf9449
2 changed files with 83 additions and 78 deletions

View File

@ -194,7 +194,7 @@ class SqlEditor extends React.PureComponent {
>
<Col md={3}>
<SqlEditorLeftBar
style={{ height: this.props.height }}
height={this.sqlEditorHeight()}
queryEditor={this.props.queryEditor}
tables={this.props.tables}
actions={this.props.actions}

View File

@ -10,6 +10,7 @@ const $ = window.$ = require('jquery');
const propTypes = {
queryEditor: React.PropTypes.object.isRequired,
height: React.PropTypes.number.isRequired,
tables: React.PropTypes.array,
actions: React.PropTypes.object,
};
@ -128,11 +129,12 @@ class SqlEditorLeftBar extends React.PureComponent {
closePopover(ref) {
this.refs[ref].hide();
}
render() {
const shouldShowReset = window.location.search === '?reset=1';
const tableMetaDataHeight = this.props.height - 130; // 130 is the height of the selects above
return (
<div className="scrollbar-container">
<div className="clearfix sql-toolbar scrollbar-content">
<div className="clearfix sql-toolbar">
<div>
<AsyncSelect
dataEndpoint={
@ -199,6 +201,8 @@ class SqlEditorLeftBar extends React.PureComponent {
</div>
<hr />
<div className="m-t-5">
<div className="scrollbar-container">
<div className="scrollbar-content" style={{ height: tableMetaDataHeight }}>
{this.props.tables.map(table => (
<TableElement
table={table}
@ -207,13 +211,14 @@ class SqlEditorLeftBar extends React.PureComponent {
/>
))}
</div>
</div>
</div>
{shouldShowReset &&
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
<i className="fa fa-bomb" /> Reset State
</Button>
}
</div>
</div>
);
}
}