@open-formulieren/formio-builder/lib/esm/components/builder/values/items-expression.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { JSONEditor } from '@open-formulieren/monaco-json-editor';
import { useFormikContext } from 'formik';
import { useContext } from 'react';
import { FormattedMessage } from 'react-intl';
import { Component, Description } from '../../../components/formio';
import { BuilderContext } from '../../../context';
const NAME = 'openForms.itemsExpression';
/**
 * The `ItemsExpression` component is used to specify the JsonLogic expression to
 * calculate the values/options for a component.
 *
 * @todo: this would really benefit from a nice, context-aware JsonLogic editor.
 */
export const ItemsExpression = () => {
    const { getFieldProps, setFieldValue } = useFormikContext();
    const { value = '' } = getFieldProps(NAME);
    const builderContext = useContext(BuilderContext);
    const htmlId = `editform-${NAME}`;
    return (_jsxs(Component, Object.assign({ type: "textarea", field: NAME, required: true, htmlId: htmlId, label: _jsx(FormattedMessage, { id: 'C48xJT', defaultMessage: [{ type: 0, value: "Items expression" }] }) }, { children: [_jsx("div", { children: _jsx(JSONEditor, { wrapperProps: { className: 'json-editor json-editor--compact' }, value: value, onChange: value => setFieldValue(NAME, value), showLines: false, theme: builderContext.theme }) }), _jsx(Description, { text: _jsx(FormattedMessage, { id: 'fe3wyn', defaultMessage: [{ type: 0, value: "A JSON logic expression returning a variable (of array type) whose items should be used as the options for this component." }] }) })] })));
};
export default ItemsExpression;