@conduction/components/lib/components/formFields/createKeyValue/CreateKeyValue.js

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as styles from "./CreateKeyValue.module.css";
import clsx from "clsx";
import { Controller } from "react-hook-form";
import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
import { ErrorMessage } from "../errorMessage/ErrorMessage";
export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
    return (_jsx(Controller, { control, name, errors, rules: validation, render: ({ field: { onChange } }) => {
            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, defaultValue, errors, disabled, copyValue }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
        } }));
};
const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
    const [currentKey, setCurrentKey] = React.useState("");
    const [currentValue, setCurrentValue] = React.useState("");
    const [keyValues, setKeyValues] = React.useState(defaultValue ?? []);
    const [currentCopyIdx, setCurrentCopyIdx] = React.useState();
    const currentKeyRef = React.useRef(null);
    const currentValueRef = React.useRef(null);
    const handleCreate = () => {
        const keyValue = { key: currentKey, value: currentValue };
        setCurrentKey("");
        setCurrentValue("");
        setKeyValues([...keyValues, keyValue]);
    };
    const handleCopyToClipboard = (value, id) => {
        navigator.clipboard.writeText(value);
        setCurrentCopyIdx(id);
        copyValue?.onCopied && copyValue.onCopied();
    };
    React.useEffect(() => {
        defaultValue && setKeyValues(defaultValue);
    }, [defaultValue]);
    React.useEffect(() => {
        handleChange(keyValues);
    }, [keyValues]);
    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(Button, { disabled, onClick: () => handleCopyToClipboard(keyValue.value, idx), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", children: _jsx(FontAwesomeIcon, { icon: faCopy }) })), _jsx(Button, { disabled, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), disabled }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), disabled }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
};