@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
50 lines (48 loc) • 2.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage, useIntl } from 'react-intl';
import { BuilderTabs, ClearOnHide, Hidden, Key, Label, SimpleConditional, Tooltip, Translations, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Checkbox, TabList, TabPanel, Tabs } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
/**
* Form to configure a Formio 'fieldset' type component.
*/
const EditForm = () => {
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
const { hasAnyError } = useErrorChecker();
return (_jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'tooltip', 'hidden', 'clearOnHide', 'hideHeader') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), _jsxs(TabPanel, { children: [_jsx(Label, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Tooltip, {}), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(HideHeader, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
// FIXME: should be translatable in the type
// tooltip: intl.formatMessage(LABELS.tooltip),
} }) })] }));
};
/*
Making this introspected or declarative doesn't seem advisable, as React is calling
React.Children and related API's legacy API - this may get removed in future
versions.
Explicitly specifying the schema and default values is therefore probbaly best, at
the cost of some repetition.
*/
EditForm.defaultValues = {
components: [],
// basic tab
label: '',
key: '',
tooltip: '',
hidden: false,
clearOnHide: true,
hideHeader: false,
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
};
const HideHeader = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "unjdIB", defaultMessage: [{ type: 0, value: "Do not display the configured label and top line as the header in the fieldset." }] });
return (_jsx(Checkbox, { name: "hideHeader", label: _jsx(FormattedMessage, { id: '2Lg8Vc', defaultMessage: [{ type: 0, value: "Hide fieldset header" }] }), tooltip: tooltip }));
};
export default EditForm;