@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
39 lines • 2.59 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { HelpItem, KeycloakSelect, SelectVariant, } from "../../ui-shared";
import { FormGroup, SelectOption } from "@patternfly/react-core";
import { useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { convertToName } from "../../components/dynamic/DynamicComponents";
function stringToMultiline(value) {
return typeof value === "string" && value.length > 0 ? value.split("##") : [];
}
function toStringValue(formValue) {
return formValue.join("##");
}
export const MultiValuedListComponent = ({ name, label, helpText, defaultValue, options, isDisabled = false, stringify, required, }) => {
const { t } = useTranslation();
const { control } = useFormContext();
const [open, setOpen] = useState(false);
return (_jsx(FormGroup, { label: t(label), labelIcon: _jsx(HelpItem, { helpText: t(helpText), fieldLabelId: `${label}` }), fieldId: name, isRequired: required, children: _jsx(Controller, { name: convertToName(name), control: control, defaultValue: stringify ? defaultValue || "" : defaultValue ? [defaultValue] : [], render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: name, "data-testid": name, isDisabled: isDisabled, chipGroupProps: {
numChips: 3,
expandedText: t("hide"),
collapsedText: t("showRemaining"),
}, variant: SelectVariant.typeaheadMulti, typeAheadAriaLabel: "Select", onToggle: (isOpen) => setOpen(isOpen), selections: stringify ? stringToMultiline(field.value) : field.value, onSelect: (v) => {
const option = v.toString();
const values = stringify
? stringToMultiline(field.value)
: field.value;
let newValue;
if (values.includes(option)) {
newValue = values.filter((item) => item !== option);
}
else {
newValue = [...values, option];
}
field.onChange(stringify ? toStringValue(newValue) : newValue);
}, onClear: () => {
field.onChange(stringify ? "" : []);
}, isOpen: open, "aria-label": t(label), children: options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(SelectOption, { value: option, children: option }, option))) })) }) }));
};
//# sourceMappingURL=MultivaluedListComponent.js.map