From dda7e8b877ad1b1e9f790e55f4ec85c340a92105 Mon Sep 17 00:00:00 2001 From: vasileios Date: Fri, 31 May 2024 15:05:13 +0200 Subject: [PATCH] [open-formulieren/open-forms#3993] Added deriveAddress boolean to addressNL component --- i18n/messages/en.json | 20 ++++++++++++++ i18n/messages/nl.json | 20 ++++++++++++++ .../builder/derive-address.stories.tsx | 27 +++++++++++++++++++ src/components/builder/derive-address.tsx | 25 +++++++++++++++++ src/components/builder/index.ts | 1 + src/registry/addressNL/edit.tsx | 6 +++++ src/registry/addressNL/index.ts | 3 +++ src/registry/addressNL/preview.tsx | 20 ++++++++++++++ 8 files changed, 122 insertions(+) create mode 100644 src/components/builder/derive-address.stories.tsx create mode 100644 src/components/builder/derive-address.tsx diff --git a/i18n/messages/en.json b/i18n/messages/en.json index 88919467..8f5d347f 100644 --- a/i18n/messages/en.json +++ b/i18n/messages/en.json @@ -249,6 +249,11 @@ "description": "Fallback label for option with empty label", "originalDefault": "(missing label)" }, + "8pwwsI": { + "defaultMessage": "Derive address.", + "description": "Tooltip for 'DeriveAddress' builder field", + "originalDefault": "Derive address." + }, "9lk1eS": { "defaultMessage": "Subtract", "description": "Operator 'subtract' option label", @@ -354,6 +359,11 @@ "description": "Tooltip validation error translations panel", "originalDefault": "Custom error messages for this component and their translations" }, + "DEetjI": { + "defaultMessage": "Street name", + "description": "Label for addressNL streetName read only result", + "originalDefault": "Street name" + }, "DJWATl": { "defaultMessage": "The values that can be picked for this field. Values are the text that is submitted with the form data. Labels are the text next to radio buttons, checkboxes and options in dropdowns.", "description": "Tooltip for 'values' builder field", @@ -1189,6 +1199,11 @@ "description": "Tooltip for 'useConfigDefaultMapSettings' builder field", "originalDefault": "When this is checked, the map component settings configured in the global configuration will be used." }, + "osSl3z": { + "defaultMessage": "City", + "description": "Label for addressNL city read only result", + "originalDefault": "City" + }, "p7g2h+": { "defaultMessage": "Add another", "description": "Add another option button label", @@ -1269,6 +1284,11 @@ "description": "Tooltip for 'showInEmail' builder field", "originalDefault": "Whether to show this value in the confirmation email" }, + "toTZ0C": { + "defaultMessage": "Derive address", + "description": "Label for 'DeriveAddress' builder field", + "originalDefault": "Derive address" + }, "u5XYQh": { "defaultMessage": "Footer", "description": "Component property 'footer' label", diff --git a/i18n/messages/nl.json b/i18n/messages/nl.json index 6a549cf4..d68b97a3 100644 --- a/i18n/messages/nl.json +++ b/i18n/messages/nl.json @@ -252,6 +252,11 @@ "description": "Fallback label for option with empty label", "originalDefault": "(missing label)" }, + "8pwwsI": { + "defaultMessage": "Derive address.", + "description": "Tooltip for 'DeriveAddress' builder field", + "originalDefault": "Derive address." + }, "9lk1eS": { "defaultMessage": "Aftrekken", "description": "Operator 'subtract' option label", @@ -358,6 +363,11 @@ "description": "Tooltip validation error translations panel", "originalDefault": "Custom error messages for this component and their translations" }, + "DEetjI": { + "defaultMessage": "Street name", + "description": "Label for addressNL streetName read only result", + "originalDefault": "Street name" + }, "DJWATl": { "defaultMessage": "De mogelijke keuzeopties voor dit veld. De waarden worden in de formuliergegevens opgeslagen. De labels zijn de teksten die aan de gebruiker getoond worden.", "description": "Tooltip for 'values' builder field", @@ -1207,6 +1217,11 @@ "description": "Tooltip for 'useConfigDefaultMapSettings' builder field", "originalDefault": "When this is checked, the map component settings configured in the global configuration will be used." }, + "osSl3z": { + "defaultMessage": "City", + "description": "Label for addressNL city read only result", + "originalDefault": "City" + }, "p7g2h+": { "defaultMessage": "Nog één toevoegen", "description": "Add another option button label", @@ -1288,6 +1303,11 @@ "description": "Tooltip for 'showInEmail' builder field", "originalDefault": "Whether to show this value in the confirmation email" }, + "toTZ0C": { + "defaultMessage": "Derive address", + "description": "Label for 'DeriveAddress' builder field", + "originalDefault": "Derive address" + }, "u5XYQh": { "defaultMessage": "Voettekst", "description": "Component property 'footer' label", diff --git a/src/components/builder/derive-address.stories.tsx b/src/components/builder/derive-address.stories.tsx new file mode 100644 index 00000000..45d46adb --- /dev/null +++ b/src/components/builder/derive-address.stories.tsx @@ -0,0 +1,27 @@ +import {Meta, StoryObj} from '@storybook/react'; + +import {withFormik} from '@/sb-decorators'; + +import DeriveAddress from './derive-address'; + +export default { + title: 'Formio/Builder/DeriveAddress', + component: DeriveAddress, + decorators: [withFormik], + parameters: { + controls: {hideNoControlsWarning: true}, + docs: { + source: { + type: 'dynamic', + excludeDecorators: true, + }, + }, + modal: {noModal: true}, + formik: {initialValues: {showCharCount: false}}, + }, +} as Meta; + +export const Default: StoryObj = { + render: () => , + args: {}, +}; diff --git a/src/components/builder/derive-address.tsx b/src/components/builder/derive-address.tsx new file mode 100644 index 00000000..407c5249 --- /dev/null +++ b/src/components/builder/derive-address.tsx @@ -0,0 +1,25 @@ +import {FormattedMessage, useIntl} from 'react-intl'; + +import {Checkbox} from '../formio'; + +const DeriveAddress = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'DeriveAddress' builder field", + defaultMessage: 'Derive address.', + }); + return ( + + } + tooltip={tooltip} + /> + ); +}; + +export default DeriveAddress; diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts index ae81440f..3a0aa986 100644 --- a/src/components/builder/index.ts +++ b/src/components/builder/index.ts @@ -15,6 +15,7 @@ export {default as Hidden} from './hidden'; export {default as ClearOnHide} from './clear-on-hide'; export {default as IsSensitiveData} from './is-sensitive-data'; export {default as ReadOnly} from './readonly'; +export {default as DeriveAddress} from './derive-address'; export {default as ShowCharCount} from './show-char-count'; export {default as PresentationConfig} from './presentation-config'; export {default as ComponentSelect} from './component-select'; diff --git a/src/registry/addressNL/edit.tsx b/src/registry/addressNL/edit.tsx index f1bdd2f1..0aefb898 100644 --- a/src/registry/addressNL/edit.tsx +++ b/src/registry/addressNL/edit.tsx @@ -4,6 +4,7 @@ import {useIntl} from 'react-intl'; import { BuilderTabs, ClearOnHide, + DeriveAddress, Description, Hidden, IsSensitiveData, @@ -61,6 +62,7 @@ const EditForm: EditFormDefinition = () => { + @@ -117,11 +119,15 @@ EditForm.defaultValues = { hidden: false, clearOnHide: true, isSensitiveData: true, + deriveAddress: false, defaultValue: { postcode: '', houseNumber: '', houseLetter: '', houseNumberAddition: '', + city: '', + streetName: '', + secretStreetCity: '', }, // Advanced tab conditional: { diff --git a/src/registry/addressNL/index.ts b/src/registry/addressNL/index.ts index 61584f30..8a7e4bd6 100644 --- a/src/registry/addressNL/index.ts +++ b/src/registry/addressNL/index.ts @@ -15,5 +15,8 @@ export default { houseNumber: '', houseLetter: '', houseNumberAddition: '', + city: '', + streetName: '', + secretStreetCity: '', }, } satisfies RegistryEntry; diff --git a/src/registry/addressNL/preview.tsx b/src/registry/addressNL/preview.tsx index a39628bf..d31f421d 100644 --- a/src/registry/addressNL/preview.tsx +++ b/src/registry/addressNL/preview.tsx @@ -56,6 +56,26 @@ const Preview: React.FC> = ({com /> } /> + + } + disabled + /> + + } + disabled + /> ); };