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

Repackaged Keycloak Admin UI

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 = ({ t, form, attribute, renderer, ...rest }) => (_jsx(UserProfileGroup, { t: t, form: form, attribute: attribute, renderer: renderer, children: _jsx(MultiLineInput, { t: t, form: form, "aria-label": labelAttribute(t, attribute), name: fieldName(attribute.name), addButtonLabel: t("addMultivaluedLabel", {
            fieldLabel: labelAttribute(t, attribute),
        }), ...rest }) }));
const MultiLineInput = ({ t, name, inputType, form, addButtonLabel, isDisabled = false, defaultValue, id, ...rest }) => {
    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, { "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