@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
85 lines (83 loc) • 6.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage, defineMessage, useIntl } from 'react-intl';
import { BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Checkbox, Panel, Tab, TabList, TabPanel, Tabs, TextField } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
const GROUP_LABEL = defineMessage({ id: "ehP4dQ", defaultMessage: [{ type: 0, value: "Group label" }] });
const ADD_ANOTHER_LABEL = defineMessage({ id: "rkJLBr", defaultMessage: [{ type: 0, value: "'Add another' text" }] });
const SAVE_ROW_LABEL = defineMessage({ id: "eUowhH", defaultMessage: [{ type: 0, value: "'Save row' text" }] });
const REMOVE_ROW_LABEL = defineMessage({ id: "AyOwJl", defaultMessage: [{ type: 0, value: "'Remove row' text" }] });
/**
* 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', 'groupLabel', 'description', 'tooltip', 'hidden', 'clearOnHide', 'isSensitiveData', 'hideLabel') }), _jsx(Tab, Object.assign({ hasErrors: hasAnyError('disableAddingRemovingRows', 'addAnother', 'saveRow', 'removeRow') }, { children: _jsx(FormattedMessage, { id: 'd3V6A+', defaultMessage: [{ type: 0, value: "Display" }] }) })), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), _jsx(BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), _jsxs(TabPanel, { children: [_jsx(Label, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Description, {}), _jsx(Tooltip, {}), _jsx(GroupLabel, {}), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(IsSensitiveData, {}), _jsx(HideLabel, {})] }), _jsxs(TabPanel, { children: [_jsx(DisableAddingRemovingRows, {}), _jsxs(Panel, Object.assign({ collapsible: true, initialCollapsed: true, title: _jsx(FormattedMessage, { id: 'E/biiX', defaultMessage: [{ type: 0, value: "Button labels" }] }) }, { children: [_jsx(AddAnother, {}), _jsx(SaveRow, {}), _jsx(RemoveRow, {})] }))] }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.MaxLength, {})] }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
groupLabel: intl.formatMessage(GROUP_LABEL),
addAnother: intl.formatMessage(ADD_ANOTHER_LABEL),
saveRow: intl.formatMessage(SAVE_ROW_LABEL),
removeRow: intl.formatMessage(REMOVE_ROW_LABEL),
} }) })] }));
};
/*
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: '',
groupLabel: 'Item',
description: '',
tooltip: '',
hidden: false,
clearOnHide: true,
isSensitiveData: false,
hideLabel: false,
// display tab
disableAddingRemovingRows: false,
addAnother: '',
saveRow: '',
removeRow: 'Cancel',
};
const GroupLabel = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "VhCwEK", defaultMessage: [{ type: 0, value: "The label that will be shown above each repeating group in the summary page, the submission report and the confirmation email. The index of the item will be added next to it, i.e. if you enter 'Item' it will be displayed as 'Item 1', 'Item 2', ..." }] });
return (_jsx(TextField, { name: "groupLabel", label: _jsx(FormattedMessage, Object.assign({}, GROUP_LABEL)), tooltip: tooltip }));
};
const HideLabel = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "fagx6e", defaultMessage: [{ type: 0, value: "Hide the title/label of this component in the form." }] });
return (_jsx(Checkbox, { name: "hideLabel", label: _jsx(FormattedMessage, { id: 'dWWO3N', defaultMessage: [{ type: 0, value: "Hide label" }] }), tooltip: tooltip }));
};
const DisableAddingRemovingRows = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "AMqUHx", defaultMessage: [{ type: 0, value: "Check if you want to hide/disable the 'Add Another' and 'Remove row' buttons." }] });
return (_jsx(Checkbox, { name: "disableAddingRemovingRows", label: _jsx(FormattedMessage, { id: 'MTdKuN', defaultMessage: [{ type: 0, value: "Disable adding or removing groups" }] }), tooltip: tooltip }));
};
const AddAnother = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "o83CBr", defaultMessage: [{ type: 0, value: "Set the text of the 'Add Another' button." }] });
return (_jsx(TextField, { name: "addAnother", label: _jsx(FormattedMessage, Object.assign({}, ADD_ANOTHER_LABEL)), tooltip: tooltip }));
};
const SaveRow = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "/stTVr", defaultMessage: [{ type: 0, value: "Set the text of the 'Save row' button." }] });
return (_jsx(TextField, { name: "saveRow", label: _jsx(FormattedMessage, Object.assign({}, SAVE_ROW_LABEL)), tooltip: tooltip }));
};
const RemoveRow = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "gCQtSJ", defaultMessage: [{ type: 0, value: "Set the text of the 'Remove row' button." }] });
return (_jsx(TextField, { name: "removeRow", label: _jsx(FormattedMessage, Object.assign({}, REMOVE_ROW_LABEL)), tooltip: tooltip }));
};
export default EditForm;