@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
70 lines (69 loc) • 3.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const react_intl_1 = require("react-intl");
const formio_1 = require("../../../components/formio");
// Mappings of value-label to produce dropdown options. Note that you need to filter out
// only the options relevant to the particular field.
const ALL_DATE_CONSTRAINT_MODE_OPTIONS = [
{
value: 'fixedValue',
label: (0, react_intl_1.defineMessage)({ id: "45IQhq", defaultMessage: [{ type: 0, value: "Fixed value" }] }),
},
{
value: 'future',
label: (0, react_intl_1.defineMessage)({ id: "SH67gH", defaultMessage: [{ type: 0, value: "In the future" }] }),
},
{
value: 'past',
label: (0, react_intl_1.defineMessage)({ id: "WZJG0y", defaultMessage: [{ type: 0, value: "In the past" }] }),
},
{
value: 'relativeToVariable',
label: (0, react_intl_1.defineMessage)({ id: "7Ldfn+", defaultMessage: [{ type: 0, value: "Relative to variable" }] }),
},
];
const MODES_TO_EXCLUDE = {
minDate: ['past'],
maxDate: ['future'],
};
const DEFAULT_VALUES = {
'': {},
fixedValue: {},
future: {},
past: {},
relativeToVariable: {
variable: 'now',
delta: {
years: null,
months: null,
days: null,
},
operator: 'add',
},
};
const ModeSelect = ({ constraint }) => {
const fieldName = `openForms.${constraint}.mode`;
const intl = (0, react_intl_1.useIntl)();
const { setFieldValue } = (0, formik_1.useFormikContext)();
// filter out the validation modes not relevant for this particular constraint
const modesToExclude = MODES_TO_EXCLUDE[constraint];
const options = ALL_DATE_CONSTRAINT_MODE_OPTIONS.filter(opt => !modesToExclude.includes(opt.value));
return ((0, jsx_runtime_1.jsx)(formio_1.Select, { name: fieldName, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'SEXqhC', defaultMessage: [{ type: 0, value: "Mode preset" }] }), options: options.map(item => (Object.assign(Object.assign({}, item), { label: intl.formatMessage(item.label) }))), isClearable: true, onChange: event => {
var _a;
// the select *always* sets the selected value in the state, we can just use an
// additional onChange here (as better alternative to useEffect).
// The idea here is that we set the default, empty values that are mode-specific
// so that we don't get "uncontrolled-component-becomes-controlled" warning
// from React. It also helps in clearing out any left-over state from other
// modes when switching between them.
const mode = (_a = event.target.value) !== null && _a !== void 0 ? _a : '';
const emptyDefaults = Object.assign({ mode }, DEFAULT_VALUES[mode]);
setFieldValue(`openForms.${constraint}`, emptyDefaults);
// whenever the mode *changes*, clear the datePicker fixed value to prevent
// stale values from being in the form state while visually hidden
setFieldValue(`datePicker.${constraint}`, null);
} }));
};
exports.default = ModeSelect;