Moved autocomplete components and types to respective packages

scm-ui/src/containers/Autocomplete.js

@@ -1,81 +0,0 @@
-// @flow
-import React from "react";
-import { LabelWithHelpIcon } from "@scm-manager/ui-components";
-import { AsyncCreatable } from "react-select";
-
-export type AutocompleteObject = {
-  id: string,
-  displayName: string
-};
-
-export type SelectValue = {
-  value: AutocompleteObject,
-  label: string
-};
-
-type Props = {
-  loadSuggestions: string => Promise<AutocompleteObject>,
-  valueSelected: SelectValue => void,
-  label: string,
-  helpText?: string,
-  value?: SelectValue,
-  placeholder: string,
-  loadingMessage: string,
-  noOptionsMessage: string
-};
-
-
-type State = {};
-
-class Autocomplete extends React.Component<Props, State> {
-
-
-  static defaultProps = {
-    placeholder: "Type here",
-    loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available"
-  };
-
-  handleInputChange = (newValue: SelectValue) => {
-    this.props.valueSelected(newValue);
-  };
-
-  // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
-  isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => {
-    const isNotDuplicated = !selectOptions
-      .map(option => option.label)
-      .includes(inputValue);
-    const isNotEmpty = inputValue !== "";
-    return isNotEmpty && isNotDuplicated;
-  };
-
-  render() {
-    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions } = this.props;
-    return (
-      <div className="field">
-        <LabelWithHelpIcon label={label} helpText={helpText} />
-        <div className="control">
-          <AsyncCreatable
-            cacheOptions
-            loadOptions={loadSuggestions}
-            onChange={this.handleInputChange}
-            value={value}
-            placeholder={placeholder}
-            loadingMessage={() => loadingMessage}
-            noOptionsMessage={() => noOptionsMessage}
-            isValidNewOption={this.isValidNewOption}
-            onCreateOption={value => {
-              this.handleInputChange({
-                label: value,
-                value: { id: value, displayName: value }
-              });
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-
-export default Autocomplete;

scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js

@@ -1,82 +0,0 @@
-//@flow
-import React from "react";
-
-import { AddButton } from "@scm-manager/ui-components";
-import Autocomplete from "../../containers/Autocomplete";
-import type {
-  AutocompleteObject,
-  SelectValue
-} from "../../containers/Autocomplete";
-
-type Props = {
-  addEntry: SelectValue => void,
-  disabled: boolean,
-  buttonLabel: string,
-  fieldLabel: string,
-  helpText?: string,
-  loadSuggestions: string => Promise<AutocompleteObject>,
-  placeholder?: string,
-  loadingMessage?: string,
-  noOptionsMessage?: string
-};
-
-type State = {
-  selectedValue?: SelectValue
-};
-
-class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { selectedValue: undefined };
-  }
-  render() {
-    const { disabled, buttonLabel, fieldLabel, helpText, loadSuggestions, placeholder, loadingMessage, noOptionsMessage } = this.props;
-
-    const { selectedValue } = this.state;
-    return (
-      <div className="field">
-        <Autocomplete
-          label={fieldLabel}
-          loadSuggestions={loadSuggestions}
-          valueSelected={this.handleAddEntryChange}
-          helpText={helpText}
-          value={selectedValue}
-          placeholder={placeholder}
-          loadingMessage={loadingMessage}
-          noOptionsMessage={noOptionsMessage}
-        />
-
-        <AddButton
-          label={buttonLabel}
-          action={this.addButtonClicked}
-          disabled={disabled}
-        />
-      </div>
-    );
-  }
-
-  addButtonClicked = (event: Event) => {
-    event.preventDefault();
-    this.appendEntry();
-  };
-
-  appendEntry = () => {
-    const { selectedValue } = this.state;
-    if (!selectedValue) {
-      return;
-    }
-    // $FlowFixMe null is needed to clear the selection; undefined does not work
-    this.setState({ ...this.state, selectedValue: null }, () =>
-      this.props.addEntry(selectedValue)
-    );
-  };
-
-  handleAddEntryChange = (selection: SelectValue) => {
-    this.setState({
-      ...this.state,
-      selectedValue: selection
-    });
-  };
-}
-
-export default AutocompleteAddEntryToTableField;

scm-ui/src/groups/components/GroupForm.js

@@ -1,13 +1,16 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { InputField, SubmitButton, Textarea } from "@scm-manager/ui-components";
-import type { Group } from "@scm-manager/ui-types";
+import {
+  AutocompleteAddEntryToTableField,
+  InputField,
+  SubmitButton,
+  Textarea
+} from "@scm-manager/ui-components";
+import type { Group, SelectValue } from "@scm-manager/ui-types";
 
 import * as validator from "./groupValidation";
 import MemberNameTable from "./MemberNameTable";
-import AutocompleteAddEntryToTableField from "./AutocompleteAddEntryToTableField";
-import type { SelectValue } from "../../containers/Autocomplete";
 
 type Props = {
   t: string => string,

scm-ui/src/repos/permissions/components/CreatePermissionForm.js

@@ -1,15 +1,14 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { SubmitButton } from "@scm-manager/ui-components";
+import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
 import TypeSelector from "./TypeSelector";
 import type {
   PermissionCollection,
-  PermissionCreateEntry
+  PermissionCreateEntry,
+  SelectValue
 } from "@scm-manager/ui-types";
 import * as validator from "./permissionValidation";
-import Autocomplete from "../../../containers/Autocomplete";
-import type { SelectValue } from "../../../containers/Autocomplete";
 
 type Props = {
   t: string => string,