Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-11 07:55:47 +01:00
Code Issues Packages Projects Releases Activity

Introduce new combobox and make it work with chip input

Browse Source 
We introduced a new accessible combobox component. This component is based on headless ui and made compatible with our components and forms. Also we replaced the outdated `Autocomplete` component with the new combobox.

Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>

Reviewed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
This commit is contained in:
Eduard Heimbuch
2023-06-19 13:04:26 +02:00
parent e4d846b0d4
commit bc2a599b2c
39 changed files with 1119 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
View File

@@ -22,12 +22,12 @@
* SOFTWARE.
*/
import React, { FC } from "react";
import React, { FC, useState } from "react";
import { CUSTOM_NAMESPACE_STRATEGY } from "@scm-manager/ui-types";
import { Autocomplete } from "@scm-manager/ui-components";
import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
import { useTranslation } from "react-i18next";
import { useNamespaceSuggestions } from "@scm-manager/ui-api";
import { ComboboxField } from "@scm-manager/ui-forms";
import { useNamespaceOptions } from "@scm-manager/ui-api";
type Props = {
namespace: string;
@@ -42,17 +42,18 @@ const NamespaceInput: FC<Props> = ({
handleNamespaceChange,
namespaceStrategy,
namespaceValidationError,
disabled
disabled,
}) => {
const [t] = useTranslation("repos");
const loadNamespaceSuggestions = useNamespaceSuggestions();
const [query, setQuery] = useState("");
const { isLoading, data } = useNamespaceOptions(query);
let informationMessage = undefined;
if (namespace?.indexOf(" ") > 0) {
informationMessage = t("validation.namespaceSpaceWarningText");
}
const repositorySelectValue = namespace ? { value: { id: namespace, displayName: "" }, label: namespace } : undefined;
const repositorySelectValue = namespace ? { value: { id: namespace, displayName: "" }, label: namespace } : null;
const props = {
label: t("repository.namespace"),
helpText: t("help.namespaceHelpText"),
@@ -61,18 +62,21 @@ const NamespaceInput: FC<Props> = ({
errorMessage: namespaceValidationError ? t("validation.namespace-invalid") : "",
informationMessage: informationMessage,
validationError: namespaceValidationError,
disabled: disabled
disabled: disabled,
};
if (namespaceStrategy === CUSTOM_NAMESPACE_STRATEGY) {
return (
<Autocomplete
{...props}
loadSuggestions={loadNamespaceSuggestions}
// @ts-ignore
<ComboboxField
label={props.label}
helpText={props.helpText}
value={repositorySelectValue}
valueSelected={namespaceValue => handleNamespaceChange(namespaceValue.value.id)}
placeholder={""}
creatable={true}
onChange={(option) => handleNamespaceChange(option?.value.id ?? "")}
onQueryChange={setQuery}
options={data}
isLoading={isLoading}
nullable
/>
);
}