add prop to the autocomplete component to indicate if an automatic create action is required

This commit is contained in:
Mohamed Karray
2019-03-27 10:12:05 +01:00
parent 563dfa015e
commit 2f4f1dbe02

View File

@@ -1,6 +1,6 @@
// @flow // @flow
import React from "react"; import React from "react";
import { AsyncCreatable } from "react-select"; import { AsyncCreatable, Async } from "react-select";
import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types"; import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
import LabelWithHelpIcon from "./forms/LabelWithHelpIcon"; import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
@@ -13,7 +13,8 @@ type Props = {
value?: SelectValue, value?: SelectValue,
placeholder: string, placeholder: string,
loadingMessage: string, loadingMessage: string,
noOptionsMessage: string noOptionsMessage: string,
creatable?: boolean
}; };
@@ -42,11 +43,12 @@ class Autocomplete extends React.Component<Props, State> {
}; };
render() { render() {
const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions } = this.props; const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = this.props;
return ( return (
<div className="field"> <div className="field">
<LabelWithHelpIcon label={label} helpText={helpText} /> <LabelWithHelpIcon label={label} helpText={helpText} />
<div className="control"> <div className="control">
{creatable?
<AsyncCreatable <AsyncCreatable
cacheOptions cacheOptions
loadOptions={loadSuggestions} loadOptions={loadSuggestions}
@@ -63,6 +65,18 @@ class Autocomplete extends React.Component<Props, State> {
}); });
}} }}
/> />
:
<Async
cacheOptions
loadOptions={loadSuggestions}
onChange={this.handleInputChange}
value={value}
placeholder={placeholder}
loadingMessage={() => loadingMessage}
noOptionsMessage={() => noOptionsMessage}
/>
}
</div> </div>
</div> </div>
); );