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:22:42 UTC
[incubator-superset] branch master updated: expanding simple tab
(#5032)
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 <ga...@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.