@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
82 lines • 6.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormErrorText, HelpItem, useFetch, } from "../../ui-shared";
import { Button, Chip, ChipGroup, FormGroup, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from "@patternfly/react-core";
import { TimesIcon } from "@patternfly/react-icons";
import { debounce } from "lodash-es";
import { useCallback, useRef, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import useToggle from "../../utils/useToggle";
export const UserSelect = ({ name, label, helpText, defaultValue, isRequired, variant = "typeaheadMulti", }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { control, getValues, formState: { errors }, } = useFormContext();
const values = getValues(name);
const [open, toggleOpen, setOpen] = useToggle();
const [users, setUsers] = useState([]);
const [inputValue, setInputValue] = useState("");
const [search, setSearch] = useState("");
const textInputRef = useRef();
const debounceFn = useCallback(debounce(setSearch, 1000), []);
useFetch(() => {
const params = {
max: 20,
};
if (search) {
params.username = search;
}
if ((values === null || values === void 0 ? void 0 : values.length) && !search) {
return Promise.all(values.map((id) => adminClient.users.findOne({ id })));
}
return adminClient.users.find(params);
}, setUsers, [search]);
const convert = (clients) => clients
.filter((c) => c !== undefined)
.map((option) => (_jsx(SelectOption, { value: option.id, selected: values === null || values === void 0 ? void 0 : values.includes(option.id), children: option.username }, option.id)));
return (_jsxs(FormGroup, { label: t(label), isRequired: isRequired, labelIcon: _jsx(HelpItem, { helpText: helpText, fieldLabelId: label }), fieldId: name, children: [_jsx(Controller, { name: name, defaultValue: defaultValue, control: control, rules: isRequired && variant === "typeaheadMulti"
? { validate: (value) => value.length > 0 }
: { required: isRequired }, render: ({ field }) => (_jsx(Select, { id: name, onOpenChange: toggleOpen, toggle: (ref) => (_jsx(MenuToggle, { "data-testid": name, ref: ref, variant: "typeahead", onClick: toggleOpen, isExpanded: open, isFullWidth: true, status: errors[name] ? "danger" : undefined, children: _jsxs(TextInputGroup, { isPlain: true, children: [_jsx(TextInputGroupMain, { value: inputValue, onClick: toggleOpen, onChange: (_, value) => {
setOpen(true);
setInputValue(value);
debounceFn(value);
}, autoComplete: "off", innerRef: textInputRef, placeholderText: t("selectAUser"), ...(field.value && {
"aria-activedescendant": field.value,
}), role: "combobox", isExpanded: open, "aria-controls": "select-create-typeahead-listbox", children: variant === "typeaheadMulti" &&
Array.isArray(field.value) && (_jsx(ChipGroup, { "aria-label": "Current selections", children: field.value.map((selection, index) => {
var _a;
return (_jsx(Chip, { onClick: (ev) => {
ev.stopPropagation();
field.onChange(field.value.filter((item) => item !== selection));
}, children: (_a = users.find((u) => (u === null || u === void 0 ? void 0 : u.id) === selection)) === null || _a === void 0 ? void 0 : _a.username }, index));
}) })) }), _jsx(TextInputGroupUtilities, { children: !!search && (_jsx(Button, { variant: "plain", onClick: () => {
var _a;
setInputValue("");
setSearch("");
field.onChange([]);
(_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, "aria-label": "Clear input value", children: _jsx(TimesIcon, { "aria-hidden": true }) })) })] }) })), isOpen: open, selected: field.value, onSelect: (_, v) => {
var _a;
const option = v === null || v === void 0 ? void 0 : v.toString();
if (variant !== "typeaheadMulti") {
const removed = field.value.includes(option);
if (removed) {
field.onChange([]);
}
else {
field.onChange([option]);
}
setInputValue(removed
? ""
: ((_a = users.find((u) => (u === null || u === void 0 ? void 0 : u.id) === option)) === null || _a === void 0 ? void 0 : _a.username) || "");
setOpen(false);
}
else {
const changedValue = field.value.find((v) => v === option)
? field.value.filter((v) => v !== option)
: [...field.value, option];
field.onChange(changedValue);
}
}, "aria-label": t(name), children: _jsx(SelectList, { children: convert(users) }) })) }), errors[name] && _jsx(FormErrorText, { message: t("required") })] }));
};
//# sourceMappingURL=UserSelect.js.map