From e5c4ba76678765dc50a83d5417cf4017ab9ed8f5 Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Wed, 27 Dec 2023 17:08:36 +0700 Subject: [PATCH 1/2] Add confirmation to reset button Fixes: AFORM-3841 --- .../elements/ParagraphTextElementBlock.tsx | 2 +- .../components/elements/ResetButtonElementBlock.tsx | 12 ++++++------ src/@episerver/forms-react/src/hooks/useElement.ts | 6 +++++- src/@episerver/forms-sdk/src/helpers/utils.ts | 10 ++++++++++ 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx index d0296ee..881535f 100644 --- a/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx +++ b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx @@ -11,7 +11,7 @@ export interface ParagraphTextElementBlockProps { export const ParagraphTextElementBlock = (props: ParagraphTextElementBlockProps) => { const { element } = props; - const { elementContext, handleChange, handleBlur } = useElement(element); + const { elementContext } = useElement(element); const { isVisible, validationResults, value, validatorClasses } = elementContext; const formContext = useForms(); const form = formContext?.formContainer as FormContainer diff --git a/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx index 50bb2f4..dd2394d 100644 --- a/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx +++ b/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx @@ -11,15 +11,15 @@ export const ResetButtonElementBlock = (props: ResetButtonElementBlockProps) => const { elementContext, handleReset } = useElement(element); const { extraAttr } = elementContext; - return useMemo(()=>( + return useMemo(() => ( <> - - ),[]); + ), []); } \ No newline at end of file diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts index cd81d49..5685bc2 100644 --- a/src/@episerver/forms-react/src/hooks/useElement.ts +++ b/src/@episerver/forms-react/src/hooks/useElement.ts @@ -20,6 +20,7 @@ import { FormSubmission, FormDependConditions, FormValidationResult, + htmlDecodeEntities, } from "@episerver/forms-sdk"; import { DispatchFunctions } from "../context/dispatchFunctions"; @@ -156,7 +157,10 @@ export const useElement = (element: FormElementBase) => { } const handleReset = () => { - dispatchFuncs.resetForm(formContext?.formContainer ?? {} as FormContainer); + const form = formContext?.formContainer ?? {} as FormContainer + if (confirm(htmlDecodeEntities(form.properties.resetConfirmationMessage))) { + dispatchFuncs.resetForm(form); + } } return { diff --git a/src/@episerver/forms-sdk/src/helpers/utils.ts b/src/@episerver/forms-sdk/src/helpers/utils.ts index 693e798..48d3f42 100644 --- a/src/@episerver/forms-sdk/src/helpers/utils.ts +++ b/src/@episerver/forms-sdk/src/helpers/utils.ts @@ -71,4 +71,14 @@ export function isInArray (value: string, arrayString: string[], ignoreCase: boo arrayString = arrayString.map(s => s.toLowerCase()); } return arrayString.indexOf(value) > -1; +} + +/** + * Decodes HTML entities in a given encoded string and returns the decoded string.. + * @param encodedString - The string containing HTML-encoded entities to be decoded. + */ +export function htmlDecodeEntities(encodedString: string) : string{ + var textArea = document.createElement("textarea"); + textArea.innerHTML = encodedString; + return textArea.value; } \ No newline at end of file From 3ec326bc10d14d915f34e5a4ea59e4517e636034 Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Thu, 28 Dec 2023 11:41:23 +0700 Subject: [PATCH 2/2] Add logic to check if a form should be reset --- src/@episerver/forms-react/src/hooks/useElement.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts index 5685bc2..8ada695 100644 --- a/src/@episerver/forms-react/src/hooks/useElement.ts +++ b/src/@episerver/forms-react/src/hooks/useElement.ts @@ -156,9 +156,18 @@ export const useElement = (element: FormElementBase) => { dispatchFuncs.updateValidation(element.key, formValidation.validate(value)); } + const shouldResetForm = (resetConfirmationMessage: string) => { + if (isNullOrEmpty(resetConfirmationMessage)) { + return true; + } + + const userConfirmed = confirm(htmlDecodeEntities(resetConfirmationMessage)); + return userConfirmed; + }; + const handleReset = () => { const form = formContext?.formContainer ?? {} as FormContainer - if (confirm(htmlDecodeEntities(form.properties.resetConfirmationMessage))) { + if (shouldResetForm(form.properties.resetConfirmationMessage)) { dispatchFuncs.resetForm(form); } }