@keycloakify/keycloak-admin-ui/components/dynamic/MapComponent.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { HelpItem, generateId } from "../../ui-shared";
import { ActionList, ActionListItem, Button, EmptyState, EmptyStateBody, EmptyStateFooter, Flex, FlexItem, FormGroup, TextInput, } from "@patternfly/react-core";
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { convertToName } from "../../components/dynamic/DynamicComponents";
export const MapComponent = ({ name, label, helpText, required, isDisabled, }) => {
    const { t } = useTranslation();
    const { getValues, setValue, register } = useFormContext();
    const [map, setMap] = useState([]);
    const fieldName = convertToName(name);
    useEffect(() => {
        register(fieldName);
        const values = JSON.parse(getValues(fieldName) || "[]");
        setMap(values.map((value) => ({ ...value, id: generateId() })));
    }, []);
    const appendNew = () => setMap([...map, { key: "", value: "", id: generateId() }]);
    const update = (val = map) => {
        setValue(fieldName, JSON.stringify(
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        val.filter((e) => e.key !== "").map(({ id, ...entry }) => entry)));
    };
    const updateKey = (index, key) => {
        updateEntry(index, { ...map[index], key });
    };
    const updateValue = (index, value) => {
        updateEntry(index, { ...map[index], value });
    };
    const updateEntry = (index, entry) => setMap([...map.slice(0, index), entry, ...map.slice(index + 1)]);
    const remove = (index) => {
        const value = [...map.slice(0, index), ...map.slice(index + 1)];
        setMap(value);
        update(value);
    };
    return map.length !== 0 ? (_jsxs(FormGroup, { label: t(label), labelIcon: _jsx(HelpItem, { helpText: t(helpText), fieldLabelId: `${label}` }), fieldId: name, isRequired: required, children: [_jsxs(Flex, { direction: { default: "column" }, children: [_jsxs(Flex, { children: [_jsx(FlexItem, { grow: { default: "grow" }, spacer: { default: "spacerNone" }, children: _jsx("strong", { children: t("key") }) }), _jsx(FlexItem, { grow: { default: "grow" }, children: _jsx("strong", { children: t("value") }) })] }), map.map((attribute, index) => (_jsxs(Flex, { "data-testid": "row", children: [_jsx(FlexItem, { grow: { default: "grow" }, children: _jsx(TextInput, { name: `${fieldName}.${index}.key`, placeholder: t("keyPlaceholder"), "aria-label": t("key"), defaultValue: attribute.key, "data-testid": `${fieldName}.${index}.key`, onChange: (_event, value) => updateKey(index, value), onBlur: () => update() }) }), _jsx(FlexItem, { grow: { default: "grow" }, spacer: { default: "spacerNone" }, children: _jsx(TextInput, { name: `${fieldName}.${index}.value`, placeholder: t("valuePlaceholder"), "aria-label": t("value"), defaultValue: attribute.value, "data-testid": `${fieldName}.${index}.value`, onChange: (_event, value) => updateValue(index, value), onBlur: () => update() }) }), _jsx(FlexItem, { children: _jsx(Button, { variant: "link", title: t("removeAttribute"), isDisabled: isDisabled, onClick: () => remove(index), "data-testid": `${fieldName}.${index}.remove`, children: _jsx(MinusCircleIcon, {}) }) })] }, attribute.id)))] }), _jsx(ActionList, { children: _jsx(ActionListItem, { children: _jsx(Button, { "data-testid": `${fieldName}-add-row`, className: "pf-v5-u-px-0 pf-v5-u-mt-sm", variant: "link", icon: _jsx(PlusCircleIcon, {}), onClick: () => appendNew(), 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=MapComponent.js.map