@open-formulieren/formio-builder/lib/esm/components/formio/datamap.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useField } from 'formik';
import React from 'react';
import { useIntl } from 'react-intl';
import DataGrid, { DataGridRow } from './datagrid';
import TextField from './textfield';
/**
 * Data map with readonly keys.
 */
export const DataMap = ({ name, valueComponent, ariaLabelMessage, keyLabel = 'Key', }) => {
    const intl = useIntl();
    const [{ value }, , { setValue }] = useField(name);
    const transformedValue = Object.entries(value).map(([key, value]) => ({ key, value }));
    const columns = [keyLabel, valueComponent.props.label];
    return (_jsx(DataGrid, Object.assign({ name: name, columns: columns, type: "datagrid" }, { children: transformedValue.map((item, index) => (_jsxs(DataGridRow, Object.assign({ index: index }, { children: [_jsx(TextField, { name: "key", readOnly: true, value: item.key }), React.cloneElement(valueComponent, Object.assign(Object.assign({}, valueComponent.props), { label: '', value: item.value, onChange: (event) => {
                        const newValue = Object.assign(Object.assign({}, value), { [item.key]: event.target.value });
                        setValue(newValue);
                    }, 'aria-label': ariaLabelMessage
                        ? intl.formatMessage(ariaLabelMessage, { key: item.key })
                        : undefined }))] }), item.key))) })));
};
export default DataMap;