@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
45 lines (44 loc) • 3.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { FormattedMessage, useIntl } from 'react-intl';
import { NumberField, Select, TextField } from '../../../components/formio';
const OperatorSelect = ({ name }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "mMn7K3", defaultMessage: [{ type: 0, value: "Specify whether to add or subtract a time delta to/from the variable." }] });
return (_jsx(Select, { name: name, label: _jsx(FormattedMessage, { id: 'xI6md8', defaultMessage: [{ type: 0, value: "Add/subtract duration" }] }), tooltip: tooltip, options: [
{
value: 'add',
label: intl.formatMessage({ id: "W0AAhq", defaultMessage: [{ type: 0, value: "Add" }] }),
},
{
value: 'subtract',
label: intl.formatMessage({ id: "9lk1eS", defaultMessage: [{ type: 0, value: "Subtract" }] }),
},
] }));
};
// XXX: at some point we should provide all available variables in the context so that
// you can select the variable from a dropdown rather than having to type the key
// yourself.
const Variable = ({ name }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "bvY9oJ", defaultMessage: [{ type: 0, value: "Provide the key of a static, component, or user defined variable." }] });
return (_jsx(TextField, { name: name, label: _jsx(FormattedMessage, { id: 'EkVNqG', defaultMessage: [{ type: 0, value: "Variable" }] }), tooltip: tooltip, spellCheck: false }));
};
const Years = ({ name }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "PhXIai", defaultMessage: [{ type: 0, value: "Number of years. Empty values are ignored." }] });
return (_jsx(NumberField, { name: name, label: _jsx(FormattedMessage, { id: '7b9pD8', defaultMessage: [{ type: 0, value: "Years" }] }), tooltip: tooltip, step: 1, min: 0 }));
};
const Months = ({ name }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "5XOrxo", defaultMessage: [{ type: 0, value: "Number of months. Empty values are ignored." }] });
return (_jsx(NumberField, { name: name, label: _jsx(FormattedMessage, { id: '0gbtNe', defaultMessage: [{ type: 0, value: "Months" }] }), tooltip: tooltip, step: 1, min: 0 }));
};
const Days = ({ name }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "cQvPLh", defaultMessage: [{ type: 0, value: "Number of days. Empty values are ignored." }] });
return (_jsx(NumberField, { name: name, label: _jsx(FormattedMessage, { id: '4DkoO5', defaultMessage: [{ type: 0, value: "Days" }] }), tooltip: tooltip, step: 1, min: 0 }));
};
const RelativeDelta = ({ constraint }) => {
return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "row" }, { children: [_jsx("div", Object.assign({ className: "col-md-6 col-xs-12" }, { children: _jsx(OperatorSelect, { name: `openForms.${constraint}.operator` }) })), _jsx("div", Object.assign({ className: "col-md-6 col-xs-12" }, { children: _jsx(Variable, { name: `openForms.${constraint}.variable` }) }))] })), _jsxs("div", Object.assign({ className: "row" }, { children: [_jsx("div", Object.assign({ className: "col-md-4 col-xs-12" }, { children: _jsx(Years, { name: `openForms.${constraint}.delta.years` }) })), _jsx("div", Object.assign({ className: "col-md-4 col-xs-12" }, { children: _jsx(Months, { name: `openForms.${constraint}.delta.months` }) })), _jsx("div", Object.assign({ className: "col-md-4 col-xs-12" }, { children: _jsx(Days, { name: `openForms.${constraint}.delta.days` }) }))] }))] }));
};
export default RelativeDelta;