@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
58 lines (57 loc) • 3.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComparisonValueInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const formiojs_1 = require("formiojs");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const usePrevious_1 = __importDefault(require("react-use/esm/usePrevious"));
const textfield_1 = require("../../components/formio/textfield");
const context_1 = require("../../context");
const registry_1 = require("../../registry");
const types_1 = require("../../types");
const formio_1 = require("../formio");
const component_select_1 = __importDefault(require("./component-select"));
const ComparisonValueInput = () => {
var _a;
const { getFormComponents } = (0, react_1.useContext)(context_1.BuilderContext);
const { values, setFieldValue } = (0, formik_1.useFormikContext)();
const componentKey = (_a = values === null || values === void 0 ? void 0 : values.conditional) === null || _a === void 0 ? void 0 : _a.when;
const chosenComponent = componentKey
? formiojs_1.Utils.getComponent(getFormComponents(), componentKey, false)
: null;
const previousWhen = (0, usePrevious_1.default)(componentKey);
(0, react_1.useEffect)(() => {
const conditional = values === null || values === void 0 ? void 0 : values.conditional;
if ((conditional === null || conditional === void 0 ? void 0 : conditional.when) === '' && (conditional === null || conditional === void 0 ? void 0 : conditional.eq) !== '') {
setFieldValue('conditional.eq', '');
return;
}
if (previousWhen !== undefined && previousWhen !== (conditional === null || conditional === void 0 ? void 0 : conditional.when)) {
setFieldValue('conditional.eq', '');
}
}, [values, setFieldValue]);
if (!chosenComponent)
return null;
const registryEntry = (0, registry_1.getRegistryEntry)(chosenComponent);
const { comparisonValue } = registryEntry;
const InputComponent = comparisonValue || textfield_1.TextField;
const props = {
name: 'conditional.eq',
label: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '6F2H6H', defaultMessage: [{ type: 0, value: "Has the value" }] })),
};
if ((0, types_1.hasOwnProperty)(chosenComponent, 'multiple')) {
props.multiple = chosenComponent.multiple;
}
return (0, jsx_runtime_1.jsx)(InputComponent, Object.assign({}, props));
};
exports.ComparisonValueInput = ComparisonValueInput;
const SimpleConditional = () => ((0, jsx_runtime_1.jsxs)(formio_1.Panel, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ALLoNx', defaultMessage: [{ type: 0, value: "Simple conditional" }] }) }, { children: [(0, jsx_runtime_1.jsx)(formio_1.Select, { name: "conditional.show", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '3LdlNv', defaultMessage: [{ type: 0, value: "This component should display" }] }), options: [
{ value: true, label: 'True' },
{ value: false, label: 'False' },
], isClearable: true }), (0, jsx_runtime_1.jsx)(component_select_1.default, { name: "conditional.when", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ddDLRu', defaultMessage: [{ type: 0, value: "When the form component" }] }), isClearable: true }), (0, jsx_runtime_1.jsx)(exports.ComparisonValueInput, {})] })));
exports.default = SimpleConditional;