npm - @oneblink/apps-react - Versions diffs - 9.0.0-beta.3 → 9.0.0-beta.4 - Mend

@oneblink/apps-react 9.0.0-beta.3 → 9.0.0-beta.4

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.

Files changed (177) hide show

package/dist/OneBlinkForm.d.ts CHANGED Viewed

@@ -17,8 +17,6 @@ export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
  *   OneBlinkAppsError,
  *   draftService,
  *   submissionService,
- * } from '@oneblink/apps'
- * import {
  *   IsOfflineContextProvider,
  *   OneBlinkFormControlled,
  *   useIsMounted,
@@ -380,8 +378,6 @@ declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBl
  *   OneBlinkAppsError,
  *   draftService,
  *   submissionService,
- * } from '@oneblink/apps'
- * import {
  *   IsOfflineContextProvider,
  *   OneBlinkForm,
  *   useIsMounted,

package/dist/OneBlinkForm.js CHANGED Viewed

@@ -17,8 +17,6 @@ import useFormSubmissionDuration from './hooks/useFormSubmissionDuration';
  *   OneBlinkAppsError,
  *   draftService,
  *   submissionService,
- * } from '@oneblink/apps'
- * import {
  *   IsOfflineContextProvider,
  *   OneBlinkFormControlled,
  *   useIsMounted,
@@ -353,8 +351,6 @@ const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props)
  *   OneBlinkAppsError,
  *   draftService,
  *   submissionService,
- * } from '@oneblink/apps'
- * import {
  *   IsOfflineContextProvider,
  *   OneBlinkForm,
  *   useIsMounted,

package/dist/OneBlinkForm.js.map CHANGED Viewed

	@@ -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;AACnE,OAAO,yBAAyB,MAAM,mCAAmC,CAAA;AAKzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,KAAC,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,KAAC,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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0NG;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,KAAC,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 * 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 * 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"]}

package/dist/OneBlinkFormBase.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { submissionService, attachmentsService } from '@oneblink/apps';
+import { submissionService, attachmentsService } from './apps';
 import { EnvironmentTypes, FormTypes, FormsAppsTypes, ScheduledTasksTypes, SubmissionTypes } from '@oneblink/types';
 import { ReplaceInjectablesOverrides } from './hooks/useReplaceInjectablesOverrides';
 import { CaptchaType, ExecutedLookups, SetFormSubmission, SectionState } from './types/form';

package/dist/OneBlinkFormBase.js CHANGED Viewed

@@ -5,7 +5,7 @@ import Tooltip from './components/renderer/Tooltip';
 import { Prompt, useHistory } from 'react-router-dom';
 import clsx from 'clsx';
 import * as bulmaToast from 'bulma-toast';
-import { localisationService, attachmentsService, } from '@oneblink/apps';
+import { localisationService, attachmentsService, } from './apps';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
 import Modal from './components/renderer/Modal';