@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
49 lines (48 loc) • 2.56 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import { useIntl } from 'react-intl';
import useAsync from 'react-use/esm/useAsync';
import { transformItems } from '../../components/builder/values/reference-lists/utils';
import { SelectBoxes } from '../../components/formio';
import { BuilderContext } from '../../context';
import { checkIsManualOptions, checkIsReferenceListsOptions, checkIsVariableOptions, } from './helpers';
/**
* Show a formio selectboxes component preview.
*
* NOTE: for the time being, this is rendered in the default Formio bootstrap style,
* however at some point this should use the components of
* @open-formulieren/formio-renderer instead for a more accurate preview.
*/
const Preview = ({ component }) => {
const intl = useIntl();
const { key, label, description, tooltip, validate } = component;
const { required = false } = validate || {};
const { getReferenceListsTableItems } = useContext(BuilderContext);
const { value: options = [], loading, error, } = useAsync(async () => {
var _a, _b;
if (checkIsManualOptions(component)) {
return (component === null || component === void 0 ? void 0 : component.values) || [];
}
if (checkIsVariableOptions(component)) {
return [
{
value: 'itemsExpression',
label: intl.formatMessage({ id: "paY2Oa", defaultMessage: [{ type: 0, value: "Options from expression: " }, { type: 8, value: "code", children: [{ type: 1, value: "expression" }] }] }, {
expression: JSON.stringify(component.openForms.itemsExpression),
code: chunks => _jsx("code", { children: chunks }),
}),
},
];
}
if (checkIsReferenceListsOptions(component)) {
const items = await getReferenceListsTableItems(((_a = component === null || component === void 0 ? void 0 : component.openForms) === null || _a === void 0 ? void 0 : _a.service) || '', ((_b = component === null || component === void 0 ? void 0 : component.openForms) === null || _b === void 0 ? void 0 : _b.code) || '');
return items ? transformItems(items, intl) : [];
}
return [];
}, [component]);
if (error) {
throw error;
}
return (_jsx(SelectBoxes, { name: key, options: options, label: label, tooltip: tooltip, required: required, description: description, isLoading: loading }));
};
export default Preview;