@oneblink/apps-react 4.0.0-beta.1 → 4.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/README.md +2 -8
  2. package/dist/OneBlinkAutoSaveForm.d.ts +25 -5
  3. package/dist/OneBlinkAutoSaveForm.js +12 -0
  4. package/dist/OneBlinkAutoSaveForm.js.map +1 -1
  5. package/dist/OneBlinkForm.d.ts +558 -8
  6. package/dist/OneBlinkForm.js +546 -0
  7. package/dist/OneBlinkForm.js.map +1 -1
  8. package/dist/OneBlinkFormBase.d.ts +52 -7
  9. package/dist/OneBlinkFormBase.js +4 -1
  10. package/dist/OneBlinkFormBase.js.map +1 -1
  11. package/dist/OneBlinkReadOnlyForm.d.ts +83 -6
  12. package/dist/OneBlinkReadOnlyForm.js +80 -1
  13. package/dist/OneBlinkReadOnlyForm.js.map +1 -1
  14. package/dist/PaymentReceipt.d.ts +59 -0
  15. package/dist/PaymentReceipt.js +49 -0
  16. package/dist/PaymentReceipt.js.map +1 -1
  17. package/dist/components/formStore/FormStoreTableProvider.js +23 -1
  18. package/dist/components/formStore/FormStoreTableProvider.js.map +1 -1
  19. package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.d.ts +5 -0
  20. package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.js +5 -0
  21. package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.js.map +1 -1
  22. package/dist/components/formStore/OneBlinkFormStoreColumnsButton.d.ts +5 -0
  23. package/dist/components/formStore/OneBlinkFormStoreColumnsButton.js +5 -0
  24. package/dist/components/formStore/OneBlinkFormStoreColumnsButton.js.map +1 -1
  25. package/dist/components/formStore/OneBlinkFormStoreDownloadButton.d.ts +5 -0
  26. package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js +5 -0
  27. package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js.map +1 -1
  28. package/dist/components/formStore/OneBlinkFormStoreProvider.d.ts +5 -0
  29. package/dist/components/formStore/OneBlinkFormStoreProvider.js +5 -0
  30. package/dist/components/formStore/OneBlinkFormStoreProvider.js.map +1 -1
  31. package/dist/components/formStore/OneBlinkFormStoreRefreshButton.d.ts +5 -0
  32. package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js +5 -0
  33. package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js.map +1 -1
  34. package/dist/components/formStore/OneBlinkFormStoreTable.d.ts +4 -0
  35. package/dist/components/formStore/OneBlinkFormStoreTable.js +4 -0
  36. package/dist/components/formStore/OneBlinkFormStoreTable.js.map +1 -1
  37. package/dist/components/pickers/V4CompatibleDatePicker.d.ts +5 -0
  38. package/dist/components/pickers/V4CompatibleDatePicker.js +5 -0
  39. package/dist/components/pickers/V4CompatibleDatePicker.js.map +1 -1
  40. package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts +5 -0
  41. package/dist/components/pickers/V4CompatibleDateTimePicker.js +5 -0
  42. package/dist/components/pickers/V4CompatibleDateTimePicker.js.map +1 -1
  43. package/dist/components/pickers/V4CompatibleTimePicker.d.ts +5 -0
  44. package/dist/components/pickers/V4CompatibleTimePicker.js +5 -0
  45. package/dist/components/pickers/V4CompatibleTimePicker.js.map +1 -1
  46. package/dist/components/renderer/LookupButton.js +2 -2
  47. package/dist/components/renderer/LookupButton.js.map +1 -1
  48. package/dist/components/renderer/LookupNotification.js +43 -25
  49. package/dist/components/renderer/LookupNotification.js.map +1 -1
  50. package/dist/components/renderer/OneBlinkFormElements.d.ts +3 -3
  51. package/dist/components/renderer/OneBlinkFormElements.js.map +1 -1
  52. package/dist/components/renderer/PageFormElements.d.ts +3 -3
  53. package/dist/components/renderer/PageFormElements.js.map +1 -1
  54. package/dist/components/renderer/ProgressBar.d.ts +7 -3
  55. package/dist/components/renderer/ProgressBar.js +5 -0
  56. package/dist/components/renderer/ProgressBar.js.map +1 -1
  57. package/dist/form-elements/FormElementBarcodeScanner.js +2 -2
  58. package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
  59. package/dist/form-elements/FormElementCalculation.js.map +1 -1
  60. package/dist/form-elements/FormElementForm.d.ts +4 -4
  61. package/dist/form-elements/FormElementForm.js.map +1 -1
  62. package/dist/form-elements/FormElementRepeatableSet.d.ts +4 -4
  63. package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
  64. package/dist/form-elements/FormElementSummary.js.map +1 -1
  65. package/dist/hooks/useAuth.d.ts +81 -6
  66. package/dist/hooks/useAuth.js +54 -0
  67. package/dist/hooks/useAuth.js.map +1 -1
  68. package/dist/hooks/useBooleanState.d.ts +42 -5
  69. package/dist/hooks/useBooleanState.js +36 -0
  70. package/dist/hooks/useBooleanState.js.map +1 -1
  71. package/dist/hooks/useClickOutsideElement.d.ts +40 -0
  72. package/dist/hooks/useClickOutsideElement.js +40 -0
  73. package/dist/hooks/useClickOutsideElement.js.map +1 -1
  74. package/dist/hooks/useConditionalLogic.d.ts +2 -3
  75. package/dist/hooks/useConditionalLogic.js.map +1 -1
  76. package/dist/hooks/useDrafts.d.ts +82 -0
  77. package/dist/hooks/useDrafts.js +204 -0
  78. package/dist/hooks/useDrafts.js.map +1 -0
  79. package/dist/hooks/useFormSubmissionAutoSaveState.d.ts +18 -5
  80. package/dist/hooks/useFormSubmissionAutoSaveState.js +10 -0
  81. package/dist/hooks/useFormSubmissionAutoSaveState.js.map +1 -1
  82. package/dist/hooks/useFormSubmissionModelContext.d.ts +4 -4
  83. package/dist/hooks/useFormSubmissionModelContext.js.map +1 -1
  84. package/dist/hooks/useFormSubmissionState.d.ts +45 -5
  85. package/dist/hooks/useFormSubmissionState.js +37 -0
  86. package/dist/hooks/useFormSubmissionState.js.map +1 -1
  87. package/dist/hooks/useFormValidation.d.ts +3 -3
  88. package/dist/hooks/useFormValidation.js.map +1 -1
  89. package/dist/hooks/useInjectPages.d.ts +2 -3
  90. package/dist/hooks/useInjectPages.js.map +1 -1
  91. package/dist/hooks/useIsMounted.d.ts +20 -0
  92. package/dist/hooks/useIsMounted.js +19 -0
  93. package/dist/hooks/useIsMounted.js.map +1 -1
  94. package/dist/hooks/useIsOffline.d.ts +54 -0
  95. package/dist/hooks/useIsOffline.js +54 -0
  96. package/dist/hooks/useIsOffline.js.map +1 -1
  97. package/dist/hooks/useLoadDataState.d.ts +46 -3
  98. package/dist/hooks/useLoadDataState.js +41 -0
  99. package/dist/hooks/useLoadDataState.js.map +1 -1
  100. package/dist/hooks/useLogin.d.ts +400 -13
  101. package/dist/hooks/useLogin.js +300 -0
  102. package/dist/hooks/useLogin.js.map +1 -1
  103. package/dist/hooks/useLookupNotification.d.ts +6 -2
  104. package/dist/hooks/useLookupNotification.js +29 -3
  105. package/dist/hooks/useLookupNotification.js.map +1 -1
  106. package/dist/hooks/useLookups.d.ts +3 -3
  107. package/dist/hooks/useLookups.js.map +1 -1
  108. package/dist/hooks/useNullableState.d.ts +46 -1
  109. package/dist/hooks/useNullableState.js +42 -1
  110. package/dist/hooks/useNullableState.js.map +1 -1
  111. package/dist/hooks/usePendingSubmissions.d.ts +103 -0
  112. package/dist/hooks/usePendingSubmissions.js +195 -0
  113. package/dist/hooks/usePendingSubmissions.js.map +1 -0
  114. package/dist/hooks/useSignUp.d.ts +5 -0
  115. package/dist/hooks/useSignUp.js +5 -0
  116. package/dist/hooks/useSignUp.js.map +1 -1
  117. package/dist/index.d.ts +7 -4
  118. package/dist/index.js +5 -2
  119. package/dist/index.js.map +1 -1
  120. package/dist/services/checkBsbsAreInvalid.d.ts +2 -3
  121. package/dist/services/checkBsbsAreInvalid.js.map +1 -1
  122. package/dist/services/checkIfAttachmentsExist.d.ts +2 -3
  123. package/dist/services/checkIfAttachmentsExist.js.map +1 -1
  124. package/dist/services/checkIfBsbsAreValidating.d.ts +2 -3
  125. package/dist/services/checkIfBsbsAreValidating.js.map +1 -1
  126. package/dist/services/cleanFormSubmissionModel.d.ts +4 -4
  127. package/dist/services/cleanFormSubmissionModel.js +2 -1
  128. package/dist/services/cleanFormSubmissionModel.js.map +1 -1
  129. package/dist/services/form-validation.d.ts +3 -3
  130. package/dist/services/form-validation.js.map +1 -1
  131. package/dist/services/generate-default-data.d.ts +2 -3
  132. package/dist/services/generate-default-data.js +3 -1
  133. package/dist/services/generate-default-data.js.map +1 -1
  134. package/dist/services/generateFreshdeskDependentFieldElements.js.map +1 -1
  135. package/dist/services/getDateRangeConfiguration.d.ts +2 -3
  136. package/dist/services/getDateRangeConfiguration.js.map +1 -1
  137. package/dist/services/getRepeatableSetEntriesConfiguration.d.ts +2 -3
  138. package/dist/services/getRepeatableSetEntriesConfiguration.js.map +1 -1
  139. package/dist/styles/receipt.scss +1 -1
  140. package/dist/styles/repeatable-set.scss +2 -2
  141. package/dist/typedoc.d.ts +2 -0
  142. package/dist/typedoc.js +3 -0
  143. package/dist/typedoc.js.map +1 -0
  144. package/dist/types/form.d.ts +5 -6
  145. package/dist/types/form.js.map +1 -1
  146. package/package.json +9 -3
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n} from '../types/form'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n value: FormSubmissionModel | undefined\n onChange: FormElementValueChangeHandler<FormSubmissionModel>\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation | undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n}\n\nfunction FormElementForm({\n formId,\n element,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (nestedElement: FormTypes.FormElement, nestedElementValue: unknown) => {\n if (!('name' in nestedElement)) return\n onChange(element, (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }))\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as FormSubmissionModel\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n model = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n }\n })\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(() => {\n return {\n elements: Array.isArray(element.elements) ? element.elements : [],\n }\n }, [element.elements])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value || {}}\n parentElement={parentElement}\n idPrefix={`${id}_`}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}
1
+ {"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAsB9E,SAAS,eAAe,CAAC,EACvB,MAAM,EACN,OAAO,EACP,KAAK,EACL,EAAE,EACF,qBAAqB,EACrB,yBAAyB,EACzB,6BAA6B,EAC7B,QAAQ,EACR,QAAQ,GACF;IACN,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,aAAoC,EAAE,kBAA2B,EAAE,EAAE;QACpE,IAAI,CAAC,CAAC,MAAM,IAAI,aAAa,CAAC;YAAE,OAAM;QACtC,QAAQ,CAAC,OAAO,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACpC,GAAG,aAAa;YAChB,CAAC,aAAa,CAAC,IAAI,CAAC,EAClB,OAAO,kBAAkB,KAAK,UAAU;gBACtC,CAAC,CAAC,kBAAkB,CAChB,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAC9D;gBACH,CAAC,CAAC,kBAAkB;SACzB,CAAC,CAAC,CAAA;IACL,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,QAAQ,CAAC,CAAC,qBAAqB,EAAE,EAAE;YACjC,IAAI,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAC1C,OAAO,CAAC,IAAI,CACqC,CAAA;YACnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBAClE,IACE,WAAW,CAAC,IAAI,KAAK,MAAM;oBAC3B,WAAW,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI;oBACjC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,EACnC;oBACA,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC;wBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,KAAK;wBACjB,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;qBAC7D,CAAC,CAAA;oBACF,KAAK,GAAG,UAAU,CAAA;oBAClB,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,MAAM,UAAU,GAAG;gBACjB,GAAG,qBAAqB,CAAC,UAAU;gBACnC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK;aACtB,CAAA;YAED,OAAO;gBACL,QAAQ;gBACR,UAAU;gBACV,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;aAC7D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,CAAC,qBAAqB;YAC5B,OAAO,qBAAqB,KAAK,QAAQ;YACzC,qBAAqB,CAAC,IAAI,KAAK,cAAc;YAC7C,CAAC,CAAC,qBAAqB,CAAC,YAAY;YACpC,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAE3B,MAAM,8BAA8B,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxD,OAAO,6BAA6B;YAClC,6BAA6B,CAAC,IAAI,KAAK,cAAc;YACrD,CAAC,CAAC,6BAA6B,CAAC,YAAY;YAC5C,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAA;IAEnC,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;SAClE,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,UAAU,EAClC,yBAAyB,EAAE,yBAAyB,EACpD,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,YAAY,EACtB,8BAA8B,EAAE,8BAA8B,EAC9D,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,GAAG,EAAE,GAAG,GAClB,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n FormElementValueChangeHandler,\n} from '../types/form'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n value: SubmissionTypes.S3SubmissionData['submission'] | undefined\n onChange: FormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission']\n >\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation | undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n}\n\nfunction FormElementForm({\n formId,\n element,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (nestedElement: FormTypes.FormElement, nestedElementValue: unknown) => {\n if (!('name' in nestedElement)) return\n onChange(element, (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }))\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as SubmissionTypes.S3SubmissionData['submission']\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n model = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n }\n })\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(() => {\n return {\n elements: Array.isArray(element.elements) ? element.elements : [],\n }\n }, [element.elements])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value || {}}\n parentElement={parentElement}\n idPrefix={`${id}_`}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}
@@ -1,13 +1,13 @@
1
1
  import * as React from 'react';
2
- import { FormTypes } from '@oneblink/types';
3
- import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, FormSubmissionModel, IsDirtyProps } from '../types/form';
2
+ import { FormTypes, SubmissionTypes } from '@oneblink/types';
3
+ import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
4
4
  type Props = {
5
5
  formId: number;
6
6
  id: string;
7
7
  isEven: boolean;
8
8
  element: FormTypes.RepeatableSetElement;
9
- value: Array<FormSubmissionModel> | undefined;
10
- onChange: FormElementValueChangeHandler<FormSubmissionModel[]>;
9
+ value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined;
10
+ onChange: FormElementValueChangeHandler<SubmissionTypes.S3SubmissionData['submission'][]>;
11
11
  onLookup: FormElementLookupHandler;
12
12
  formElementConditionallyShown: FormElementConditionallyShown | undefined;
13
13
  formElementValidation: FormElementValidation | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AACnE,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAC9E,OAAO,KAAK,MAAM,8BAA8B,CAAA;AAEhD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,kBAAkB,MAAM,6BAA6B,CAAA;AAW5D,OAAO,kCAAkC,MAAM,6CAA6C,CAAA;AAe5F,MAAM,yBAAyB,GAAG,KAAK,CAAC,aAAa,CAAS,CAAC,CAAC,CAAA;AAEhE,MAAM,UAAU,yBAAyB,CAAC,IAAY;IACpD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACzD,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,EACrD,CAAC,KAAK,EAAE,IAAI,CAAC,CACd,CAAA;AACH,CAAC;AAED,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,KAAK,EACL,qBAAqB,EACrB,EAAE,EACF,MAAM,EACN,wBAAwB,EACxB,6BAA6B,EAC7B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GACJ;IACN,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CAAC,KAAK,CAAC,CACR,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,QAAQ,CAAC,OAAO,EAAE,CAAC,eAAe,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAA;YAC/C,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACvD,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtB,OAAO,UAAU,CAAA;QACnB,CAAC,CAAC,CAAA;QACF,UAAU,EAAE,CAAA;IACd,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAEnC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,KAAa,EAAE,EAAE;QAChB,QAAQ,CAAC,OAAO,EAAE,CAAC,eAAe,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAA;YAC/C,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YAC3B,OAAO,UAAU,CAAA;QACnB,CAAC,CAAC,CAAA;QACF,UAAU,EAAE,CAAA;IACd,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAChC,CAAA;IAED,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAa,EAAE,aAAoC,EAAE,KAAc,EAAE,EAAE;QACtE,IAAI,CAAC,CAAC,MAAM,IAAI,aAAa,CAAC,EAAE;YAC9B,OAAM;SACP;QACD,QAAQ,CAAC,OAAO,EAAE,CAAC,eAAe,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;gBAC1D,IAAI,CAAC,KAAK,KAAK,EAAE;oBACf,OAAO;wBACL,GAAG,KAAK;wBACR,CAAC,aAAa,CAAC,IAAI,CAAC,EAClB,OAAO,KAAK,KAAK,UAAU;4BACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;4BAClC,CAAC,CAAC,KAAK;qBACZ,CAAA;iBACF;qBAAM;oBACL,OAAO,KAAK,CAAA;iBACb;YACH,CAAC,CAAC,CAAA;YACF,OAAO,UAAU,CAAA;QACnB,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GACpC,kCAAkC,CAAC,OAAO,CAAC,CAAA;IAE7C,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAC3C,GAAG,EAAE,CACH,CAAC,qBAAqB;QACtB,OAAO,qBAAqB,KAAK,QAAQ;QACzC,qBAAqB,CAAC,IAAI,KAAK,eAAe;QAC5C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,qBAAqB,EAC3B,CAAC,qBAAqB,CAAC,CACxB,CAAA;IAED,MAAM,sCAAsC,GAC1C,6BAA6B;QAC7B,6BAA6B,CAAC,IAAI,KAAK,eAAe;QACpD,CAAC,CAAC,6BAA6B,CAAC,OAAO;QACvC,CAAC,CAAC,EAAE,CAAA;IAER,MAAM,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,CAAC;QACjD,iBAAiB,EAAE,CAAC,uBAAuB;QAC3C,uBAAuB,EAAE,OAAO,IAAI,wBAAwB;QAC5D,cAAc,EAAE,kCAAkC;QAClD,gBAAgB,EAAE,oCAAoC;KACvD,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,gCAAgC,EAAE,mBAAmB,CAAC;QAEtE,oBAAC,yBAAyB,IACxB,SAAS,EAAE,qBAAqB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EACzD,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,CAAC,aAAa,IAAI,aAAa,GAAG,CAAC;YAE7C,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC5B,OAAO,CACL,oBAAC,kBAAkB,IACjB,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,iBAAiB,EAC3B,8BAA8B,EAC5B,sCAAsC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAE1D,sBAAsB,EACpB,uBAAuB;wBACvB,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAEnD,yBAAyB,EAAE,wBAAwB,GACnD,CACH,CAAA;YACH,CAAC,CAAC;YACD,CAAC,CAAC,aAAa,IAAI,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC,IAAI,CACrD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uEAAuE,EACjF,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,OAAO,CAAC,QAAQ;gBAE1B,8BAAM,SAAS,EAAC,MAAM;oBACpB,2BAAG,SAAS,EAAC,gBAAgB,UAAQ,CAChC;gBACN,CAAC,CAAC,OAAO,CAAC,gBAAgB,IAAI,CAC7B,kCAAO,OAAO,CAAC,gBAAgB,CAAQ,CACxC,CACM,CACV;YACA,CAAC,OAAO,IAAI,wBAAwB,CAAC;gBACpC,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAC/B,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,uBAAuB,CAAC,GAAG,CACxB,CACF,CACP,CACuB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAA;AAqBnD,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CACnC,SAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,EAAE,EACF,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAO,EACP,8BAA8B,EAC9B,yBAAyB,EACzB,sBAAsB,EACtB,QAAQ,EACR,QAAQ,EACR,QAAQ,GACgB;IACxB,MAAM,CAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,CAAC,GACrD,eAAe,CAAC,KAAK,CAAC,CAAA;IAExB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,OAA8B,EAAE,KAAc,EAAE,EAAE;QACjD,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;IACjC,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,QAAQ,CAAC,CAAC,qBAAqB,EAAE,EAAE;YACjC,IAAI,QAAQ,GAAG,EAAE,CAAA;YACjB,MAAM,OAAO,GAAG,qBAAqB,CAAC,UAAU,CAC9C,OAAO,CAAC,IAAI,CACiB,CAAA;YAC/B,MAAM,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBAClE,IACE,WAAW,CAAC,IAAI,KAAK,eAAe;oBACpC,WAAW,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EACjC;oBACA,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC;wBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC;wBAC1B,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;qBAC7D,CAAC,CAAA;oBACF,QAAQ,GAAG,UAAU,CAAA;oBACrB,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,MAAM,UAAU,GAAG;gBACjB,GAAG,qBAAqB,CAAC,UAAU;gBACnC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACvC,IAAI,CAAC,KAAK,KAAK,EAAE;wBACf,OAAO,QAAQ,CAAA;qBAChB;oBACD,OAAO,KAAK,CAAA;gBACd,CAAC,CAAC;aACH,CAAA;YAED,OAAO;gBACL,QAAQ;gBACR,UAAU;aACX,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,CAAC;QACjD,iBAAiB,EAAE,CAAC,sBAAsB;QAC1C,uBAAuB,EAAE,yBAAyB;QAClD,cAAc,EAAE,0BAA0B;QAC1C,gBAAgB,EAAE,4BAA4B;KAC/C,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAC9C,oBAAC,KAAK,IACJ,MAAM,EAAE,kBAAkB,EAC1B,SAAS,EAAC,+BAA+B,EACzC,cAAc,EAAC,4CAA4C,EAC3D,KAAK,EAAE,OAAO,CAAC,mBAAmB,IAAI,cAAc,EACpD,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yDAAyD,EACnE,OAAO,EAAE,YAAY,aAGd;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAE,GAAG,EAAE;wBACZ,YAAY,EAAE,CAAA;wBACd,QAAQ,CAAC,KAAK,CAAC,CAAA;oBACjB,CAAC,UAGM,CACR,kDAIC;QAER,6BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,IAAI,CACb,+DAA+D,EAC/D,mBAAmB,CACpB;YAED,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gFAAgF,EAC1F,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ;gBAE1B,8BAAM,SAAS,EAAC,MAAM;oBACpB,2BAAG,SAAS,EAAC,gBAAgB,qBAAmB,CAC3C;gBACN,CAAC,CAAC,OAAO,CAAC,mBAAmB,IAAI,CAChC,kCAAO,OAAO,CAAC,mBAAmB,CAAQ,CAC3C,CACM;YAET,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,GAAG,EAAE,UAAU,KAAK,GAAG,EACjC,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,sBAAsB,EAC9C,yBAAyB,EAAE,yBAAyB,EACpD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,OAAO,EACtB,8BAA8B,EAAE,8BAA8B,GAC9D,CACE,CAC6B,CACtC,CAAA;AACH,CAAC,CACF,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValidation,\n FormElementValueChangeHandler,\n FormSubmissionModel,\n IsDirtyProps,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n formId: number\n id: string\n isEven: boolean\n element: FormTypes.RepeatableSetElement\n value: Array<FormSubmissionModel> | undefined\n onChange: FormElementValueChangeHandler<FormSubmissionModel[]>\n onLookup: FormElementLookupHandler\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n formElementValidation: FormElementValidation | undefined\n displayValidationMessage: boolean\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(\n () => text.replace('{INDEX}', (index + 1).toString()),\n [index, text],\n )\n}\n\nfunction FormElementRepeatableSet({\n formId,\n element,\n value,\n formElementValidation,\n id,\n isEven,\n displayValidationMessage,\n formElementConditionallyShown,\n onChange,\n onLookup,\n isDirty,\n setIsDirty,\n}: Props) {\n const entries = React.useMemo(\n () => (Array.isArray(value) ? value : []),\n [value],\n )\n\n const handleAddEntry = React.useCallback(() => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n const entry = generateDefaultData(element.elements, {})\n newEntries.push(entry)\n return newEntries\n })\n setIsDirty()\n }, [element, onChange, setIsDirty])\n\n const handleRemoveEntry = React.useCallback(\n (index: number) => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n newEntries.splice(index, 1)\n return newEntries\n })\n setIsDirty()\n },\n [element, onChange, setIsDirty],\n )\n\n const handleNestedChange = React.useCallback(\n (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n if (!('name' in nestedElement)) {\n return\n }\n onChange(element, (existingEntries) => {\n const newEntries = (existingEntries || []).map((entry, i) => {\n if (i === index) {\n return {\n ...entry,\n [nestedElement.name]:\n typeof value === 'function'\n ? value(entry[nestedElement.name])\n : value,\n }\n } else {\n return entry\n }\n })\n return newEntries\n })\n },\n [element, onChange],\n )\n\n const { minSetEntries, maxSetEntries } =\n useFormElementRepeatableSetEntries(element)\n\n const repeatableSetValidation = React.useMemo(\n () =>\n !formElementValidation ||\n typeof formElementValidation === 'string' ||\n formElementValidation.type !== 'repeatableSet'\n ? undefined\n : formElementValidation,\n [formElementValidation],\n )\n\n const repeatableSetEntriesConditionallyShown =\n formElementConditionallyShown &&\n formElementConditionallyShown.type === 'repeatableSet'\n ? formElementConditionallyShown.entries\n : {}\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !repeatableSetValidation,\n displayInvalidClassName: isDirty || displayValidationMessage,\n validClassName: 'ob-repeatable-set-element__valid',\n invalidClassName: 'ob-repeatable-set-element__invalid',\n })\n\n return (\n <div\n className={clsx('cypress-repeatable-set-element', validationClassName)}\n >\n <FormElementLabelContainer\n className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n element={element}\n id={id}\n required={!!minSetEntries && minSetEntries > 0}\n >\n {entries.map((entry, index) => {\n return (\n <RepeatableSetEntry\n key={index}\n formId={formId}\n index={index}\n id={id}\n isEven={isEven}\n entry={entry}\n element={element}\n onChange={handleNestedChange}\n onLookup={onLookup}\n onRemove={handleRemoveEntry}\n formElementsConditionallyShown={\n repeatableSetEntriesConditionallyShown[index.toString()]\n }\n formElementsValidation={\n repeatableSetValidation &&\n repeatableSetValidation.entries[index.toString()]\n }\n displayValidationMessages={displayValidationMessage}\n />\n )\n })}\n {(!maxSetEntries || entries.length < maxSetEntries) && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n onClick={handleAddEntry}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">add</i>\n </span>\n {!!element.addSetEntryLabel && (\n <span>{element.addSetEntryLabel}</span>\n )}\n </button>\n )}\n {(isDirty || displayValidationMessage) &&\n !!repeatableSetValidation &&\n !!repeatableSetValidation.set && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {repeatableSetValidation.set}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n formId: number\n id: string\n index: number\n isEven: boolean\n entry: FormSubmissionModel\n element: FormTypes.RepeatableSetElement\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n displayValidationMessages: boolean\n onChange: (\n index: number,\n formElement: FormTypes.FormElement,\n value: unknown,\n ) => unknown\n onLookup: FormElementLookupHandler\n onRemove: (index: number) => unknown\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n function RepeatableSetEntry({\n formId,\n id,\n index,\n isEven,\n entry,\n element,\n formElementsConditionallyShown,\n displayValidationMessages,\n formElementsValidation,\n onChange,\n onLookup,\n onRemove,\n }: RepeatableSetEntryProps) {\n const [isConfirmingRemove, confirmRemove, cancelRemove] =\n useBooleanState(false)\n\n const handleChange = React.useCallback(\n (element: FormTypes.FormElement, value: unknown) => {\n onChange(index, element, value)\n },\n [index, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let newEntry = {}\n const entries = currentFormSubmission.submission[\n element.name\n ] as Array<FormSubmissionModel>\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'repeatableSet' &&\n formElement.name === element.name\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: entries[index],\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n newEntry = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: entries.map((entry, i) => {\n if (i === index) {\n return newEntry\n }\n return entry\n }),\n }\n\n return {\n elements,\n submission,\n }\n })\n },\n [element.name, index, onLookup],\n )\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !formElementsValidation,\n displayInvalidClassName: displayValidationMessages,\n validClassName: 'ob-repeatable-set__valid',\n invalidClassName: 'ob-repeatable-set__invalid',\n })\n\n return (\n <RepeatableSetIndexContext.Provider value={index}>\n <Modal\n isOpen={isConfirmingRemove}\n className=\"cypress-repeatable-set-prompt\"\n titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n title={element.removeSetEntryLabel || 'Remove Entry'}\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n onClick={cancelRemove}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n onClick={() => {\n cancelRemove()\n onRemove(index)\n }}\n >\n Yes\n </button>\n </>\n }\n >\n Are you sure you want to remove this entry?\n </Modal>\n\n <div\n key={index}\n className={clsx(\n 'ob-repeatable-set__container cypress-repeatable-set-container',\n validationClassName,\n )}\n >\n <button\n type=\"button\"\n className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n onClick={confirmRemove}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">delete_outline</i>\n </span>\n {!!element.removeSetEntryLabel && (\n <span>{element.removeSetEntryLabel}</span>\n )}\n </button>\n\n <OneBlinkFormElements\n formId={formId}\n idPrefix={`${id}_entry-${index}_`}\n isEven={isEven}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={element.elements}\n onChange={handleChange}\n onLookup={handleLookup}\n model={entry}\n parentElement={element}\n formElementsConditionallyShown={formElementsConditionallyShown}\n />\n </div>\n </RepeatableSetIndexContext.Provider>\n )\n },\n)\n"]}
1
+ {"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementsConditionallyShown,\n FormElementsValidation,\n FormElementValidation,\n FormElementValueChangeHandler,\n IsDirtyProps,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n formId: number\n id: string\n isEven: boolean\n element: FormTypes.RepeatableSetElement\n value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined\n onChange: FormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission'][]\n >\n onLookup: FormElementLookupHandler\n formElementConditionallyShown: FormElementConditionallyShown | undefined\n formElementValidation: FormElementValidation | undefined\n displayValidationMessage: boolean\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(\n () => text.replace('{INDEX}', (index + 1).toString()),\n [index, text],\n )\n}\n\nfunction FormElementRepeatableSet({\n formId,\n element,\n value,\n formElementValidation,\n id,\n isEven,\n displayValidationMessage,\n formElementConditionallyShown,\n onChange,\n onLookup,\n isDirty,\n setIsDirty,\n}: Props) {\n const entries = React.useMemo(\n () => (Array.isArray(value) ? value : []),\n [value],\n )\n\n const handleAddEntry = React.useCallback(() => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n const entry = generateDefaultData(element.elements, {})\n newEntries.push(entry)\n return newEntries\n })\n setIsDirty()\n }, [element, onChange, setIsDirty])\n\n const handleRemoveEntry = React.useCallback(\n (index: number) => {\n onChange(element, (existingEntries) => {\n const newEntries = [...(existingEntries || [])]\n newEntries.splice(index, 1)\n return newEntries\n })\n setIsDirty()\n },\n [element, onChange, setIsDirty],\n )\n\n const handleNestedChange = React.useCallback(\n (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n if (!('name' in nestedElement)) {\n return\n }\n onChange(element, (existingEntries) => {\n const newEntries = (existingEntries || []).map((entry, i) => {\n if (i === index) {\n return {\n ...entry,\n [nestedElement.name]:\n typeof value === 'function'\n ? value(entry[nestedElement.name])\n : value,\n }\n } else {\n return entry\n }\n })\n return newEntries\n })\n },\n [element, onChange],\n )\n\n const { minSetEntries, maxSetEntries } =\n useFormElementRepeatableSetEntries(element)\n\n const repeatableSetValidation = React.useMemo(\n () =>\n !formElementValidation ||\n typeof formElementValidation === 'string' ||\n formElementValidation.type !== 'repeatableSet'\n ? undefined\n : formElementValidation,\n [formElementValidation],\n )\n\n const repeatableSetEntriesConditionallyShown =\n formElementConditionallyShown &&\n formElementConditionallyShown.type === 'repeatableSet'\n ? formElementConditionallyShown.entries\n : {}\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !repeatableSetValidation,\n displayInvalidClassName: isDirty || displayValidationMessage,\n validClassName: 'ob-repeatable-set-element__valid',\n invalidClassName: 'ob-repeatable-set-element__invalid',\n })\n\n return (\n <div\n className={clsx('cypress-repeatable-set-element', validationClassName)}\n >\n <FormElementLabelContainer\n className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n element={element}\n id={id}\n required={!!minSetEntries && minSetEntries > 0}\n >\n {entries.map((entry, index) => {\n return (\n <RepeatableSetEntry\n key={index}\n formId={formId}\n index={index}\n id={id}\n isEven={isEven}\n entry={entry}\n element={element}\n onChange={handleNestedChange}\n onLookup={onLookup}\n onRemove={handleRemoveEntry}\n formElementsConditionallyShown={\n repeatableSetEntriesConditionallyShown[index.toString()]\n }\n formElementsValidation={\n repeatableSetValidation &&\n repeatableSetValidation.entries[index.toString()]\n }\n displayValidationMessages={displayValidationMessage}\n />\n )\n })}\n {(!maxSetEntries || entries.length < maxSetEntries) && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n onClick={handleAddEntry}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">add</i>\n </span>\n {!!element.addSetEntryLabel && (\n <span>{element.addSetEntryLabel}</span>\n )}\n </button>\n )}\n {(isDirty || displayValidationMessage) &&\n !!repeatableSetValidation &&\n !!repeatableSetValidation.set && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {repeatableSetValidation.set}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n formId: number\n id: string\n index: number\n isEven: boolean\n entry: SubmissionTypes.S3SubmissionData['submission']\n element: FormTypes.RepeatableSetElement\n formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n formElementsValidation: FormElementsValidation | undefined\n displayValidationMessages: boolean\n onChange: (\n index: number,\n formElement: FormTypes.FormElement,\n value: unknown,\n ) => unknown\n onLookup: FormElementLookupHandler\n onRemove: (index: number) => unknown\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n function RepeatableSetEntry({\n formId,\n id,\n index,\n isEven,\n entry,\n element,\n formElementsConditionallyShown,\n displayValidationMessages,\n formElementsValidation,\n onChange,\n onLookup,\n onRemove,\n }: RepeatableSetEntryProps) {\n const [isConfirmingRemove, confirmRemove, cancelRemove] =\n useBooleanState(false)\n\n const handleChange = React.useCallback(\n (element: FormTypes.FormElement, value: unknown) => {\n onChange(index, element, value)\n },\n [index, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let newEntry = {}\n const entries = currentFormSubmission.submission[\n element.name\n ] as Array<SubmissionTypes.S3SubmissionData['submission']>\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'repeatableSet' &&\n formElement.name === element.name\n ) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: entries[index],\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n newEntry = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: entries.map((entry, i) => {\n if (i === index) {\n return newEntry\n }\n return entry\n }),\n }\n\n return {\n elements,\n submission,\n }\n })\n },\n [element.name, index, onLookup],\n )\n\n const { validationClassName } = useValidationClass({\n formElementsValid: !formElementsValidation,\n displayInvalidClassName: displayValidationMessages,\n validClassName: 'ob-repeatable-set__valid',\n invalidClassName: 'ob-repeatable-set__invalid',\n })\n\n return (\n <RepeatableSetIndexContext.Provider value={index}>\n <Modal\n isOpen={isConfirmingRemove}\n className=\"cypress-repeatable-set-prompt\"\n titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n title={element.removeSetEntryLabel || 'Remove Entry'}\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n onClick={cancelRemove}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n onClick={() => {\n cancelRemove()\n onRemove(index)\n }}\n >\n Yes\n </button>\n </>\n }\n >\n Are you sure you want to remove this entry?\n </Modal>\n\n <div\n key={index}\n className={clsx(\n 'ob-repeatable-set__container cypress-repeatable-set-container',\n validationClassName,\n )}\n >\n <button\n type=\"button\"\n className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n onClick={confirmRemove}\n disabled={element.readOnly}\n >\n <span className=\"icon\">\n <i className=\"material-icons\">delete_outline</i>\n </span>\n {!!element.removeSetEntryLabel && (\n <span>{element.removeSetEntryLabel}</span>\n )}\n </button>\n\n <OneBlinkFormElements\n formId={formId}\n idPrefix={`${id}_entry-${index}_`}\n isEven={isEven}\n formElementsValidation={formElementsValidation}\n displayValidationMessages={displayValidationMessages}\n elements={element.elements}\n onChange={handleChange}\n onLookup={handleLookup}\n model={entry}\n parentElement={element}\n formElementsConditionallyShown={formElementsConditionallyShown}\n />\n </div>\n </RepeatableSetIndexContext.Provider>\n )\n },\n)\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes } from '@oneblink/types'\nimport {\n FormElementValueChangeHandler,\n FormSubmissionModel,\n} from '../types/form'\ntype Props = {\n element: FormTypes.SummaryElement\n onChange: FormElementValueChangeHandler\n value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n if (!Array.isArray(a) || !Array.isArray(b)) {\n if (a !== b) return false\n return true\n }\n if (a.length !== b.length) return false\n\n for (let i = 0; i < a.length; i++) {\n if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n if (!areEqual) return false\n continue\n }\n if (a[i] !== b[i]) return false\n }\n return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModelParent()\n const flattenedElements = useFlattenElements()\n\n const reducer = React.useCallback(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n submission: FormSubmissionModel,\n ) => {\n if (!('name' in formElement)) return partialSummary\n if (\n formElement.type !== 'repeatableSet' &&\n formElement.type !== 'form' &&\n !element.elementIds.some((elementId) => elementId === formElement.id)\n ) {\n return partialSummary\n }\n\n const formElementValue = submission[formElement.name]\n if (!formElementValue && formElementValue !== 0) {\n return partialSummary\n }\n\n switch (formElement.type) {\n case 'repeatableSet': {\n if (!Array.isArray(formElementValue)) return partialSummary\n // If we found a repeatable set, look through child elements\n // to find the summary elements. Need to start a new array for\n // this structure and look at each entry in the repeatable set\n for (const entry of formElementValue) {\n const repeatableSetSummaryValues = formElement.elements.reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // Pleasing TypeScript\n entry instanceof Object ? entry : {},\n ),\n [],\n )\n if (repeatableSetSummaryValues.length) {\n partialSummary.push(repeatableSetSummaryValues)\n }\n }\n break\n }\n case 'form': {\n const formSummaryValues = (formElement.elements || []).reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // @ts-expect-error Pleasing TypeScript\n formElementValue instanceof Object ? formElementValue : {},\n ),\n [],\n )\n if (formSummaryValues.length) {\n partialSummary.push(formSummaryValues)\n }\n\n break\n }\n case 'select':\n case 'autocomplete':\n case 'radio':\n case 'checkboxes': {\n const optionValues = []\n if (Array.isArray(formElementValue)) {\n optionValues.push(...formElementValue)\n } else {\n optionValues.push(formElementValue)\n }\n if (Array.isArray(formElement.options)) {\n partialSummary.push(\n ...optionValues.reduce((optionLabels, optionValue) => {\n const option = formElement.options?.find(\n ({ value }: FormTypes.ChoiceElementOption) =>\n optionValue === value,\n )\n if (option) {\n optionLabels.push(option.label)\n }\n return optionLabels\n }, []),\n )\n }\n break\n }\n case 'date': {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value: formElementValue as string,\n dateOnly: true,\n })\n if (date) {\n partialSummary.push(localisationService.formatDate(date))\n }\n break\n }\n case 'datetime': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatDatetime(new Date(formElementValue)),\n )\n break\n }\n case 'time': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatTime(new Date(formElementValue)),\n )\n break\n }\n default: {\n // Pleasing TypeScript WHILE COVERING ALL BASES\n if (\n typeof formElementValue !== 'string' &&\n typeof formElementValue !== 'object' &&\n typeof formElementValue !== 'number' &&\n typeof formElementValue !== 'function' &&\n typeof formElementValue !== 'boolean'\n ) {\n return partialSummary\n }\n\n partialSummary.push(formElementValue.toString())\n }\n }\n return partialSummary\n },\n [element.elementIds],\n )\n\n // MODEL LISTENER\n React.useEffect(() => {\n const summary = flattenedElements.reduce<FormElementSummaryResults>(\n (partialSummary, formElement) => {\n return reducer(partialSummary, formElement, formSubmissionModel)\n },\n\n [],\n )\n\n if (value === undefined) {\n if (!summary.length) return\n }\n if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n return\n }\n if (summary.length) {\n onChange(element, summary)\n } else {\n onChange(element, undefined)\n }\n }, [\n element,\n flattenedElements,\n formSubmissionModel,\n onChange,\n reducer,\n value,\n ])\n\n return (\n <div className=\"ob-form__element ob-summary cypress-summary-result \">\n {!!value && Array.isArray(value) && (\n <SummaryResult results={value}></SummaryResult>\n )}\n </div>\n )\n}\n\ntype FormElementSummaryResults = Array<string | FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n function SummaryResult({ results }) {\n return (\n <>\n {results.map((result, i) => {\n return (\n <div\n key={`${result.toString()}-${i}`}\n className=\"ob-summary__result-container\"\n >\n {typeof result === 'string' ? (\n <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n {result}\n </p>\n ) : (\n <SummaryResult results={result}></SummaryResult>\n )}\n </div>\n )\n })}\n </>\n )\n },\n)\n\nexport default React.memo(FormElementSummary)\n"]}
1
+ {"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\ntype Props = {\n element: FormTypes.SummaryElement\n onChange: FormElementValueChangeHandler\n value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n if (!Array.isArray(a) || !Array.isArray(b)) {\n if (a !== b) return false\n return true\n }\n if (a.length !== b.length) return false\n\n for (let i = 0; i < a.length; i++) {\n if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n if (!areEqual) return false\n continue\n }\n if (a[i] !== b[i]) return false\n }\n return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n const { formSubmissionModel } = useFormSubmissionModelParent()\n const flattenedElements = useFlattenElements()\n\n const reducer = React.useCallback(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n submission: SubmissionTypes.S3SubmissionData['submission'],\n ) => {\n if (!('name' in formElement)) return partialSummary\n if (\n formElement.type !== 'repeatableSet' &&\n formElement.type !== 'form' &&\n !element.elementIds.some((elementId) => elementId === formElement.id)\n ) {\n return partialSummary\n }\n\n const formElementValue = submission[formElement.name]\n if (!formElementValue && formElementValue !== 0) {\n return partialSummary\n }\n\n switch (formElement.type) {\n case 'repeatableSet': {\n if (!Array.isArray(formElementValue)) return partialSummary\n // If we found a repeatable set, look through child elements\n // to find the summary elements. Need to start a new array for\n // this structure and look at each entry in the repeatable set\n for (const entry of formElementValue) {\n const repeatableSetSummaryValues = formElement.elements.reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // Pleasing TypeScript\n entry instanceof Object ? entry : {},\n ),\n [],\n )\n if (repeatableSetSummaryValues.length) {\n partialSummary.push(repeatableSetSummaryValues)\n }\n }\n break\n }\n case 'form': {\n const formSummaryValues = (formElement.elements || []).reduce(\n (\n partialSummary: FormElementSummaryResults,\n formElement: FormTypes.FormElement,\n ) =>\n reducer(\n partialSummary,\n formElement,\n // @ts-expect-error Pleasing TypeScript\n formElementValue instanceof Object ? formElementValue : {},\n ),\n [],\n )\n if (formSummaryValues.length) {\n partialSummary.push(formSummaryValues)\n }\n\n break\n }\n case 'select':\n case 'autocomplete':\n case 'radio':\n case 'checkboxes': {\n const optionValues = []\n if (Array.isArray(formElementValue)) {\n optionValues.push(...formElementValue)\n } else {\n optionValues.push(formElementValue)\n }\n if (Array.isArray(formElement.options)) {\n partialSummary.push(\n ...optionValues.reduce((optionLabels, optionValue) => {\n const option = formElement.options?.find(\n ({ value }: FormTypes.ChoiceElementOption) =>\n optionValue === value,\n )\n if (option) {\n optionLabels.push(option.label)\n }\n return optionLabels\n }, []),\n )\n }\n break\n }\n case 'date': {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value: formElementValue as string,\n dateOnly: true,\n })\n if (date) {\n partialSummary.push(localisationService.formatDate(date))\n }\n break\n }\n case 'datetime': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatDatetime(new Date(formElementValue)),\n )\n break\n }\n case 'time': {\n if (typeof formElementValue !== 'string') return partialSummary\n partialSummary.push(\n localisationService.formatTime(new Date(formElementValue)),\n )\n break\n }\n default: {\n // Pleasing TypeScript WHILE COVERING ALL BASES\n if (\n typeof formElementValue !== 'string' &&\n typeof formElementValue !== 'object' &&\n typeof formElementValue !== 'number' &&\n typeof formElementValue !== 'function' &&\n typeof formElementValue !== 'boolean'\n ) {\n return partialSummary\n }\n\n partialSummary.push(formElementValue.toString())\n }\n }\n return partialSummary\n },\n [element.elementIds],\n )\n\n // MODEL LISTENER\n React.useEffect(() => {\n const summary = flattenedElements.reduce<FormElementSummaryResults>(\n (partialSummary, formElement) => {\n return reducer(partialSummary, formElement, formSubmissionModel)\n },\n\n [],\n )\n\n if (value === undefined) {\n if (!summary.length) return\n }\n if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n return\n }\n if (summary.length) {\n onChange(element, summary)\n } else {\n onChange(element, undefined)\n }\n }, [\n element,\n flattenedElements,\n formSubmissionModel,\n onChange,\n reducer,\n value,\n ])\n\n return (\n <div className=\"ob-form__element ob-summary cypress-summary-result \">\n {!!value && Array.isArray(value) && (\n <SummaryResult results={value}></SummaryResult>\n )}\n </div>\n )\n}\n\ntype FormElementSummaryResults = Array<string | FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n function SummaryResult({ results }) {\n return (\n <>\n {results.map((result, i) => {\n return (\n <div\n key={`${result.toString()}-${i}`}\n className=\"ob-summary__result-container\"\n >\n {typeof result === 'string' ? (\n <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n {result}\n </p>\n ) : (\n <SummaryResult results={result}></SummaryResult>\n )}\n </div>\n )\n })}\n </>\n )\n },\n)\n\nexport default React.memo(FormElementSummary)\n"]}
@@ -1,15 +1,90 @@
1
1
  import * as React from 'react';
2
- import { authService } from '@oneblink/apps';
3
- type AuthContextValue = {
4
- isLoggedIn: ReturnType<typeof authService.isLoggedIn>;
5
- userProfile: ReturnType<typeof authService.getUserProfile>;
6
- userFriendlyName: ReturnType<typeof authService.getUserFriendlyName>;
2
+ import { UserProfile } from '@oneblink/types/typescript/misc';
3
+ export type AuthContextValue = {
4
+ /** `true` if the current user is logged in */
5
+ isLoggedIn: boolean;
6
+ /**
7
+ * See
8
+ * [auth-service.getUserProfile()](https://oneblink.github.io/apps/modules/authService.html#getUserProfile)
9
+ */
10
+ userProfile: UserProfile | null;
11
+ /**
12
+ * See
13
+ * [auth-service.getUserFriendlyName()](https://oneblink.github.io/apps/modules/authService.html#getUserFriendlyName)
14
+ */
15
+ userFriendlyName: string | undefined;
16
+ /**
17
+ * `true` if [`<AuthContextProvider />`](#AuthContextProvider) was passed the
18
+ * `formsKeyToken` prop
19
+ */
7
20
  isUsingFormsKey: boolean;
8
21
  };
22
+ /**
23
+ * `<AuthContextProvider />` is a React Component that provides the context for
24
+ * the `useAuth()` hook to be used by components further down your component
25
+ * tree. **It should only be included in your component tree once and ideally at
26
+ * the root of the application.**
27
+ *
28
+ * #### Example
29
+ *
30
+ * ```jsx
31
+ * import * as React from 'react'
32
+ * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'
33
+ *
34
+ * function Component() {
35
+ * const auth = useAuth()
36
+ * // use auth here
37
+ * }
38
+ *
39
+ * function App() {
40
+ * return (
41
+ * <AuthContextProvider>
42
+ * <Component />
43
+ * </AuthContextProvider>
44
+ * )
45
+ * }
46
+ *
47
+ * const root = document.getElementById('root')
48
+ * if (root) {
49
+ * ReactDOM.render(<App />, root)
50
+ * }
51
+ * ```
52
+ *
53
+ * @param props
54
+ * @returns
55
+ * @group Components
56
+ */
9
57
  export declare function AuthContextProvider({ children, formsKeyToken, userToken, }: {
58
+ /** Your application components */
10
59
  children: React.ReactNode;
60
+ /**
61
+ * A Forms Key token being used to make requests to the OneBlink API on behalf
62
+ * of the user
63
+ */
11
64
  formsKeyToken?: string;
65
+ /**
66
+ * An encrypted user token that will be used included in the submission on
67
+ * behalf of the user
68
+ */
12
69
  userToken?: string;
13
70
  }): JSX.Element;
71
+ /**
72
+ * A React hook for containing state associated the current user. **This hook
73
+ * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be
74
+ * present in your component tree.**
75
+ *
76
+ * Example
77
+ *
78
+ * ```js
79
+ * import { useAuth } from '@oneblink/apps-react'
80
+ *
81
+ * function Component() {
82
+ * const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =
83
+ * useAuth()
84
+ * }
85
+ * ```
86
+ *
87
+ * @returns
88
+ * @group Hooks
89
+ */
14
90
  export default function useAuth(): AuthContextValue;
15
- export {};
@@ -6,6 +6,41 @@ const AuthContext = React.createContext({
6
6
  userFriendlyName: undefined,
7
7
  isUsingFormsKey: false,
8
8
  });
9
+ /**
10
+ * `<AuthContextProvider />` is a React Component that provides the context for
11
+ * the `useAuth()` hook to be used by components further down your component
12
+ * tree. **It should only be included in your component tree once and ideally at
13
+ * the root of the application.**
14
+ *
15
+ * #### Example
16
+ *
17
+ * ```jsx
18
+ * import * as React from 'react'
19
+ * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'
20
+ *
21
+ * function Component() {
22
+ * const auth = useAuth()
23
+ * // use auth here
24
+ * }
25
+ *
26
+ * function App() {
27
+ * return (
28
+ * <AuthContextProvider>
29
+ * <Component />
30
+ * </AuthContextProvider>
31
+ * )
32
+ * }
33
+ *
34
+ * const root = document.getElementById('root')
35
+ * if (root) {
36
+ * ReactDOM.render(<App />, root)
37
+ * }
38
+ * ```
39
+ *
40
+ * @param props
41
+ * @returns
42
+ * @group Components
43
+ */
9
44
  export function AuthContextProvider({ children, formsKeyToken, userToken, }) {
10
45
  const [value, setValue] = React.useState(() => {
11
46
  authService.setFormsKeyToken(formsKeyToken);
@@ -37,6 +72,25 @@ export function AuthContextProvider({ children, formsKeyToken, userToken, }) {
37
72
  }, []);
38
73
  return React.createElement(AuthContext.Provider, { value: value }, children);
39
74
  }
75
+ /**
76
+ * A React hook for containing state associated the current user. **This hook
77
+ * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be
78
+ * present in your component tree.**
79
+ *
80
+ * Example
81
+ *
82
+ * ```js
83
+ * import { useAuth } from '@oneblink/apps-react'
84
+ *
85
+ * function Component() {
86
+ * const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =
87
+ * useAuth()
88
+ * }
89
+ * ```
90
+ *
91
+ * @returns
92
+ * @group Hooks
93
+ */
40
94
  export default function useAuth() {
41
95
  return React.useContext(AuthContext);
42
96
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useAuth.js","sourceRoot":"","sources":["../../src/hooks/useAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAS5C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IACxD,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,IAAI;IACjB,gBAAgB,EAAE,SAAS;IAC3B,eAAe,EAAE,KAAK;CACvB,CAAC,CAAA;AAEF,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,aAAa,EACb,SAAS,GAKV;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;QACnC,OAAO;YACL,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;YACnD,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,WAAW,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAC3C,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrB,GAAG,OAAO;YACV,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;SACpD,CAAC,CAAC,CACJ,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAwB,CAAA;AAC9E,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\n\ntype AuthContextValue = {\n isLoggedIn: ReturnType<typeof authService.isLoggedIn>\n userProfile: ReturnType<typeof authService.getUserProfile>\n userFriendlyName: ReturnType<typeof authService.getUserFriendlyName>\n isUsingFormsKey: boolean\n}\n\nconst AuthContext = React.createContext<AuthContextValue>({\n isLoggedIn: false,\n userProfile: null,\n userFriendlyName: undefined,\n isUsingFormsKey: false,\n})\n\nexport function AuthContextProvider({\n children,\n formsKeyToken,\n userToken,\n}: {\n children: React.ReactNode\n formsKeyToken?: string\n userToken?: string\n}) {\n const [value, setValue] = React.useState(() => {\n authService.setFormsKeyToken(formsKeyToken)\n authService.setUserToken(userToken)\n return {\n isLoggedIn: authService.isLoggedIn(),\n userProfile: authService.getUserProfile(),\n userFriendlyName: authService.getUserFriendlyName(),\n isUsingFormsKey: !!formsKeyToken,\n }\n })\n\n React.useEffect(() => {\n authService.setFormsKeyToken(formsKeyToken)\n setValue((currentValue) => ({\n ...currentValue,\n isUsingFormsKey: !!formsKeyToken,\n }))\n }, [formsKeyToken])\n\n React.useEffect(() => {\n authService.setUserToken(userToken)\n }, [userToken])\n\n React.useEffect(() => {\n return authService.registerAuthListener(() =>\n setValue((current) => ({\n ...current,\n isLoggedIn: authService.isLoggedIn(),\n userProfile: authService.getUserProfile(),\n userFriendlyName: authService.getUserFriendlyName(),\n })),\n )\n }, [])\n\n return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>\n}\n\nexport default function useAuth() {\n return React.useContext(AuthContext)\n}\n"]}
1
+ {"version":3,"file":"useAuth.js","sourceRoot":"","sources":["../../src/hooks/useAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAuB5C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IACxD,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,IAAI;IACjB,gBAAgB,EAAE,SAAS;IAC3B,eAAe,EAAE,KAAK;CACvB,CAAC,CAAA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,aAAa,EACb,SAAS,GAcV;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;QACnC,OAAO;YACL,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;YACnD,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,WAAW,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAC3C,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrB,GAAG,OAAO;YACV,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;SACpD,CAAC,CAAC,CACJ,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAwB,CAAA;AAC9E,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\nimport { UserProfile } from '@oneblink/types/typescript/misc'\n\nexport type AuthContextValue = {\n /** `true` if the current user is logged in */\n isLoggedIn: boolean\n /**\n * See\n * [auth-service.getUserProfile()](https://oneblink.github.io/apps/modules/authService.html#getUserProfile)\n */\n userProfile: UserProfile | null\n /**\n * See\n * [auth-service.getUserFriendlyName()](https://oneblink.github.io/apps/modules/authService.html#getUserFriendlyName)\n */\n userFriendlyName: string | undefined\n /**\n * `true` if [`<AuthContextProvider />`](#AuthContextProvider) was passed the\n * `formsKeyToken` prop\n */\n isUsingFormsKey: boolean\n}\n\nconst AuthContext = React.createContext<AuthContextValue>({\n isLoggedIn: false,\n userProfile: null,\n userFriendlyName: undefined,\n isUsingFormsKey: false,\n})\n/**\n * `<AuthContextProvider />` is a React Component that provides the context for\n * the `useAuth()` hook to be used by components further down your component\n * tree. **It should only be included in your component tree once and ideally at\n * the root of the application.**\n *\n * #### Example\n *\n * ```jsx\n * import * as React from 'react'\n * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'\n *\n * function Component() {\n * const auth = useAuth()\n * // use auth here\n * }\n *\n * function App() {\n * return (\n * <AuthContextProvider>\n * <Component />\n * </AuthContextProvider>\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 */\nexport function AuthContextProvider({\n children,\n formsKeyToken,\n userToken,\n}: {\n /** Your application components */\n children: React.ReactNode\n /**\n * A Forms Key token being used to make requests to the OneBlink API on behalf\n * of the user\n */\n formsKeyToken?: string\n /**\n * An encrypted user token that will be used included in the submission on\n * behalf of the user\n */\n userToken?: string\n}) {\n const [value, setValue] = React.useState(() => {\n authService.setFormsKeyToken(formsKeyToken)\n authService.setUserToken(userToken)\n return {\n isLoggedIn: authService.isLoggedIn(),\n userProfile: authService.getUserProfile(),\n userFriendlyName: authService.getUserFriendlyName(),\n isUsingFormsKey: !!formsKeyToken,\n }\n })\n\n React.useEffect(() => {\n authService.setFormsKeyToken(formsKeyToken)\n setValue((currentValue) => ({\n ...currentValue,\n isUsingFormsKey: !!formsKeyToken,\n }))\n }, [formsKeyToken])\n\n React.useEffect(() => {\n authService.setUserToken(userToken)\n }, [userToken])\n\n React.useEffect(() => {\n return authService.registerAuthListener(() =>\n setValue((current) => ({\n ...current,\n isLoggedIn: authService.isLoggedIn(),\n userProfile: authService.getUserProfile(),\n userFriendlyName: authService.getUserFriendlyName(),\n })),\n )\n }, [])\n\n return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>\n}\n\n/**\n * A React hook for containing state associated the current user. **This hook\n * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be\n * present in your component tree.**\n *\n * Example\n *\n * ```js\n * import { useAuth } from '@oneblink/apps-react'\n *\n * function Component() {\n * const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =\n * useAuth()\n * }\n * ```\n *\n * @returns\n * @group Hooks\n */\nexport default function useAuth() {\n return React.useContext(AuthContext)\n}\n"]}
@@ -1,5 +1,42 @@
1
- type setTrue = () => void;
2
- type setFalse = () => void;
3
- type toggle = () => void;
4
- export default function useBooleanState(defaultValue: boolean): [boolean, setTrue, setFalse, toggle];
5
- export {};
1
+ /**
2
+ * This function is a react hook for boolean state that comes with
3
+ * `useCallback`s for 'turning on', 'turning off' and toggling the state.
4
+ *
5
+ * ## Return
6
+ *
7
+ * The return type of `useBooleanState(true)` is an array where:
8
+ *
9
+ * - The first item is a `boolean` (the state).
10
+ * - The second item is `() => void` (a function that sets the state to true).
11
+ * - The third item is `() => void` (a function that sets the state to false).
12
+ * - The fourth item is `() => void` (a function that toggles the state to the
13
+ * opposite of what it currently is).
14
+ *
15
+ * As such, the items in the array can be destructured and named whatever you
16
+ * like:
17
+ *
18
+ * ```js
19
+ * import { useBooleanState } from '@oneblink/apps-react'
20
+ *
21
+ * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =
22
+ * useBooleanState(true)
23
+ * ```
24
+ *
25
+ * These properties can then be used like:
26
+ *
27
+ * ```js
28
+ * openDialog()
29
+ * closeDialog()
30
+ * toggleDialog()
31
+ * ```
32
+ *
33
+ * @param defaultValue
34
+ * @returns
35
+ * @group Hooks
36
+ */
37
+ export default function useBooleanState(defaultValue: boolean): [
38
+ state: boolean,
39
+ setTrue: () => void,
40
+ setFalse: () => void,
41
+ toggle: () => void
42
+ ];
@@ -1,4 +1,40 @@
1
1
  import * as React from 'react';
2
+ /**
3
+ * This function is a react hook for boolean state that comes with
4
+ * `useCallback`s for 'turning on', 'turning off' and toggling the state.
5
+ *
6
+ * ## Return
7
+ *
8
+ * The return type of `useBooleanState(true)` is an array where:
9
+ *
10
+ * - The first item is a `boolean` (the state).
11
+ * - The second item is `() => void` (a function that sets the state to true).
12
+ * - The third item is `() => void` (a function that sets the state to false).
13
+ * - The fourth item is `() => void` (a function that toggles the state to the
14
+ * opposite of what it currently is).
15
+ *
16
+ * As such, the items in the array can be destructured and named whatever you
17
+ * like:
18
+ *
19
+ * ```js
20
+ * import { useBooleanState } from '@oneblink/apps-react'
21
+ *
22
+ * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =
23
+ * useBooleanState(true)
24
+ * ```
25
+ *
26
+ * These properties can then be used like:
27
+ *
28
+ * ```js
29
+ * openDialog()
30
+ * closeDialog()
31
+ * toggleDialog()
32
+ * ```
33
+ *
34
+ * @param defaultValue
35
+ * @returns
36
+ * @group Hooks
37
+ */
2
38
  export default function useBooleanState(defaultValue) {
3
39
  const [state, setState] = React.useState(defaultValue);
4
40
  const turnOn = React.useCallback(() => setState(true), []);
@@ -1 +1 @@
1
- {"version":3,"file":"useBooleanState.js","sourceRoot":"","sources":["../../src/hooks/useBooleanState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAqB;IAErB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC","sourcesContent":["import * as React from 'react'\n\ntype setTrue = () => void\ntype setFalse = () => void\ntype toggle = () => void\n\nexport default function useBooleanState(\n defaultValue: boolean,\n): [boolean, setTrue, setFalse, toggle] {\n const [state, setState] = React.useState(defaultValue)\n const turnOn = React.useCallback(() => setState(true), [])\n const turnOff = React.useCallback(() => setState(false), [])\n const toggle = React.useCallback(() => setState((current) => !current), [])\n return [state, turnOn, turnOff, toggle]\n}\n"]}
1
+ {"version":3,"file":"useBooleanState.js","sourceRoot":"","sources":["../../src/hooks/useBooleanState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAqB;IAOrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC","sourcesContent":["import * as React from 'react'\n\n/**\n * This function is a react hook for boolean state that comes with\n * `useCallback`s for 'turning on', 'turning off' and toggling the state.\n *\n * ## Return\n *\n * The return type of `useBooleanState(true)` is an array where:\n *\n * - The first item is a `boolean` (the state).\n * - The second item is `() => void` (a function that sets the state to true).\n * - The third item is `() => void` (a function that sets the state to false).\n * - The fourth item is `() => void` (a function that toggles the state to the\n * opposite of what it currently is).\n *\n * As such, the items in the array can be destructured and named whatever you\n * like:\n *\n * ```js\n * import { useBooleanState } from '@oneblink/apps-react'\n *\n * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =\n * useBooleanState(true)\n * ```\n *\n * These properties can then be used like:\n *\n * ```js\n * openDialog()\n * closeDialog()\n * toggleDialog()\n * ```\n *\n * @param defaultValue\n * @returns\n * @group Hooks\n */\nexport default function useBooleanState(\n defaultValue: boolean,\n): [\n state: boolean,\n setTrue: () => void,\n setFalse: () => void,\n toggle: () => void,\n] {\n const [state, setState] = React.useState(defaultValue)\n const turnOn = React.useCallback(() => setState(true), [])\n const turnOff = React.useCallback(() => setState(false), [])\n const toggle = React.useCallback(() => setState((current) => !current), [])\n return [state, turnOn, turnOff, toggle]\n}\n"]}
@@ -1,3 +1,43 @@
1
+ /**
2
+ * This function is a react hook for watching for click events outside of a
3
+ * particular element. The hook will add and remove its own `eventListener`.
4
+ *
5
+ * - For performance reasons, it is important to pass a memoised function as the
6
+ * callback argument, eg:
7
+ *
8
+ * ```js
9
+ * React.useCallback(() => {}, [])
10
+ * ```
11
+ *
12
+ * ## Example
13
+ *
14
+ * ```js
15
+ * import * as React from 'react'
16
+ * import { useClickOutsideElement } from '@oneblink/apps-react'
17
+ *
18
+ * const MyComponent = () => {
19
+ * const narrowDivRef = React.useRef(null)
20
+ * useClickOutsideElement(
21
+ * narrowDivRef,
22
+ * React.useCallback(() => {
23
+ * console.log('Wide Div was clicked outside of narrow div...')
24
+ * }, []),
25
+ * )
26
+ *
27
+ * return (
28
+ * <div className="wide-div">
29
+ * <div ref={narrowDivRef} className="narrow-div"></div>
30
+ * </div>
31
+ * )
32
+ * }
33
+ *
34
+ * export default MyComponent
35
+ * ```
36
+ *
37
+ * @param ref
38
+ * @param callback
39
+ * @group Hooks
40
+ */
1
41
  export default function useClickOutsideElement(ref: {
2
42
  current: HTMLElement | null;
3
43
  }, callback: () => void): void;
@@ -1,4 +1,44 @@
1
1
  import * as React from 'react';
2
+ /**
3
+ * This function is a react hook for watching for click events outside of a
4
+ * particular element. The hook will add and remove its own `eventListener`.
5
+ *
6
+ * - For performance reasons, it is important to pass a memoised function as the
7
+ * callback argument, eg:
8
+ *
9
+ * ```js
10
+ * React.useCallback(() => {}, [])
11
+ * ```
12
+ *
13
+ * ## Example
14
+ *
15
+ * ```js
16
+ * import * as React from 'react'
17
+ * import { useClickOutsideElement } from '@oneblink/apps-react'
18
+ *
19
+ * const MyComponent = () => {
20
+ * const narrowDivRef = React.useRef(null)
21
+ * useClickOutsideElement(
22
+ * narrowDivRef,
23
+ * React.useCallback(() => {
24
+ * console.log('Wide Div was clicked outside of narrow div...')
25
+ * }, []),
26
+ * )
27
+ *
28
+ * return (
29
+ * <div className="wide-div">
30
+ * <div ref={narrowDivRef} className="narrow-div"></div>
31
+ * </div>
32
+ * )
33
+ * }
34
+ *
35
+ * export default MyComponent
36
+ * ```
37
+ *
38
+ * @param ref
39
+ * @param callback
40
+ * @group Hooks
41
+ */
2
42
  export default function useClickOutsideElement(ref, callback) {
3
43
  const handleClickOutside = React.useCallback((event) => {
4
44
  if (ref.current && !ref.current.contains(event.target)) {
@@ -1 +1 @@
1
- {"version":3,"file":"useClickOutsideElement.js","sourceRoot":"","sources":["../../src/hooks/useClickOutsideElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,GAAoC,EACpC,QAAoB;IAEpB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAY,EAAE,EAAE;QACf,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,GAAG,CAAC,CAChB,CAAA;IACD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAC1B,CAAC","sourcesContent":["import * as React from 'react'\n\nexport default function useClickOutsideElement(\n ref: { current: HTMLElement | null },\n callback: () => void,\n) {\n const handleClickOutside = React.useCallback(\n (event: Event) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n callback()\n }\n },\n [callback, ref],\n )\n React.useEffect(() => {\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [handleClickOutside])\n}\n"]}
1
+ {"version":3,"file":"useClickOutsideElement.js","sourceRoot":"","sources":["../../src/hooks/useClickOutsideElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,GAAoC,EACpC,QAAoB;IAEpB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAY,EAAE,EAAE;QACf,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,GAAG,CAAC,CAChB,CAAA;IACD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAC1B,CAAC","sourcesContent":["import * as React from 'react'\n\n/**\n * This function is a react hook for watching for click events outside of a\n * particular element. The hook will add and remove its own `eventListener`.\n *\n * - For performance reasons, it is important to pass a memoised function as the\n * callback argument, eg:\n *\n * ```js\n * React.useCallback(() => {}, [])\n * ```\n *\n * ## Example\n *\n * ```js\n * import * as React from 'react'\n * import { useClickOutsideElement } from '@oneblink/apps-react'\n *\n * const MyComponent = () => {\n * const narrowDivRef = React.useRef(null)\n * useClickOutsideElement(\n * narrowDivRef,\n * React.useCallback(() => {\n * console.log('Wide Div was clicked outside of narrow div...')\n * }, []),\n * )\n *\n * return (\n * <div className=\"wide-div\">\n * <div ref={narrowDivRef} className=\"narrow-div\"></div>\n * </div>\n * )\n * }\n *\n * export default MyComponent\n * ```\n *\n * @param ref\n * @param callback\n * @group Hooks\n */\nexport default function useClickOutsideElement(\n ref: { current: HTMLElement | null },\n callback: () => void,\n) {\n const handleClickOutside = React.useCallback(\n (event: Event) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n callback()\n }\n },\n [callback, ref],\n )\n React.useEffect(() => {\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [handleClickOutside])\n}\n"]}
@@ -1,7 +1,6 @@
1
- import { FormTypes } from '@oneblink/types';
1
+ import { FormTypes, SubmissionTypes } from '@oneblink/types';
2
2
  import { conditionalLogicService } from '@oneblink/sdk-core';
3
- import { FormSubmissionModel } from '../types/form';
4
- export default function useConditionalLogic(definition: FormTypes.Form, submission: FormSubmissionModel): {
3
+ export default function useConditionalLogic(definition: FormTypes.Form, submission: SubmissionTypes.S3SubmissionData['submission']): {
5
4
  conditionalLogicError: Error | undefined;
6
5
  formElementsConditionallyShown: conditionalLogicService.FormElementsConditionallyShown;
7
6
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useConditionalLogic.js","sourceRoot":"","sources":["../../src/hooks/useConditionalLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAO5D,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,UAA0B,EAC1B,UAA+B;IAE/B,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAErE,CAAA;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAA;QAC7D,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,8BAA8B,GAClC,KAAK,CAAC,OAAO,CAAiC,GAAG,EAAE;QACjD,OAAO,uBAAuB,CAAC,sCAAsC,CAAC;YACpE,YAAY,EAAE,UAAU,CAAC,QAAQ;YACjC,UAAU;YACV,aAAa;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,qBAAqB;QACrB,8BAA8B;KAC/B,CAAA;AACH,CAAC","sourcesContent":["import { Sentry } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport { conditionalLogicService } from '@oneblink/sdk-core'\n\nimport {\n FormElementsConditionallyShown,\n FormSubmissionModel,\n} from '../types/form'\n\nexport default function useConditionalLogic(\n definition: FormTypes.Form,\n submission: FormSubmissionModel,\n) {\n const [conditionalLogicError, setConditionalLogicError] = React.useState<\n Error | undefined\n >()\n\n const errorCallback = React.useCallback((error: Error) => {\n console.warn('Error while checking conditional logic', error)\n Sentry.captureException(error)\n setConditionalLogicError(error)\n }, [])\n\n const formElementsConditionallyShown =\n React.useMemo<FormElementsConditionallyShown>(() => {\n return conditionalLogicService.generateFormElementsConditionallyShown({\n formElements: definition.elements,\n submission,\n errorCallback,\n })\n }, [definition.elements, submission, errorCallback])\n\n return {\n conditionalLogicError,\n formElementsConditionallyShown,\n }\n}\n"]}
1
+ {"version":3,"file":"useConditionalLogic.js","sourceRoot":"","sources":["../../src/hooks/useConditionalLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAI5D,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,UAA0B,EAC1B,UAA0D;IAE1D,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAErE,CAAA;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAA;QAC7D,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,8BAA8B,GAClC,KAAK,CAAC,OAAO,CAAiC,GAAG,EAAE;QACjD,OAAO,uBAAuB,CAAC,sCAAsC,CAAC;YACpE,YAAY,EAAE,UAAU,CAAC,QAAQ;YACjC,UAAU;YACV,aAAa;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,qBAAqB;QACrB,8BAA8B;KAC/B,CAAA;AACH,CAAC","sourcesContent":["import { Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport { conditionalLogicService } from '@oneblink/sdk-core'\n\nimport { FormElementsConditionallyShown } from '../types/form'\n\nexport default function useConditionalLogic(\n definition: FormTypes.Form,\n submission: SubmissionTypes.S3SubmissionData['submission'],\n) {\n const [conditionalLogicError, setConditionalLogicError] = React.useState<\n Error | undefined\n >()\n\n const errorCallback = React.useCallback((error: Error) => {\n console.warn('Error while checking conditional logic', error)\n Sentry.captureException(error)\n setConditionalLogicError(error)\n }, [])\n\n const formElementsConditionallyShown =\n React.useMemo<FormElementsConditionallyShown>(() => {\n return conditionalLogicService.generateFormElementsConditionallyShown({\n formElements: definition.elements,\n submission,\n errorCallback,\n })\n }, [definition.elements, submission, errorCallback])\n\n return {\n conditionalLogicError,\n formElementsConditionallyShown,\n }\n}\n"]}