@oneblink/apps-react 8.6.0-beta.14 → 8.6.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 +3 -4
- package/dist/OneBlinkAutoSaveForm.js.map +1 -1
- package/dist/OneBlinkForm.d.ts +2 -4
- package/dist/OneBlinkForm.js +3 -3
- package/dist/OneBlinkForm.js.map +1 -1
- package/dist/OneBlinkFormBase.d.ts +3 -3
- package/dist/OneBlinkFormBase.js +8 -47
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/OneBlinkReadOnlyForm.js +1 -1
- package/dist/OneBlinkReadOnlyForm.js.map +1 -1
- package/dist/components/ArcGISWebMap.js +7 -7
- package/dist/components/ArcGISWebMap.js.map +1 -1
- package/dist/components/renderer/AutocompleteDropdown.js +1 -1
- package/dist/components/renderer/AutocompleteDropdown.js.map +1 -1
- package/dist/components/renderer/OneBlinkFormElements.d.ts +3 -3
- package/dist/components/renderer/OneBlinkFormElements.js +8 -8
- package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
- package/dist/components/renderer/PageFormElements.d.ts +3 -3
- package/dist/components/renderer/PageFormElements.js +5 -5
- package/dist/components/renderer/PageFormElements.js.map +1 -1
- package/dist/form-elements/FormElementABN.js +1 -1
- package/dist/form-elements/FormElementABN.js.map +1 -1
- package/dist/form-elements/FormElementBSB.js +1 -1
- package/dist/form-elements/FormElementBSB.js.map +1 -1
- package/dist/form-elements/FormElementBarcodeScanner.js +1 -1
- package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
- package/dist/form-elements/FormElementBoolean.js +0 -1
- package/dist/form-elements/FormElementBoolean.js.map +1 -1
- package/dist/form-elements/FormElementCamera.js +1 -1
- package/dist/form-elements/FormElementCamera.js.map +1 -1
- package/dist/form-elements/FormElementCheckBoxes.js +2 -2
- package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
- package/dist/form-elements/FormElementCompliance.js +1 -1
- package/dist/form-elements/FormElementCompliance.js.map +1 -1
- package/dist/form-elements/FormElementDate.js +0 -1
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.js +0 -1
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementEmail.js +1 -1
- package/dist/form-elements/FormElementEmail.js.map +1 -1
- package/dist/form-elements/FormElementFiles.js +1 -1
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementForm.d.ts +2 -3
- package/dist/form-elements/FormElementForm.js +5 -13
- package/dist/form-elements/FormElementForm.js.map +1 -1
- package/dist/form-elements/FormElementLocation.js +1 -3
- package/dist/form-elements/FormElementLocation.js.map +1 -1
- package/dist/form-elements/FormElementNumber.js +4 -4
- package/dist/form-elements/FormElementNumber.js.map +1 -1
- package/dist/form-elements/FormElementPointCadastralParcel.js +1 -1
- package/dist/form-elements/FormElementPointCadastralParcel.js.map +1 -1
- package/dist/form-elements/FormElementRadio.js +1 -1
- package/dist/form-elements/FormElementRadio.js.map +1 -1
- package/dist/form-elements/FormElementRepeatableSet.d.ts +2 -3
- package/dist/form-elements/FormElementRepeatableSet.js +18 -73
- package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
- package/dist/form-elements/FormElementSection.d.ts +2 -3
- package/dist/form-elements/FormElementSection.js +8 -18
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/FormElementSelect.js +2 -2
- package/dist/form-elements/FormElementSelect.js.map +1 -1
- package/dist/form-elements/FormElementTelephone.js +1 -1
- package/dist/form-elements/FormElementTelephone.js.map +1 -1
- package/dist/form-elements/FormElementText.js +1 -1
- package/dist/form-elements/FormElementText.js.map +1 -1
- package/dist/form-elements/FormElementTextarea.js +1 -1
- package/dist/form-elements/FormElementTextarea.js.map +1 -1
- package/dist/form-elements/FormElementTime.js +0 -1
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/hooks/form-date-picker/useFormDatePickerProps.d.ts +1 -2
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js +1 -2
- package/dist/hooks/form-date-picker/useFormDatePickerProps.js.map +1 -1
- package/dist/hooks/useFormSubmissionAutoSaveState.d.ts +5 -10
- package/dist/hooks/useFormSubmissionAutoSaveState.js +17 -17
- package/dist/hooks/useFormSubmissionAutoSaveState.js.map +1 -1
- package/dist/hooks/useFormSubmissionState.d.ts +4 -4
- package/dist/hooks/useFormSubmissionState.js +2 -2
- package/dist/hooks/useFormSubmissionState.js.map +1 -1
- package/dist/hooks/useLookups.js +1 -1
- package/dist/hooks/useLookups.js.map +1 -1
- package/dist/services/form-validation/extensions.js +9 -4
- package/dist/services/form-validation/extensions.js.map +1 -1
- package/dist/styles/modal.scss +1 -3
- package/dist/styles.css +1 -2
- package/dist/types/form.d.ts +3 -7
- package/dist/types/form.js.map +1 -1
- package/package.json +4 -4
@@ -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,
|
3
|
+
declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...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
|
/**
|
@@ -4,8 +4,8 @@ import Modal from './components/renderer/Modal';
|
|
4
4
|
import OneBlinkFormBase from './OneBlinkFormBase';
|
5
5
|
import useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState';
|
6
6
|
import { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent';
|
7
|
-
function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft,
|
8
|
-
const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups,
|
7
|
+
function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...props }) {
|
8
|
+
const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, collapsedSectionIds, } = useFormSubmissionAutoSaveState({
|
9
9
|
form,
|
10
10
|
initialSubmission,
|
11
11
|
resumeAtElement,
|
@@ -16,7 +16,6 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
|
|
16
16
|
onSubmit,
|
17
17
|
onSaveDraft,
|
18
18
|
formIsDisabled: disabled,
|
19
|
-
resumeSectionState,
|
20
19
|
});
|
21
20
|
if (isLoadingAutoSaveSubmission) {
|
22
21
|
return (React.createElement("div", { className: "cypress-loading has-text-centered" },
|
@@ -33,7 +32,7 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
|
|
33
32
|
} }, "Start Again"),
|
34
33
|
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
34
|
}
|
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,
|
35
|
+
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, collapsedSectionIds: collapsedSectionIds }));
|
37
36
|
}
|
38
37
|
/**
|
39
38
|
* 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;AAEnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAA;AAE3E,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,
|
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;AAEnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAA;AAE3E,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,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,mBAAmB,GACpB,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;KACzB,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;wBACpB,wBAAwB,CAAC,uBAAuB,EAAE;4BAChD,MAAM,EAAE,UAAU,CAAC,EAAE;4BACrB,QAAQ,EAAE,UAAU,CAAC,IAAI;yBAC1B,CAAC,CAAA;oBACJ,CAAC,kBAGM;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,qBAGF,CACR,uGAKC,CACT,CAAA;IACH,CAAC;IAED,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,mBAAmB,EAAE,mBAAmB,GACxC,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'\nimport { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent'\n\nfunction OneBlinkAutoSaveForm({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n disabled,\n onCancel,\n onSubmit,\n onSaveDraft,\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 collapsedSectionIds,\n } = useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n onCancel,\n onSubmit,\n onSaveDraft,\n formIsDisabled: disabled,\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 sendGoogleAnalyticsEvent('oneblink_form_abandon', {\n formId: definition.id,\n formName: definition.name,\n })\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\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 collapsedSectionIds={collapsedSectionIds}\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
@@ -1,7 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { FormTypes } from '@oneblink/types';
|
3
3
|
import { OneBlinkFormBaseProps, OneBlinkFormControlledProps, OneBlinkFormUncontrolledProps } from './OneBlinkFormBase';
|
4
|
-
import { SectionState } from './types/form';
|
5
4
|
export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
|
6
5
|
/**
|
7
6
|
* Similar to {@link OneBlinkForm}, however requires props to control the
|
@@ -342,7 +341,7 @@ declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBl
|
|
342
341
|
handleNavigateAway?: () => unknown;
|
343
342
|
isInfoPage?: "YES" | "NO" | "CALCULATED";
|
344
343
|
onUploadAttachment?: typeof import("@oneblink/apps/dist/attachments-service").uploadAttachment;
|
345
|
-
captchaType?: import("
|
344
|
+
captchaType?: import(".").CaptchaType;
|
346
345
|
shouldUseNavigableValidationErrorsNotification?: boolean;
|
347
346
|
navigableValidationErrorsNotificationSettings?: {
|
348
347
|
navigationTopOffset?: number;
|
@@ -584,7 +583,7 @@ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./One
|
|
584
583
|
handleNavigateAway?: () => unknown;
|
585
584
|
isInfoPage?: "YES" | "NO" | "CALCULATED";
|
586
585
|
onUploadAttachment?: typeof import("@oneblink/apps/dist/attachments-service").uploadAttachment;
|
587
|
-
captchaType?: import("
|
586
|
+
captchaType?: import(".").CaptchaType;
|
588
587
|
shouldUseNavigableValidationErrorsNotification?: boolean;
|
589
588
|
navigableValidationErrorsNotificationSettings?: {
|
590
589
|
navigationTopOffset?: number;
|
@@ -593,6 +592,5 @@ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./One
|
|
593
592
|
} & OneBlinkFormUncontrolledProps & {
|
594
593
|
/** The element to resume the form at. */
|
595
594
|
resumeAtElement?: FormTypes.FormElement;
|
596
|
-
resumeSectionState?: SectionState;
|
597
595
|
}>;
|
598
596
|
export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
|
package/dist/OneBlinkForm.js
CHANGED
@@ -550,9 +550,9 @@ const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props)
|
|
550
550
|
* @returns
|
551
551
|
* @group Components
|
552
552
|
*/
|
553
|
-
const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement,
|
554
|
-
const [{ definition, submission, lastElementUpdated, executedLookups,
|
555
|
-
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups,
|
553
|
+
const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, ...props }) {
|
554
|
+
const [{ definition, submission, lastElementUpdated, executedLookups, collapsedSectionIds }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement);
|
555
|
+
return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, collapsedSectionIds: collapsedSectionIds }));
|
556
556
|
});
|
557
557
|
export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
|
558
558
|
//# 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;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAAG,KAAK,EAKP;IACD,MAAM,CACJ,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,mBAAmB,EAAE,EACpF,iBAAiB,EAClB,GAAG,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAA;IACpE,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,mBAAmB,EAAE,mBAAmB,GACxC,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'\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 ...props\n}: OneBlinkFormBaseProps &\n OneBlinkFormUncontrolledProps & {\n /** The element to resume the form at. */\n resumeAtElement?: FormTypes.FormElement\n }) {\n const [\n { definition, submission, lastElementUpdated, executedLookups, collapsedSectionIds },\n setFormSubmission,\n ] = useFormSubmissionState(form, initialSubmission, resumeAtElement)\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 collapsedSectionIds={collapsedSectionIds}\n />\n )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
2
2
|
import { submissionService, attachmentsService } from '@oneblink/apps';
|
3
3
|
import { FormTypes, FormsAppsTypes, ScheduledTasksTypes, SubmissionTypes } from '@oneblink/types';
|
4
4
|
import { ReplaceInjectablesOverrides } from './hooks/useReplaceInjectablesOverrides';
|
5
|
-
import { CaptchaType, ExecutedLookups, SetFormSubmission
|
5
|
+
import { CaptchaType, ExecutedLookups, SetFormSubmission } from './types/form';
|
6
6
|
export type OneBlinkReadOnlyFormProps = {
|
7
7
|
/**
|
8
8
|
* A [Google Maps API
|
@@ -133,11 +133,11 @@ export type OneBlinkFormControlledProps = {
|
|
133
133
|
setFormSubmission: SetFormSubmission;
|
134
134
|
lastElementUpdated?: FormTypes.FormElement;
|
135
135
|
executedLookups: ExecutedLookups;
|
136
|
-
|
136
|
+
collapsedSectionIds?: string[];
|
137
137
|
};
|
138
138
|
type Props = OneBlinkFormBaseProps & OneBlinkFormControlledProps & {
|
139
139
|
isReadOnly: boolean;
|
140
140
|
};
|
141
|
-
declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides,
|
141
|
+
declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, collapsedSectionIds, }: Props): React.JSX.Element;
|
142
142
|
declare const _default: React.MemoExoticComponent<typeof OneBlinkFormBase>;
|
143
143
|
export default _default;
|
package/dist/OneBlinkFormBase.js
CHANGED
@@ -40,7 +40,7 @@ import MaterialIcon from './components/MaterialIcon';
|
|
40
40
|
import ValidationErrorsCard from './components/ValidationErrorsCard';
|
41
41
|
import { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent';
|
42
42
|
import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfileForInjectables';
|
43
|
-
function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides,
|
43
|
+
function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, collapsedSectionIds, }) {
|
44
44
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
45
45
|
const isOffline = useIsOffline();
|
46
46
|
const { isUsingFormsKey } = useAuth();
|
@@ -496,7 +496,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
496
496
|
submission,
|
497
497
|
backgroundUpload: continueWhilstAttachmentsAreUploading,
|
498
498
|
lastElementUpdated,
|
499
|
-
sectionState,
|
500
499
|
});
|
501
500
|
}
|
502
501
|
}, [
|
@@ -508,7 +507,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
508
507
|
onSaveDraft,
|
509
508
|
checkBsbAreValidating,
|
510
509
|
lastElementUpdated,
|
511
|
-
sectionState,
|
512
510
|
]);
|
513
511
|
const handleContinueWithAttachments = React.useCallback((e) => {
|
514
512
|
setPromptUploadingAttachments(false);
|
@@ -540,7 +538,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
540
538
|
//
|
541
539
|
//
|
542
540
|
// #region Submission/Definition Changes
|
543
|
-
const handleChange = React.useCallback((element, { value, executedLookups
|
541
|
+
const handleChange = React.useCallback((element, { value, executedLookups }) => {
|
544
542
|
if (
|
545
543
|
//This will ensure on a read only form that the summary and calculation elements
|
546
544
|
//can still be displayed as it needs handleChange so it can render
|
@@ -557,35 +555,13 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
557
555
|
}));
|
558
556
|
if (element.type === 'section') {
|
559
557
|
setFormSubmission((currentFormSubmission) => {
|
560
|
-
const
|
561
|
-
const
|
562
|
-
const sectionIsInState = existingSectionIndex >= 0;
|
563
|
-
let newSectionState;
|
564
|
-
if (sectionIsInState && deleteSection) {
|
565
|
-
newSectionState = currentSectionState.filter((section) => section.id !== element.id);
|
566
|
-
}
|
567
|
-
else if (sectionIsInState) {
|
568
|
-
// Update state of the section
|
569
|
-
newSectionState = currentSectionState.map((section, index) => index === existingSectionIndex
|
570
|
-
? {
|
571
|
-
...section,
|
572
|
-
state: section.state === 'COLLAPSED' ? 'EXPANDED' : 'COLLAPSED',
|
573
|
-
}
|
574
|
-
: section);
|
575
|
-
}
|
576
|
-
else {
|
577
|
-
// Add the section to state
|
578
|
-
newSectionState = [
|
579
|
-
...currentSectionState,
|
580
|
-
{
|
581
|
-
id: element.id,
|
582
|
-
state: element.isCollapsed ? 'EXPANDED' : 'COLLAPSED',
|
583
|
-
},
|
584
|
-
];
|
585
|
-
}
|
558
|
+
const collapsedSectionIds = currentFormSubmission.collapsedSectionIds || [];
|
559
|
+
const isCurrentlyCollapsed = collapsedSectionIds.includes(element.id);
|
586
560
|
return {
|
587
561
|
...currentFormSubmission,
|
588
|
-
|
562
|
+
collapsedSectionIds: isCurrentlyCollapsed
|
563
|
+
? collapsedSectionIds.filter((id) => id !== element.id)
|
564
|
+
: [...collapsedSectionIds, element.id],
|
589
565
|
};
|
590
566
|
});
|
591
567
|
}
|
@@ -619,11 +595,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
619
595
|
? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
|
620
596
|
: executedLookups,
|
621
597
|
},
|
622
|
-
sectionState: sectionState
|
623
|
-
? typeof sectionState === 'function'
|
624
|
-
? sectionState(currentFormSubmission.sectionState)
|
625
|
-
: sectionState
|
626
|
-
: currentFormSubmission.sectionState,
|
627
598
|
};
|
628
599
|
});
|
629
600
|
}
|
@@ -655,14 +626,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
655
626
|
});
|
656
627
|
}
|
657
628
|
}
|
658
|
-
if (sectionState) {
|
659
|
-
{
|
660
|
-
setFormSubmission((currentFormSubmission) => ({
|
661
|
-
...currentFormSubmission,
|
662
|
-
sectionState,
|
663
|
-
}));
|
664
|
-
}
|
665
|
-
}
|
666
629
|
setHasResumed(true);
|
667
630
|
}
|
668
631
|
}, [
|
@@ -671,8 +634,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
671
634
|
lastElementUpdatedPage,
|
672
635
|
lastElementUpdatedExistsOnForm,
|
673
636
|
setPageId,
|
674
|
-
sectionState,
|
675
|
-
setFormSubmission,
|
676
637
|
]);
|
677
638
|
if (conditionalLogicError) {
|
678
639
|
return (React.createElement(React.Fragment, null,
|
@@ -748,7 +709,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
748
709
|
React.createElement(TaskContext.Provider, { value: taskContextValue },
|
749
710
|
React.createElement(OnUploadAttachmentContext.Provider, { value: onUploadAttachment }, visiblePages.map((pageElement) => (React.createElement(PageFormElements, { key: pageElement.id, isActive: pageElement.id ===
|
750
711
|
currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
|
751
|
-
isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission,
|
712
|
+
isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, collapsedSectionIds: collapsedSectionIds })))))))))))),
|
752
713
|
isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
|
753
714
|
React.createElement("div", { className: "steps-action" },
|
754
715
|
React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
|