-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #63 from open-formulieren/feature/62-bsn-edit-form
Implement edit form form BSN component
- Loading branch information
Showing
7 changed files
with
409 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import {IntlShape} from 'react-intl'; | ||
|
|
||
| import {buildCommonSchema} from '@/registry/validation'; | ||
|
|
||
| const schema = (intl: IntlShape) => buildCommonSchema(intl); | ||
|
|
||
| export default schema; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| import {BsnComponentSchema} from '@open-formulieren/types'; | ||
| 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 {TabList, TabPanel, Tabs, TextField} from '@/components/formio'; | ||
| import {getErrorNames} from '@/utils/errors'; | ||
|
|
||
| import {EditFormDefinition} from '../types'; | ||
|
|
||
| /** | ||
| * Form to configure a Formio 'bsn' type component. | ||
| */ | ||
| const EditForm: EditFormDefinition<BsnComponentSchema> = () => { | ||
| const intl = useIntl(); | ||
| const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey(); | ||
| const {values, errors} = useFormikContext<BsnComponentSchema>(); | ||
|
|
||
| const erroredFields = Object.keys(errors).length ? getErrorNames<BsnComponentSchema>(errors) : []; | ||
| // TODO: pattern match instead of just string inclusion? | ||
| // TODO: move into more generically usuable utility when we implement other component | ||
| // types | ||
| const hasAnyError = (...fieldNames: string[]): boolean => { | ||
| if (!erroredFields.length) return false; | ||
| return fieldNames.some(name => erroredFields.includes(name)); | ||
| }; | ||
|
|
||
| Validate.useManageValidatorsTranslations<BsnComponentSchema>(['required']); | ||
| return ( | ||
| <Tabs> | ||
| <TabList> | ||
| <BuilderTabs.Basic | ||
| hasErrors={hasAnyError( | ||
| 'label', | ||
| 'key', | ||
| 'description', | ||
| 'tooltip', | ||
| 'showInSummary', | ||
| 'showInEmail', | ||
| 'showInPDF', | ||
| 'multiple', | ||
| 'hidden', | ||
| 'clearOnHide', | ||
| 'isSensitiveData', | ||
| 'defaultValue', | ||
| 'disabled' | ||
| )} | ||
| /> | ||
| <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} /> | ||
| <BuilderTabs.Validation hasErrors={hasAnyError('validate')} /> | ||
| <BuilderTabs.Registration hasErrors={hasAnyError('registration')} /> | ||
| <BuilderTabs.Prefill hasErrors={hasAnyError('prefill')} /> | ||
| <BuilderTabs.Translations hasErrors={hasAnyError('openForms.translations')} /> | ||
| </TabList> | ||
|
|
||
| {/* Basic tab */} | ||
| <TabPanel> | ||
| <Label /> | ||
| <Key isManuallySetRef={isKeyManuallySetRef} generatedValue={generatedKey} /> | ||
| <Description /> | ||
| <Tooltip /> | ||
| <PresentationConfig /> | ||
| <Multiple<BsnComponentSchema> /> | ||
| <Hidden /> | ||
| <ClearOnHide /> | ||
| <IsSensitiveData /> | ||
| <DefaultValue multiple={!!values.multiple} /> | ||
| <ReadOnly /> | ||
| </TabPanel> | ||
|
|
||
| {/* Advanced tab */} | ||
| <TabPanel> | ||
| <SimpleConditional /> | ||
| </TabPanel> | ||
|
|
||
| {/* Validation tab */} | ||
| <TabPanel> | ||
| <Validate.Required /> | ||
| <Validate.ValidatorPluginSelect /> | ||
| <Validate.ValidationErrorTranslations /> | ||
| </TabPanel> | ||
|
|
||
| {/* Registration tab */} | ||
| <TabPanel> | ||
| <Registration.RegistrationAttributeSelect /> | ||
| </TabPanel> | ||
|
|
||
| {/* Prefill tab */} | ||
| <TabPanel> | ||
| <Prefill.PrefillConfiguration /> | ||
| </TabPanel> | ||
|
|
||
| {/* Translations */} | ||
| <TabPanel> | ||
| <Translations.ComponentTranslations<BsnComponentSchema> | ||
| propertyLabels={{ | ||
| label: intl.formatMessage(LABELS.label), | ||
| description: intl.formatMessage(LABELS.description), | ||
| tooltip: intl.formatMessage(LABELS.tooltip), | ||
| }} | ||
| /> | ||
| </TabPanel> | ||
| </Tabs> | ||
| ); | ||
| }; | ||
|
|
||
| /* | ||
| 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 = { | ||
| validateOn: 'blur', | ||
| inputMask: '999999999', | ||
| // basic tab | ||
| label: '', | ||
| key: '', | ||
| description: '', | ||
| tooltip: '', | ||
| showInSummary: true, | ||
| showInEmail: false, | ||
| showInPDF: true, | ||
| multiple: false, | ||
| hidden: false, | ||
| clearOnHide: true, | ||
| isSensitiveData: true, | ||
| defaultValue: '', | ||
| disabled: false, | ||
| // Advanced tab | ||
| conditional: { | ||
| show: undefined, | ||
| when: '', | ||
| eq: '', | ||
| }, | ||
| // Validation tab | ||
| validate: { | ||
| required: false, | ||
| plugins: [], | ||
| }, | ||
| translatedErrors: {}, | ||
| registration: { | ||
| attribute: '', | ||
| }, | ||
| prefill: { | ||
| plugin: null, | ||
| attribute: null, | ||
| identifierRole: 'main', | ||
| }, | ||
| }; | ||
|
|
||
| interface DefaultValueProps { | ||
| multiple: boolean; | ||
| } | ||
|
|
||
| const DefaultValue: React.FC<DefaultValueProps> = ({multiple}) => { | ||
| const intl = useIntl(); | ||
| const tooltip = intl.formatMessage({ | ||
| description: "Tooltip for 'defaultValue' builder field", | ||
| defaultMessage: 'This will be the initial value for this field before user interaction.', | ||
| }); | ||
| return ( | ||
| <TextField | ||
| name="defaultValue" | ||
| label={<FormattedMessage {...LABELS.defaultValue} />} | ||
| tooltip={tooltip} | ||
| multiple={multiple} | ||
| inputMask="999999999" | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import EditForm from './edit'; | ||
| import validationSchema from './edit-validation'; | ||
| import Preview from './preview'; | ||
|
|
||
| export default { | ||
| edit: EditForm, | ||
| editSchema: validationSchema, | ||
| preview: Preview, | ||
| defaultValue: '', | ||
| }; |
Oops, something went wrong.