@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
32 lines • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ActionList, ActionListItem, Button, EmptyState, EmptyStateBody, EmptyStateFooter, Grid, GridItem, HelperText, HelperTextItem, TextInput, } from "@patternfly/react-core";
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
import { Fragment } from "react";
import { useFieldArray, useFormContext, useWatch, } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { KeySelect } from "../../components/key-value-form/KeySelect";
import { ValueSelect } from "../../components/key-value-form/ValueSelect";
export const KeyValueInput = ({ name, label = "attributes", defaultKeyValue, isDisabled = false, }) => {
const { t } = useTranslation();
const { control, register, formState: { errors }, } = useFormContext();
const { fields, append, remove } = useFieldArray({
shouldUnregister: true,
control,
name,
});
const appendNew = () => append({ key: "", value: "" });
const values = useWatch({
name,
control,
defaultValue: [],
});
return fields.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Grid, { hasGutter: true, children: [_jsx(GridItem, { className: "pf-v5-c-form__label", span: 5, children: _jsx("span", { className: "pf-v5-c-form__label-text", children: t("key") }) }), _jsx(GridItem, { className: "pf-v5-c-form__label", span: 7, children: _jsx("span", { className: "pf-v5-c-form__label-text", children: t("value") }) }), fields.map((attribute, index) => {
var _a, _b;
const error = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index];
const keyError = !!(error === null || error === void 0 ? void 0 : error.key);
const valueErrorPresent = !!(error === null || error === void 0 ? void 0 : error.value) || !!(error === null || error === void 0 ? void 0 : error.message);
const valueError = (error === null || error === void 0 ? void 0 : error.message) || t("valueError");
return (_jsxs(Fragment, { children: [_jsxs(GridItem, { span: 5, children: [defaultKeyValue ? (_jsx(KeySelect, { name: `${name}.${index}.key`, selectItems: defaultKeyValue, rules: { required: true } })) : (_jsx(TextInput, { placeholder: t("keyPlaceholder"), "aria-label": t("key"), "data-testid": `${name}-key`, ...register(`${name}.${index}.key`, { required: true }), validated: keyError ? "error" : "default", isRequired: true, isDisabled: isDisabled })), keyError && (_jsx(HelperText, { children: _jsx(HelperTextItem, { variant: "error", children: t("keyError") }) }))] }), _jsxs(GridItem, { span: 5, children: [defaultKeyValue ? (_jsx(ValueSelect, { name: `${name}.${index}.value`, keyValue: (_b = values[index]) === null || _b === void 0 ? void 0 : _b.key, selectItems: defaultKeyValue, rules: { required: true } })) : (_jsx(TextInput, { placeholder: t("valuePlaceholder"), "aria-label": t("value"), "data-testid": `${name}-value`, ...register(`${name}.${index}.value`, { required: true }), validated: valueErrorPresent ? "error" : "default", isRequired: true, isDisabled: isDisabled })), valueErrorPresent && (_jsx(HelperText, { children: _jsx(HelperTextItem, { variant: "error", children: valueError }) }))] }), _jsx(GridItem, { span: 2, children: _jsx(Button, { variant: "link", title: t("removeAttribute"), onClick: () => remove(index), "data-testid": `${name}-remove`, isDisabled: isDisabled, children: _jsx(MinusCircleIcon, {}) }) })] }, attribute.id));
})] }), _jsx(ActionList, { children: _jsx(ActionListItem, { children: _jsx(Button, { "data-testid": `${name}-add-row`, className: "pf-v5-u-px-0 pf-v5-u-mt-sm", variant: "link", icon: _jsx(PlusCircleIcon, {}), onClick: appendNew, isDisabled: isDisabled, children: t("addAttribute", { label }) }) }) })] })) : (_jsxs(EmptyState, { "data-testid": `${name}-empty-state`, className: "pf-v5-u-p-0", variant: "xs", children: [_jsx(EmptyStateBody, { children: t("missingAttributes", { label }) }), _jsx(EmptyStateFooter, { children: _jsx(Button, { "data-testid": `${name}-add-row`, variant: "link", icon: _jsx(PlusCircleIcon, {}), size: "sm", onClick: appendNew, isDisabled: isDisabled, children: t("addAttribute", { label }) }) })] }));
};
//# sourceMappingURL=KeyValueInput.js.map