Add a Async Select that fetches options from given endpoint (#1909)

* Add a Async Select that fetches options from given endpoint

* update it statement

superset/assets/javascripts/components/AsyncSelect.jsx

@@ -0,0 +1,59 @@
+const $ = window.$ = require('jquery');
+import React from 'react';
+import Select from 'react-select';
+
+const propTypes = {
+  dataEndpoint: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+  mutator: React.PropTypes.func.isRequired,
+  value: React.PropTypes.number,
+  valueRenderer: React.PropTypes.func,
+  placeholder: React.PropTypes.string,
+};
+
+const defaultProps = {
+  placeholder: 'Select ...',
+  valueRenderer: (o) => (<div>{o.label}</div>),
+};
+
+class AsyncSelect extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      options: [],
+    };
+  }
+  componentDidMount() {
+    this.fetchOptions();
+  }
+  fetchOptions() {
+    this.setState({ isLoading: true });
+    const mutator = this.props.mutator;
+    $.get(this.props.dataEndpoint, (data) => {
+      this.setState({ options: mutator ? mutator(data) : data, isLoading: false });
+    });
+  }
+  onChange(opt) {
+    this.props.onChange(opt);
+  }
+  render() {
+    return (
+      <div>
+        <Select
+          placeholder={this.props.placeholder}
+          options={this.state.options}
+          value={this.props.value}
+          isLoading={this.state.isLoading}
+          onChange={this.onChange.bind(this)}
+          valueRenderer={this.props.valueRenderer}
+        />
+      </div>
+    );
+  }
+}
+
+AsyncSelect.propTypes = propTypes;
+AsyncSelect.defaultProps = defaultProps;
+
+export default AsyncSelect;