@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
54 lines (53 loc) • 2.88 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const useAsync_1 = __importDefault(require("react-use/esm/useAsync"));
const utils_1 = require("../../components/builder/values/reference-lists/utils");
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
const helpers_1 = require("./helpers");
/**
* Show a formio select 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 = (0, react_intl_1.useIntl)();
const { key, label, description, tooltip, validate, multiple } = component;
const { required = false } = validate || {};
const { getReferenceListsTableItems } = (0, react_1.useContext)(context_1.BuilderContext);
const { value: options = [], loading, error, } = (0, useAsync_1.default)(async () => {
var _a, _b, _c;
if ((0, helpers_1.checkIsManualOptions)(component)) {
return ((_a = component === null || component === void 0 ? void 0 : component.data) === null || _a === void 0 ? void 0 : _a.values) || [];
}
if ((0, helpers_1.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 => (0, jsx_runtime_1.jsx)("code", { children: chunks }),
}),
},
];
}
if ((0, helpers_1.checkIsReferenceListsOptions)(component)) {
const items = await getReferenceListsTableItems(((_b = component.openForms) === null || _b === void 0 ? void 0 : _b.service) || '', ((_c = component.openForms) === null || _c === void 0 ? void 0 : _c.code) || '');
return items ? (0, utils_1.transformItems)(items, intl) : [];
}
return [];
}, [component]);
if (error) {
throw error;
}
return ((0, jsx_runtime_1.jsx)(formio_1.Select, { name: key, options: options, label: label, tooltip: tooltip, required: required, description: description, isMulti: !!multiple, isClearable: true, isLoading: loading }));
};
exports.default = Preview;