diff --git a/superset/assets/javascripts/components/AsyncSelect.jsx b/superset/assets/javascripts/components/AsyncSelect.jsx index 007281a116a0..69b4216a9c95 100644 --- a/superset/assets/javascripts/components/AsyncSelect.jsx +++ b/superset/assets/javascripts/components/AsyncSelect.jsx @@ -10,7 +10,10 @@ const propTypes = { onChange: PropTypes.func.isRequired, mutator: PropTypes.func.isRequired, onAsyncError: PropTypes.func, - value: PropTypes.number, + value: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.arrayOf(PropTypes.number), + ]), valueRenderer: PropTypes.func, placeholder: PropTypes.string, autoSelect: PropTypes.bool, @@ -63,6 +66,7 @@ class AsyncSelect extends React.PureComponent { isLoading={this.state.isLoading} onChange={this.onChange.bind(this)} valueRenderer={this.props.valueRenderer} + {...this.props} /> ); diff --git a/superset/assets/javascripts/explore/components/Control.jsx b/superset/assets/javascripts/explore/components/Control.jsx index 5c644c38f790..972ff0d3c19d 100644 --- a/superset/assets/javascripts/explore/components/Control.jsx +++ b/superset/assets/javascripts/explore/components/Control.jsx @@ -3,15 +3,16 @@ import PropTypes from 'prop-types'; import BoundsControl from './controls/BoundsControl'; import CheckboxControl from './controls/CheckboxControl'; +import ColorSchemeControl from './controls/ColorSchemeControl'; import DatasourceControl from './controls/DatasourceControl'; import DateFilterControl from './controls/DateFilterControl'; import FilterControl from './controls/FilterControl'; import HiddenControl from './controls/HiddenControl'; +import SelectAsyncControl from './controls/SelectAsyncControl'; import SelectControl from './controls/SelectControl'; import TextAreaControl from './controls/TextAreaControl'; import TextControl from './controls/TextControl'; import VizTypeControl from './controls/VizTypeControl'; -import ColorSchemeControl from './controls/ColorSchemeControl'; const controlMap = { BoundsControl, @@ -25,6 +26,7 @@ const controlMap = { TextControl, VizTypeControl, ColorSchemeControl, + SelectAsyncControl, }; const controlTypes = Object.keys(controlMap); diff --git a/superset/assets/javascripts/explore/components/controls/SelectAsyncControl.jsx b/superset/assets/javascripts/explore/components/controls/SelectAsyncControl.jsx new file mode 100644 index 000000000000..173a275ca9c3 --- /dev/null +++ b/superset/assets/javascripts/explore/components/controls/SelectAsyncControl.jsx @@ -0,0 +1,53 @@ +/* global notify */ +import React from 'react'; +import PropTypes from 'prop-types'; +import Select from '../../../components/AsyncSelect'; +import { t } from '../../../locales'; + +const propTypes = { + dataEndpoint: PropTypes.string.isRequired, + multi: PropTypes.bool, + mutator: PropTypes.func, + onAsyncErrorMessage: PropTypes.string, + onChange: PropTypes.func, + placeholder: PropTypes.string, + value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf(PropTypes.string), + PropTypes.arrayOf(PropTypes.number), + ]), +}; + +const defaultProps = { + multi: true, + onAsyncErrorMessage: t('Error while fetching data'), + onChange: () => {}, + placeholder: t('Select ...'), +}; + +const SelectAsyncControl = ({ value, onChange, dataEndpoint, + multi, mutator, placeholder, onAsyncErrorMessage }) => { + const onSelectionChange = (options) => { + const optionValues = options.map(option => option.value); + onChange(optionValues); + }; + + return ( +