@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
51 lines (50 loc) • 3.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { Utils as FormioUtils } from 'formiojs';
import { useContext, useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import usePrevious from 'react-use/esm/usePrevious';
import { TextField } from '../../components/formio/textfield';
import { BuilderContext } from '../../context';
import { getRegistryEntry } from '../../registry';
import { hasOwnProperty } from '../../types';
import { Panel, Select } from '../formio';
import ComponentSelect from './component-select';
export const ComparisonValueInput = () => {
var _a;
const { getFormComponents } = useContext(BuilderContext);
const { values, setFieldValue } = useFormikContext();
const componentKey = (_a = values === null || values === void 0 ? void 0 : values.conditional) === null || _a === void 0 ? void 0 : _a.when;
const chosenComponent = componentKey
? FormioUtils.getComponent(getFormComponents(), componentKey, false)
: null;
const previousWhen = usePrevious(componentKey);
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 = getRegistryEntry(chosenComponent);
const { comparisonValue } = registryEntry;
const InputComponent = comparisonValue || TextField;
const props = {
name: 'conditional.eq',
label: (_jsx(FormattedMessage, { id: '6F2H6H', defaultMessage: [{ type: 0, value: "Has the value" }] })),
};
if (hasOwnProperty(chosenComponent, 'multiple')) {
props.multiple = chosenComponent.multiple;
}
return _jsx(InputComponent, Object.assign({}, props));
};
const SimpleConditional = () => (_jsxs(Panel, Object.assign({ title: _jsx(FormattedMessage, { id: 'ALLoNx', defaultMessage: [{ type: 0, value: "Simple conditional" }] }) }, { children: [_jsx(Select, { name: "conditional.show", label: _jsx(FormattedMessage, { id: '3LdlNv', defaultMessage: [{ type: 0, value: "This component should display" }] }), options: [
{ value: true, label: 'True' },
{ value: false, label: 'False' },
], isClearable: true }), _jsx(ComponentSelect, { name: "conditional.when", label: _jsx(FormattedMessage, { id: 'ddDLRu', defaultMessage: [{ type: 0, value: "When the form component" }] }), isClearable: true }), _jsx(ComparisonValueInput, {})] })));
export default SimpleConditional;