|
|
|
@ -1,4 +1,4 @@ |
|
|
|
|
import React, { Component } from 'react'; |
|
|
|
|
import React, { Component } from 'react'; |
|
|
|
|
import Select from 'react-select'; |
|
|
|
|
import UserPickerOption from './UserPickerOption'; |
|
|
|
|
import withPicker from './withPicker'; |
|
|
|
@ -8,7 +8,7 @@ export interface IProps { |
|
|
|
|
backendSrv: any; |
|
|
|
|
isLoading: boolean; |
|
|
|
|
toggleLoading: any; |
|
|
|
|
userPicked: (user) => void; |
|
|
|
|
handlePicked: (user) => void; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export interface User { |
|
|
|
@ -19,26 +19,21 @@ export interface User { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
class UserPicker extends Component<IProps, any> { |
|
|
|
|
debouncedSearchUsers: any; |
|
|
|
|
debouncedSearch: any; |
|
|
|
|
backendSrv: any; |
|
|
|
|
|
|
|
|
|
constructor(props) { |
|
|
|
|
super(props); |
|
|
|
|
this.state = {}; |
|
|
|
|
this.searchUsers = this.searchUsers.bind(this); |
|
|
|
|
this.handleChange = this.handleChange.bind(this); |
|
|
|
|
this.debouncedSearchUsers = debounce(this.searchUsers, 300, { |
|
|
|
|
this.search = this.search.bind(this); |
|
|
|
|
// this.handleChange = this.handleChange.bind(this);
|
|
|
|
|
this.debouncedSearch = debounce(this.search, 300, { |
|
|
|
|
leading: true, |
|
|
|
|
trailing: false, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
handleChange(user: User) { |
|
|
|
|
const { userPicked } = this.props; |
|
|
|
|
userPicked(user); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
searchUsers(query?: string) { |
|
|
|
|
search(query?: string) { |
|
|
|
|
const { toggleLoading, backendSrv } = this.props; |
|
|
|
|
|
|
|
|
|
toggleLoading(true); |
|
|
|
@ -58,6 +53,7 @@ class UserPicker extends Component<IProps, any> { |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async; |
|
|
|
|
const { isLoading, handlePicked } = this.props; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="user-picker"> |
|
|
|
@ -66,11 +62,11 @@ class UserPicker extends Component<IProps, any> { |
|
|
|
|
multi={this.state.multi} |
|
|
|
|
labelKey="label" |
|
|
|
|
cache={false} |
|
|
|
|
isLoading={this.props.isLoading} |
|
|
|
|
loadOptions={this.debouncedSearchUsers} |
|
|
|
|
isLoading={isLoading} |
|
|
|
|
loadOptions={this.debouncedSearch} |
|
|
|
|
loadingPlaceholder="Loading..." |
|
|
|
|
noResultsText="No users found" |
|
|
|
|
onChange={this.handleChange} |
|
|
|
|
onChange={handlePicked} |
|
|
|
|
className="width-8 gf-form-input gf-form-input--form-dropdown" |
|
|
|
|
optionComponent={UserPickerOption} |
|
|
|
|
placeholder="Choose" |
|
|
|
|