@open-formulieren/formio-builder/lib/esm/registry/datetime/edit.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { FormattedMessage, useIntl } from 'react-intl';
import { BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, Multiple, Prefill, PresentationConfig, ReadOnly, Registration, SimpleConditional, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { DateTimeField, TabList, TabPanel, Tabs } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
import DateTimeConstraintValidation from './validation';
/**
 * Form to configure a Formio 'date' type component.
 */
const EditForm = () => {
    const intl = useIntl();
    const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
    const { values: { multiple = false }, } = useFormikContext();
    const { hasAnyError } = useErrorChecker();
    Validate.useManageValidatorsTranslations([
        'required',
        'minDate',
        'maxDate',
        'invalid_datetime',
    ]);
    return (_jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'multiple', 'hidden', 'clearOnHide', 'isSensitiveData', 'defaultValue', 'disabled') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate', 'openForms.minDate', 'openForms.maxDate', 'datePicker.minDate', 'datePicker.maxDate') }), _jsx(BuilderTabs.Registration, { hasErrors: hasAnyError('registration') }), _jsx(BuilderTabs.Prefill, { hasErrors: hasAnyError('prefill') }), _jsx(BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), _jsxs(TabPanel, { children: [_jsx(Label, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Description, {}), _jsx(Tooltip, {}), _jsx(PresentationConfig, {}), _jsx(Multiple, {}), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(IsSensitiveData, {}), _jsx(DefaultValue, { multiple: multiple }), _jsx(ReadOnly, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.ValidatorPluginSelect, {}), _jsx(DateTimeConstraintValidation, { constraint: "minDate" }), _jsx(DateTimeConstraintValidation, { constraint: "maxDate" }), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsx(TabPanel, { children: _jsx(Registration.RegistrationAttributeSelect, {}) }), _jsx(TabPanel, { children: _jsx(Prefill.PrefillConfiguration, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
                        label: intl.formatMessage(LABELS.label),
                        description: intl.formatMessage(LABELS.description),
                        tooltip: intl.formatMessage(LABELS.tooltip),
                    } }) })] }));
};
EditForm.defaultValues = {
    // basic tab
    label: '',
    key: '',
    description: '',
    tooltip: '',
    showInSummary: true,
    showInEmail: false,
    showInPDF: true,
    multiple: false,
    hidden: false,
    clearOnHide: true,
    isSensitiveData: false,
    defaultValue: '',
    disabled: false,
    // Advanced tab
    conditional: {
        show: undefined,
        when: '',
        eq: '',
    },
    // Validation tab
    validate: {
        required: false,
        plugins: [],
    },
    translatedErrors: {},
    // Defaults from https://github.com/formio/formio.js/blob/
    // bebc2ad73cad138a6de0a8247df47f0085a314cc/src/components/datetime/DateTime.js#L22
    datePicker: {
        showWeeks: true,
        startingDay: 0,
        initDate: '',
        minMode: 'day',
        maxMode: 'year',
        yearRows: 4,
        yearColumns: 5,
        minDate: null,
        maxDate: null,
    },
    openForms: {
        translations: {},
        minDate: { mode: '' },
        maxDate: { mode: '' },
    },
    // Registration tab
    registration: {
        attribute: '',
    },
    // Prefill tab
    prefill: {
        plugin: '',
        attribute: '',
        identifierRole: 'main',
    },
    // Flatpickr custom options
    customOptions: {
        allowInvalidPreload: true,
    },
};
const DefaultValue = ({ multiple }) => {
    const intl = useIntl();
    const tooltip = intl.formatMessage({ id: "FffJxu", defaultMessage: [{ type: 0, value: "This will be the initial value for this field before user interaction." }] });
    return (_jsx(DateTimeField, { name: "defaultValue", label: _jsx(FormattedMessage, Object.assign({}, LABELS.defaultValue)), tooltip: tooltip, multiple: multiple }));
};
export default EditForm;