2018-03-15 00:57:18 +11:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import Tooltip from '@atlaskit/tooltip';
|
2019-05-06 16:05:11 +10:00
|
|
|
import AsyncSelect from 'react-select/async';
|
2018-03-15 00:57:18 +11:00
|
|
|
import { colourOptions } from '../data';
|
|
|
|
|
|
2019-04-29 17:38:33 +10:00
|
|
|
const LoadingMessage = props => {
|
2018-03-15 00:57:18 +11:00
|
|
|
return (
|
|
|
|
|
<Tooltip content={'Custom Loading Message'}>
|
2019-04-29 17:38:33 +10:00
|
|
|
<div
|
|
|
|
|
{...props.innerProps}
|
|
|
|
|
style={props.getStyles('loadingMessage', props)}
|
|
|
|
|
>
|
|
|
|
|
{props.children}
|
2018-03-15 00:57:18 +11:00
|
|
|
</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type State = {
|
|
|
|
|
inputValue: string,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const filterColors = (inputValue: string) =>
|
|
|
|
|
colourOptions.filter(i =>
|
|
|
|
|
i.label.toLowerCase().includes(inputValue.toLowerCase())
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const promiseOptions = inputValue =>
|
|
|
|
|
new Promise(resolve => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
resolve(filterColors(inputValue));
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export default class CustomLoadingIndicator extends Component<*, State> {
|
|
|
|
|
state = { inputValue: '' };
|
|
|
|
|
handleInputChange = (newValue: string) => {
|
|
|
|
|
const inputValue = newValue.replace(/\W/g, '');
|
|
|
|
|
this.setState({ inputValue });
|
|
|
|
|
return inputValue;
|
|
|
|
|
};
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<AsyncSelect
|
|
|
|
|
cacheOptions
|
|
|
|
|
defaultOptions
|
|
|
|
|
loadOptions={promiseOptions}
|
2019-04-29 17:38:33 +10:00
|
|
|
styles={{
|
|
|
|
|
loadingMessage: base => ({
|
|
|
|
|
...base,
|
|
|
|
|
backgroundColor: colourOptions[2].color,
|
|
|
|
|
color: 'white',
|
|
|
|
|
}),
|
|
|
|
|
}}
|
2018-03-15 00:57:18 +11:00
|
|
|
components={{ LoadingMessage }}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
