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

An opinionated Formio webform builder for Open Forms

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataMap = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const react_1 = __importDefault(require("react"));
const react_intl_1 = require("react-intl");
const datagrid_1 = __importStar(require("./datagrid"));
const textfield_1 = __importDefault(require("./textfield"));
/**
 * Data map with readonly keys.
 */
const DataMap = ({ name, valueComponent, ariaLabelMessage, keyLabel = 'Key', }) => {
    const intl = (0, react_intl_1.useIntl)();
    const [{ value }, , { setValue }] = (0, formik_1.useField)(name);
    const transformedValue = Object.entries(value).map(([key, value]) => ({ key, value }));
    const columns = [keyLabel, valueComponent.props.label];
    return ((0, jsx_runtime_1.jsx)(datagrid_1.default, Object.assign({ name: name, columns: columns, type: "datagrid" }, { children: transformedValue.map((item, index) => ((0, jsx_runtime_1.jsxs)(datagrid_1.DataGridRow, Object.assign({ index: index }, { children: [(0, jsx_runtime_1.jsx)(textfield_1.default, { name: "key", readOnly: true, value: item.key }), react_1.default.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))) })));
};
exports.DataMap = DataMap;
exports.default = exports.DataMap;