You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2018/05/21 23:22:41 UTC
[GitHub] williaster closed pull request #5032: [Explore][Adhoc Filters]
Expanding the Adhoc Filter popover when the content expands
williaster closed pull request #5032: [Explore][Adhoc Filters] Expanding the Adhoc Filter popover when the content expands
URL: https://github.com/apache/incubator-superset/pull/5032
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx b/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
index 005b287626..74ac96701e 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 7439ab3ad2..103ce2272e 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 b13fea1bdb..b35da71012 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 d2f3543068..64fc9e60d1 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>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org