From 232ce54227476051770ef2c70f6db1805c696071 Mon Sep 17 00:00:00 2001 From: Manh Hung Nguyen Date: Tue, 7 Nov 2023 14:36:22 +0700 Subject: [PATCH] Fix FileUpload element cannot validate Fixes: AFORM-3653 --- .../elements/FileUploadElementBlock.tsx | 16 +++--- .../forms-react/src/hooks/useElement.ts | 52 +++++++++++++------ 2 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx index 1e77c26..76f2eb5 100644 --- a/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx +++ b/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx @@ -10,13 +10,12 @@ export interface FileUploadElementBlockProps { export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => { const { element } = props; - const { elementContext, extraAttr, validatorClasses, handleChange, handleBlur, checkVisible } = useElement(element); - let allowedTypes = "" - element.properties.fileTypes && element.properties.fileTypes.split(",").forEach(ext => { - if (ext[0] != ".") - allowedTypes += "." - allowedTypes += ext + "," - }); + const { elementContext, extraAttr, validatorClasses, handleChange, checkVisible } = useElement(element); + let allowedTypes = element.properties.fileTypes ? element.properties.fileTypes.split(",").map((ext) => { + ext = ext.trim(); + return (ext[0] != ".") ? `.${ext}` : ext; + }).join(",") : ""; + return ( @@ -29,9 +28,8 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => { multiple={element.properties.allowMultiple} className="FormFileUpload__Input" accept={allowedTypes} - aria-describedby={element.displayName + "_desc"} + aria-describedby={element.key + "_desc"} onChange={handleChange} - onBlur={handleBlur} />
diff --git a/src/@optimizely/forms-react/src/hooks/useElement.ts b/src/@optimizely/forms-react/src/hooks/useElement.ts index 8533da3..2d247b2 100644 --- a/src/@optimizely/forms-react/src/hooks/useElement.ts +++ b/src/@optimizely/forms-react/src/hooks/useElement.ts @@ -72,10 +72,26 @@ export const useElement = (element: FormElementBase) => { isDependenciesSatisfied } as ElementContext); },[element.key]); + + const dispatchUpdateValidation = (validationResults: FormValidationResult[]) => { + dispatch({ + type: ActionType.UpdateValidation, + elementKey: element.key, + validationResults + }); + } + const dispatchUpdateValue = (value: any) => { + dispatch({ + type: ActionType.UpdateValue, + elementKey: element.key, + value + }); + } const handleChange = (e: any) => { - const {name, value, type, checked} = e.target; + const {name, value, type, checked, files} = e.target; let submissionValue = value; + let validationResults = [...elementContext.validationResults]; //get selected value for choice if(/checkbox|radio/.test(type)){ @@ -92,43 +108,43 @@ export const useElement = (element: FormElementBase) => { submissionValue = arrayValue.length > 0 ? arrayValue.join(",") : null; } + + if(/file/.test(type)){ + submissionValue = files; + validationResults = doValidate(name, files); + dispatchUpdateValidation(validationResults); + } //update form context - dispatch({ - type: ActionType.UpdateValue, - elementKey: name, - value: submissionValue - }); + dispatchUpdateValue(submissionValue); //update element state setElementContext({ ...elementContext, - value: submissionValue + value: submissionValue, + validationResults } as ElementContext); } + const handleBlur = (e: any) => { const {name} = e.target; //call validation from form-sdk - doValidate(name); + let validationResults = doValidate(name, elementContext.value); //call dependencies from form-sdk - } - - const doValidate = (elementKey: string) => { - let validationResults = formValidation.validate(elementContext.value); //update form context - dispatch({ - type: ActionType.UpdateValidation, - elementKey, - validationResults - }); + dispatchUpdateValidation(validationResults); //update element state setElementContext({ ...elementContext, validationResults } as ElementContext); + } + + const doValidate = (elementKey: string, value: any) => { + let validationResults = formValidation.validate(value); let isValidationFail = !isNull(validationResults) && validationResults.some(r => !r.valid); let arrClass = validatorClasses.current.split(" "); @@ -144,6 +160,8 @@ export const useElement = (element: FormElementBase) => { } } validatorClasses.current = arrClass.join(" "); + + return validationResults; } const checkVisible = (): boolean => {