fix element types

This commit is contained in:
Florian Scholdei
2019-06-12 09:27:26 +02:00
parent a1945b3f89
commit 5fd9408b58
5 changed files with 36 additions and 22 deletions

View File

@@ -16,12 +16,9 @@ type Props = {
creatable?: boolean creatable?: boolean
}; };
type State = {}; type State = {};
class Autocomplete extends React.Component<Props, State> { class Autocomplete extends React.Component<Props, State> {
static defaultProps = { static defaultProps = {
placeholder: "Type here", placeholder: "Type here",
loadingMessage: "Loading...", loadingMessage: "Loading...",
@@ -33,7 +30,11 @@ class Autocomplete extends React.Component<Props, State> {
}; };
// We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944) // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => { isValidNewOption = (
inputValue: string,
selectValue: SelectValue,
selectOptions: SelectValue[]
) => {
const isNotDuplicated = !selectOptions const isNotDuplicated = !selectOptions
.map(option => option.label) .map(option => option.label)
.includes(inputValue); .includes(inputValue);
@@ -42,12 +43,21 @@ class Autocomplete extends React.Component<Props, State> {
}; };
render() { render() {
const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = 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? {creatable ? (
<AsyncCreatable <AsyncCreatable
cacheOptions cacheOptions
loadOptions={loadSuggestions} loadOptions={loadSuggestions}
@@ -64,7 +74,7 @@ class Autocomplete extends React.Component<Props, State> {
}); });
}} }}
/> />
: ) : (
<Async <Async
cacheOptions cacheOptions
loadOptions={loadSuggestions} loadOptions={loadSuggestions}
@@ -74,13 +84,11 @@ class Autocomplete extends React.Component<Props, State> {
loadingMessage={() => loadingMessage} loadingMessage={() => loadingMessage}
noOptionsMessage={() => noOptionsMessage} noOptionsMessage={() => noOptionsMessage}
/> />
)}
}
</div> </div>
</div> </div>
); );
} }
} }
export default Autocomplete; export default Autocomplete;

View File

@@ -7,7 +7,7 @@ import UserGroupAutocomplete from "./UserGroupAutocomplete";
type Props = { type Props = {
groupAutocompleteLink: string, groupAutocompleteLink: string,
valueSelected: SelectValue => void, valueSelected: SelectValue => void,
value: string, value?: SelectValue,
// Context props // Context props
t: string => string t: string => string

View File

@@ -7,7 +7,7 @@ import UserGroupAutocomplete from "./UserGroupAutocomplete";
type Props = { type Props = {
userAutocompleteLink: string, userAutocompleteLink: string,
valueSelected: SelectValue => void, valueSelected: SelectValue => void,
value: string, value?: SelectValue,
// Context props // Context props
t: string => string t: string => string

View File

@@ -5,9 +5,12 @@ import Autocomplete from "./Autocomplete";
type Props = { type Props = {
autocompleteLink: string, autocompleteLink: string,
label: string,
noOptionsMessage: string,
loadingMessage: string,
placeholder: string,
valueSelected: SelectValue => void, valueSelected: SelectValue => void,
value: string, value?: SelectValue
label: string
}; };
class UserGroupAutocomplete extends React.Component<Props> { class UserGroupAutocomplete extends React.Component<Props> {
@@ -34,17 +37,20 @@ class UserGroupAutocomplete extends React.Component<Props> {
}; };
render() { render() {
const { value, label } = this.props; const { autocompleteLink, label, noOptionsMessage, loadingMessage, placeholder, value } = this.props;
return ( return (
<Autocomplete <Autocomplete
autocompleteLink={autocompleteLink}
label={label}
noOptionsMessage={noOptionsMessage}
loadingMessage={loadingMessage}
placeholder={placeholder}
loadSuggestions={this.loadSuggestions} loadSuggestions={this.loadSuggestions}
valueSelected={this.selectName} valueSelected={this.selectName}
value={value} value={value}
creatable={true} creatable={true}
label={label}
{...this.props}
/> />
); ); // {...this.props}
} }
} }

View File

@@ -43,10 +43,10 @@
"autocomplete": { "autocomplete": {
"group": "Gruppe", "group": "Gruppe",
"user": "Benutzer", "user": "Benutzer",
"no-group-options": "Kein Gruppenname als Vorschlag verfügbar", "noGroupOptions": "Kein Gruppenname als Vorschlag verfügbar",
"group-placeholder": "Gruppe eingeben", "groupPlaceholder": "Gruppe eingeben",
"no-user-options": "Kein Benutzername als Vorschlag verfügbar", "noUserOptions": "Kein Benutzername als Vorschlag verfügbar",
"user-placeholder": "Benutzer eingeben", "userPlaceholder": "Benutzer eingeben",
"loading": "suche..." "loading": "suche..."
}, },
"paginator": { "paginator": {