You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/05/21 23:20:49 UTC

[incubator-superset] branch master updated: forcing ace editor to refresh when it is shown (#5038)

This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 0e1fb62  forcing ace editor to refresh when it is shown (#5038)
0e1fb62 is described below

commit 0e1fb62db2811545a4220ee9c58432dbf51831ff
Author: Gabe Lyons <ga...@airbnb.com>
AuthorDate: Mon May 21 16:20:46 2018 -0700

    forcing ace editor to refresh when it is shown (#5038)
---
 .../components/AdhocFilterEditPopoverSqlTabContent.jsx    | 12 ++++++++++++
 .../src/explore/components/AdhocMetricEditPopover.jsx     | 15 +++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
index 8a3a97b..7e8a6a6 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
@@ -33,6 +33,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     super(props);
     this.onSqlExpressionChange = this.onSqlExpressionChange.bind(this);
     this.onSqlExpressionClauseChange = this.onSqlExpressionClauseChange.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
 
     this.selectProps = {
       multi: false,
@@ -59,6 +60,10 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     }
   }
 
+  componentDidUpdate() {
+    this.aceEditorRef.editor.resize();
+  }
+
   onSqlExpressionClauseChange(clause) {
     this.props.onChange(this.props.adhocFilter.duplicateWith({
       clause: clause && clause.clause,
@@ -73,6 +78,12 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     }));
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
   render() {
     const { adhocFilter, height } = this.props;
 
@@ -101,6 +112,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
         </FormGroup>
         <FormGroup>
           <AceEditor
+            ref={this.handleAceEditorRef}
             mode="sql"
             theme="github"
             height={(height - 100) + 'px'}
diff --git a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
index 24ac5b5..5611a32 100644
--- a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
@@ -46,6 +46,8 @@ export default class AdhocMetricEditPopover extends React.Component {
     this.onDragDown = this.onDragDown.bind(this);
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
+    this.refreshAceEditor = this.refreshAceEditor.bind(this);
     this.state = {
       adhocMetric: this.props.adhocMetric,
       width: startingWidth,
@@ -137,6 +139,16 @@ export default class AdhocMetricEditPopover extends React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
+  refreshAceEditor() {
+    setTimeout(() => this.aceEditorRef.editor.resize(), 0);
+  }
+
   render() {
     const {
       adhocMetric: propsAdhocMetric,
@@ -200,6 +212,8 @@ export default class AdhocMetricEditPopover extends React.Component {
           defaultActiveKey={adhocMetric.expressionType}
           className="adhoc-metric-edit-tabs"
           style={{ height: this.state.height, width: this.state.width }}
+          onSelect={this.refreshAceEditor}
+          animation={false}
         >
           <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SIMPLE} title="Simple">
             <FormGroup>
@@ -216,6 +230,7 @@ export default class AdhocMetricEditPopover extends React.Component {
             <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL">
               <FormGroup>
                 <AceEditor
+                  ref={this.handleAceEditorRef}
                   mode="sql"
                   theme="github"
                   height={(this.state.height - 43) + 'px'}

-- 
To stop receiving notification emails like this one, please contact
ccwilliams@apache.org.