@oneblink/apps-react 8.14.0-beta.1 → 8.14.0-beta.2
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 +1 -1
- package/dist/OneBlinkAutoSaveForm.js +4 -8
- package/dist/OneBlinkAutoSaveForm.js.map +1 -1
- package/dist/OneBlinkForm.d.ts +15 -0
- package/dist/OneBlinkForm.js +4 -2
- package/dist/OneBlinkForm.js.map +1 -1
- package/dist/OneBlinkFormBase.d.ts +10 -1
- package/dist/OneBlinkFormBase.js +50 -8
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/hooks/useFormSubmissionAutoSaveState.d.ts +3 -1
- package/dist/hooks/useFormSubmissionAutoSaveState.js +37 -4
- package/dist/hooks/useFormSubmissionAutoSaveState.js.map +1 -1
- package/dist/hooks/useFormSubmissionDuration.d.ts +1 -0
- package/dist/hooks/useFormSubmissionDuration.js +18 -0
- package/dist/hooks/useFormSubmissionDuration.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/sendGoogleAnalyticsEvent.d.ts +2 -0
- package/dist/utils/sendGoogleAnalyticsEvent.js +8 -1
- package/dist/utils/sendGoogleAnalyticsEvent.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { OneBlinkFormUncontrolled } from './OneBlinkForm';
|
|
3
|
-
declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
|
|
3
|
+
declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
|
|
4
4
|
/** Pass a unique key for this submission e.g. the `externalId` the parameter */
|
|
5
5
|
autoSaveKey: string;
|
|
6
6
|
/**
|
|
@@ -3,9 +3,8 @@ import OnLoading from './components/renderer/OnLoading';
|
|
|
3
3
|
import Modal from './components/renderer/Modal';
|
|
4
4
|
import OneBlinkFormBase from './OneBlinkFormBase';
|
|
5
5
|
import useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, sectionState, } = useFormSubmissionAutoSaveState({
|
|
6
|
+
function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }) {
|
|
7
|
+
const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, sectionState, getCurrentSubmissionDuration, } = useFormSubmissionAutoSaveState({
|
|
9
8
|
form,
|
|
10
9
|
initialSubmission,
|
|
11
10
|
resumeAtElement,
|
|
@@ -17,6 +16,7 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
|
|
|
17
16
|
onSaveDraft,
|
|
18
17
|
formIsDisabled: disabled,
|
|
19
18
|
resumeSectionState,
|
|
19
|
+
resumePreviousElapsedDurationSeconds,
|
|
20
20
|
});
|
|
21
21
|
if (isLoadingAutoSaveSubmission) {
|
|
22
22
|
return (React.createElement("div", { className: "cypress-loading has-text-centered" },
|
|
@@ -26,14 +26,10 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
|
|
|
26
26
|
return (React.createElement(Modal, { isOpen: true, title: "Continue?", cardClassName: "cypress-continue-auto-save", actions: React.createElement(React.Fragment, null,
|
|
27
27
|
React.createElement("button", { type: "button", className: "button ob-button is-light cypress-continue-auto-save-start-again-button", onClick: () => {
|
|
28
28
|
startNewSubmission();
|
|
29
|
-
sendGoogleAnalyticsEvent('oneblink_form_abandon', {
|
|
30
|
-
formId: definition.id,
|
|
31
|
-
formName: definition.name,
|
|
32
|
-
});
|
|
33
29
|
} }, "Start Again"),
|
|
34
30
|
React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-continue-auto-save-continue-button", onClick: continueAutoSaveSubmission, autoFocus: true }, "Continue")) }, "We found an in progress submission, would you like to pick up where you left off or start again?"));
|
|
35
31
|
}
|
|
36
|
-
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState }));
|
|
32
|
+
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState, getCurrentSubmissionDuration: getCurrentSubmissionDuration }));
|
|
37
33
|
}
|
|
38
34
|
/**
|
|
39
35
|
* This component is a drop in replacement for {@link OneBlinkForm} with the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;
|
|
1
|
+
{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,4BAA4B,GAC7B,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;QACxB,kBAAkB;QAClB,oCAAoC;KACrC,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;IACH,CAAC;IAED,IAAI,6BAA6B,EAAE,CAAC;QAClC,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,EAAE,CAAA;oBACtB,CAAC,kBAGM;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,qBAGF,CACR,uGAKC,CACT,CAAA;IACH,CAAC;IACD,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,GAC1D,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\nfunction OneBlinkAutoSaveForm({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n disabled,\n onCancel,\n onSubmit,\n onSaveDraft,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n autoSaveKey: string\n /**\n * By default, auto save data is removed when the user clicks Submit. If you\n * would like auto save data to persist and clean up the auto save data later,\n * pass `false`.\n */\n removeAutoSaveDataBeforeSubmit?: boolean\n /**\n * By default, auto save data is removed when the user clicks Save Draft. If\n * you would like auto save data to persist and clean up the auto save data\n * later, pass `false`.\n */\n removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n const {\n definition,\n submission,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n setFormSubmission,\n handleNavigateAway,\n lastElementUpdated,\n executedLookups,\n sectionState,\n getCurrentSubmissionDuration,\n } = useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n onCancel,\n onSubmit,\n onSaveDraft,\n formIsDisabled: disabled,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n })\n\n if (isLoadingAutoSaveSubmission) {\n return (\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n </div>\n )\n }\n\n if (isAutoSaveSubmissionAvailable) {\n return (\n <Modal\n isOpen\n title=\"Continue?\"\n cardClassName=\"cypress-continue-auto-save\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n onClick={() => {\n startNewSubmission()\n }}\n >\n Start Again\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n onClick={continueAutoSaveSubmission}\n autoFocus\n >\n Continue\n </button>\n </>\n }\n >\n We found an in progress submission, would you like to pick up where you\n left off or start again?\n </Modal>\n )\n }\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n submission={submission}\n definition={definition}\n onCancel={handleCancel}\n onSubmit={handleSubmit}\n onSaveDraft={handleSaveDraft}\n setFormSubmission={setFormSubmission}\n handleNavigateAway={handleNavigateAway}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n />\n )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
|
package/dist/OneBlinkForm.d.ts
CHANGED
|
@@ -350,6 +350,13 @@ declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBl
|
|
|
350
350
|
scrollableContainerId?: string;
|
|
351
351
|
};
|
|
352
352
|
scrollToTopOfPage?: boolean;
|
|
353
|
+
getCurrentSubmissionDuration?: () => number;
|
|
354
|
+
onBeforeUnload?: (props: {
|
|
355
|
+
submission: import("@oneblink/types/typescript/submissions").S3SubmissionData["submission"];
|
|
356
|
+
definition: FormTypes.Form;
|
|
357
|
+
lastElementUpdated: FormTypes.FormElement | undefined;
|
|
358
|
+
submissionDuration: number | undefined;
|
|
359
|
+
}) => void;
|
|
353
360
|
} & OneBlinkFormControlledProps>;
|
|
354
361
|
/**
|
|
355
362
|
* Component for rendering a OneBlink Form. This component will render the
|
|
@@ -594,9 +601,17 @@ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./One
|
|
|
594
601
|
scrollableContainerId?: string;
|
|
595
602
|
};
|
|
596
603
|
scrollToTopOfPage?: boolean;
|
|
604
|
+
getCurrentSubmissionDuration?: () => number;
|
|
605
|
+
onBeforeUnload?: (props: {
|
|
606
|
+
submission: import("@oneblink/types/typescript/submissions").S3SubmissionData["submission"];
|
|
607
|
+
definition: FormTypes.Form;
|
|
608
|
+
lastElementUpdated: FormTypes.FormElement | undefined;
|
|
609
|
+
submissionDuration: number | undefined;
|
|
610
|
+
}) => void;
|
|
597
611
|
} & OneBlinkFormUncontrolledProps & {
|
|
598
612
|
/** The element to resume the form at. */
|
|
599
613
|
resumeAtElement?: FormTypes.FormElement;
|
|
600
614
|
resumeSectionState?: SectionState;
|
|
615
|
+
resumePreviousElapsedDurationSeconds?: number;
|
|
601
616
|
}>;
|
|
602
617
|
export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
|
package/dist/OneBlinkForm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import OneBlinkFormBase from './OneBlinkFormBase';
|
|
3
3
|
import useFormSubmissionState from './hooks/useFormSubmissionState';
|
|
4
|
+
import useFormSubmissionDuration from './hooks/useFormSubmissionDuration';
|
|
4
5
|
/**
|
|
5
6
|
* Similar to {@link OneBlinkForm}, however requires props to control the
|
|
6
7
|
* `definition` and `submission` values.
|
|
@@ -550,9 +551,10 @@ const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props)
|
|
|
550
551
|
* @returns
|
|
551
552
|
* @group Components
|
|
552
553
|
*/
|
|
553
|
-
const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, resumeSectionState, ...props }) {
|
|
554
|
+
const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, resumeSectionState, resumePreviousElapsedDurationSeconds, ...props }) {
|
|
555
|
+
const [getCurrentSubmissionDuration] = useFormSubmissionDuration(resumePreviousElapsedDurationSeconds);
|
|
554
556
|
const [{ definition, submission, lastElementUpdated, executedLookups, sectionState, }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement, resumeSectionState);
|
|
555
|
-
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState }));
|
|
557
|
+
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState, getCurrentSubmissionDuration: getCurrentSubmissionDuration }));
|
|
556
558
|
});
|
|
557
559
|
export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
|
|
558
560
|
//# sourceMappingURL=OneBlinkForm.js.map
|
package/dist/OneBlinkForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AAKnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,GAAG,KAAK,EAMP;IACD,MAAM,CACJ,EACE,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,EACD,iBAAiB,EAClB,GAAG,sBAAsB,CACxB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,CACnB,CAAA;IACD,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\nimport { SectionState } from './types/form'\n\nexport { OneBlinkFormBaseProps, OneBlinkFormControlledProps }\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * } from '@oneblink/apps'\n * import {\n * IsOfflineContextProvider,\n * OneBlinkFormControlled,\n * useIsMounted,\n * useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n * data: 1,\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ definition, submission }, setFormSubmission] =\n * useFormSubmissionState(form, initialSubmission)\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * definition={definition}\n * submission={submission}\n * setFormSubmission={setFormSubmission}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n * OneBlinkAutoSaveForm,\n * OneBlinkFormControlled,\n * useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n * const {\n * definition,\n * submission,\n * isLoadingAutoSaveSubmission,\n * isAutoSaveSubmissionAvailable,\n * startNewSubmission,\n * continueAutoSaveSubmission,\n * handleSubmit,\n * handleCancel,\n * handleSaveDraft,\n * setFormSubmission,\n * } = useFormSubmissionAutoSaveState({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * })\n *\n * // This is just an example of how you could intercept\n * // the change event when a user enters/selects a value\n * // on the form.\n * const customSetFormSubmission = React.useCallback(\n * (formSubmission) => {\n * setFormSubmission((currentFormSubmission) => {\n * const newFormSubmission =\n * typeof formSubmission === 'function'\n * ? formSubmission(currentFormSubmission)\n * : formSubmission\n *\n * // This is where you can access the updated\n * // submission data or form definition.\n * // You could even change the form definition\n * // programmatically based on user inputs.\n * console.log(\n * 'A change has occurred to the submission',\n * newFormSubmission.submission,\n * )\n * newFormSubmission.definition.isInfoPage =\n * !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n * return newFormSubmission\n * })\n * },\n * [setFormSubmission],\n * )\n *\n * if (isLoadingAutoSaveSubmission) {\n * return <p>Checking for auto save data...</p>\n * }\n *\n * if (isAutoSaveSubmissionAvailable) {\n * return (\n * <>\n * <p>Do you want to use the auto save data?</p>\n * <button onClick={startNewSubmission}>No, start again</button>\n * <button onClick={continueAutoSaveSubmission}>\n * Yes, continue\n * </button>\n * </>\n * )\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * {...props}\n * submission={submission}\n * definition={definition}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * setFormSubmission={customSetFormSubmission}\n * />\n * )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n props: OneBlinkFormBaseProps & OneBlinkFormControlledProps,\n) {\n return <OneBlinkFormBase {...props} isReadOnly={false} />\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * } from '@oneblink/apps'\n * import {\n * IsOfflineContextProvider,\n * OneBlinkForm,\n * useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [isMounted])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkForm\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * form={form}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * attachmentRetentionInDays={1}\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n ...props\n}: OneBlinkFormBaseProps &\n OneBlinkFormUncontrolledProps & {\n /** The element to resume the form at. */\n resumeAtElement?: FormTypes.FormElement\n resumeSectionState?: SectionState\n }) {\n const [\n {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n sectionState,\n },\n setFormSubmission,\n ] = useFormSubmissionState(\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n )\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n definition={definition}\n submission={submission}\n setFormSubmission={setFormSubmission}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n />\n )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
|
|
1
|
+
{"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AACnE,OAAO,yBAAyB,MAAM,mCAAmC,CAAA;AAKzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,oCAAoC,EACpC,GAAG,KAAK,EAOP;IACD,MAAM,CAAC,4BAA4B,CAAC,GAAG,yBAAyB,CAC9D,oCAAoC,CACrC,CAAA;IACD,MAAM,CACJ,EACE,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,EACD,iBAAiB,EAClB,GAAG,sBAAsB,CACxB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,CACnB,CAAA;IACD,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,4BAA4B,EAAE,4BAA4B,GAC1D,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\nimport useFormSubmissionDuration from './hooks/useFormSubmissionDuration'\nimport { SectionState } from './types/form'\n\nexport { OneBlinkFormBaseProps, OneBlinkFormControlledProps }\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * } from '@oneblink/apps'\n * import {\n * IsOfflineContextProvider,\n * OneBlinkFormControlled,\n * useIsMounted,\n * useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n * data: 1,\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ definition, submission }, setFormSubmission] =\n * useFormSubmissionState(form, initialSubmission)\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * definition={definition}\n * submission={submission}\n * setFormSubmission={setFormSubmission}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n * OneBlinkAutoSaveForm,\n * OneBlinkFormControlled,\n * useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n * const {\n * definition,\n * submission,\n * isLoadingAutoSaveSubmission,\n * isAutoSaveSubmissionAvailable,\n * startNewSubmission,\n * continueAutoSaveSubmission,\n * handleSubmit,\n * handleCancel,\n * handleSaveDraft,\n * setFormSubmission,\n * } = useFormSubmissionAutoSaveState({\n * form,\n * initialSubmission,\n * autoSaveKey,\n * onCancel,\n * onSubmit,\n * onSaveDraft,\n * })\n *\n * // This is just an example of how you could intercept\n * // the change event when a user enters/selects a value\n * // on the form.\n * const customSetFormSubmission = React.useCallback(\n * (formSubmission) => {\n * setFormSubmission((currentFormSubmission) => {\n * const newFormSubmission =\n * typeof formSubmission === 'function'\n * ? formSubmission(currentFormSubmission)\n * : formSubmission\n *\n * // This is where you can access the updated\n * // submission data or form definition.\n * // You could even change the form definition\n * // programmatically based on user inputs.\n * console.log(\n * 'A change has occurred to the submission',\n * newFormSubmission.submission,\n * )\n * newFormSubmission.definition.isInfoPage =\n * !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n * return newFormSubmission\n * })\n * },\n * [setFormSubmission],\n * )\n *\n * if (isLoadingAutoSaveSubmission) {\n * return <p>Checking for auto save data...</p>\n * }\n *\n * if (isAutoSaveSubmissionAvailable) {\n * return (\n * <>\n * <p>Do you want to use the auto save data?</p>\n * <button onClick={startNewSubmission}>No, start again</button>\n * <button onClick={continueAutoSaveSubmission}>\n * Yes, continue\n * </button>\n * </>\n * )\n * }\n *\n * return (\n * <OneBlinkFormControlled\n * {...props}\n * submission={submission}\n * definition={definition}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * setFormSubmission={customSetFormSubmission}\n * />\n * )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n props: OneBlinkFormBaseProps & OneBlinkFormControlledProps,\n) {\n return <OneBlinkFormBase {...props} isReadOnly={false} />\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n * OneBlinkAppsError,\n * draftService,\n * submissionService,\n * } from '@oneblink/apps'\n * import {\n * IsOfflineContextProvider,\n * OneBlinkForm,\n * useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n * id: 1,\n * name: 'Name of Form',\n * description: '',\n * organisationId: 'abc123',\n * formsAppEnvironmentId: 1,\n * formsAppIds: [],\n * elements: [],\n * isAuthenticated: false,\n * isMultiPage: false,\n * isInfoPage: false,\n * publishStartDate: null,\n * publishEndDate: null,\n * postSubmissionAction: 'FORMS_LIBRARY',\n * submissionEvents: [],\n * tags: [],\n * }\n *\n * function FormContainer() {\n * const isMounted = useIsMounted()\n *\n * const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n * React.useState({\n * isSavingDraft: false,\n * saveDraftError: null,\n * })\n *\n * const [\n * { isSubmitting, submitError, formSubmissionResult },\n * setSubmitState,\n * ] = React.useState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: null,\n * })\n *\n * const handleSubmit = React.useCallback(\n * async (newFormSubmission: FormTypes.NewFormSubmission) => {\n * const formSubmission: FormSubmission = Object.assign(\n * {},\n * newFormSubmission,\n * {\n * formsAppId,\n * jobId: null,\n * externalId: null,\n * draftId: null,\n * preFillFormDataId: null,\n * },\n * )\n *\n * setSubmitState({\n * formSubmissionResult: null,\n * submitError: null,\n * isSubmitting: true,\n * })\n *\n * try {\n * const newFormSubmissionResult = await submissionService.submit({\n * formSubmission,\n * })\n * if (\n * newFormSubmissionResult.isOffline &&\n * !newFormSubmissionResult.isInPendingQueue\n * ) {\n * throw new OneBlinkAppsError(\n * 'You cannot submit this form while offline, please try again when connectivity is restored.',\n * {\n * isOffline: true,\n * },\n * )\n * }\n *\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: newFormSubmissionResult,\n * isSubmitting: false,\n * submitError: null,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSubmitState({\n * formSubmissionResult: null,\n * isSubmitting: false,\n * submitError: error,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleSaveDraft = React.useCallback(\n * async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n * const draftSubmission: FormTypes.DraftSubmission = {\n * ...newDraftSubmission,\n * formsAppId,\n * }\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: true,\n * })\n *\n * try {\n * await draftService.addDraft(\n * {\n * title: form.name,\n * formId: form.id,\n * externalId: null,\n * jobId: null,\n * },\n * draftSubmission,\n * )\n *\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: null,\n * isSavingDraft: false,\n * })\n * }\n * } catch (error) {\n * if (isMounted.current) {\n * setSaveDraftState({\n * saveDraftError: error,\n * isSavingDraft: false,\n * })\n * }\n * }\n * },\n * [isMounted],\n * )\n *\n * const handleCancel = React.useCallback(() => {\n * // handle cancel here...\n * }, [isMounted])\n *\n * if (isSubmitting) {\n * // Render submitting animation/loading\n * }\n *\n * if (submitError) {\n * // Render error while submitting\n * }\n *\n * if (isSavingDraft) {\n * // Render saving draft animation/loading\n * }\n *\n * if (saveDraftError) {\n * // Render error while saving draft\n * }\n *\n * if (formSubmissionResult) {\n * // Render submission success\n * }\n *\n * return (\n * <OneBlinkForm\n * captchaSiteKey={captchaSiteKey}\n * googleMapsApiKey={googleMapsApiKey}\n * formsAppId={formsAppId}\n * form={form}\n * onCancel={handleCancel}\n * onSubmit={handleSubmit}\n * onSaveDraft={handleSaveDraft}\n * attachmentRetentionInDays={1}\n * />\n * )\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <FormContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n resumePreviousElapsedDurationSeconds,\n ...props\n}: OneBlinkFormBaseProps &\n OneBlinkFormUncontrolledProps & {\n /** The element to resume the form at. */\n resumeAtElement?: FormTypes.FormElement\n resumeSectionState?: SectionState\n resumePreviousElapsedDurationSeconds?: number\n }) {\n const [getCurrentSubmissionDuration] = useFormSubmissionDuration(\n resumePreviousElapsedDurationSeconds,\n )\n const [\n {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n sectionState,\n },\n setFormSubmission,\n ] = useFormSubmissionState(\n form,\n initialSubmission,\n resumeAtElement,\n resumeSectionState,\n )\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n definition={definition}\n submission={submission}\n setFormSubmission={setFormSubmission}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n sectionState={sectionState}\n getCurrentSubmissionDuration={getCurrentSubmissionDuration}\n />\n )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
|
|
@@ -128,6 +128,15 @@ export type OneBlinkFormBaseProps = OneBlinkReadOnlyFormProps & {
|
|
|
128
128
|
* Defaults to false.
|
|
129
129
|
*/
|
|
130
130
|
scrollToTopOfPage?: boolean;
|
|
131
|
+
/** The function to call when determining the current submission duration. */
|
|
132
|
+
getCurrentSubmissionDuration?: () => number;
|
|
133
|
+
/** The function to call when the window.beforeunload event occurs. */
|
|
134
|
+
onBeforeUnload?: (props: {
|
|
135
|
+
submission: SubmissionTypes.S3SubmissionData['submission'];
|
|
136
|
+
definition: FormTypes.Form;
|
|
137
|
+
lastElementUpdated: FormTypes.FormElement | undefined;
|
|
138
|
+
submissionDuration: number | undefined;
|
|
139
|
+
}) => void;
|
|
131
140
|
};
|
|
132
141
|
export type OneBlinkFormUncontrolledProps = {
|
|
133
142
|
/** The OneBlink Form to render */
|
|
@@ -146,6 +155,6 @@ export type OneBlinkFormControlledProps = {
|
|
|
146
155
|
type Props = OneBlinkFormBaseProps & OneBlinkFormControlledProps & {
|
|
147
156
|
isReadOnly: boolean;
|
|
148
157
|
};
|
|
149
|
-
declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, }: Props): React.JSX.Element;
|
|
158
|
+
declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, }: Props): React.JSX.Element;
|
|
150
159
|
declare const _default: React.MemoExoticComponent<typeof OneBlinkFormBase>;
|
|
151
160
|
export default _default;
|
package/dist/OneBlinkFormBase.js
CHANGED
|
@@ -38,11 +38,11 @@ import { OnUploadAttachmentContext } from './hooks/useOnUploadAttachment';
|
|
|
38
38
|
import { injectOptionsAcrossAllElements } from './services/injectableOptions';
|
|
39
39
|
import MaterialIcon from './components/MaterialIcon';
|
|
40
40
|
import ValidationErrorsCard from './components/ValidationErrorsCard';
|
|
41
|
-
import { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent';
|
|
41
|
+
import { getElementDisplayNameForAnalyticsEvent, sendGoogleAnalyticsEvent, } from './utils/sendGoogleAnalyticsEvent';
|
|
42
42
|
import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfileForInjectables';
|
|
43
43
|
import { ValidationIconConfigurationContext } from './hooks/useValidationIconConfiguration';
|
|
44
44
|
import { Clickable } from './components/Clickable';
|
|
45
|
-
function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, }) {
|
|
45
|
+
function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, }) {
|
|
46
46
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
47
47
|
const isOffline = useIsOffline();
|
|
48
48
|
const { isUsingFormsKey } = useAuth();
|
|
@@ -58,6 +58,26 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
58
58
|
},
|
|
59
59
|
},
|
|
60
60
|
}), [primaryColour]);
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
const beforeUnload = () => {
|
|
63
|
+
onBeforeUnload === null || onBeforeUnload === void 0 ? void 0 : onBeforeUnload({
|
|
64
|
+
submission,
|
|
65
|
+
definition,
|
|
66
|
+
lastElementUpdated,
|
|
67
|
+
submissionDuration: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
window.addEventListener('beforeunload', beforeUnload);
|
|
71
|
+
return () => {
|
|
72
|
+
window.removeEventListener('beforeunload', beforeUnload);
|
|
73
|
+
};
|
|
74
|
+
}, [
|
|
75
|
+
lastElementUpdated,
|
|
76
|
+
getCurrentSubmissionDuration,
|
|
77
|
+
onBeforeUnload,
|
|
78
|
+
submission,
|
|
79
|
+
definition,
|
|
80
|
+
]);
|
|
61
81
|
const isInfoPage = React.useMemo(() => {
|
|
62
82
|
if (!!isInfoPageProp && isInfoPageProp !== 'CALCULATED') {
|
|
63
83
|
return isInfoPageProp === 'YES';
|
|
@@ -144,8 +164,15 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
144
164
|
sendGoogleAnalyticsEvent('oneblink_form_abandon', {
|
|
145
165
|
formId: definition.id,
|
|
146
166
|
formName: definition.name,
|
|
167
|
+
lastElementUpdated: getElementDisplayNameForAnalyticsEvent(lastElementUpdated),
|
|
168
|
+
durationUntilAbandon: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
|
|
147
169
|
});
|
|
148
|
-
}, [
|
|
170
|
+
}, [
|
|
171
|
+
definition.id,
|
|
172
|
+
definition.name,
|
|
173
|
+
getCurrentSubmissionDuration,
|
|
174
|
+
lastElementUpdated,
|
|
175
|
+
]);
|
|
149
176
|
React.useEffect(() => {
|
|
150
177
|
if (hasConfirmedNavigation) {
|
|
151
178
|
// Navigate to the previous blocked location with your navigate function
|
|
@@ -177,10 +204,19 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
177
204
|
sendGoogleAnalyticsEvent('oneblink_form_abandon', {
|
|
178
205
|
formId: definition.id,
|
|
179
206
|
formName: definition.name,
|
|
207
|
+
lastElementUpdated: getElementDisplayNameForAnalyticsEvent(lastElementUpdated),
|
|
208
|
+
durationUntilAbandon: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
|
|
180
209
|
});
|
|
181
210
|
onCancel();
|
|
182
211
|
}
|
|
183
|
-
}, [
|
|
212
|
+
}, [
|
|
213
|
+
isDirty,
|
|
214
|
+
definition.id,
|
|
215
|
+
definition.name,
|
|
216
|
+
lastElementUpdated,
|
|
217
|
+
getCurrentSubmissionDuration,
|
|
218
|
+
onCancel,
|
|
219
|
+
]);
|
|
184
220
|
const allowNavigation = React.useCallback(() => {
|
|
185
221
|
setUnsavedChangesState((current) => ({
|
|
186
222
|
...current,
|
|
@@ -468,6 +504,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
468
504
|
sendGoogleAnalyticsEvent('oneblink_form_submit', {
|
|
469
505
|
formId: definition.id,
|
|
470
506
|
formName: definition.name,
|
|
507
|
+
lastElementUpdated: getElementDisplayNameForAnalyticsEvent(lastElementUpdated),
|
|
508
|
+
durationUntilSubmission: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
|
|
471
509
|
});
|
|
472
510
|
}, [
|
|
473
511
|
disabled,
|
|
@@ -479,6 +517,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
479
517
|
userProfileForInjectables,
|
|
480
518
|
resetRecaptchas,
|
|
481
519
|
onSubmit,
|
|
520
|
+
lastElementUpdated,
|
|
521
|
+
getCurrentSubmissionDuration,
|
|
482
522
|
captchaSiteKey,
|
|
483
523
|
]);
|
|
484
524
|
const handleSaveDraft = React.useCallback((continueWhilstAttachmentsAreUploading) => {
|
|
@@ -502,18 +542,20 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
|
502
542
|
backgroundUpload: continueWhilstAttachmentsAreUploading,
|
|
503
543
|
lastElementUpdated,
|
|
504
544
|
sectionState,
|
|
545
|
+
previousElapsedDurationSeconds: getCurrentSubmissionDuration === null || getCurrentSubmissionDuration === void 0 ? void 0 : getCurrentSubmissionDuration(),
|
|
505
546
|
});
|
|
506
547
|
}
|
|
507
548
|
}, [
|
|
508
|
-
allowNavigation,
|
|
509
|
-
checkAttachmentsCanBeSubmitted,
|
|
510
|
-
definition,
|
|
511
549
|
disabled,
|
|
512
|
-
getCurrentSubmissionData,
|
|
513
550
|
onSaveDraft,
|
|
551
|
+
allowNavigation,
|
|
552
|
+
getCurrentSubmissionData,
|
|
514
553
|
checkBsbAreValidating,
|
|
554
|
+
checkAttachmentsCanBeSubmitted,
|
|
555
|
+
definition,
|
|
515
556
|
lastElementUpdated,
|
|
516
557
|
sectionState,
|
|
558
|
+
getCurrentSubmissionDuration,
|
|
517
559
|
]);
|
|
518
560
|
const handleContinueWithAttachments = React.useCallback((e) => {
|
|
519
561
|
setPromptUploadingAttachments(false);
|