@oneblink/apps-react 4.2.0-beta.4 → 4.3.0-beta.1
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/OneBlinkFormBase.js +121 -134
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/components/CustomAccordion.d.ts +1 -1
- package/dist/components/Lists.d.ts +2 -2
- package/dist/components/renderer/AutocompleteDropdown.js +3 -1
- package/dist/components/renderer/AutocompleteDropdown.js.map +1 -1
- package/dist/components/renderer/OneBlinkFormElements.d.ts +3 -2
- package/dist/components/renderer/OneBlinkFormElements.js +13 -13
- package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
- package/dist/components/renderer/PageFormElements.js +29 -1
- package/dist/components/renderer/PageFormElements.js.map +1 -1
- package/dist/form-elements/FormElementAutocomplete.d.ts +2 -1
- package/dist/form-elements/FormElementAutocomplete.js +2 -1
- package/dist/form-elements/FormElementAutocomplete.js.map +1 -1
- package/dist/form-elements/FormElementCheckBoxes.d.ts +3 -2
- package/dist/form-elements/FormElementCheckBoxes.js +2 -1
- package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
- package/dist/form-elements/FormElementCompliance.d.ts +3 -2
- package/dist/form-elements/FormElementCompliance.js +2 -1
- package/dist/form-elements/FormElementCompliance.js.map +1 -1
- package/dist/form-elements/FormElementForm.d.ts +3 -2
- package/dist/form-elements/FormElementForm.js +17 -2
- package/dist/form-elements/FormElementForm.js.map +1 -1
- package/dist/form-elements/FormElementRadio.d.ts +3 -2
- package/dist/form-elements/FormElementRadio.js +2 -1
- package/dist/form-elements/FormElementRadio.js.map +1 -1
- package/dist/form-elements/FormElementRepeatableSet.d.ts +3 -2
- package/dist/form-elements/FormElementRepeatableSet.js +18 -4
- package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
- package/dist/form-elements/FormElementSection.d.ts +1 -1
- package/dist/form-elements/FormElementSection.js +16 -2
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/FormElementSelect.d.ts +3 -2
- package/dist/form-elements/FormElementSelect.js +2 -1
- package/dist/form-elements/FormElementSelect.js.map +1 -1
- package/dist/hooks/useDynamicOptionsLoaderState.d.ts +16 -7
- package/dist/hooks/useDynamicOptionsLoaderState.js +195 -45
- package/dist/hooks/useDynamicOptionsLoaderState.js.map +1 -1
- package/dist/hooks/useFormElementOptions.d.ts +3 -2
- package/dist/hooks/useFormElementOptions.js +3 -1
- package/dist/hooks/useFormElementOptions.js.map +1 -1
- package/dist/services/form-validation.js +1 -1
- package/dist/services/form-validation.js.map +1 -1
- package/dist/types/form.d.ts +1 -0
- package/dist/types/form.js.map +1 -1
- package/package.json +2 -2
package/dist/OneBlinkFormBase.js
CHANGED
@@ -6,7 +6,6 @@ import * as bulmaToast from 'bulma-toast';
|
|
6
6
|
import { localisationService } from '@oneblink/apps';
|
7
7
|
import { attachmentsService } from '@oneblink/apps';
|
8
8
|
import Modal from './components/renderer/Modal';
|
9
|
-
import OneBlinkAppsErrorOriginalMessage from './components/renderer/OneBlinkAppsErrorOriginalMessage';
|
10
9
|
import cleanFormSubmissionModel from './services/cleanFormSubmissionModel';
|
11
10
|
import PageFormElements from './components/renderer/PageFormElements';
|
12
11
|
import useFormValidation from './hooks/useFormValidation';
|
@@ -16,7 +15,7 @@ import useLookups from './hooks/useLookups';
|
|
16
15
|
import { FormDefinitionContext } from './hooks/useFormDefinition';
|
17
16
|
import { InjectPagesContext } from './hooks/useInjectPages';
|
18
17
|
import { ExecutedLookupProvider } from './hooks/useExecutedLookupCallback';
|
19
|
-
import
|
18
|
+
import { FormElementOptionsContextProvider } from './hooks/useDynamicOptionsLoaderState';
|
20
19
|
import { GoogleMapsApiKeyContext } from './hooks/useGoogleMapsApiKey';
|
21
20
|
import { AbnLookupAuthenticationGuidContext } from './hooks/useAbnLookupAuthenticationGuid';
|
22
21
|
import { CaptchaSiteKeyContext } from './hooks/useCaptchaSiteKey';
|
@@ -188,13 +187,6 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
188
187
|
//
|
189
188
|
//
|
190
189
|
//
|
191
|
-
// #region Dynamic Options
|
192
|
-
const loadDynamicOptionsState = useDynamicOptionsLoaderState(definition, setFormSubmission);
|
193
|
-
// #endregion
|
194
|
-
//
|
195
|
-
//
|
196
|
-
//
|
197
|
-
//
|
198
190
|
// #region Submissions
|
199
191
|
const getCurrentSubmissionData = React.useCallback((stripBinaryData) => {
|
200
192
|
const { model, captchaTokens } = cleanFormSubmissionModel(submission, definition.elements, formElementsConditionallyShown, stripBinaryData);
|
@@ -482,132 +474,127 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
|
|
482
474
|
React.createElement("p", { className: "cypress-conditional-logic-error-message" }, conditionalLogicError.message),
|
483
475
|
React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date())))));
|
484
476
|
}
|
485
|
-
if (loadDynamicOptionsState) {
|
486
|
-
return (React.createElement(React.Fragment, null,
|
487
|
-
React.createElement("div", { className: "has-text-centered" },
|
488
|
-
React.createElement("i", { className: "material-icons has-text-warning icon-x-large" }, "error"),
|
489
|
-
React.createElement("h3", { className: "title is-3" }, loadDynamicOptionsState.error.title),
|
490
|
-
React.createElement("p", null, loadDynamicOptionsState.error.message),
|
491
|
-
React.createElement("p", { className: "has-text-grey" }, localisationService.formatDatetimeLong(new Date()))),
|
492
|
-
React.createElement(OneBlinkAppsErrorOriginalMessage, { error: loadDynamicOptionsState.error.originalError })));
|
493
|
-
}
|
494
477
|
return (React.createElement(ThemeProvider, { theme: theme },
|
495
|
-
React.createElement(
|
496
|
-
React.createElement(
|
497
|
-
React.createElement("div",
|
498
|
-
React.createElement("
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
React.createElement("
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
React.createElement(
|
546
|
-
React.createElement(
|
547
|
-
React.createElement(
|
548
|
-
React.createElement(
|
549
|
-
React.createElement(
|
550
|
-
React.createElement(
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
React.createElement("
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
React.createElement(
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
React.createElement(
|
596
|
-
React.createElement("
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
478
|
+
React.createElement(FormDefinitionContext.Provider, { value: definition },
|
479
|
+
React.createElement(FormElementOptionsContextProvider, null,
|
480
|
+
React.createElement("div", { className: "ob-form-container", ref: obFormContainerHTMLElementRef },
|
481
|
+
React.createElement("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false) },
|
482
|
+
React.createElement("div", null,
|
483
|
+
React.createElement("div", { ref: scrollToTopOfPageHTMLElementRef }),
|
484
|
+
isShowingMultiplePages && (React.createElement("div", { className: clsx('ob-steps-navigation', {
|
485
|
+
'is-active': isStepsHeaderActive,
|
486
|
+
}) },
|
487
|
+
React.createElement("div", { className: clsx('ob-steps-navigation__header', {
|
488
|
+
'is-active': isStepsHeaderActive,
|
489
|
+
}), onClick: toggleStepsNavigation },
|
490
|
+
React.createElement("span", { className: "icon is-invisible" },
|
491
|
+
React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down")),
|
492
|
+
React.createElement("div", { className: "steps-header-active-page" },
|
493
|
+
isDisplayingCurrentPageError ? (React.createElement("span", { className: "icon" },
|
494
|
+
React.createElement("i", { className: "material-icons has-text-danger is-size-4" }, "warning"))) : (React.createElement("span", { className: "steps-header-active-page-icon" }, currentPageNumber)),
|
495
|
+
React.createElement("span", { className: "steps-header-active-page-label cypress-tablet-step-title" }, currentPage ? currentPage.label : '')),
|
496
|
+
React.createElement("span", { className: "dropdown icon" },
|
497
|
+
React.createElement("i", { className: "material-icons" }, "keyboard_arrow_down"))),
|
498
|
+
React.createElement("div", { className: clsx('ob-steps-navigation__steps', {
|
499
|
+
'is-active': isStepsHeaderActive,
|
500
|
+
}) },
|
501
|
+
React.createElement("div", { className: "steps is-small is-horizontal-tablet cypress-steps" }, visiblePages.map((page, index) => {
|
502
|
+
const hasErrors = checkDisplayPageError(page);
|
503
|
+
return (React.createElement("div", { key: page.id, id: `steps-navigation-step-${page.id}`, className: clsx('step-item cypress-step-item', {
|
504
|
+
'is-active': currentPage.id === page.id,
|
505
|
+
'is-completed': currentPageIndex > index,
|
506
|
+
'is-error': hasErrors,
|
507
|
+
}), onClick: (e) => {
|
508
|
+
e.stopPropagation();
|
509
|
+
if (page.id !== currentPage.id) {
|
510
|
+
setPageId(page.id);
|
511
|
+
}
|
512
|
+
} },
|
513
|
+
React.createElement("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker",
|
514
|
+
// @ts-expect-error ???
|
515
|
+
name: `cypress-page-stepper-${index + 1}`, value: index + 1 }, hasErrors ? (React.createElement(Tooltip, { title: "Page has errors" },
|
516
|
+
React.createElement("span", { className: "icon tooltip has-tooltip-top cypress-page-error" },
|
517
|
+
React.createElement("i", { className: "material-icons has-text-danger is-size-3" }, "warning")))) : (React.createElement("span", null, index + 1))),
|
518
|
+
React.createElement("div", { className: "step-details ob-step-details" },
|
519
|
+
React.createElement("p", { className: "step-title ob-step-title cypress-desktop-step-title" }, page.label))));
|
520
|
+
}))))),
|
521
|
+
React.createElement("div", { className: clsx('ob-steps-navigation__background', {
|
522
|
+
'is-active': isStepsHeaderActive,
|
523
|
+
}), onClick: toggleStepsNavigation }),
|
524
|
+
React.createElement("div", { className: "steps" },
|
525
|
+
React.createElement("div", { className: clsx('steps-content', {
|
526
|
+
'is-single-step': !isShowingMultiplePages,
|
527
|
+
}) },
|
528
|
+
React.createElement(InjectPagesContext.Provider, { value: handlePagesLookupResult },
|
529
|
+
React.createElement(ExecutedLookupProvider, { executedLookup: executedLookup, executeLookupFailed: executeLookupFailed },
|
530
|
+
React.createElement(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey },
|
531
|
+
React.createElement(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid },
|
532
|
+
React.createElement(CaptchaSiteKeyContext.Provider, { value: captchaSiteKey },
|
533
|
+
React.createElement(AttachmentBlobsProvider, null,
|
534
|
+
React.createElement(FormIsReadOnlyContext.Provider, { value: isReadOnly }, visiblePages.map((pageElement) => (React.createElement(PageFormElements, { key: pageElement.id, isActive: pageElement.id === currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
|
535
|
+
isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission }))))))))))),
|
536
|
+
isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
|
537
|
+
React.createElement("div", { className: "steps-action" },
|
538
|
+
React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },
|
539
|
+
React.createElement("span", { className: "icon" },
|
540
|
+
React.createElement("i", { className: "material-icons" }, "keyboard_arrow_left")),
|
541
|
+
React.createElement("span", null, "Back"))),
|
542
|
+
React.createElement("div", { className: "step-progress-mobile cypress-steps-mobile" }, visiblePages.map((page, index) => (React.createElement("div", { key: page.id, className: clsx('step-progress-mobile-dot', {
|
543
|
+
'is-active': currentPage.id === page.id,
|
544
|
+
'is-completed': currentPageIndex > index,
|
545
|
+
'has-background-danger': currentPage.id !== page.id &&
|
546
|
+
checkDisplayPageError(page),
|
547
|
+
}) })))),
|
548
|
+
React.createElement("div", { className: "steps-action" },
|
549
|
+
React.createElement("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next" },
|
550
|
+
React.createElement("span", null, "Next"),
|
551
|
+
React.createElement("span", { className: "icon" },
|
552
|
+
React.createElement("i", { className: "material-icons" }, "keyboard_arrow_right"))))))),
|
553
|
+
!isReadOnly && (React.createElement("div", { className: "buttons ob-buttons ob-buttons-submit" },
|
554
|
+
onSaveDraft && !isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled },
|
555
|
+
React.createElement(CustomisableButtonInner, { label: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _a === void 0 ? void 0 : _a.label) || 'Save Draft', icon: (_b = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _b === void 0 ? void 0 : _b.icon }))),
|
556
|
+
React.createElement("span", { className: "ob-buttons-submit__spacer" }),
|
557
|
+
!isInfoPage && (React.createElement("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled },
|
558
|
+
React.createElement(CustomisableButtonInner, { label: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _c === void 0 ? void 0 : _c.label) || 'Cancel', icon: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _d === void 0 ? void 0 : _d.icon }))),
|
559
|
+
isLastVisiblePage && (React.createElement("button", { type: "submit", className: "button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form", disabled: isPreview || disabled },
|
560
|
+
React.createElement(CustomisableButtonInner, { label: isInfoPage
|
561
|
+
? 'Done'
|
562
|
+
: ((_e = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _e === void 0 ? void 0 : _e.label) || 'Submit', icon: (_f = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _f === void 0 ? void 0 : _f.icon }))))))),
|
563
|
+
!isReadOnly && (React.createElement(React.Fragment, null,
|
564
|
+
React.createElement(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }),
|
565
|
+
React.createElement(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: React.createElement(React.Fragment, null,
|
566
|
+
onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false) },
|
567
|
+
React.createElement(CustomisableButtonInner, { label: ((_g = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _g === void 0 ? void 0 : _g.label) || 'Save Draft', icon: (_h = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _h === void 0 ? void 0 : _h.icon }))),
|
568
|
+
React.createElement("span", { style: { flex: 1 } }),
|
569
|
+
React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing },
|
570
|
+
React.createElement(CustomisableButtonInner, { label: ((_j = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _j === void 0 ? void 0 : _j.label) || 'Back', icon: (_k = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _k === void 0 ? void 0 : _k.icon })),
|
571
|
+
React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges },
|
572
|
+
React.createElement(CustomisableButtonInner, { label: ((_l = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _l === void 0 ? void 0 : _l.label) || 'Discard', icon: (_m = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _m === void 0 ? void 0 : _m.icon }))) },
|
573
|
+
React.createElement("p", null, "You have unsaved changes, are you sure you want discard them?")),
|
574
|
+
React.createElement(Modal, { isOpen: promptUploadingAttachments === true, title: "Attachment upload in progress", cardClassName: "cypress-attachments-wait-continue", titleClassName: "cypress-attachments-confirm-wait-title", bodyClassName: "cypress-attachments-confirm-wait-body", actions: React.createElement(React.Fragment, null,
|
575
|
+
React.createElement("span", { style: { flex: 1 } }),
|
576
|
+
React.createElement("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments }, "Wait"),
|
577
|
+
React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments }, "Continue")) },
|
578
|
+
React.createElement("p", null, "Your attachments are still uploading, do you want to wait for the uploads to complete or continue using the app? If you click continue the attachments will upload in the background. Do not close the app until the upload has been completed.")),
|
579
|
+
React.createElement(Modal, { isOpen: promptOfflineSubmissionAttempt, title: "It looks like you're Offline", className: "ob-modal__offline-submission-attempt", cardClassName: "cypress-submission-offline has-text-centered", titleClassName: "cypress-offline-title", bodyClassName: "cypress-offline-body", actions: React.createElement(React.Fragment, null,
|
580
|
+
onSaveDraft && (React.createElement("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false) },
|
581
|
+
React.createElement(CustomisableButtonInner, { label: ((_o = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _o === void 0 ? void 0 : _o.label) || 'Save Draft', icon: (_p = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _p === void 0 ? void 0 : _p.icon }))),
|
582
|
+
React.createElement("span", { style: { flex: 1 } }),
|
583
|
+
React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false) }, "Cancel"),
|
584
|
+
React.createElement("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
|
585
|
+
setPromptOfflineSubmissionAttempt(false);
|
586
|
+
handleSubmit(e, false);
|
587
|
+
} }, "Try Again")) },
|
588
|
+
React.createElement("p", { className: "ob-modal__offline-submission-attempt-message" },
|
589
|
+
"You cannot submit this form while offline, please try again when connectivity is restored.",
|
590
|
+
onSaveDraft && (React.createElement("span", { className: "ob-modal__offline-submission-attempt-save-draft-message" },
|
591
|
+
' ',
|
592
|
+
"Alternatively, click the",
|
593
|
+
' ',
|
594
|
+
React.createElement("b", null, ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft'),
|
595
|
+
' ',
|
596
|
+
"button below to come back to this later."))),
|
597
|
+
React.createElement("i", { className: "material-icons has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon" }, "wifi_off")))))))));
|
611
598
|
}
|
612
599
|
export default React.memo(OneBlinkFormBase);
|
613
600
|
//# sourceMappingURL=OneBlinkFormBase.js.map
|