@oneblink/apps-react 6.1.1-beta.1 → 6.1.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/OneBlinkAutoSaveForm.d.ts +1 -1
- package/dist/OneBlinkAutoSaveForm.js +2 -1
- package/dist/OneBlinkAutoSaveForm.js.map +1 -1
- package/dist/components/ArcGISWebMap.js +8 -8
- package/dist/components/ArcGISWebMap.js.map +1 -1
- package/dist/components/renderer/FormElementLabelContainer.js +1 -1
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/form-elements/FormElementCheckBoxes.js +3 -1
- package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
- package/dist/form-elements/FormElementRadio.js +3 -1
- package/dist/form-elements/FormElementRadio.js.map +1 -1
- package/dist/hooks/useFormSubmissionAutoSaveState.d.ts +2 -1
- package/dist/hooks/useFormSubmissionAutoSaveState.js +5 -3
- package/dist/hooks/useFormSubmissionAutoSaveState.js.map +1 -1
- package/package.json +2 -2
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { OneBlinkFormUncontrolled } from './OneBlinkForm';
|
3
|
-
declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, onCancel, onSubmit, onSaveDraft, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
|
3
|
+
declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
|
4
4
|
/** Pass a unique key for this submission e.g. the `externalId` the parameter */
|
5
5
|
autoSaveKey: string;
|
6
6
|
/**
|
@@ -3,7 +3,7 @@ import OnLoading from './components/renderer/OnLoading';
|
|
3
3
|
import Modal from './components/renderer/Modal';
|
4
4
|
import OneBlinkFormBase from './OneBlinkFormBase';
|
5
5
|
import useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState';
|
6
|
-
function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, onCancel, onSubmit, onSaveDraft, ...props }) {
|
6
|
+
function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...props }) {
|
7
7
|
const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, } = useFormSubmissionAutoSaveState({
|
8
8
|
form,
|
9
9
|
initialSubmission,
|
@@ -14,6 +14,7 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
|
|
14
14
|
onCancel,
|
15
15
|
onSubmit,
|
16
16
|
onSaveDraft,
|
17
|
+
formIsDisabled: disabled,
|
17
18
|
});
|
18
19
|
if (isLoadingAutoSaveSubmission) {
|
19
20
|
return (React.createElement("div", { className: "cypress-loading has-text-centered" },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;
|
1
|
+
{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;KACF;IAED,IAAI,6BAA6B,EAAE;QACjC,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,kBAAkB,kBAGpB;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,qBAGF,CACR,uGAKC,CACT,CAAA;KACF;IAED,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\n\nfunction OneBlinkAutoSaveForm({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n disabled,\n onCancel,\n onSubmit,\n onSaveDraft,\n ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n autoSaveKey: string\n /**\n * By default, auto save data is removed when the user clicks Submit. If you\n * would like auto save data to persist and clean up the auto save data later,\n * pass `false`.\n */\n removeAutoSaveDataBeforeSubmit?: boolean\n /**\n * By default, auto save data is removed when the user clicks Save Draft. If\n * you would like auto save data to persist and clean up the auto save data\n * later, pass `false`.\n */\n removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n const {\n definition,\n submission,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n setFormSubmission,\n handleNavigateAway,\n lastElementUpdated,\n executedLookups,\n } = useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n autoSaveKey,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n onCancel,\n onSubmit,\n onSaveDraft,\n formIsDisabled: disabled,\n })\n\n if (isLoadingAutoSaveSubmission) {\n return (\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n </div>\n )\n }\n\n if (isAutoSaveSubmissionAvailable) {\n return (\n <Modal\n isOpen\n title=\"Continue?\"\n cardClassName=\"cypress-continue-auto-save\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n onClick={startNewSubmission}\n >\n Start Again\n </button>\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n onClick={continueAutoSaveSubmission}\n autoFocus\n >\n Continue\n </button>\n </>\n }\n >\n We found an in progress submission, would you like to pick up where you\n left off or start again?\n </Modal>\n )\n }\n\n return (\n <OneBlinkFormBase\n {...props}\n isReadOnly={false}\n submission={submission}\n definition={definition}\n onCancel={handleCancel}\n onSubmit={handleSubmit}\n onSaveDraft={handleSaveDraft}\n setFormSubmission={setFormSubmission}\n handleNavigateAway={handleNavigateAway}\n lastElementUpdated={lastElementUpdated}\n executedLookups={executedLookups}\n />\n )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import MapView from '
|
3
|
-
import WebMap from '
|
4
|
-
import Home from '
|
5
|
-
import Search from '
|
6
|
-
import Zoom from '
|
7
|
-
import LayerList from '
|
8
|
-
import Expand from '
|
9
|
-
import BaseMapGallery from '
|
2
|
+
import MapView from '@arcgis/core/views/MapView';
|
3
|
+
import WebMap from '@arcgis/core/WebMap';
|
4
|
+
import Home from '@arcgis/core/widgets/Home';
|
5
|
+
import Search from '@arcgis/core/widgets/Search';
|
6
|
+
import Zoom from '@arcgis/core/widgets/Zoom';
|
7
|
+
import LayerList from '@arcgis/core/widgets/LayerList';
|
8
|
+
import Expand from '@arcgis/core/widgets/Expand';
|
9
|
+
import BaseMapGallery from '@arcgis/core/widgets/BasemapGallery';
|
10
10
|
import OnLoading from '../components/renderer/OnLoading';
|
11
11
|
import MaterialIcon from './MaterialIcon';
|
12
12
|
import '../styles/arcgis-external.css';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ArcGISWebMap.js","sourceRoot":"","sources":["../../src/components/ArcGISWebMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,OAAO,MAAM,
|
1
|
+
{"version":3,"file":"ArcGISWebMap.js","sourceRoot":"","sources":["../../src/components/ArcGISWebMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport MapView from '@arcgis/core/views/MapView'\nimport WebMap from '@arcgis/core/WebMap'\nimport Home from '@arcgis/core/widgets/Home'\nimport Search from '@arcgis/core/widgets/Search'\nimport Zoom from '@arcgis/core/widgets/Zoom'\nimport LayerList from '@arcgis/core/widgets/LayerList'\nimport Expand from '@arcgis/core/widgets/Expand'\nimport BaseMapGallery from '@arcgis/core/widgets/BasemapGallery'\nimport OnLoading from '../components/renderer/OnLoading'\nimport MaterialIcon from './MaterialIcon'\n\nimport '../styles/arcgis-external.css'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\n\ntype Props = {\n element: FormTypes.ArcGISWebMapElement\n id: string\n 'aria-describedby'?: string\n}\n\nfunction FormElementArcGISWebMap({ element, id, ...props }: Props) {\n const [loadError, setLoadError] = React.useState<Error>()\n const ref = React.useRef<HTMLDivElement | null>(null)\n const layerPanelRef = React.useRef<Expand | null>(null)\n const mapGalleryPanelRef = React.useRef<Expand | null>(null)\n const [isLoading, setIsLoading] = React.useState<boolean>(true)\n const isPageVisible = useIsPageVisible()\n\n React.useEffect(() => {\n let view: MapView\n\n const loadMap = async () => {\n try {\n const map = new WebMap({\n portalItem: {\n id: element.webMapId,\n },\n })\n await map.load()\n\n view = new MapView({\n map: map,\n container: ref.current || undefined,\n })\n\n // remove default widgets\n const components = view.ui.getComponents()\n for (const component of components) {\n view.ui.remove(component)\n }\n\n view.ui.add(\n new Search({\n view,\n }),\n 'top-left',\n )\n view.ui.add(\n new Home({\n view,\n }),\n 'top-left',\n )\n view.ui.add(\n new Zoom({\n view,\n }),\n 'bottom-left',\n )\n\n const layerList = new LayerList({\n view,\n })\n\n layerPanelRef.current = new Expand({\n expandIcon: 'layers',\n view,\n content: layerList,\n expanded: element.showLayerPanel,\n mode: 'floating',\n visible: false,\n })\n\n view.ui.add(layerPanelRef.current, 'top-right')\n\n const baseMapGallery = new BaseMapGallery({ view })\n\n mapGalleryPanelRef.current = new Expand({\n expandIcon: 'basemap',\n view,\n content: baseMapGallery,\n mode: 'floating',\n visible: false,\n })\n\n view.ui.add(mapGalleryPanelRef.current, 'bottom-right')\n\n // once the view has loaded\n view.when(() => {\n setIsLoading(false)\n })\n } catch (e) {\n console.warn('Error while trying to load arcgis web map ', e)\n setLoadError(e as Error)\n setIsLoading(false)\n }\n }\n\n loadMap()\n\n return () => {\n if (view) {\n view.destroy()\n }\n }\n }, [element])\n\n React.useEffect(() => {\n if (!isLoading) {\n if (isPageVisible) {\n if (layerPanelRef.current) {\n layerPanelRef.current.visible = true\n }\n if (mapGalleryPanelRef.current) {\n mapGalleryPanelRef.current.visible = true\n }\n } else if (!isPageVisible) {\n if (layerPanelRef.current) {\n layerPanelRef.current.visible = false\n }\n if (mapGalleryPanelRef.current) {\n mapGalleryPanelRef.current.visible = false\n }\n }\n }\n }, [isPageVisible, isLoading])\n\n if (loadError) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <MaterialIcon className=\"icon-large has-margin-bottom-6 has-text-warning\">\n error\n </MaterialIcon>\n <h4 className=\"title is-4\">We were unable to display your web map</h4>\n <p>{loadError.message}</p>\n </div>\n </figure>\n )\n }\n\n return (\n <>\n {isLoading && <OnLoading />}\n <div\n className=\"arcgis-web-map\"\n ref={ref}\n id={id}\n aria-describedby={props['aria-describedby']}\n />\n </>\n )\n}\n\nexport default React.memo(FormElementArcGISWebMap)\n"]}
|
@@ -9,7 +9,7 @@ function FormElementLabelContainer({ className, element, id, required, children,
|
|
9
9
|
leading,
|
10
10
|
React.createElement("label", { className: clsx('ob-label', {
|
11
11
|
'ob-label__required is-required': required,
|
12
|
-
}), htmlFor: id }, element.label),
|
12
|
+
}), htmlFor: id, id: `${id}-label` }, element.label),
|
13
13
|
element.hint &&
|
14
14
|
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(HintTooltip, { hint: element.hint, inputId: id }))),
|
15
15
|
element.hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-hint-text__container" },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,kBAAkB,MAAM,gCAAgC,CAAA;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,
|
1
|
+
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,kBAAkB,MAAM,gCAAgC,CAAA;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,EACX,EAAE,EAAE,GAAG,EAAE,QAAQ,IAEhB,OAAO,CAAC,KAAK,CACR;YACP,OAAO,CAAC,IAAI;gBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,CACjD,CACC;QACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,CAC/C,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAC5D,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK,EACtB,EAAE,EAAE,GAAG,OAAO,OAAO;QAErB,2BAAG,SAAS,EAAC,6CAA6C,WAAS,CAC3D,CACX,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,cAAc,EAAC,EAAE,EAAE,GAAG,OAAO,OAAO,GAAI,CAC1E,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport useReplaceableText from '../../hooks/useReplaceableText'\nimport QuillHTML from '../QuillHTML'\n\nfunction FormElementLabelContainer({\n className,\n element,\n id,\n required,\n children,\n leading,\n}: {\n className: string\n element: FormTypes.FormElementBase\n id: string\n required: boolean\n children: React.ReactNode\n leading?: React.ReactNode\n}) {\n return (\n <div className={clsx('ob-form__element', className)}>\n <div className=\"label ob-label__container\">\n {leading}\n <label\n className={clsx('ob-label', {\n 'ob-label__required is-required': required,\n })}\n htmlFor={id}\n id={`${id}-label`}\n >\n {element.label}\n </label>\n {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} inputId={id} />\n )}\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-hint-text__container\">\n <HintBelowLabel hint={element.hint} inputId={id} />\n </div>\n )}\n {children}\n </div>\n )\n}\n\nexport function HintTooltip({\n hint,\n inputId,\n}: {\n hint: string\n inputId: string\n}) {\n const html = useReplaceableText(hint)\n\n return (\n <Tooltip\n title={<QuillHTML html={html} className=\"ob-hint-tooltip\" />}\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n id={`${inputId}-hint`}\n >\n <i className=\"material-icons has-text-grey ob-label__hint\">info</i>\n </Tooltip>\n )\n}\n\nexport function HintBelowLabel({\n hint,\n inputId,\n}: {\n hint: string\n inputId: string\n}) {\n const html = useReplaceableText(hint)\n\n return (\n <QuillHTML html={html} className=\"ob-hint-text\" id={`${inputId}-hint`} />\n )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
|
@@ -77,7 +77,9 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
|
|
77
77
|
'is-primary': isSelected,
|
78
78
|
'is-light': !isSelected,
|
79
79
|
}), "aria-describedby": ariaDescribedby }));
|
80
|
-
})))) : (React.createElement("div", { className: "ob-checkbox-container" }
|
80
|
+
})))) : (React.createElement("div", { role: "group", className: "ob-checkbox-container", "aria-labelledby": `${id}-label`, "aria-describedby": element.hint && element.hintPosition === 'BELOW_LABEL'
|
81
|
+
? `${id}-hint`
|
82
|
+
: undefined }, filteredOptions.map((option, index) => {
|
81
83
|
const isSelected = selectedValues.includes(option.value);
|
82
84
|
return (React.createElement("div", { className: "control", key: index },
|
83
85
|
React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div className=\"ob-button-radio-container\">\n <div className=\"buttons ob-buttons ob-buttons-radio\">\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <OptionButton\n key={index}\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n />\n )\n })}\n </div>\n </div>\n ) : (\n <div className=\"ob-checkbox-container\">\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
|
1
|
+
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div className=\"ob-button-radio-container\">\n <div className=\"buttons ob-buttons ob-buttons-radio\">\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <OptionButton\n key={index}\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n />\n )\n })}\n </div>\n </div>\n ) : (\n <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={\n element.hint && element.hintPosition === 'BELOW_LABEL'\n ? `${id}-hint`\n : undefined\n }\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
|
@@ -20,7 +20,9 @@ function FormElementRadio({ id, element, value, onChange, conditionallyShownOpti
|
|
20
20
|
const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
|
21
21
|
return (React.createElement("div", { className: "cypress-radio-element" },
|
22
22
|
React.createElement(FormElementLabelContainer, { className: "ob-radio", id: id, element: element, required: element.required },
|
23
|
-
React.createElement(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement }, !element.buttons ? (React.createElement(RadioGroup, { className: "ob-radio-container"
|
23
|
+
React.createElement(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement }, !element.buttons ? (React.createElement(RadioGroup, { className: "ob-radio-container", "aria-labelledby": `${id}-label`, "aria-describedby": element.hint && element.hintPosition === 'BELOW_LABEL'
|
24
|
+
? `${id}-hint`
|
25
|
+
: undefined }, filteredOptions.map((option) => (React.createElement("div", { className: "control", key: option.value },
|
24
26
|
React.createElement("label", { className: "radio ob-radio__input-label cypress-radio-label", htmlFor: `${id}_${option.value}` },
|
25
27
|
React.createElement(Radio, { color: "primary", className: "ob-radio__input cypress-radio-control", classes: {
|
26
28
|
checked: 'ob-radio__input-checked',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,kBAAkB,MAAM,2CAA2C,CAAA;AAC1E,OAAO,qBAAqB,MAAM,gCAAgC,CAAA;AAElE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAOxF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAe1E,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,gCAAgC,EAChC,iBAAiB,EACjB,wBAAwB,EACxB,oBAAoB,EACpB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,OAAO;QACP,KAAK;QACL,QAAQ;QACR,gCAAgC;QAChC,oBAAoB;KACrB,CAAC,CAAA;IAEF,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,gCAAgC,EAAE,gCAAgC,IAEjE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,oBAAC,UAAU,
|
1
|
+
{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Radio, RadioGroup } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.RadioButtonElement\n value: unknown\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementRadio({\n id,\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n validationMessage,\n displayValidationMessage,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-radio-element\">\n <FormElementLabelContainer\n className=\"ob-radio\"\n id={id}\n element={element}\n required={element.required}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {!element.buttons ? (\n <RadioGroup\n className=\"ob-radio-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={\n element.hint && element.hintPosition === 'BELOW_LABEL'\n ? `${id}-hint`\n : undefined\n }\n >\n {filteredOptions.map((option) => (\n <div className=\"control\" key={option.value}>\n <label\n className=\"radio ob-radio__input-label cypress-radio-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Radio\n color=\"primary\"\n className=\"ob-radio__input cypress-radio-control\"\n classes={{\n checked: 'ob-radio__input-checked',\n }}\n value={option.value || ''}\n id={`${id}_${option.value}`}\n disabled={element.readOnly}\n checked={value === option.value}\n onChange={(e) => {\n setIsDirty()\n onChange(element, {\n value: e.target.value,\n })\n }}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n />\n {` ${option.label}`}\n </label>\n </div>\n ))}\n </RadioGroup>\n ) : (\n <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n {filteredOptions.map((option) => {\n const isSelected = value === option.value\n return (\n <div className=\"ob-button-radio-container\" key={option.value}>\n <OptionButton\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => {\n setIsDirty()\n onChange(element, {\n value: option.value,\n })\n }}\n className={clsx(\n 'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n />\n </div>\n )\n })}\n </div>\n )}\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\nexport default React.memo(FormElementRadio)\n"]}
|
@@ -11,11 +11,12 @@ import { FormTypes, SubmissionTypes } from '@oneblink/types';
|
|
11
11
|
* @returns
|
12
12
|
* @group Hooks
|
13
13
|
*/
|
14
|
-
export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, onCancel, onSubmit, onSaveDraft, }: {
|
14
|
+
export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, }: {
|
15
15
|
form: FormTypes.Form;
|
16
16
|
removeAutoSaveDataBeforeSubmit?: boolean;
|
17
17
|
removeAutoSaveDataBeforeSaveDraft?: boolean;
|
18
18
|
autoSaveKey: string;
|
19
|
+
formIsDisabled?: boolean;
|
19
20
|
onCancel: () => unknown;
|
20
21
|
onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown;
|
21
22
|
initialSubmission?: SubmissionTypes.S3SubmissionData['submission'];
|
@@ -12,7 +12,7 @@ import useFormSubmissionState from './useFormSubmissionState';
|
|
12
12
|
* @returns
|
13
13
|
* @group Hooks
|
14
14
|
*/
|
15
|
-
export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, onCancel, onSubmit, onSaveDraft, }) {
|
15
|
+
export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, }) {
|
16
16
|
const [{ definition, submission, lastElementUpdated, executedLookups }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement);
|
17
17
|
const [{ isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement }, setAutoSaveState,] = React.useState({
|
18
18
|
isLoadingAutoSaveSubmission: true,
|
@@ -130,10 +130,12 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
|
|
130
130
|
const newFormSubmission = typeof formSubmission === 'function'
|
131
131
|
? formSubmission(currentFormSubmission)
|
132
132
|
: formSubmission;
|
133
|
-
|
133
|
+
if (!formIsDisabled) {
|
134
|
+
throttledAutoSave(newFormSubmission.submission, newFormSubmission.lastElementUpdated);
|
135
|
+
}
|
134
136
|
return newFormSubmission;
|
135
137
|
});
|
136
|
-
}, [setFormSubmission, throttledAutoSave]);
|
138
|
+
}, [setFormSubmission, throttledAutoSave, formIsDisabled]);
|
137
139
|
const startNewSubmission = React.useCallback(() => {
|
138
140
|
deleteAutoSaveSubmission();
|
139
141
|
setAutoSaveState({
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormElement } from '@oneblink/types/typescript/forms'\n\n/**\n * Use this if you want to implement a controlled auto saving form. See\n * {@link OneBlinkFormControlled} for a full example. If you do not need to\n * control the `submission` or `definition` properties, you can use the\n * {@link OneBlinkAutoSaveForm} component.\n *\n * @param options\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n autoSaveKey,\n onCancel,\n onSubmit,\n onSaveDraft,\n}: {\n form: FormTypes.Form\n removeAutoSaveDataBeforeSubmit?: boolean\n removeAutoSaveDataBeforeSaveDraft?: boolean\n autoSaveKey: string\n onCancel: () => unknown\n onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n initialSubmission?: SubmissionTypes.S3SubmissionData['submission']\n resumeAtElement?: FormTypes.FormElement\n onSaveDraft?: (\n newDraftSubmission: submissionService.NewDraftSubmission,\n ) => unknown\n}) {\n const [\n { definition, submission, lastElementUpdated, executedLookups },\n setFormSubmission,\n ] = useFormSubmissionState(form, initialSubmission, resumeAtElement)\n\n const [\n { isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement },\n setAutoSaveState,\n ] = React.useState<{\n isLoadingAutoSaveSubmission: boolean\n autoSaveSubmission: SubmissionTypes.S3SubmissionData['submission'] | null\n autoSaveElement: FormElement | null\n }>({\n isLoadingAutoSaveSubmission: true,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n\n const throttledAutoSave = React.useMemo(() => {\n return _throttle(\n (\n model: SubmissionTypes.S3SubmissionData['submission'],\n lastElementUpdated?: FormElement,\n ) => {\n console.log('Auto saving...')\n autoSaveService\n .upsertAutoSaveData(definition.id, autoSaveKey, model)\n .then(() => {\n if (lastElementUpdated) {\n return autoSaveService.upsertAutoSaveData<FormElement>(\n definition.id,\n `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n lastElementUpdated,\n )\n }\n })\n .catch((error) => {\n console.warn('Error while auto saving', error)\n Sentry.captureException(error)\n })\n },\n 9580, // https://en.wikipedia.org/wiki/100_metres\n { trailing: true, leading: false },\n )\n }, [autoSaveKey, definition.id])\n\n const cancelAutoSave = React.useCallback(() => {\n if (throttledAutoSave) {\n throttledAutoSave.cancel()\n }\n }, [throttledAutoSave])\n\n const deleteAutoSaveSubmission = React.useCallback(() => {\n return autoSaveService\n .deleteAutoSaveData(definition.id, autoSaveKey)\n .catch((error) => {\n console.warn('Error removing auto save data: ', error)\n Sentry.captureException(error)\n })\n }, [autoSaveKey, definition.id])\n\n const handleSubmit = React.useCallback(\n (submissionResult: submissionService.NewFormSubmission) => {\n cancelAutoSave()\n if (removeAutoSaveDataBeforeSubmit !== false) {\n deleteAutoSaveSubmission()\n }\n onSubmit(submissionResult)\n },\n [\n cancelAutoSave,\n deleteAutoSaveSubmission,\n onSubmit,\n removeAutoSaveDataBeforeSubmit,\n ],\n )\n\n const handleSaveDraft = React.useMemo(() => {\n if (onSaveDraft) {\n return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n cancelAutoSave()\n if (removeAutoSaveDataBeforeSaveDraft !== false) {\n deleteAutoSaveSubmission()\n }\n if (onSaveDraft) {\n onSaveDraft(newDraftSubmission)\n }\n }\n }\n }, [\n cancelAutoSave,\n deleteAutoSaveSubmission,\n onSaveDraft,\n removeAutoSaveDataBeforeSaveDraft,\n ])\n\n const handleNavigateAway = React.useCallback(() => {\n cancelAutoSave()\n deleteAutoSaveSubmission()\n }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n const handleCancel = React.useCallback(() => {\n cancelAutoSave()\n deleteAutoSaveSubmission()\n onCancel()\n }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n React.useEffect(() => {\n let ignore = false\n const loadAutoSaveData = async () => {\n try {\n const autoSaveSubmission = await autoSaveService.getAutoSaveData<\n SubmissionTypes.S3SubmissionData['submission']\n >(definition.id, autoSaveKey)\n const autoSaveElement =\n await autoSaveService.getAutoSaveData<FormElement>(\n definition.id,\n `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n )\n if (!ignore) {\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission,\n autoSaveElement,\n })\n }\n } catch (error) {\n console.warn('Error loading auto save data', error)\n Sentry.captureException(error)\n if (!ignore) {\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }\n }\n }\n loadAutoSaveData()\n return () => {\n ignore = true\n }\n }, [autoSaveKey, definition.id])\n\n // Clean up throttle function on unmount\n React.useEffect(() => {\n return () => {\n cancelAutoSave()\n }\n }, [cancelAutoSave])\n\n const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n (formSubmission) => {\n setFormSubmission((currentFormSubmission) => {\n const newFormSubmission =\n typeof formSubmission === 'function'\n ? formSubmission(currentFormSubmission)\n : formSubmission\n\n throttledAutoSave(\n newFormSubmission.submission,\n newFormSubmission.lastElementUpdated,\n )\n\n return newFormSubmission\n })\n },\n [setFormSubmission, throttledAutoSave],\n )\n\n const startNewSubmission = React.useCallback(() => {\n deleteAutoSaveSubmission()\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }, [deleteAutoSaveSubmission])\n\n const continueAutoSaveSubmission = React.useCallback(() => {\n if (autoSaveSubmission) {\n setFormSubmission((currentFormSubmission) => ({\n ...currentFormSubmission,\n submission: autoSaveSubmission,\n lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n }))\n }\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }, [autoSaveSubmission, setFormSubmission, autoSaveElement])\n\n React.useEffect(() => {\n if (form.continueWithAutosave) {\n continueAutoSaveSubmission()\n }\n }, [continueAutoSaveSubmission, form.continueWithAutosave])\n\n return {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable:\n autoSaveSubmission !== null && !form.continueWithAutosave,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n handleNavigateAway,\n setFormSubmission: setFormSubmissionAutoSave,\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormElement } from '@oneblink/types/typescript/forms'\n\n/**\n * Use this if you want to implement a controlled auto saving form. See\n * {@link OneBlinkFormControlled} for a full example. If you do not need to\n * control the `submission` or `definition` properties, you can use the\n * {@link OneBlinkAutoSaveForm} component.\n *\n * @param options\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionAutoSaveState({\n form,\n initialSubmission,\n resumeAtElement,\n removeAutoSaveDataBeforeSubmit,\n removeAutoSaveDataBeforeSaveDraft,\n autoSaveKey,\n formIsDisabled,\n onCancel,\n onSubmit,\n onSaveDraft,\n}: {\n form: FormTypes.Form\n removeAutoSaveDataBeforeSubmit?: boolean\n removeAutoSaveDataBeforeSaveDraft?: boolean\n autoSaveKey: string\n formIsDisabled?: boolean\n onCancel: () => unknown\n onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n initialSubmission?: SubmissionTypes.S3SubmissionData['submission']\n resumeAtElement?: FormTypes.FormElement\n onSaveDraft?: (\n newDraftSubmission: submissionService.NewDraftSubmission,\n ) => unknown\n}) {\n const [\n { definition, submission, lastElementUpdated, executedLookups },\n setFormSubmission,\n ] = useFormSubmissionState(form, initialSubmission, resumeAtElement)\n\n const [\n { isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement },\n setAutoSaveState,\n ] = React.useState<{\n isLoadingAutoSaveSubmission: boolean\n autoSaveSubmission: SubmissionTypes.S3SubmissionData['submission'] | null\n autoSaveElement: FormElement | null\n }>({\n isLoadingAutoSaveSubmission: true,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n\n const throttledAutoSave = React.useMemo(() => {\n return _throttle(\n (\n model: SubmissionTypes.S3SubmissionData['submission'],\n lastElementUpdated?: FormElement,\n ) => {\n console.log('Auto saving...')\n autoSaveService\n .upsertAutoSaveData(definition.id, autoSaveKey, model)\n .then(() => {\n if (lastElementUpdated) {\n return autoSaveService.upsertAutoSaveData<FormElement>(\n definition.id,\n `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n lastElementUpdated,\n )\n }\n })\n .catch((error) => {\n console.warn('Error while auto saving', error)\n Sentry.captureException(error)\n })\n },\n 9580, // https://en.wikipedia.org/wiki/100_metres\n { trailing: true, leading: false },\n )\n }, [autoSaveKey, definition.id])\n\n const cancelAutoSave = React.useCallback(() => {\n if (throttledAutoSave) {\n throttledAutoSave.cancel()\n }\n }, [throttledAutoSave])\n\n const deleteAutoSaveSubmission = React.useCallback(() => {\n return autoSaveService\n .deleteAutoSaveData(definition.id, autoSaveKey)\n .catch((error) => {\n console.warn('Error removing auto save data: ', error)\n Sentry.captureException(error)\n })\n }, [autoSaveKey, definition.id])\n\n const handleSubmit = React.useCallback(\n (submissionResult: submissionService.NewFormSubmission) => {\n cancelAutoSave()\n if (removeAutoSaveDataBeforeSubmit !== false) {\n deleteAutoSaveSubmission()\n }\n onSubmit(submissionResult)\n },\n [\n cancelAutoSave,\n deleteAutoSaveSubmission,\n onSubmit,\n removeAutoSaveDataBeforeSubmit,\n ],\n )\n\n const handleSaveDraft = React.useMemo(() => {\n if (onSaveDraft) {\n return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n cancelAutoSave()\n if (removeAutoSaveDataBeforeSaveDraft !== false) {\n deleteAutoSaveSubmission()\n }\n if (onSaveDraft) {\n onSaveDraft(newDraftSubmission)\n }\n }\n }\n }, [\n cancelAutoSave,\n deleteAutoSaveSubmission,\n onSaveDraft,\n removeAutoSaveDataBeforeSaveDraft,\n ])\n\n const handleNavigateAway = React.useCallback(() => {\n cancelAutoSave()\n deleteAutoSaveSubmission()\n }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n const handleCancel = React.useCallback(() => {\n cancelAutoSave()\n deleteAutoSaveSubmission()\n onCancel()\n }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n React.useEffect(() => {\n let ignore = false\n const loadAutoSaveData = async () => {\n try {\n const autoSaveSubmission = await autoSaveService.getAutoSaveData<\n SubmissionTypes.S3SubmissionData['submission']\n >(definition.id, autoSaveKey)\n const autoSaveElement =\n await autoSaveService.getAutoSaveData<FormElement>(\n definition.id,\n `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n )\n if (!ignore) {\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission,\n autoSaveElement,\n })\n }\n } catch (error) {\n console.warn('Error loading auto save data', error)\n Sentry.captureException(error)\n if (!ignore) {\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }\n }\n }\n loadAutoSaveData()\n return () => {\n ignore = true\n }\n }, [autoSaveKey, definition.id])\n\n // Clean up throttle function on unmount\n React.useEffect(() => {\n return () => {\n cancelAutoSave()\n }\n }, [cancelAutoSave])\n\n const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n (formSubmission) => {\n setFormSubmission((currentFormSubmission) => {\n const newFormSubmission =\n typeof formSubmission === 'function'\n ? formSubmission(currentFormSubmission)\n : formSubmission\n\n if (!formIsDisabled) {\n throttledAutoSave(\n newFormSubmission.submission,\n newFormSubmission.lastElementUpdated,\n )\n }\n\n return newFormSubmission\n })\n },\n [setFormSubmission, throttledAutoSave, formIsDisabled],\n )\n\n const startNewSubmission = React.useCallback(() => {\n deleteAutoSaveSubmission()\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }, [deleteAutoSaveSubmission])\n\n const continueAutoSaveSubmission = React.useCallback(() => {\n if (autoSaveSubmission) {\n setFormSubmission((currentFormSubmission) => ({\n ...currentFormSubmission,\n submission: autoSaveSubmission,\n lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n }))\n }\n setAutoSaveState({\n isLoadingAutoSaveSubmission: false,\n autoSaveSubmission: null,\n autoSaveElement: null,\n })\n }, [autoSaveSubmission, setFormSubmission, autoSaveElement])\n\n React.useEffect(() => {\n if (form.continueWithAutosave) {\n continueAutoSaveSubmission()\n }\n }, [continueAutoSaveSubmission, form.continueWithAutosave])\n\n return {\n definition,\n submission,\n lastElementUpdated,\n executedLookups,\n isLoadingAutoSaveSubmission,\n isAutoSaveSubmissionAvailable:\n autoSaveSubmission !== null && !form.continueWithAutosave,\n startNewSubmission,\n continueAutoSaveSubmission,\n handleSubmit,\n handleCancel,\n handleSaveDraft,\n handleNavigateAway,\n setFormSubmission: setFormSubmissionAutoSave,\n }\n}\n"]}
|
package/package.json
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
{
|
2
2
|
"name": "@oneblink/apps-react",
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
4
|
-
"version": "6.1.1-beta.
|
4
|
+
"version": "6.1.1-beta.3",
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
6
6
|
"bugs": {
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
8
8
|
},
|
9
9
|
"dependencies": {
|
10
|
+
"@arcgis/core": "~4.29.10",
|
10
11
|
"@emotion/react": "^11.11.3",
|
11
12
|
"@emotion/styled": "^11.11.0",
|
12
13
|
"@oneblink/sdk-core": "^6.2.0-beta.5",
|
@@ -40,7 +41,6 @@
|
|
40
41
|
"xml2js": "^0.6.2"
|
41
42
|
},
|
42
43
|
"devDependencies": {
|
43
|
-
"@arcgis/core": "~4.29.10",
|
44
44
|
"@babel/preset-env": "^7.23.9",
|
45
45
|
"@microsoft/eslint-plugin-sdl": "^0.2.2",
|
46
46
|
"@mui/lab": "^5.0.0-alpha.152",
|