superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch master updated: expanding simple tab (#5032)
Date Mon, 21 May 2018 23:22:42 GMT
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 a746fce  expanding simple tab (#5032)
a746fce is described below

commit a746fce383390cda5ea48094c94d80aa92b7d7bb
Author: Gabe Lyons <gabe.lyons@airbnb.com>
AuthorDate: Mon May 21 16:22:40 2018 -0700

    expanding simple tab (#5032)
---
 ...AdhocFilterEditPopoverSimpleTabContent_spec.jsx | 15 +++++++++-
 .../explore/components/AdhocFilterEditPopover.jsx  |  6 ++++
 .../AdhocFilterEditPopoverSimpleTabContent.jsx     | 32 ++++++++++++++++++++++
 .../explore/components/controls/SelectControl.jsx  |  2 ++
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
b/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
index 005b287..74ac967 100644
--- a/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
@@ -43,15 +43,17 @@ const options = [
 
 function setup(overrides) {
   const onChange = sinon.spy();
+  const onHeightChange = sinon.spy();
   const props = {
     adhocFilter: simpleAdhocFilter,
     onChange,
+    onHeightChange,
     options,
     datasource: {},
     ...overrides,
   };
   const wrapper = shallow(<AdhocFilterEditPopoverSimpleTabContent {...props} />);
-  return { wrapper, onChange };
+  return { wrapper, onChange, onHeightChange };
 }
 
 describe('AdhocFilterEditPopoverSimpleTabContent', () => {
@@ -119,4 +121,15 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
     expect(wrapper.instance().isOperatorRelevant('regex')).to.be.true;
     expect(wrapper.instance().isOperatorRelevant('like')).to.be.false;
   });
+
+  it('expands when its multi comparator input field expands', () => {
+    const { wrapper, onHeightChange } = setup();
+
+    wrapper.instance().multiComparatorComponent =
+      { _selectRef: { select: { control: { clientHeight: 57 } } } };
+    wrapper.instance().handleMultiComparatorInputHeightChange();
+
+    expect(onHeightChange.calledOnce).to.be.true;
+    expect(onHeightChange.lastCall.args[0]).to.equal(27);
+  });
 });
diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
index 7439ab3..103ce22 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
@@ -32,6 +32,7 @@ export default class AdhocFilterEditPopover extends React.Component {
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onAdhocFilterChange = this.onAdhocFilterChange.bind(this);
+    this.adjustHeight = this.adjustHeight.bind(this);
 
     this.state = {
       adhocFilter: this.props.adhocFilter,
@@ -78,6 +79,10 @@ export default class AdhocFilterEditPopover extends React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  adjustHeight(heightDifference) {
+    this.setState(state => ({ height: state.height + heightDifference }));
+  }
+
   render() {
     const {
       adhocFilter: propsAdhocFilter,
@@ -115,6 +120,7 @@ export default class AdhocFilterEditPopover extends React.Component {
               onChange={this.onAdhocFilterChange}
               options={this.props.options}
               datasource={this.props.datasource}
+              onHeightChange={this.adjustHeight}
             />
           </Tab>
           {
diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
b/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
index b13fea1..b35da71 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
@@ -29,6 +29,7 @@ const propTypes = {
     PropTypes.shape({ saved_metric_name: PropTypes.string.isRequired }),
     adhocMetricType,
   ])).isRequired,
+  onHeightChange: PropTypes.func.isRequired,
   datasource: PropTypes.object,
 };
 
@@ -45,6 +46,8 @@ function translateOperator(operator) {
   return operator;
 }
 
+const SINGLE_LINE_SELECT_CONTROL_HEIGHT = 30;
+
 export default class AdhocFilterEditPopoverSimpleTabContent extends React.Component {
   constructor(props) {
     super(props);
@@ -54,9 +57,11 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     this.onInputComparatorChange = this.onInputComparatorChange.bind(this);
     this.isOperatorRelevant = this.isOperatorRelevant.bind(this);
     this.refreshComparatorSuggestions = this.refreshComparatorSuggestions.bind(this);
+    this.multiComparatorRef = this.multiComparatorRef.bind(this);
 
     this.state = {
       suggestions: [],
+      multiComparatorHeight: SINGLE_LINE_SELECT_CONTROL_HEIGHT,
     };
 
     this.selectProps = {
@@ -73,10 +78,15 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     this.refreshComparatorSuggestions();
   }
 
+  componentDidMount() {
+    this.handleMultiComparatorInputHeightChange();
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.adhocFilter.subject !== this.props.adhocFilter.subject) {
       this.refreshComparatorSuggestions();
     }
+    this.handleMultiComparatorInputHeightChange();
   }
 
   onSubjectChange(option) {
@@ -127,6 +137,21 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     }));
   }
 
+  handleMultiComparatorInputHeightChange() {
+    if (this.multiComparatorComponent) {
+      // eslint-disable-next-line no-underscore-dangle
+      const multiComparatorDOMNode = this.multiComparatorComponent._selectRef.select.control;
+      if (multiComparatorDOMNode) {
+        if (multiComparatorDOMNode.clientHeight !== this.state.multiComparatorHeight) {
+          this.props.onHeightChange((
+            multiComparatorDOMNode.clientHeight - this.state.multiComparatorHeight
+          ));
+          this.setState({ multiComparatorHeight: multiComparatorDOMNode.clientHeight });
+        }
+      }
+    }
+  }
+
   refreshComparatorSuggestions() {
     const datasource = this.props.datasource;
     const col = this.props.adhocFilter.subject;
@@ -163,6 +188,12 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     }
   }
 
+  multiComparatorRef(ref) {
+    if (ref) {
+      this.multiComparatorComponent = ref;
+    }
+  }
+
   render() {
     const { adhocFilter, options, datasource } = this.props;
 
@@ -238,6 +269,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
                 onChange={this.onComparatorChange}
                 showHeader={false}
                 noResultsText={t('type a value here')}
+                refFunc={this.multiComparatorRef}
               /> :
               <input
                 ref={this.focusComparator}
diff --git a/superset/assets/src/explore/components/controls/SelectControl.jsx b/superset/assets/src/explore/components/controls/SelectControl.jsx
index d2f3543..64fc9e6 100644
--- a/superset/assets/src/explore/components/controls/SelectControl.jsx
+++ b/superset/assets/src/explore/components/controls/SelectControl.jsx
@@ -27,6 +27,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   noResultsText: PropTypes.string,
+  refFunc: PropTypes.func,
 };
 
 const defaultProps = {
@@ -129,6 +130,7 @@ export default class SelectControl extends React.PureComponent {
       noResultsText: this.props.noResultsText,
       selectComponent: this.props.freeForm ? Creatable : Select,
       disabled: this.props.disabled,
+      refFunc: this.props.refFunc,
     };
     return (
       <div>

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

Mime
View raw message