Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-19 22:12:10 +01:00
Code Issues Packages Projects Releases Activity

Cleanup Autocomplete component (#1917)

Browse Source 
Extract common properties for both autocomplete variations.
This commit is contained in:
René Pfeuffer
2022-01-12 09:10:18 +01:00
committed by GitHub
parent 32cf1f0044
commit 070d5105d3
1 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
scm-ui/ui-components/src/Autocomplete.tsx
View File

@@ -88,48 +88,40 @@ class Autocomplete extends React.Component<Props, State> {
disabled
} = this.props;
const asyncProps = {
className: "autocomplete-entry",
classNamePrefix: "autocomplete-entry",
cacheOptions: true,
loadOptions: loadSuggestions,
onChange: this.handleInputChange,
value,
placeholder,
loadingMessage: () => loadingMessage,
noOptionsMessage: () => noOptionsMessage,
isDisabled: disabled,
"aria-label": helpText || label
};
return (
<div className={classNames("field", className)}>
<LabelWithHelpIcon label={label} helpText={helpText} />
<div className="control">
{creatable ? (
<AsyncCreatable
className="autocomplete-entry"
classNamePrefix="autocomplete-entry"
cacheOptions
loadOptions={loadSuggestions}
onChange={this.handleInputChange}
value={value}
placeholder={placeholder}
loadingMessage={() => loadingMessage}
noOptionsMessage={() => noOptionsMessage}
{...asyncProps}
isValidNewOption={this.isValidNewOption}
onCreateOption={value => {
onCreateOption={newValue => {
this.selectValue({
label: value,
label: newValue,
value: {
id: value,
displayName: value
id: newValue,
displayName: newValue
}
});
}}
aria-label={helpText || label}
isDisabled={disabled}
/>
) : (
<Async
className="autocomplete-entry"
classNamePrefix="autocomplete-entry"
cacheOptions
loadOptions={loadSuggestions}
onChange={this.handleInputChange}
value={value}
placeholder={placeholder}
loadingMessage={() => loadingMessage}
noOptionsMessage={() => noOptionsMessage}
aria-label={helpText || label}
isDisabled={disabled}
/>
<Async {...asyncProps} />
)}
</div>
{errorMessage ? <p className="help is-danger">{errorMessage}</p> : null}