-
Notifications
You must be signed in to change notification settings - Fork 23
/
users_input.jsx
93 lines (82 loc) · 2.64 KB
/
users_input.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash/debounce';
import AsyncSelect from 'react-select/async';
// UsersInput searches and selects user profiles displayed by username.
// Users prop can handle the user profile object or strings directly if the user object is not available.
// Returns the selected users ids in the `OnChange` value parameter.
export default class UsersInput extends React.Component {
static propTypes = {
placeholder: PropTypes.string,
users: PropTypes.array,
onChange: PropTypes.func,
actions: PropTypes.shape({
searchProfiles: PropTypes.func.isRequired,
}).isRequired,
};
onChange = (value) => {
if (this.props.onChange) {
this.props.onChange(value);
}
}
getOptionValue = (user) => {
if (user.id) {
return user.id;
}
return user;
};
formatOptionLabel = (option) => {
if (option.username) {
return (
<React.Fragment>
{ `@${option.username}`}
</React.Fragment>
);
}
return option;
}
debouncedSearchProfiles = debounce((term, callback) => {
this.props.actions.searchProfiles(term).then(({data}) => {
callback(data);
}).catch(() => {
// eslint-disable-next-line no-console
console.error('Error searching user profiles in custom attribute settings dropdown.');
callback([]);
});
}, 150);
usersLoader = (term, callback) => {
try {
this.debouncedSearchProfiles(term, callback);
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
callback([]);
}
};
render() {
return (
<AsyncSelect
isMulti={true}
cacheOptions={true}
defaultOptions={false}
loadOptions={this.usersLoader}
onChange={this.onChange}
getOptionValue={this.getOptionValue}
formatOptionLabel={this.formatOptionLabel}
defaultMenuIsOpen={false}
openMenuOnClick={false}
isClearable={false}
placeholder={this.props.placeholder}
value={this.props.users}
components={{DropdownIndicator: () => null, IndicatorSeparator: () => null}}
styles={customStyles}
/>
);
}
}
const customStyles = {
control: (provided) => ({
...provided,
minHeight: 34,
}),
};