@keycloakify/keycloak-account-ui/ui-shared/user-profile/MultiInputComponent.js

<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, ButtonVariant, InputGroup, TextInput, InputGroupItem, } from "@patternfly/react-core";
import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
import { Fragment, useEffect, useMemo } from "react";
import { useWatch } from "react-hook-form";
import { UserProfileGroup } from "../../ui-shared/user-profile/UserProfileGroup";
import { fieldName, labelAttribute } from "../../ui-shared/user-profile/utils";
export const MultiInputComponent = (_a) => {
    var { t, form, attribute, renderer } = _a, rest = __rest(_a, ["t", "form", "attribute", "renderer"]);
    return (_jsx(UserProfileGroup, { t: t, form: form, attribute: attribute, renderer: renderer, children: _jsx(MultiLineInput, Object.assign({ t: t, form: form, "aria-label": labelAttribute(t, attribute), name: fieldName(attribute.name), addButtonLabel: t("addMultivaluedLabel", {
                fieldLabel: labelAttribute(t, attribute),
            }) }, rest)) }));
};
const MultiLineInput = (_a) => {
    var { t, name, inputType, form, addButtonLabel, isDisabled = false, defaultValue, id } = _a, rest = __rest(_a, ["t", "name", "inputType", "form", "addButtonLabel", "isDisabled", "defaultValue", "id"]);
    const { register, setValue, control } = form;
    const value = useWatch({
        name,
        control,
        defaultValue: defaultValue || "",
    });
    const fields = useMemo(() => {
        return Array.isArray(value) && value.length !== 0
            ? value
            : defaultValue || [""];
    }, [value]);
    const remove = (index) => {
        update([...fields.slice(0, index), ...fields.slice(index + 1)]);
    };
    const append = () => {
        update([...fields, ""]);
    };
    const updateValue = (index, value) => {
        update([...fields.slice(0, index), value, ...fields.slice(index + 1)]);
    };
    const update = (values) => {
        const fieldValue = values.flatMap((field) => field);
        setValue(name, fieldValue, {
            shouldDirty: true,
        });
    };
    const type = inputType.startsWith("html")
        ? inputType.substring("html".length + 2)
        : "text";
    useEffect(() => {
        register(name);
    }, [register]);
    return (_jsx("div", { id: id, children: fields.map((value, index) => (_jsxs(Fragment, { children: [_jsxs(InputGroup, { children: [_jsx(InputGroupItem, { isFill: true, children: _jsx(TextInput, Object.assign({ "data-testid": name + index, onChange: (_event, value) => updateValue(index, value), name: `${name}.${index}.value`, value: value, isDisabled: isDisabled, type: type }, rest)) }), _jsx(InputGroupItem, { children: _jsx(Button, { "data-testid": "remove" + index, variant: ButtonVariant.link, onClick: () => remove(index), tabIndex: -1, "aria-label": t("remove"), isDisabled: fields.length === 1 || isDisabled, children: _jsx(MinusCircleIcon, {}) }) })] }), index === fields.length - 1 && (_jsxs(Button, { variant: ButtonVariant.link, onClick: append, tabIndex: -1, "aria-label": t("add"), "data-testid": "addValue", isDisabled: !value || isDisabled, children: [_jsx(PlusCircleIcon, {}), " ", t(addButtonLabel || "add")] }))] }, index))) }));
};
//# sourceMappingURL=MultiInputComponent.js.map