@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
47 lines (46 loc) • 2.17 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useField, useFormikContext } from 'formik';
import { useContext } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import useAsync from 'react-use/esm/useAsync';
import usePrevious from 'react-use/esm/usePrevious';
import Select from '../../../components/formio/select';
import { BuilderContext } from '../../../context';
function isAttributeOptions(options) {
return options !== undefined;
}
/**
* Fetch the available validator plugins and display them in a multiselect.
*
* This requires an async function `getPrefillAttributes` to be provided to the
* BuilderContext which is responsible for retrieving the list of available plugins.
*
* If a fetch error occurs, it is thrown during rendering - you should provide your
* own error boundary to catch this.
*/
const PrefillAttributeSelect = () => {
const fieldName = 'prefill.attribute';
const intl = useIntl();
const { values, setFieldValue } = useFormikContext();
const [{ value: attribute }] = useField('prefill.attribute');
const { getPrefillAttributes } = useContext(BuilderContext);
const { plugin } = values.prefill;
const previousPlugin = usePrevious(plugin);
const { value: options, loading, error, } = useAsync(async () => {
if (!plugin) {
setFieldValue(fieldName, '');
return [];
}
if (attribute && previousPlugin && plugin !== previousPlugin) {
setFieldValue(fieldName, '');
}
return await getPrefillAttributes(plugin);
}, [plugin]);
if (error) {
throw error;
}
const tooltip = intl.formatMessage({ id: "vzhWgR", defaultMessage: [{ type: 0, value: "Specify the attribute holding the pre-fill data." }] });
const _options = isAttributeOptions(options) ? options : [];
return (_jsx(Select, { name: fieldName, label: _jsx(FormattedMessage, { id: 'sgmcmf', defaultMessage: [{ type: 0, value: "Plugin attribute" }] }), tooltip: tooltip, isLoading: loading, isClearable: true, options: _options, valueProperty: "id", emptyValue: "" }));
};
export default PrefillAttributeSelect;