@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
96 lines (95 loc) • 4.41 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValuesConfig = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const react_1 = require("react");
const types_1 = require("../../../types");
const items_expression_1 = __importDefault(require("./items-expression"));
const reference_lists_1 = require("./reference-lists");
const values_src_1 = __importDefault(require("./values-src"));
const values_table_1 = __importDefault(require("./values-table"));
/**
* Check if the dotted `path` exists on `obj`.
*
* @example
* ```
* isNestedKeySet({my: {path: 'irrelevant'}}, 'my.path') // true
* ```
*/
function isNestedKeySet(obj, path) {
const bits = path.split('.');
for (const bit of bits) {
// as soon as any node does not have the respective path set, exit, the full deep
// path will then also not be set.
if (!(0, types_1.hasOwnProperty)(obj, bit)) {
return false;
}
obj = obj[bit];
}
return true;
}
/**
* The `ValuesConfig` component allows a form builder to specify available options.
*
* Certain component types like dropdowns, radio fields and multi-option fields present
* a pre-configured list of available options to the end-user. This component is used to
* do this pre-configuration.
*
* Options can either be provided manually upfront, or they can be set dynamically by
* referencing other variables in the form evaluation context.
*/
function ValuesConfig({ name, withOptionDescription, }) {
const { values, setFieldValue } = (0, formik_1.useFormikContext)();
const { dataSrc } = values.openForms;
// synchronize form state with the dataSrc value, and ensure this is done *before* the
// browser repaints to prevent race conditions
(0, react_1.useLayoutEffect)(() => {
switch (dataSrc) {
case 'manual': {
if (values.openForms.hasOwnProperty('itemsExpression')) {
setFieldValue('openForms.itemsExpression', undefined);
}
if (values.openForms.hasOwnProperty('code')) {
setFieldValue('openForms.code', undefined);
}
if (values.openForms.hasOwnProperty('service')) {
setFieldValue('openForms.service', undefined);
}
if (!isNestedKeySet(values, name)) {
setFieldValue(name, [{ value: '', label: '', openForms: { translations: {} } }]);
}
break;
}
case 'variable': {
if (isNestedKeySet(values, name)) {
setFieldValue(name, undefined);
}
if (values.openForms.hasOwnProperty('code')) {
setFieldValue('openForms.code', undefined);
}
if (values.openForms.hasOwnProperty('service')) {
setFieldValue('openForms.service', undefined);
}
break;
}
case 'referenceLists': {
if (isNestedKeySet(values, name)) {
setFieldValue(name, undefined);
}
if (values.openForms.hasOwnProperty('itemsExpression')) {
setFieldValue('openForms.itemsExpression', undefined);
}
break;
}
}
// deliberate that we only provide dataSrc as dependency, the hook should only run
// when that dropdown changes value.
}, [dataSrc]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(values_src_1.default, {}), dataSrc === 'manual' && ((0, jsx_runtime_1.jsx)(values_table_1.default, { name: name, withOptionDescription: withOptionDescription })), dataSrc === 'variable' && (0, jsx_runtime_1.jsx)(items_expression_1.default, {}), dataSrc === 'referenceLists' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(reference_lists_1.ReferenceListsServiceSelect, {}), (0, jsx_runtime_1.jsx)(reference_lists_1.ReferenceListsTableCode, {})] }))] }));
}
exports.ValuesConfig = ValuesConfig;
exports.default = ValuesConfig;