@oneblink/apps-react 12.0.0 → 13.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/OneBlinkAutoSaveForm.d.ts +5 -2
- package/dist/OneBlinkAutoSaveForm.js.map +1 -1
- package/dist/OneBlinkForm.d.ts +12 -62
- package/dist/OneBlinkForm.js +5 -2
- package/dist/OneBlinkForm.js.map +1 -1
- package/dist/OneBlinkFormBase.d.ts +23 -3
- package/dist/OneBlinkFormBase.js +357 -194
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/OneBlinkReadOnlyForm.d.ts +17 -9
- package/dist/OneBlinkReadOnlyForm.js +24 -47
- package/dist/OneBlinkReadOnlyForm.js.map +1 -1
- package/dist/apps/approvals-service.d.ts +1 -0
- package/dist/apps/approvals-service.js.map +1 -1
- package/dist/apps/services/api/submissions.d.ts +19 -2
- package/dist/apps/services/api/submissions.js +37 -4
- package/dist/apps/services/api/submissions.js.map +1 -1
- package/dist/apps/services/errors/oneBlinkAppsError.d.ts +8 -0
- package/dist/apps/services/errors/oneBlinkAppsError.js +1 -0
- package/dist/apps/services/errors/oneBlinkAppsError.js.map +1 -1
- package/dist/apps/submission-service.d.ts +16 -6
- package/dist/apps/submission-service.js +11 -6
- package/dist/apps/submission-service.js.map +1 -1
- package/dist/components/ArcGISWebMap.d.ts +2 -1
- package/dist/components/ArcGISWebMap.js +12 -4
- package/dist/components/ArcGISWebMap.js.map +1 -1
- package/dist/components/renderer/LookupButton.js +7 -5
- package/dist/components/renderer/LookupButton.js.map +1 -1
- package/dist/components/renderer/LookupNotification.js +32 -15
- package/dist/components/renderer/LookupNotification.js.map +1 -1
- package/dist/components/renderer/OneBlinkFormElements.d.ts +14 -1
- package/dist/components/renderer/OneBlinkFormElements.js +58 -39
- package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
- package/dist/components/renderer/PageFormElements.js +8 -3
- package/dist/components/renderer/PageFormElements.js.map +1 -1
- package/dist/components/renderer/ReverseGeocode.js +11 -4
- package/dist/components/renderer/ReverseGeocode.js.map +1 -1
- package/dist/components/renderer/attachments/DropdownMenu.d.ts +1 -2
- package/dist/components/renderer/attachments/DropdownMenu.js +4 -10
- package/dist/components/renderer/attachments/DropdownMenu.js.map +1 -1
- package/dist/components/renderer/attachments/FileCard.d.ts +2 -1
- package/dist/components/renderer/attachments/FileCard.js +2 -2
- package/dist/components/renderer/attachments/FileCard.js.map +1 -1
- package/dist/form-elements/FormElementABN.d.ts +2 -1
- package/dist/form-elements/FormElementABN.js +3 -3
- package/dist/form-elements/FormElementABN.js.map +1 -1
- package/dist/form-elements/FormElementAPINSWLiquorLicence.d.ts +2 -1
- package/dist/form-elements/FormElementAPINSWLiquorLicence.js +2 -2
- package/dist/form-elements/FormElementAPINSWLiquorLicence.js.map +1 -1
- package/dist/form-elements/FormElementArcGISWebMap.d.ts +2 -1
- package/dist/form-elements/FormElementArcGISWebMap.js +5 -5
- package/dist/form-elements/FormElementArcGISWebMap.js.map +1 -1
- package/dist/form-elements/FormElementAutocomplete.d.ts +1 -0
- package/dist/form-elements/FormElementAutocomplete.js +4 -4
- package/dist/form-elements/FormElementAutocomplete.js.map +1 -1
- package/dist/form-elements/FormElementBSB.d.ts +2 -1
- package/dist/form-elements/FormElementBSB.js +3 -3
- package/dist/form-elements/FormElementBSB.js.map +1 -1
- package/dist/form-elements/FormElementBarcodeScanner.d.ts +2 -1
- package/dist/form-elements/FormElementBarcodeScanner.js +2 -2
- package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
- package/dist/form-elements/FormElementBoolean.d.ts +2 -1
- package/dist/form-elements/FormElementBoolean.js +3 -3
- package/dist/form-elements/FormElementBoolean.js.map +1 -1
- package/dist/form-elements/FormElementCalculation.js +1 -0
- package/dist/form-elements/FormElementCalculation.js.map +1 -1
- package/dist/form-elements/FormElementCamera.d.ts +2 -1
- package/dist/form-elements/FormElementCamera.js +4 -4
- package/dist/form-elements/FormElementCamera.js.map +1 -1
- package/dist/form-elements/FormElementCheckBoxes.d.ts +2 -1
- package/dist/form-elements/FormElementCheckBoxes.js +4 -4
- package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
- package/dist/form-elements/FormElementCivicaNameRecord.js +1 -1
- package/dist/form-elements/FormElementCivicaNameRecord.js.map +1 -1
- package/dist/form-elements/FormElementCivicaStreetName.d.ts +2 -1
- package/dist/form-elements/FormElementCivicaStreetName.js +2 -2
- package/dist/form-elements/FormElementCivicaStreetName.js.map +1 -1
- package/dist/form-elements/FormElementCompliance.d.ts +2 -1
- package/dist/form-elements/FormElementCompliance.js +5 -12
- package/dist/form-elements/FormElementCompliance.js.map +1 -1
- package/dist/form-elements/FormElementDate.d.ts +2 -1
- package/dist/form-elements/FormElementDate.js +3 -3
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.d.ts +2 -1
- package/dist/form-elements/FormElementDateTime.js +3 -3
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementEmail.d.ts +2 -1
- package/dist/form-elements/FormElementEmail.js +2 -2
- package/dist/form-elements/FormElementEmail.js.map +1 -1
- package/dist/form-elements/FormElementFile.d.ts +1 -0
- package/dist/form-elements/FormElementFile.js +2 -2
- package/dist/form-elements/FormElementFile.js.map +1 -1
- package/dist/form-elements/FormElementFiles.d.ts +2 -1
- package/dist/form-elements/FormElementFiles.js +4 -4
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementForm.d.ts +20 -1
- package/dist/form-elements/FormElementForm.js +9 -15
- package/dist/form-elements/FormElementForm.js.map +1 -1
- package/dist/form-elements/FormElementFreshdeskDependentField.js +1 -1
- package/dist/form-elements/FormElementFreshdeskDependentField.js.map +1 -1
- package/dist/form-elements/FormElementGeoscapeAddress.d.ts +2 -1
- package/dist/form-elements/FormElementGeoscapeAddress.js +2 -2
- package/dist/form-elements/FormElementGeoscapeAddress.js.map +1 -1
- package/dist/form-elements/FormElementGoogleAddress.d.ts +2 -1
- package/dist/form-elements/FormElementGoogleAddress.js +2 -2
- package/dist/form-elements/FormElementGoogleAddress.js.map +1 -1
- package/dist/form-elements/FormElementLocation.d.ts +2 -1
- package/dist/form-elements/FormElementLocation.js +3 -3
- package/dist/form-elements/FormElementLocation.js.map +1 -1
- package/dist/form-elements/FormElementLookupButton.d.ts +2 -1
- package/dist/form-elements/FormElementLookupButton.js +8 -4
- package/dist/form-elements/FormElementLookupButton.js.map +1 -1
- package/dist/form-elements/FormElementNumber.d.ts +2 -1
- package/dist/form-elements/FormElementNumber.js +4 -4
- package/dist/form-elements/FormElementNumber.js.map +1 -1
- package/dist/form-elements/FormElementPointAddress.d.ts +2 -1
- package/dist/form-elements/FormElementPointAddress.js +2 -2
- package/dist/form-elements/FormElementPointAddress.js.map +1 -1
- package/dist/form-elements/FormElementPointAddressV3.d.ts +2 -1
- package/dist/form-elements/FormElementPointAddressV3.js +2 -2
- package/dist/form-elements/FormElementPointAddressV3.js.map +1 -1
- package/dist/form-elements/FormElementPointCadastralParcel.d.ts +2 -1
- package/dist/form-elements/FormElementPointCadastralParcel.js +3 -3
- package/dist/form-elements/FormElementPointCadastralParcel.js.map +1 -1
- package/dist/form-elements/FormElementRadio.d.ts +2 -1
- package/dist/form-elements/FormElementRadio.js +3 -3
- package/dist/form-elements/FormElementRadio.js.map +1 -1
- package/dist/form-elements/FormElementRepeatableSet.d.ts +13 -1
- package/dist/form-elements/FormElementRepeatableSet.js +16 -14
- package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
- package/dist/form-elements/FormElementSection.d.ts +7 -1
- package/dist/form-elements/FormElementSection.js +4 -4
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/FormElementSelect.d.ts +2 -1
- package/dist/form-elements/FormElementSelect.js +4 -4
- package/dist/form-elements/FormElementSelect.js.map +1 -1
- package/dist/form-elements/FormElementSignature.d.ts +2 -1
- package/dist/form-elements/FormElementSignature.js +9 -9
- package/dist/form-elements/FormElementSignature.js.map +1 -1
- package/dist/form-elements/FormElementSummary.js +2 -0
- package/dist/form-elements/FormElementSummary.js.map +1 -1
- package/dist/form-elements/FormElementTelephone.d.ts +2 -1
- package/dist/form-elements/FormElementTelephone.js +2 -2
- package/dist/form-elements/FormElementTelephone.js.map +1 -1
- package/dist/form-elements/FormElementText.d.ts +2 -1
- package/dist/form-elements/FormElementText.js +2 -2
- package/dist/form-elements/FormElementText.js.map +1 -1
- package/dist/form-elements/FormElementTextarea.d.ts +2 -1
- package/dist/form-elements/FormElementTextarea.js +3 -3
- package/dist/form-elements/FormElementTextarea.js.map +1 -1
- package/dist/form-elements/FormElementTime.d.ts +2 -1
- package/dist/form-elements/FormElementTime.js +3 -3
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/form-elements/OptionButton.d.ts +1 -1
- package/dist/form-elements/OptionButton.js +2 -2
- package/dist/form-elements/OptionButton.js.map +1 -1
- package/dist/hooks/useAreLookupsDisallowed.d.ts +2 -0
- package/dist/hooks/useAreLookupsDisallowed.js +12 -0
- package/dist/hooks/useAreLookupsDisallowed.js.map +1 -0
- package/dist/hooks/useDynamicOptionsLoaderState.js +5 -1
- package/dist/hooks/useDynamicOptionsLoaderState.js.map +1 -1
- package/dist/hooks/useEditableFormElementIds.d.ts +3 -0
- package/dist/hooks/useEditableFormElementIds.js +6 -0
- package/dist/hooks/useEditableFormElementIds.js.map +1 -0
- package/dist/hooks/useFormElementOptions.js +2 -0
- package/dist/hooks/useFormElementOptions.js.map +1 -1
- package/dist/hooks/useFormIsDirty.d.ts +38 -0
- package/dist/hooks/useFormIsDirty.js +78 -0
- package/dist/hooks/useFormIsDirty.js.map +1 -0
- package/dist/hooks/useFormSubmissionAttempt.d.ts +88 -0
- package/dist/hooks/useFormSubmissionAttempt.js +103 -0
- package/dist/hooks/useFormSubmissionAttempt.js.map +1 -0
- package/dist/hooks/useFormSubmissionAutoSaveState.d.ts +2 -9
- package/dist/hooks/useFormSubmissionAutoSaveState.js +4 -2
- package/dist/hooks/useFormSubmissionAutoSaveState.js.map +1 -1
- package/dist/hooks/useFormValidation.d.ts +1 -1
- package/dist/hooks/useFormValidation.js +21 -8
- package/dist/hooks/useFormValidation.js.map +1 -1
- package/dist/hooks/useInjectPages.d.ts +2 -1
- package/dist/hooks/useInjectPages.js.map +1 -1
- package/dist/hooks/useIsFormElementReadOnly.d.ts +2 -0
- package/dist/hooks/useIsFormElementReadOnly.js +13 -0
- package/dist/hooks/useIsFormElementReadOnly.js.map +1 -0
- package/dist/hooks/useLookupNotification.d.ts +23 -2
- package/dist/hooks/useLookupNotification.js +2 -1
- package/dist/hooks/useLookupNotification.js.map +1 -1
- package/dist/hooks/useLookups.d.ts +3 -3
- package/dist/hooks/useLookups.js +7 -4
- package/dist/hooks/useLookups.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/services/form-validation/extensions.d.ts +3 -1
- package/dist/services/form-validation/extensions.js +3 -1
- package/dist/services/form-validation/extensions.js.map +1 -1
- package/dist/services/form-validation/validateSubmission.d.ts +3 -1
- package/dist/services/form-validation/validateSubmission.js +43 -12
- package/dist/services/form-validation/validateSubmission.js.map +1 -1
- package/dist/services/generateCivicaNameRecordElements.js +0 -13
- package/dist/services/generateCivicaNameRecordElements.js.map +1 -1
- package/dist/services/generateFreshdeskDependentFieldElements.js +0 -3
- package/dist/services/generateFreshdeskDependentFieldElements.js.map +1 -1
- package/dist/types/form.d.ts +17 -3
- package/dist/types/form.js.map +1 -1
- package/dist/utils/read-only-form-elements.d.ts +37 -0
- package/dist/utils/read-only-form-elements.js +63 -0
- package/dist/utils/read-only-form-elements.js.map +1 -0
- package/package.json +4 -3
|
@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
|
|
4
4
|
import ElementDOMId from '../utils/elementDOMIds';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const handleNestedChange = React.useCallback((nestedElement, { value: nestedElementValue, executedLookups: nestedExecutedLookups, sectionState, }, idPrefix) => {
|
|
5
|
+
function FormElementForm({ formId, element, readOnly, childrenReadOnly, readOnlyOverrideChildren, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, sectionState, }) {
|
|
6
|
+
const handleNestedChange = React.useCallback((nestedElement, { value: nestedElementValue, executedLookups: nestedExecutedLookups, sectionState, isDerivedChange, }, idPrefix) => {
|
|
8
7
|
if (nestedElement.type === 'section') {
|
|
9
8
|
// trigger onChange to update sectionState
|
|
10
9
|
onChange({
|
|
@@ -34,9 +33,10 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
|
|
|
34
33
|
};
|
|
35
34
|
},
|
|
36
35
|
sectionState,
|
|
36
|
+
isDerivedChange,
|
|
37
37
|
});
|
|
38
38
|
}, [element, onChange]);
|
|
39
|
-
const handleLookup = React.useCallback((mergeLookupResults) => {
|
|
39
|
+
const handleLookup = React.useCallback((mergeLookupResults, options) => {
|
|
40
40
|
onLookup((currentFormSubmission) => {
|
|
41
41
|
var _a;
|
|
42
42
|
let model = currentFormSubmission.submission[element.name];
|
|
@@ -75,7 +75,7 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
|
|
|
75
75
|
},
|
|
76
76
|
sectionState: currentFormSubmission.sectionState,
|
|
77
77
|
};
|
|
78
|
-
});
|
|
78
|
+
}, options);
|
|
79
79
|
}, [element.name, onLookup]);
|
|
80
80
|
const validation = React.useMemo(() => {
|
|
81
81
|
return !!formElementValidation &&
|
|
@@ -90,15 +90,9 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
|
|
|
90
90
|
? formElementConditionallyShown.formElements
|
|
91
91
|
: undefined;
|
|
92
92
|
}, [formElementConditionallyShown]);
|
|
93
|
-
const parentElement = React.useMemo(() => {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
? element.readOnly
|
|
97
|
-
? recursivelySetReadOnly(element.elements)
|
|
98
|
-
: element.elements
|
|
99
|
-
: [],
|
|
100
|
-
};
|
|
101
|
-
}, [element.elements, element.readOnly]);
|
|
93
|
+
const parentElement = React.useMemo(() => ({
|
|
94
|
+
elements: Array.isArray(element.elements) ? element.elements : [],
|
|
95
|
+
}), [element.elements]);
|
|
102
96
|
const handleUpdateNestedFormElements = React.useCallback((setter) => {
|
|
103
97
|
onUpdateFormElements((formElements) => {
|
|
104
98
|
return formElements.map((formElement) => {
|
|
@@ -115,7 +109,7 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
|
|
|
115
109
|
});
|
|
116
110
|
}, [element.id, onUpdateFormElements]);
|
|
117
111
|
const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id]);
|
|
118
|
-
return (_jsx(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, idPrefix: elementDOMId.subFormDOMIdPrefix, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }));
|
|
112
|
+
return (_jsx(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, readOnly: childrenReadOnly, readOnlyOverride: readOnlyOverrideChildren ? readOnly : undefined, idPrefix: elementDOMId.subFormDOMIdPrefix, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }));
|
|
119
113
|
}
|
|
120
114
|
export default React.memo(FormElementForm);
|
|
121
115
|
//# sourceMappingURL=FormElementForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n ExecutedLookups,\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n NestedFormElementValueChangeHandler,\n SectionState,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport ElementDOMId from '../utils/elementDOMIds'\nimport { recursivelySetReadOnly } from '../OneBlinkReadOnlyForm'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n value: SubmissionTypes.S3SubmissionData['submission'] | undefined\n onChange: NestedFormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission']\n >\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation | undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n sectionState: SectionState\n}\n\nfunction FormElementForm({\n formId,\n element,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n onUpdateFormElements,\n sectionState,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (\n nestedElement: FormTypes.FormElement,\n {\n value: nestedElementValue,\n executedLookups: nestedExecutedLookups,\n sectionState,\n }: Parameters<NestedFormElementValueChangeHandler>[1],\n idPrefix?: string,\n ) => {\n if (nestedElement.type === 'section') {\n // trigger onChange to update sectionState\n onChange(\n {\n ...nestedElement,\n id: idPrefix ? `${idPrefix}${nestedElement.id}` : nestedElement.id,\n },\n { executedLookups: undefined, sectionState },\n )\n }\n if (!('name' in nestedElement)) return\n onChange(element, {\n value: (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }),\n executedLookups: (existingExecutedLookups) => {\n if (\n typeof existingExecutedLookups === 'boolean' ||\n Array.isArray(existingExecutedLookups)\n ) {\n return {}\n }\n return {\n ...existingExecutedLookups,\n [nestedElement.name]:\n typeof nestedExecutedLookups === 'function'\n ? nestedExecutedLookups(\n existingExecutedLookups?.[\n nestedElement.name\n ] as ExecutedLookups,\n )\n : nestedExecutedLookups,\n }\n },\n sectionState,\n })\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as SubmissionTypes.S3SubmissionData['submission']\n let newExecutedLookups = currentFormSubmission.executedLookups?.[\n element.name\n ] as ExecutedLookups\n\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n sectionState: currentFormSubmission.sectionState,\n })\n model = submission\n newExecutedLookups = executedLookups as ExecutedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: {\n ...currentFormSubmission.executedLookups,\n [element.name]: newExecutedLookups,\n },\n sectionState: currentFormSubmission.sectionState,\n }\n })\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(() => {\n return {\n elements: Array.isArray(element.elements)\n ? element.readOnly\n ? recursivelySetReadOnly(element.elements)\n : element.elements\n : [],\n }\n }, [element.elements, element.readOnly])\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'form' &&\n Array.isArray(formElement.elements)\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value || {}}\n parentElement={parentElement}\n idPrefix={elementDOMId.subFormDOMIdPrefix}\n onUpdateFormElements={handleUpdateNestedFormElements}\n sectionState={sectionState}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n ExecutedLookups,\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n NestedFormElementValueChangeHandler,\n SectionState,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport ElementDOMId from '../utils/elementDOMIds'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n /**\n * Whether this nested form is locked. Used as `readOnlyOverride` for\n * synthetic children when `readOnlyOverrideChildren` is set. Nested fields do\n * not inherit this value as a blanket lock so a child included in\n * `editableFormElementIds` can stay editable.\n */\n readOnly: boolean\n /**\n * Lock to apply to nested fields (`OneBlinkFormElements.readOnly` /\n * `parentReadOnly`). True when the whole form is read-only, a parent is\n * read-only, or this element’s definition has `readOnly: true`.\n */\n childrenReadOnly: boolean\n /**\n * When true, nested fields use this element’s `readOnly` as\n * `readOnlyOverride` instead of calculating their own. Used by Civica name\n * records and Freshdesk dependent fields.\n */\n readOnlyOverrideChildren?: boolean\n value: SubmissionTypes.S3SubmissionData['submission'] | undefined\n onChange: NestedFormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission']\n >\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation | undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n sectionState: SectionState\n}\n\nfunction FormElementForm({\n formId,\n element,\n readOnly,\n childrenReadOnly,\n readOnlyOverrideChildren,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n onUpdateFormElements,\n sectionState,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (\n nestedElement: FormTypes.FormElement,\n {\n value: nestedElementValue,\n executedLookups: nestedExecutedLookups,\n sectionState,\n isDerivedChange,\n }: Parameters<NestedFormElementValueChangeHandler>[1],\n idPrefix?: string,\n ) => {\n if (nestedElement.type === 'section') {\n // trigger onChange to update sectionState\n onChange(\n {\n ...nestedElement,\n id: idPrefix ? `${idPrefix}${nestedElement.id}` : nestedElement.id,\n },\n { executedLookups: undefined, sectionState },\n )\n }\n if (!('name' in nestedElement)) return\n onChange(element, {\n value: (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }),\n executedLookups: (existingExecutedLookups) => {\n if (\n typeof existingExecutedLookups === 'boolean' ||\n Array.isArray(existingExecutedLookups)\n ) {\n return {}\n }\n return {\n ...existingExecutedLookups,\n [nestedElement.name]:\n typeof nestedExecutedLookups === 'function'\n ? nestedExecutedLookups(\n existingExecutedLookups?.[\n nestedElement.name\n ] as ExecutedLookups,\n )\n : nestedExecutedLookups,\n }\n },\n sectionState,\n isDerivedChange,\n })\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults, options) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as SubmissionTypes.S3SubmissionData['submission']\n let newExecutedLookups = currentFormSubmission.executedLookups?.[\n element.name\n ] as ExecutedLookups\n\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n sectionState: currentFormSubmission.sectionState,\n })\n model = submission\n newExecutedLookups = executedLookups as ExecutedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: {\n ...currentFormSubmission.executedLookups,\n [element.name]: newExecutedLookups,\n },\n sectionState: currentFormSubmission.sectionState,\n }\n }, options)\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(\n () => ({\n elements: Array.isArray(element.elements) ? element.elements : [],\n }),\n [element.elements],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'form' &&\n Array.isArray(formElement.elements)\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value || {}}\n parentElement={parentElement}\n readOnly={childrenReadOnly}\n readOnlyOverride={readOnlyOverrideChildren ? readOnly : undefined}\n idPrefix={elementDOMId.subFormDOMIdPrefix}\n onUpdateFormElements={handleUpdateNestedFormElements}\n sectionState={sectionState}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}
|
|
@@ -43,7 +43,7 @@ function FormElementFreshdeskDependentField({ element, onUpdateFormElements, ...
|
|
|
43
43
|
});
|
|
44
44
|
});
|
|
45
45
|
}, [element.id, formFormElement, onUpdateFormElements]);
|
|
46
|
-
return (_jsx(FormElementForm, { element: formFormElement, onUpdateFormElements: handleUpdateNestedFormElements, ...props }));
|
|
46
|
+
return (_jsx(FormElementForm, { element: formFormElement, readOnlyOverrideChildren: true, onUpdateFormElements: handleUpdateNestedFormElements, ...props }));
|
|
47
47
|
}
|
|
48
48
|
export default React.memo(FormElementFreshdeskDependentField);
|
|
49
49
|
//# sourceMappingURL=FormElementFreshdeskDependentField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementFreshdeskDependentField.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFreshdeskDependentField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementForm, { Props } from './FormElementForm'\nimport generateFreshdeskDependentFieldElements, {\n getNestedOptions,\n} from '../services/generateFreshdeskDependentFieldElements'\nimport { UpdateFormElementsHandler } from '../types/form'\nimport { typeCastService } from '@oneblink/sdk-core'\n\nfunction FormElementFreshdeskDependentField({\n element,\n onUpdateFormElements,\n ...props\n}: Omit<Props, 'element'> & {\n element: FormTypes.FreshdeskDependentFieldElement\n}) {\n const freshdeskElements = React.useMemo(\n () => generateFreshdeskDependentFieldElements(element),\n [element],\n )\n\n const formFormElement = React.useMemo<FormTypes.FormFormElement>(() => {\n const [categoryElement, subcategoryElement, itemElement] = freshdeskElements\n const elements = [categoryElement]\n const value = props.value as\n | FormTypes.FreshdeskDependentFieldElementValue\n | undefined\n\n if (props.value?.category) {\n const subCategoryOptions = getNestedOptions(\n element.options,\n value?.category,\n )\n\n elements.push({ ...subcategoryElement, options: subCategoryOptions })\n\n if (value?.subCategory) {\n const itemOptions = getNestedOptions(\n subCategoryOptions,\n value?.subCategory,\n )\n elements.push({ ...itemElement, options: itemOptions })\n }\n }\n\n return { ...element, type: 'form', formId: NaN, elements }\n }, [element, props.value, freshdeskElements])\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n const [newFormFormElement] = setter([formFormElement])\n if (\n newFormFormElement.type !== 'form' ||\n !Array.isArray(newFormFormElement.elements) ||\n !newFormFormElement.elements[0]\n ) {\n return\n }\n const categoryElementWithOptions =\n typeCastService.formElements.toOptionsElement(\n newFormFormElement.elements[0],\n )\n if (!categoryElementWithOptions?.options) {\n return\n }\n\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (formElement.id === element.id) {\n return {\n ...formElement,\n options: categoryElementWithOptions.options,\n }\n }\n return formElement\n })\n })\n },\n [element.id, formFormElement, onUpdateFormElements],\n )\n\n return (\n <FormElementForm\n element={formFormElement}\n onUpdateFormElements={handleUpdateNestedFormElements}\n {...props}\n />\n )\n}\n\nexport default React.memo(FormElementFreshdeskDependentField)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementFreshdeskDependentField.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFreshdeskDependentField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementForm, { Props } from './FormElementForm'\nimport generateFreshdeskDependentFieldElements, {\n getNestedOptions,\n} from '../services/generateFreshdeskDependentFieldElements'\nimport { UpdateFormElementsHandler } from '../types/form'\nimport { typeCastService } from '@oneblink/sdk-core'\n\nfunction FormElementFreshdeskDependentField({\n element,\n onUpdateFormElements,\n ...props\n}: Omit<Props, 'element'> & {\n element: FormTypes.FreshdeskDependentFieldElement\n}) {\n const freshdeskElements = React.useMemo(\n () => generateFreshdeskDependentFieldElements(element),\n [element],\n )\n\n const formFormElement = React.useMemo<FormTypes.FormFormElement>(() => {\n const [categoryElement, subcategoryElement, itemElement] = freshdeskElements\n const elements = [categoryElement]\n const value = props.value as\n | FormTypes.FreshdeskDependentFieldElementValue\n | undefined\n\n if (props.value?.category) {\n const subCategoryOptions = getNestedOptions(\n element.options,\n value?.category,\n )\n\n elements.push({ ...subcategoryElement, options: subCategoryOptions })\n\n if (value?.subCategory) {\n const itemOptions = getNestedOptions(\n subCategoryOptions,\n value?.subCategory,\n )\n elements.push({ ...itemElement, options: itemOptions })\n }\n }\n\n return { ...element, type: 'form', formId: NaN, elements }\n }, [element, props.value, freshdeskElements])\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n const [newFormFormElement] = setter([formFormElement])\n if (\n newFormFormElement.type !== 'form' ||\n !Array.isArray(newFormFormElement.elements) ||\n !newFormFormElement.elements[0]\n ) {\n return\n }\n const categoryElementWithOptions =\n typeCastService.formElements.toOptionsElement(\n newFormFormElement.elements[0],\n )\n if (!categoryElementWithOptions?.options) {\n return\n }\n\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (formElement.id === element.id) {\n return {\n ...formElement,\n options: categoryElementWithOptions.options,\n }\n }\n return formElement\n })\n })\n },\n [element.id, formFormElement, onUpdateFormElements],\n )\n\n return (\n <FormElementForm\n element={formFormElement}\n readOnlyOverrideChildren\n onUpdateFormElements={handleUpdateNestedFormElements}\n {...props}\n />\n )\n}\n\nexport default React.memo(FormElementFreshdeskDependentField)\n"]}
|
|
@@ -5,12 +5,13 @@ type Props = {
|
|
|
5
5
|
formId: number;
|
|
6
6
|
id: string;
|
|
7
7
|
element: FormTypes.GeoscapeAddressElement;
|
|
8
|
+
readOnly: boolean;
|
|
8
9
|
value: GeoscapeTypes.GeoscapeAddress | undefined;
|
|
9
10
|
displayValidationMessage: boolean;
|
|
10
11
|
validationMessage: string | undefined;
|
|
11
12
|
onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>;
|
|
12
13
|
autocompleteAttributes?: string;
|
|
13
14
|
} & IsDirtyProps;
|
|
14
|
-
declare function FormElementGeoscapeAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function FormElementGeoscapeAddress({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
declare const _default: React.MemoExoticComponent<typeof FormElementGeoscapeAddress>;
|
|
16
17
|
export default _default;
|
|
@@ -6,7 +6,7 @@ import FormElementLabelContainer from '../components/renderer/FormElementLabelCo
|
|
|
6
6
|
import useIsMounted from '../hooks/useIsMounted';
|
|
7
7
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
8
8
|
import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
|
|
9
|
-
function FormElementGeoscapeAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
|
|
9
|
+
function FormElementGeoscapeAddress({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
|
|
10
10
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
11
11
|
const isMounted = useIsMounted();
|
|
12
12
|
const [label, setLabel] = React.useState('');
|
|
@@ -62,7 +62,7 @@ function FormElementGeoscapeAddress({ formId, id, element, value, displayValidat
|
|
|
62
62
|
// we don't need this to run again when the label changes
|
|
63
63
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
64
|
}, [value]);
|
|
65
|
-
return (_jsxs("div", { className: "cypress-geoscape-address-element", children: [_jsx(FormElementLabelContainer, { className: "ob-geoscape-address ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled:
|
|
65
|
+
return (_jsxs("div", { className: "cypress-geoscape-address-element", children: [_jsx(FormElementLabelContainer, { className: "ob-geoscape-address ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-geoscape-address-details-error-message" }))] }));
|
|
66
66
|
}
|
|
67
67
|
export default React.memo(FormElementGeoscapeAddress);
|
|
68
68
|
//# sourceMappingURL=FormElementGeoscapeAddress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementGeoscapeAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGeoscapeAddress.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAC9E,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAEhD,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;
|
|
1
|
+
{"version":3,"file":"FormElementGeoscapeAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGeoscapeAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, GeoscapeTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n formId: number\n id: string\n element: FormTypes.GeoscapeAddressElement\n readOnly: boolean\n value: GeoscapeTypes.GeoscapeAddress | undefined\n displayValidationMessage: boolean\n validationMessage: string | undefined\n onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementGeoscapeAddress({\n formId,\n id,\n element,\n readOnly,\n value,\n displayValidationMessage,\n validationMessage,\n onChange,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const isMounted = useIsMounted()\n const [label, setLabel] = React.useState('')\n const [error, setError] = React.useState<Error | undefined>()\n const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n React.useState(false)\n\n const handleSearch = React.useCallback(\n async (query: string, abortSignal: AbortSignal) => {\n setError(undefined)\n\n const params: {\n query: string\n maxNumberOfResults?: number\n stateTerritory?: string\n } = {\n query,\n maxNumberOfResults: 10,\n }\n\n if (element.stateTerritoryFilter) {\n params.stateTerritory = element.stateTerritoryFilter.join(',')\n }\n\n const result = await formService.searchGeoscapeAddresses(\n formId,\n params,\n abortSignal,\n )\n\n return result.suggest.map((suggestion, index) => ({\n value: suggestion.id || index.toString(),\n label: suggestion.address || index.toString(),\n }))\n },\n [element.stateTerritoryFilter, formId],\n )\n\n const handleChange = React.useCallback(\n async (addressId: string | undefined) => {\n if (!addressId) {\n onChange(element, {\n value: undefined,\n })\n return\n }\n\n setIsLoadingAddressDetails(true)\n try {\n const result = await formService.getGeoscapeAddress(formId, addressId)\n onChange(element, {\n value: result,\n })\n } catch (newError) {\n if (isMounted.current) {\n setError(newError as Error)\n }\n }\n if (isMounted.current) {\n setIsLoadingAddressDetails(false)\n }\n },\n [isMounted, onChange, element, formId],\n )\n\n // Ensure the label is set if the value is set outside of this component\n React.useEffect(() => {\n if (value) {\n const newLabel = value.addressDetails?.formattedAddress || value.addressId\n if (label !== newLabel) {\n setLabel(newLabel || '')\n }\n }\n // we don't need this to run again when the label changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value])\n\n return (\n <div className=\"cypress-geoscape-address-element\">\n <FormElementLabelContainer\n className=\"ob-geoscape-address ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={readOnly || isLoadingAddressDetails}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={handleChange}\n isLoading={isLoadingAddressDetails}\n hasError={!!error}\n onChangeLabel={setLabel}\n searchDebounceMs={750}\n searchMinCharacters={4}\n onSearch={handleSearch}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n />\n </FormElementLabelContainer>\n\n {error && (\n <FormElementValidationMessage\n message={error.toString()}\n className=\"cypress-geoscape-address-details-error-message\"\n />\n )}\n </div>\n )\n}\n\nexport default React.memo(FormElementGeoscapeAddress)\n"]}
|
|
@@ -5,12 +5,13 @@ type Props = {
|
|
|
5
5
|
formId: number;
|
|
6
6
|
id: string;
|
|
7
7
|
element: FormTypes.GoogleAddressElement;
|
|
8
|
+
readOnly: boolean;
|
|
8
9
|
value: GoogleTypes.GoogleMapsAddress | undefined;
|
|
9
10
|
displayValidationMessage: boolean;
|
|
10
11
|
validationMessage: string | undefined;
|
|
11
12
|
onChange: FormElementValueChangeHandler<GoogleTypes.GoogleMapsAddress>;
|
|
12
13
|
autocompleteAttributes?: string;
|
|
13
14
|
} & IsDirtyProps;
|
|
14
|
-
declare function FormElementGoogleAddress({ id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function FormElementGoogleAddress({ id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
declare const _default: React.MemoExoticComponent<typeof FormElementGoogleAddress>;
|
|
16
17
|
export default _default;
|
|
@@ -7,7 +7,7 @@ import useGoogle from '../hooks/useGoogle';
|
|
|
7
7
|
import useIsMounted from '../hooks/useIsMounted';
|
|
8
8
|
import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
|
|
9
9
|
import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
|
|
10
|
-
function FormElementGoogleAddress({ id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
|
|
10
|
+
function FormElementGoogleAddress({ id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
|
|
11
11
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
12
12
|
const isMounted = useIsMounted();
|
|
13
13
|
const [label, setLabel] = React.useState('');
|
|
@@ -135,7 +135,7 @@ function FormElementGoogleAddress({ id, element, value, displayValidationMessage
|
|
|
135
135
|
setLabel(newLabel !== null && newLabel !== void 0 ? newLabel : '');
|
|
136
136
|
}
|
|
137
137
|
}, [value]);
|
|
138
|
-
return (_jsxs("div", { className: "cypress-google-address-element", children: [_jsx(FormElementLabelContainer, { className: "ob-google-address ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled:
|
|
138
|
+
return (_jsxs("div", { className: "cypress-google-address-element", children: [_jsx(FormElementLabelContainer, { className: "ob-google-address ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, branding: _jsxs("a", { className: "dropdown-item cypress-powered-by-google ob-autocomplete__drop-down-item-powered-by-google", children: ["powered by", ' ', _jsx("img", { src: "https://developers.google.com/static/maps/documentation/images/google_on_white.png" })] }), autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-google-address-details-error-message" }))] }));
|
|
139
139
|
}
|
|
140
140
|
export default React.memo(FormElementGoogleAddress);
|
|
141
141
|
//# sourceMappingURL=FormElementGoogleAddress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementGoogleAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGoogleAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes, GoogleTypes } from '@oneblink/types'\nimport { OneBlinkAppsError, Sentry } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useGoogle from '../hooks/useGoogle'\nimport useIsMounted from '../hooks/useIsMounted'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n formId: number\n id: string\n element: FormTypes.GoogleAddressElement\n value: GoogleTypes.GoogleMapsAddress | undefined\n displayValidationMessage: boolean\n validationMessage: string | undefined\n onChange: FormElementValueChangeHandler<GoogleTypes.GoogleMapsAddress>\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementGoogleAddress({\n id,\n element,\n value,\n displayValidationMessage,\n validationMessage,\n onChange,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const isMounted = useIsMounted()\n const [label, setLabel] = React.useState('')\n const [error, setError] = React.useState<Error | undefined>()\n const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n React.useState(false)\n\n const { isLoaded } = useGoogle()\n\n const autocompleteService = React.useMemo(() => {\n if (isLoaded) {\n return new google.maps.places.AutocompleteService()\n }\n }, [isLoaded])\n\n const dummyMap = React.useMemo(() => {\n if (isLoaded) {\n return new google.maps.Map(document.createElement('div'))\n }\n }, [isLoaded])\n\n const handleSearch = React.useCallback(\n async (input: string, abortSignal: AbortSignal) => {\n setError(undefined)\n if (autocompleteService) {\n const predictions = await new Promise<\n google.maps.places.QueryAutocompletePrediction[]\n >((resolve, reject) => {\n autocompleteService.getQueryPredictions(\n {\n input,\n },\n (predictions, status) => {\n switch (status) {\n case google.maps.places.PlacesServiceStatus.OK:\n case google.maps.places.PlacesServiceStatus.ZERO_RESULTS: {\n resolve(predictions ?? [])\n break\n }\n case google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT: {\n reject(\n new OneBlinkAppsError(\n 'This application has gone over its Google Address querying quota. Please contact an administrator to rectify the issue or try again later.',\n ),\n )\n break\n }\n case google.maps.places.PlacesServiceStatus.INVALID_REQUEST: {\n reject(\n new OneBlinkAppsError(\n 'Google Maps API key may not have been configured correctly, the request to retrieve address suggestions is invalid. Please contact an administrator to rectify the issue.',\n ),\n )\n break\n }\n case google.maps.places.PlacesServiceStatus.REQUEST_DENIED: {\n reject(\n new OneBlinkAppsError(\n 'Google Maps API key has not been configured correctly. Please contact an administrator to rectify the issue.',\n ),\n )\n break\n }\n default: {\n reject(\n new OneBlinkAppsError(\n 'An unknown error has occurred. Please try again and contact support if the problem persists.',\n ),\n )\n }\n }\n },\n )\n }).catch((e) => {\n if (!abortSignal.aborted) {\n Sentry.captureException(e)\n }\n throw e\n })\n\n if (!abortSignal.aborted) {\n return predictions.reduce<Array<{ value: string; label: string }>>(\n (results, prediction) => {\n if (prediction.place_id) {\n results.push({\n value: prediction.place_id,\n label: prediction.description,\n })\n }\n return results\n },\n [],\n )\n }\n }\n throw new OneBlinkAppsError(\n 'An unknown error has occurred. Please contact support if the problem persists.',\n )\n },\n [autocompleteService],\n )\n\n const handleChange = React.useCallback(\n async (placeId: string | undefined) => {\n if (!placeId) {\n onChange(element, { value: undefined })\n return\n }\n\n setIsLoadingAddressDetails(true)\n try {\n //this should not happen, we can't get a place Id without google being present\n if (!isLoaded || !dummyMap) {\n throw new OneBlinkAppsError(\n 'An unknown error has occurred. Please contact support if the problem persists.',\n {\n originalError: new Error(\n 'Google Places library has not be initialised',\n ),\n },\n )\n }\n\n const placeService = new google.maps.places.PlacesService(dummyMap)\n const place = await new Promise<google.maps.places.PlaceResult>(\n (resolve, reject) => {\n placeService.getDetails(\n {\n placeId,\n fields: [\n 'place_id',\n 'formatted_address',\n 'geometry',\n 'address_components',\n ],\n },\n (place, status) => {\n if (\n status !== google.maps.places.PlacesServiceStatus.OK ||\n !place\n ) {\n reject(\n new OneBlinkAppsError(\n `Could not find address details for place with id: ${placeId}`,\n ),\n )\n return\n }\n resolve(place)\n },\n )\n },\n )\n onChange(element, {\n value: {\n place_id: place.place_id,\n formatted_address: place.formatted_address,\n address_components: place.address_components,\n geometry: {\n location: place.geometry?.location?.toJSON(),\n viewport: place.geometry?.viewport?.toJSON(),\n },\n },\n })\n } catch (newError) {\n if (isMounted.current) {\n setError(newError as Error)\n }\n }\n if (isMounted.current) {\n setIsLoadingAddressDetails(false)\n }\n },\n [isMounted, onChange, element, isLoaded, dummyMap],\n )\n\n // Ensure the label is set if the value is set outside of this component\n React.useEffect(() => {\n if (value) {\n const newLabel = value.formatted_address || value.place_id\n setLabel(newLabel ?? '')\n }\n }, [value])\n\n return (\n <div className=\"cypress-google-address-element\">\n <FormElementLabelContainer\n className=\"ob-google-address ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={element.readOnly || isLoadingAddressDetails}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={handleChange}\n isLoading={isLoadingAddressDetails}\n hasError={!!error}\n onChangeLabel={setLabel}\n searchDebounceMs={750}\n searchMinCharacters={4}\n onSearch={handleSearch}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n aria-describedby={ariaDescribedby}\n branding={\n <a className=\"dropdown-item cypress-powered-by-google ob-autocomplete__drop-down-item-powered-by-google\">\n powered by{' '}\n <img src=\"https://developers.google.com/static/maps/documentation/images/google_on_white.png\" />\n </a>\n }\n autoComplete={autocompleteAttributes}\n />\n </FormElementLabelContainer>\n\n {error && (\n <FormElementValidationMessage\n message={error.toString()}\n className=\"cypress-google-address-details-error-message\"\n />\n )}\n </div>\n )\n}\n\nexport default React.memo(FormElementGoogleAddress)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementGoogleAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementGoogleAddress.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEnD,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAC9E,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAE1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAc9F,SAAS,wBAAwB,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,KAAK,EACL,wBAAwB,EACxB,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAqB,CAAA;IAC7D,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GACzD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvB,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAA;IAEhC,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,EAAE,CAAA;QACrD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,KAAK,EAAE,KAAa,EAAE,WAAwB,EAAE,EAAE;QAChD,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,IAAI,mBAAmB,EAAE,CAAC;YACxB,MAAM,WAAW,GAAG,MAAM,IAAI,OAAO,CAEnC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBACpB,mBAAmB,CAAC,mBAAmB,CACrC;oBACE,KAAK;iBACN,EACD,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE;oBACtB,QAAQ,MAAM,EAAE,CAAC;wBACf,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,CAAC;wBAC/C,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC;4BACzD,OAAO,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC,CAAA;4BAC1B,MAAK;wBACP,CAAC;wBACD,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;4BAC7D,MAAM,CACJ,IAAI,iBAAiB,CACnB,4IAA4I,CAC7I,CACF,CAAA;4BACD,MAAK;wBACP,CAAC;wBACD,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC,CAAC;4BAC5D,MAAM,CACJ,IAAI,iBAAiB,CACnB,2KAA2K,CAC5K,CACF,CAAA;4BACD,MAAK;wBACP,CAAC;wBACD,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;4BAC3D,MAAM,CACJ,IAAI,iBAAiB,CACnB,8GAA8G,CAC/G,CACF,CAAA;4BACD,MAAK;wBACP,CAAC;wBACD,OAAO,CAAC,CAAC,CAAC;4BACR,MAAM,CACJ,IAAI,iBAAiB,CACnB,8FAA8F,CAC/F,CACF,CAAA;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC,CACF,CAAA;YACH,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;oBACzB,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBAC5B,CAAC;gBACD,MAAM,CAAC,CAAA;YACT,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBACzB,OAAO,WAAW,CAAC,MAAM,CACvB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE;oBACtB,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;wBACxB,OAAO,CAAC,IAAI,CAAC;4BACX,KAAK,EAAE,UAAU,CAAC,QAAQ;4BAC1B,KAAK,EAAE,UAAU,CAAC,WAAW;yBAC9B,CAAC,CAAA;oBACJ,CAAC;oBACD,OAAO,OAAO,CAAA;gBAChB,CAAC,EACD,EAAE,CACH,CAAA;YACH,CAAC;QACH,CAAC;QACD,MAAM,IAAI,iBAAiB,CACzB,gFAAgF,CACjF,CAAA;IACH,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,KAAK,EAAE,OAA2B,EAAE,EAAE;;QACpC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,QAAQ,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;YACvC,OAAM;QACR,CAAC;QAED,0BAA0B,CAAC,IAAI,CAAC,CAAA;QAChC,IAAI,CAAC;YACH,8EAA8E;YAC9E,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC3B,MAAM,IAAI,iBAAiB,CACzB,gFAAgF,EAChF;oBACE,aAAa,EAAE,IAAI,KAAK,CACtB,8CAA8C,CAC/C;iBACF,CACF,CAAA;YACH,CAAC;YAED,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;YACnE,MAAM,KAAK,GAAG,MAAM,IAAI,OAAO,CAC7B,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBAClB,YAAY,CAAC,UAAU,CACrB;oBACE,OAAO;oBACP,MAAM,EAAE;wBACN,UAAU;wBACV,mBAAmB;wBACnB,UAAU;wBACV,oBAAoB;qBACrB;iBACF,EACD,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;oBAChB,IACE,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;wBACpD,CAAC,KAAK,EACN,CAAC;wBACD,MAAM,CACJ,IAAI,iBAAiB,CACnB,qDAAqD,OAAO,EAAE,CAC/D,CACF,CAAA;wBACD,OAAM;oBACR,CAAC;oBACD,OAAO,CAAC,KAAK,CAAC,CAAA;gBAChB,CAAC,CACF,CAAA;YACH,CAAC,CACF,CAAA;YACD,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB;oBAC1C,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;oBAC5C,QAAQ,EAAE;wBACR,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,0CAAE,MAAM,EAAE;wBAC5C,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,0CAAE,MAAM,EAAE;qBAC7C;iBACF;aACF,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,QAAQ,EAAE,CAAC;YAClB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,QAAiB,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC;QACD,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,0BAA0B,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACnD,CAAA;IAED,wEAAwE;IACxE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,QAAQ,CAAA;YAC1D,QAAQ,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAA;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,eAAK,SAAS,EAAC,gCAAgC,aAC7C,KAAC,yBAAyB,IACxB,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAE1B,KAAC,oBAAoB,IACnB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAAI,uBAAuB,EAC7C,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,aAAa,EAAE,YAAY,EAC3B,SAAS,EAAE,uBAAuB,EAClC,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,aAAa,EAAE,QAAQ,EACvB,gBAAgB,EAAE,GAAG,EACrB,mBAAmB,EAAE,CAAC,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,sBACJ,eAAe,EACjC,QAAQ,EACN,aAAG,SAAS,EAAC,2FAA2F,2BAC3F,GAAG,EACd,cAAK,GAAG,EAAC,oFAAoF,GAAG,IAC9F,EAEN,YAAY,EAAE,sBAAsB,GACpC,GACwB,EAE3B,KAAK,IAAI,CACR,KAAC,4BAA4B,IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,EACzB,SAAS,EAAC,8CAA8C,GACxD,CACH,IACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes, GoogleTypes } from '@oneblink/types'\nimport { OneBlinkAppsError, Sentry } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useGoogle from '../hooks/useGoogle'\nimport useIsMounted from '../hooks/useIsMounted'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n formId: number\n id: string\n element: FormTypes.GoogleAddressElement\n readOnly: boolean\n value: GoogleTypes.GoogleMapsAddress | undefined\n displayValidationMessage: boolean\n validationMessage: string | undefined\n onChange: FormElementValueChangeHandler<GoogleTypes.GoogleMapsAddress>\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementGoogleAddress({\n id,\n element,\n readOnly,\n value,\n displayValidationMessage,\n validationMessage,\n onChange,\n isDirty,\n setIsDirty,\n autocompleteAttributes,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const isMounted = useIsMounted()\n const [label, setLabel] = React.useState('')\n const [error, setError] = React.useState<Error | undefined>()\n const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n React.useState(false)\n\n const { isLoaded } = useGoogle()\n\n const autocompleteService = React.useMemo(() => {\n if (isLoaded) {\n return new google.maps.places.AutocompleteService()\n }\n }, [isLoaded])\n\n const dummyMap = React.useMemo(() => {\n if (isLoaded) {\n return new google.maps.Map(document.createElement('div'))\n }\n }, [isLoaded])\n\n const handleSearch = React.useCallback(\n async (input: string, abortSignal: AbortSignal) => {\n setError(undefined)\n if (autocompleteService) {\n const predictions = await new Promise<\n google.maps.places.QueryAutocompletePrediction[]\n >((resolve, reject) => {\n autocompleteService.getQueryPredictions(\n {\n input,\n },\n (predictions, status) => {\n switch (status) {\n case google.maps.places.PlacesServiceStatus.OK:\n case google.maps.places.PlacesServiceStatus.ZERO_RESULTS: {\n resolve(predictions ?? [])\n break\n }\n case google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT: {\n reject(\n new OneBlinkAppsError(\n 'This application has gone over its Google Address querying quota. Please contact an administrator to rectify the issue or try again later.',\n ),\n )\n break\n }\n case google.maps.places.PlacesServiceStatus.INVALID_REQUEST: {\n reject(\n new OneBlinkAppsError(\n 'Google Maps API key may not have been configured correctly, the request to retrieve address suggestions is invalid. Please contact an administrator to rectify the issue.',\n ),\n )\n break\n }\n case google.maps.places.PlacesServiceStatus.REQUEST_DENIED: {\n reject(\n new OneBlinkAppsError(\n 'Google Maps API key has not been configured correctly. Please contact an administrator to rectify the issue.',\n ),\n )\n break\n }\n default: {\n reject(\n new OneBlinkAppsError(\n 'An unknown error has occurred. Please try again and contact support if the problem persists.',\n ),\n )\n }\n }\n },\n )\n }).catch((e) => {\n if (!abortSignal.aborted) {\n Sentry.captureException(e)\n }\n throw e\n })\n\n if (!abortSignal.aborted) {\n return predictions.reduce<Array<{ value: string; label: string }>>(\n (results, prediction) => {\n if (prediction.place_id) {\n results.push({\n value: prediction.place_id,\n label: prediction.description,\n })\n }\n return results\n },\n [],\n )\n }\n }\n throw new OneBlinkAppsError(\n 'An unknown error has occurred. Please contact support if the problem persists.',\n )\n },\n [autocompleteService],\n )\n\n const handleChange = React.useCallback(\n async (placeId: string | undefined) => {\n if (!placeId) {\n onChange(element, { value: undefined })\n return\n }\n\n setIsLoadingAddressDetails(true)\n try {\n //this should not happen, we can't get a place Id without google being present\n if (!isLoaded || !dummyMap) {\n throw new OneBlinkAppsError(\n 'An unknown error has occurred. Please contact support if the problem persists.',\n {\n originalError: new Error(\n 'Google Places library has not be initialised',\n ),\n },\n )\n }\n\n const placeService = new google.maps.places.PlacesService(dummyMap)\n const place = await new Promise<google.maps.places.PlaceResult>(\n (resolve, reject) => {\n placeService.getDetails(\n {\n placeId,\n fields: [\n 'place_id',\n 'formatted_address',\n 'geometry',\n 'address_components',\n ],\n },\n (place, status) => {\n if (\n status !== google.maps.places.PlacesServiceStatus.OK ||\n !place\n ) {\n reject(\n new OneBlinkAppsError(\n `Could not find address details for place with id: ${placeId}`,\n ),\n )\n return\n }\n resolve(place)\n },\n )\n },\n )\n onChange(element, {\n value: {\n place_id: place.place_id,\n formatted_address: place.formatted_address,\n address_components: place.address_components,\n geometry: {\n location: place.geometry?.location?.toJSON(),\n viewport: place.geometry?.viewport?.toJSON(),\n },\n },\n })\n } catch (newError) {\n if (isMounted.current) {\n setError(newError as Error)\n }\n }\n if (isMounted.current) {\n setIsLoadingAddressDetails(false)\n }\n },\n [isMounted, onChange, element, isLoaded, dummyMap],\n )\n\n // Ensure the label is set if the value is set outside of this component\n React.useEffect(() => {\n if (value) {\n const newLabel = value.formatted_address || value.place_id\n setLabel(newLabel ?? '')\n }\n }, [value])\n\n return (\n <div className=\"cypress-google-address-element\">\n <FormElementLabelContainer\n className=\"ob-google-address ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={readOnly || isLoadingAddressDetails}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={handleChange}\n isLoading={isLoadingAddressDetails}\n hasError={!!error}\n onChangeLabel={setLabel}\n searchDebounceMs={750}\n searchMinCharacters={4}\n onSearch={handleSearch}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n aria-describedby={ariaDescribedby}\n branding={\n <a className=\"dropdown-item cypress-powered-by-google ob-autocomplete__drop-down-item-powered-by-google\">\n powered by{' '}\n <img src=\"https://developers.google.com/static/maps/documentation/images/google_on_white.png\" />\n </a>\n }\n autoComplete={autocompleteAttributes}\n />\n </FormElementLabelContainer>\n\n {error && (\n <FormElementValidationMessage\n message={error.toString()}\n className=\"cypress-google-address-details-error-message\"\n />\n )}\n </div>\n )\n}\n\nexport default React.memo(FormElementGoogleAddress)\n"]}
|
|
@@ -4,6 +4,7 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
|
|
|
4
4
|
type Props = {
|
|
5
5
|
id: string;
|
|
6
6
|
element: FormTypes.LocationElement;
|
|
7
|
+
readOnly: boolean;
|
|
7
8
|
value: unknown | undefined;
|
|
8
9
|
onChange: FormElementValueChangeHandler<Coords>;
|
|
9
10
|
displayValidationMessage: boolean;
|
|
@@ -16,6 +17,6 @@ type Coords = {
|
|
|
16
17
|
};
|
|
17
18
|
export declare const stringifyLocation: (location: Coords | undefined) => string | undefined;
|
|
18
19
|
export declare function parseLocationValue(value: unknown): Coords | undefined;
|
|
19
|
-
declare function FormElementLocation({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare function FormElementLocation({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
declare const _default: React.MemoExoticComponent<typeof FormElementLocation>;
|
|
21
22
|
export default _default;
|
|
@@ -38,7 +38,7 @@ export function parseLocationValue(value) {
|
|
|
38
38
|
const mapHeight = 300;
|
|
39
39
|
const initialMapZoom = 15;
|
|
40
40
|
const apiUrl = 'https://maps.googleapis.com/maps/api/staticmap';
|
|
41
|
-
function FormElementLocation({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
41
|
+
function FormElementLocation({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
|
|
42
42
|
const ariaDescribedby = useElementAriaDescribedby(id, element);
|
|
43
43
|
const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] = useBooleanState(false);
|
|
44
44
|
const [location, setLocation] = React.useState(undefined);
|
|
@@ -89,9 +89,9 @@ function FormElementLocation({ id, element, value, onChange, validationMessage,
|
|
|
89
89
|
const { isLookingUp } = React.useContext(LookupNotificationContext);
|
|
90
90
|
const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
|
|
91
91
|
const { isReverseGeocoding, reverseGeocodingErrorMsg } = useReverseGeocodeContext();
|
|
92
|
-
return (_jsx("div", { className: "cypress-location-element", children: _jsxs(FormElementLabelContainer, { className: "ob-location", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "control", children: [_jsx(LocationDisplay, { isOpen: isLocationPickerOpen, isLoading: isLoadingLocation, location: location, onChange: setLocation }), _jsx("div", { className: "buttons ob-buttons ob-location__buttons", children: isLocationPickerOpen || isReverseGeocoding ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button", onClick: onCancel, disabled:
|
|
92
|
+
return (_jsx("div", { className: "cypress-location-element", children: _jsxs(FormElementLabelContainer, { className: "ob-location", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "control", children: [_jsx(LocationDisplay, { isOpen: isLocationPickerOpen, isLoading: isLoadingLocation, location: location, onChange: setLocation }), _jsx("div", { className: "buttons ob-buttons ob-location__buttons", children: isLocationPickerOpen || isReverseGeocoding ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button", onClick: onCancel, disabled: readOnly || isReverseGeocoding, children: "Cancel" }), _jsx("button", { type: "button", className: clsx('is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button', {
|
|
93
93
|
'is-loading': isReverseGeocoding,
|
|
94
|
-
}), onClick: onConfirm, disabled:
|
|
94
|
+
}), onClick: onConfirm, disabled: readOnly || !location || isReverseGeocoding, children: "Confirm" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button", onClick: onClear, disabled: readOnly, children: "Clear" }), _jsx("button", { type: "button", className: "is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button", onClick: onLocate, disabled: readOnly, onBlur: setIsDirty, id: id, "aria-describedby": ariaDescribedby, children: "Locate" })] })) })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage })), reverseGeocodingErrorMsg && (_jsx(FormElementValidationMessage, { message: reverseGeocodingErrorMsg }))] }) }));
|
|
95
95
|
}
|
|
96
96
|
const LocationDisplay = React.memo(function LocationDisplay({ isLoading, isOpen, location, onChange, }) {
|
|
97
97
|
const isOffline = useIsOffline();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '../apps'\nimport clsx from 'clsx'\nimport { GoogleMap, Marker } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogle from '../hooks/useGoogle'\nimport useGoogleMapsApiKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport { useReverseGeocodeContext } from '../components/renderer/ReverseGeocode'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.LocationElement\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<Coords>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n latitude: number\n longitude: number\n zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n if (location) {\n return `${location.latitude},${location.longitude}`\n }\n}\n\nexport function parseLocationValue(value: unknown): Coords | undefined {\n if (!value || typeof value !== 'object') {\n return\n }\n\n const { latitude, longitude, zoom } = value as Record<string, unknown>\n if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n return\n }\n\n return {\n latitude,\n longitude,\n zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\n\nfunction FormElementLocation({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n useBooleanState(false)\n\n const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n const onClear = React.useCallback(() => {\n hideLocationPicker()\n onChange(element, {\n value: undefined,\n })\n setLocation(undefined)\n }, [element, hideLocationPicker, onChange])\n\n const onCancel = React.useCallback(() => {\n hideLocationPicker()\n setLocation(parseLocationValue(value))\n }, [hideLocationPicker, value])\n\n const onLocate = React.useCallback(async () => {\n showLocationPicker()\n\n if (location) {\n return\n }\n\n let currentLocation = null\n try {\n const result = await geolocation.getCurrentPosition()\n currentLocation = result.coords\n } catch (err) {\n console.error(\n 'Error while attempting to find the users current location',\n err,\n )\n Sentry.captureException(err)\n } finally {\n setLocation(parseLocationValue(currentLocation || defaultCoords()))\n }\n }, [location, showLocationPicker])\n\n const isLoadingLocation = !location && isLocationPickerOpen\n\n const onConfirm = React.useCallback(() => {\n setIsDirty()\n hideLocationPicker()\n onChange(element, {\n value: location,\n })\n }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n // SET DEFAULT/PREFILL DATA\n React.useEffect(() => {\n const newValue = parseLocationValue(value)\n if (newValue) {\n setLocation(newValue)\n }\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const { isReverseGeocoding, reverseGeocodingErrorMsg } =\n useReverseGeocodeContext()\n\n return (\n <div className=\"cypress-location-element\">\n <FormElementLabelContainer\n className=\"ob-location\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <LocationDisplay\n isOpen={isLocationPickerOpen}\n isLoading={isLoadingLocation}\n location={location}\n onChange={setLocation}\n />\n\n <div className=\"buttons ob-buttons ob-location__buttons\">\n {isLocationPickerOpen || isReverseGeocoding ? (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n onClick={onCancel}\n disabled={element.readOnly || isReverseGeocoding}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className={clsx(\n 'is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button',\n {\n 'is-loading': isReverseGeocoding,\n },\n )}\n onClick={onConfirm}\n disabled={element.readOnly || !location || isReverseGeocoding}\n >\n Confirm\n </button>\n </>\n ) : (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n onClick={onClear}\n disabled={element.readOnly}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n onClick={onLocate}\n disabled={element.readOnly}\n onBlur={setIsDirty}\n id={id}\n aria-describedby={ariaDescribedby}\n >\n Locate\n </button>\n </>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n {reverseGeocodingErrorMsg && (\n <FormElementValidationMessage message={reverseGeocodingErrorMsg} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n isLoading,\n isOpen,\n location,\n onChange,\n}: {\n isLoading: boolean\n isOpen: boolean\n location: Coords | undefined\n onChange: (location: Coords) => void\n}) {\n const isOffline = useIsOffline()\n\n if (isLoading) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <OnLoading small></OnLoading>\n </div>\n </figure>\n )\n }\n\n if (isOffline) {\n return <LocationIsOffline location={location} isOpen={isOpen} />\n }\n\n if (isOpen) {\n if (!location) {\n // There is no location to display while user is attempting to pick a location.\n // This should never happen, if loading has finished a default should be set.\n // Fail fast!!!\n // https://en.wikipedia.org/wiki/Fail-fast\n throw new Error(\n 'Default location was not set for \"location\" form element',\n )\n }\n\n return <LocationPicker location={location} onChange={onChange} />\n }\n\n if (location) {\n return <LocationImage location={location} />\n }\n\n return null\n})\n\nfunction LocationIsOfflineFigureContent({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <h4 className=\"title is-4\" role=\"alert\">\n You are currently offline\n </h4>\n {children}\n </div>\n </figure>\n )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n location,\n isOpen,\n}: {\n location: Coords | undefined\n isOpen: boolean\n}) {\n if (isOpen) {\n if (location) {\n // If user is offline and attempting to pick a location and there is one set already\n return (\n <LocationIsOfflineFigureContent>\n <p>\n Click the <b>Confirm</b> button below to set the location to your\n current position.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and attempting to pick a location and there is one nothing set yet\n return (\n <LocationIsOfflineFigureContent>\n <p>\n We could not find your current location. Click the <b>Cancel</b>{' '}\n button below to try again.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and has confirmed a location\n if (location) {\n return (\n <LocationIsOfflineFigureContent>\n <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n <p>\n <b>{location.latitude}</b>\n </p>\n <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n <p>\n <b>{location.longitude}</b>\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // User is offline with no location set and not attempting to pick a location\n return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n location,\n}: {\n location: Coords\n}) {\n const googleMapsApiKey = useGoogleMapsApiKey()\n\n const staticUrl = React.useMemo(() => {\n const center = `${location.latitude},${location.longitude}`\n const queries = {\n key: googleMapsApiKey,\n size: `${mapHeight}x${mapHeight}`,\n zoom: location.zoom,\n center,\n markers: `color:red|${center}`,\n }\n return `${apiUrl}?${queryString.stringify(queries)}`\n }, [googleMapsApiKey, location])\n\n return (\n <figure className=\"ob-figure\">\n <img\n className=\"ob-location__map\"\n alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n src={staticUrl}\n height={mapHeight}\n width={mapHeight}\n />\n </figure>\n )\n})\n\nconst LocationPicker = React.memo(function LocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const { isLoaded } = useGoogle()\n\n return (\n <figure className=\"ob-figure\">\n {isLoaded && (\n <GoogleLocationPicker location={location} onChange={onChange} />\n )}\n </figure>\n )\n})\n\nconst GoogleLocationPicker = React.memo(function GoogleLocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const [map, setMap] = React.useState<google.maps.Map | null>(null)\n const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n const originalCenter = React.useRef<{ lat: number; lng: number }>({\n lat: location.latitude,\n lng: location.longitude,\n })\n\n const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\n\n const onZoomChanged = React.useCallback(() => {\n if (!map) {\n return\n }\n\n onChange({\n latitude: location.latitude,\n longitude: location.longitude,\n zoom: map.getZoom(),\n })\n }, [location.latitude, location.longitude, map, onChange])\n\n const handleDragEnd = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n if (!e.latLng) {\n return\n }\n const { lat, lng } = e.latLng.toJSON()\n onChange({\n latitude: lat,\n longitude: lng,\n zoom: location.zoom,\n })\n if (map) {\n map.panTo(e.latLng)\n }\n },\n [location.zoom, map, onChange],\n )\n\n const handleClick = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n handleDragEnd(e)\n\n if (!e.latLng || !marker) {\n return\n }\n\n marker.setPosition(e.latLng)\n // this enables the marker to animate after moving it\n marker.setMap(null)\n marker.setAnimation(markerAnimation)\n marker.setMap(map)\n },\n [handleDragEnd, map, marker, markerAnimation],\n )\n\n return (\n <GoogleMap\n onLoad={(map) => setMap(map)}\n onUnmount={() => setMap(null)}\n mapContainerStyle={{\n height: 300,\n }}\n // eslint-disable-next-line react-hooks/refs\n center={originalCenter.current}\n zoom={location.zoom}\n onZoomChanged={onZoomChanged}\n onClick={handleClick}\n options={{ draggableCursor: 'pointer' }}\n >\n <Marker\n onLoad={(marker) => setMarker(marker)}\n onUnmount={() => setMarker(null)}\n animation={markerAnimation}\n // eslint-disable-next-line react-hooks/refs\n position={originalCenter.current}\n draggable\n onDragEnd={handleDragEnd}\n ></Marker>\n </GoogleMap>\n )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '../apps'\nimport clsx from 'clsx'\nimport { GoogleMap, Marker } from '@react-google-maps/api'\nimport queryString from 'query-string'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport * as geolocation from '../services/geolocation'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogle from '../hooks/useGoogle'\nimport useGoogleMapsApiKey from '../hooks/useGoogleMapsApiKey'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport { useReverseGeocodeContext } from '../components/renderer/ReverseGeocode'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.LocationElement\n readOnly: boolean\n value: unknown | undefined\n onChange: FormElementValueChangeHandler<Coords>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n latitude: number\n longitude: number\n zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n if (location) {\n return `${location.latitude},${location.longitude}`\n }\n}\n\nexport function parseLocationValue(value: unknown): Coords | undefined {\n if (!value || typeof value !== 'object') {\n return\n }\n\n const { latitude, longitude, zoom } = value as Record<string, unknown>\n if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n return\n }\n\n return {\n latitude,\n longitude,\n zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\n\nfunction FormElementLocation({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n useBooleanState(false)\n\n const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n const onClear = React.useCallback(() => {\n hideLocationPicker()\n onChange(element, {\n value: undefined,\n })\n setLocation(undefined)\n }, [element, hideLocationPicker, onChange])\n\n const onCancel = React.useCallback(() => {\n hideLocationPicker()\n setLocation(parseLocationValue(value))\n }, [hideLocationPicker, value])\n\n const onLocate = React.useCallback(async () => {\n showLocationPicker()\n\n if (location) {\n return\n }\n\n let currentLocation = null\n try {\n const result = await geolocation.getCurrentPosition()\n currentLocation = result.coords\n } catch (err) {\n console.error(\n 'Error while attempting to find the users current location',\n err,\n )\n Sentry.captureException(err)\n } finally {\n setLocation(parseLocationValue(currentLocation || defaultCoords()))\n }\n }, [location, showLocationPicker])\n\n const isLoadingLocation = !location && isLocationPickerOpen\n\n const onConfirm = React.useCallback(() => {\n setIsDirty()\n hideLocationPicker()\n onChange(element, {\n value: location,\n })\n }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n // SET DEFAULT/PREFILL DATA\n React.useEffect(() => {\n const newValue = parseLocationValue(value)\n if (newValue) {\n setLocation(newValue)\n }\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const { isReverseGeocoding, reverseGeocodingErrorMsg } =\n useReverseGeocodeContext()\n\n return (\n <div className=\"cypress-location-element\">\n <FormElementLabelContainer\n className=\"ob-location\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n <LocationDisplay\n isOpen={isLocationPickerOpen}\n isLoading={isLoadingLocation}\n location={location}\n onChange={setLocation}\n />\n\n <div className=\"buttons ob-buttons ob-location__buttons\">\n {isLocationPickerOpen || isReverseGeocoding ? (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n onClick={onCancel}\n disabled={readOnly || isReverseGeocoding}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className={clsx(\n 'is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button',\n {\n 'is-loading': isReverseGeocoding,\n },\n )}\n onClick={onConfirm}\n disabled={readOnly || !location || isReverseGeocoding}\n >\n Confirm\n </button>\n </>\n ) : (\n <>\n <button\n type=\"button\"\n className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n onClick={onClear}\n disabled={readOnly}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n onClick={onLocate}\n disabled={readOnly}\n onBlur={setIsDirty}\n id={id}\n aria-describedby={ariaDescribedby}\n >\n Locate\n </button>\n </>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n {reverseGeocodingErrorMsg && (\n <FormElementValidationMessage message={reverseGeocodingErrorMsg} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n isLoading,\n isOpen,\n location,\n onChange,\n}: {\n isLoading: boolean\n isOpen: boolean\n location: Coords | undefined\n onChange: (location: Coords) => void\n}) {\n const isOffline = useIsOffline()\n\n if (isLoading) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <OnLoading small></OnLoading>\n </div>\n </figure>\n )\n }\n\n if (isOffline) {\n return <LocationIsOffline location={location} isOpen={isOpen} />\n }\n\n if (isOpen) {\n if (!location) {\n // There is no location to display while user is attempting to pick a location.\n // This should never happen, if loading has finished a default should be set.\n // Fail fast!!!\n // https://en.wikipedia.org/wiki/Fail-fast\n throw new Error(\n 'Default location was not set for \"location\" form element',\n )\n }\n\n return <LocationPicker location={location} onChange={onChange} />\n }\n\n if (location) {\n return <LocationImage location={location} />\n }\n\n return null\n})\n\nfunction LocationIsOfflineFigureContent({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <h4 className=\"title is-4\" role=\"alert\">\n You are currently offline\n </h4>\n {children}\n </div>\n </figure>\n )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n location,\n isOpen,\n}: {\n location: Coords | undefined\n isOpen: boolean\n}) {\n if (isOpen) {\n if (location) {\n // If user is offline and attempting to pick a location and there is one set already\n return (\n <LocationIsOfflineFigureContent>\n <p>\n Click the <b>Confirm</b> button below to set the location to your\n current position.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and attempting to pick a location and there is one nothing set yet\n return (\n <LocationIsOfflineFigureContent>\n <p>\n We could not find your current location. Click the <b>Cancel</b>{' '}\n button below to try again.\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // If user is offline and has confirmed a location\n if (location) {\n return (\n <LocationIsOfflineFigureContent>\n <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n <p>\n <b>{location.latitude}</b>\n </p>\n <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n <p>\n <b>{location.longitude}</b>\n </p>\n </LocationIsOfflineFigureContent>\n )\n }\n\n // User is offline with no location set and not attempting to pick a location\n return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n location,\n}: {\n location: Coords\n}) {\n const googleMapsApiKey = useGoogleMapsApiKey()\n\n const staticUrl = React.useMemo(() => {\n const center = `${location.latitude},${location.longitude}`\n const queries = {\n key: googleMapsApiKey,\n size: `${mapHeight}x${mapHeight}`,\n zoom: location.zoom,\n center,\n markers: `color:red|${center}`,\n }\n return `${apiUrl}?${queryString.stringify(queries)}`\n }, [googleMapsApiKey, location])\n\n return (\n <figure className=\"ob-figure\">\n <img\n className=\"ob-location__map\"\n alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n src={staticUrl}\n height={mapHeight}\n width={mapHeight}\n />\n </figure>\n )\n})\n\nconst LocationPicker = React.memo(function LocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const { isLoaded } = useGoogle()\n\n return (\n <figure className=\"ob-figure\">\n {isLoaded && (\n <GoogleLocationPicker location={location} onChange={onChange} />\n )}\n </figure>\n )\n})\n\nconst GoogleLocationPicker = React.memo(function GoogleLocationPicker({\n location,\n onChange,\n}: {\n location: Coords\n onChange: (newLocation: Coords) => void\n}) {\n const [map, setMap] = React.useState<google.maps.Map | null>(null)\n const [marker, setMarker] = React.useState<google.maps.Marker | null>(null)\n\n const originalCenter = React.useRef<{ lat: number; lng: number }>({\n lat: location.latitude,\n lng: location.longitude,\n })\n\n const markerAnimation = React.useMemo(() => google.maps.Animation.DROP, [])\n\n const onZoomChanged = React.useCallback(() => {\n if (!map) {\n return\n }\n\n onChange({\n latitude: location.latitude,\n longitude: location.longitude,\n zoom: map.getZoom(),\n })\n }, [location.latitude, location.longitude, map, onChange])\n\n const handleDragEnd = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n if (!e.latLng) {\n return\n }\n const { lat, lng } = e.latLng.toJSON()\n onChange({\n latitude: lat,\n longitude: lng,\n zoom: location.zoom,\n })\n if (map) {\n map.panTo(e.latLng)\n }\n },\n [location.zoom, map, onChange],\n )\n\n const handleClick = React.useCallback(\n (e: google.maps.MapMouseEvent) => {\n handleDragEnd(e)\n\n if (!e.latLng || !marker) {\n return\n }\n\n marker.setPosition(e.latLng)\n // this enables the marker to animate after moving it\n marker.setMap(null)\n marker.setAnimation(markerAnimation)\n marker.setMap(map)\n },\n [handleDragEnd, map, marker, markerAnimation],\n )\n\n return (\n <GoogleMap\n onLoad={(map) => setMap(map)}\n onUnmount={() => setMap(null)}\n mapContainerStyle={{\n height: 300,\n }}\n // eslint-disable-next-line react-hooks/refs\n center={originalCenter.current}\n zoom={location.zoom}\n onZoomChanged={onZoomChanged}\n onClick={handleClick}\n options={{ draggableCursor: 'pointer' }}\n >\n <Marker\n onLoad={(marker) => setMarker(marker)}\n onUnmount={() => setMarker(null)}\n animation={markerAnimation}\n // eslint-disable-next-line react-hooks/refs\n position={originalCenter.current}\n draggable\n onDragEnd={handleDragEnd}\n ></Marker>\n </GoogleMap>\n )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
|
|
@@ -7,8 +7,9 @@ type ValidationMessageProps = {
|
|
|
7
7
|
type Props = {
|
|
8
8
|
id: string;
|
|
9
9
|
element: FormTypes.LookupButtonFormElement;
|
|
10
|
+
readOnly: boolean;
|
|
10
11
|
} & ValidationMessageProps;
|
|
11
|
-
declare function FormElementLookupButton({ id, element, onChange, onLookup, validationMessage, ...validationMessageProps }: Props & {
|
|
12
|
+
declare function FormElementLookupButton({ id, element, readOnly, onChange, onLookup, validationMessage, ...validationMessageProps }: Props & {
|
|
12
13
|
onChange: FormElementValueChangeHandler;
|
|
13
14
|
onLookup: FormElementLookupHandler;
|
|
14
15
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,17 +20,17 @@ const FormElementLookupButtonValidationMessage = memo(function FormElementLookup
|
|
|
20
20
|
}
|
|
21
21
|
return _jsx(FormElementValidationMessage, { message: validationMessage });
|
|
22
22
|
});
|
|
23
|
-
function FormElementLookupButton({ id, element, onChange, onLookup, validationMessage, ...validationMessageProps }) {
|
|
23
|
+
function FormElementLookupButton({ id, element, readOnly, onChange, onLookup, validationMessage, ...validationMessageProps }) {
|
|
24
24
|
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
|
25
25
|
const { isAutoLookup, data } = useMemo(() => {
|
|
26
26
|
return generateLookupButtonValue(element.elementDependencies, elements, formSubmissionModel);
|
|
27
27
|
}, [element.elementDependencies, elements, formSubmissionModel]);
|
|
28
|
-
const handleLookup = useCallback((setter) => {
|
|
28
|
+
const handleLookup = useCallback((setter, options) => {
|
|
29
29
|
onLookup((data) => {
|
|
30
30
|
const dataAfterSetting = setter(data);
|
|
31
31
|
dataAfterSetting.submission[element.name] = true;
|
|
32
32
|
return dataAfterSetting;
|
|
33
|
-
});
|
|
33
|
+
}, options);
|
|
34
34
|
}, [element.name, onLookup]);
|
|
35
35
|
const stringifyData = useMemo(() => {
|
|
36
36
|
if (!data) {
|
|
@@ -39,10 +39,14 @@ function FormElementLookupButton({ id, element, onChange, onLookup, validationMe
|
|
|
39
39
|
return stringifyLookupButtonValue(data);
|
|
40
40
|
}, [data]);
|
|
41
41
|
useEffect(() => {
|
|
42
|
+
if (readOnly) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
42
45
|
onChange(element, {
|
|
43
46
|
value: false,
|
|
47
|
+
isDerivedChange: true,
|
|
44
48
|
});
|
|
45
|
-
}, [element, onChange, stringifyData]);
|
|
49
|
+
}, [element, onChange, readOnly, stringifyData]);
|
|
46
50
|
const value = useMemo(() => {
|
|
47
51
|
// Want the value to be `true` if there is data or if there are
|
|
48
52
|
// no element dependencies i.e. the lookup can be run at any time.
|