diff --git a/src/components/ArcGISWebMap.tsx b/src/components/ArcGISWebMap.tsx index ad392757..35a4e6ec 100644 --- a/src/components/ArcGISWebMap.tsx +++ b/src/components/ArcGISWebMap.tsx @@ -12,7 +12,7 @@ import OnLoading from '../components/renderer/OnLoading' import MaterialIcon from './MaterialIcon' import '../styles/arcgis-external.css' -import usePage from '../hooks/usePage' +import useIsPageVisible from '../hooks/useIsPageVisible' type Props = { element: FormTypes.ArcGISWebMapElement @@ -26,7 +26,7 @@ function FormElementArcGISWebMap({ element, id, ...props }: Props) { const layerPanelRef = React.useRef(null) const mapGalleryPanelRef = React.useRef(null) const [isLoading, setIsLoading] = React.useState(true) - const { isPageVisible } = usePage() + const isPageVisible = useIsPageVisible() React.useEffect(() => { let view: MapView diff --git a/src/components/renderer/LookupNotification.tsx b/src/components/renderer/LookupNotification.tsx index 53bebfaf..4e9b7f27 100644 --- a/src/components/renderer/LookupNotification.tsx +++ b/src/components/renderer/LookupNotification.tsx @@ -3,8 +3,6 @@ import clsx from 'clsx' import { generateHeaders } from '@oneblink/apps/dist/services/fetch' import { Sentry, formService } from '@oneblink/apps' import { FormTypes, SubmissionTypes } from '@oneblink/types' -import { formElementsService } from '@oneblink/sdk-core' -import _cloneDeep from 'lodash.clonedeep' import useIsOffline from '../../hooks/useIsOffline' import OnLoading from './OnLoading' @@ -19,7 +17,6 @@ import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext' import useFormIsReadOnly from '../../hooks/useFormIsReadOnly' import useIsMounted from '../../hooks/useIsMounted' import useFormElementLookups from '../../hooks/useFormElementLookups' -import usePage from '../../hooks/usePage' import mergeExecutedLookups from '../../utils/merge-executed-lookups' import { FormElementLookupHandler, ExecutedLookups } from '../../types/form' @@ -98,8 +95,6 @@ function LookupNotificationComponent({ ) }, [formElementDataLookup, formElementElementLookup]) - const { pageId } = usePage() - const mergeLookupData = React.useCallback( ({ newValue, @@ -155,17 +150,9 @@ function LookupNotificationComponent({ } } - const clonedElements = _cloneDeep(definition.elements) - - formElementsService.forEachFormElement(clonedElements, (el) => { - if (el.type === 'page' && el.id === pageId) { - el.elements = allElements - } - }) - return { elements: allElements, - submission: generateDefaultData(clonedElements, { + submission: generateDefaultData(allElements, { ...submission, [element.name]: newValue, ...dataLookupResult, @@ -181,7 +168,7 @@ function LookupNotificationComponent({ } }) }, - [element, injectPagesAfter, onLookup, definition.elements, pageId], + [element, injectPagesAfter, onLookup], ) const isNotStaticLookup = React.useMemo(() => { diff --git a/src/components/renderer/PageFormElements.tsx b/src/components/renderer/PageFormElements.tsx index f20e2870..a7263fad 100644 --- a/src/components/renderer/PageFormElements.tsx +++ b/src/components/renderer/PageFormElements.tsx @@ -11,7 +11,7 @@ import { SetFormSubmission, UpdateFormElementsHandler, } from '../../types/form' -import { PageProvider } from '../../hooks/usePage' +import { IsPageVisibleProvider } from '../../hooks/useIsPageVisible' import { FlatpickrGuidProvider } from '../../hooks/useFlatpickrGuid' export type Props = { @@ -122,7 +122,7 @@ function PageFormElements({ ) return ( - +
-
+ ) } diff --git a/src/form-elements/FormElementNumber.tsx b/src/form-elements/FormElementNumber.tsx index 99e8c8b6..16b7bd51 100644 --- a/src/form-elements/FormElementNumber.tsx +++ b/src/form-elements/FormElementNumber.tsx @@ -5,7 +5,7 @@ import LookupButton from '../components/renderer/LookupButton' import { FormTypes } from '@oneblink/types' import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer' import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form' -import usePage from '../hooks/usePage' +import useIsPageVisible from '../hooks/useIsPageVisible' import { LookupNotificationContext } from '../hooks/useLookupNotification' import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby' import MaterialIcon from '../components/MaterialIcon' @@ -30,7 +30,7 @@ function FormElementNumber({ setIsDirty, }: Props) { const ariaDescribedby = useElementAriaDescribedby(id, element) - const { isPageVisible } = usePage() + const isPageVisible = useIsPageVisible() const text = React.useMemo( () => (typeof value === 'number' ? value.toString() : ''), diff --git a/src/form-elements/FormElementSignature.tsx b/src/form-elements/FormElementSignature.tsx index 5e134438..8100a951 100644 --- a/src/form-elements/FormElementSignature.tsx +++ b/src/form-elements/FormElementSignature.tsx @@ -13,7 +13,7 @@ import AttachmentStatus from '../components/renderer/attachments/AttachmentStatu import { canvasToBlob } from '../services/blob-utils' import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable' import { FormElementValueChangeHandler } from '../types/form' -import usePage from '../hooks/usePage' +import useIsPageVisible from '../hooks/useIsPageVisible' import ProgressBar from '../components/renderer/attachments/ProgressBar' import { IsDirtyProps } from '../types/form' @@ -36,7 +36,7 @@ function FormElementSignature({ setIsDirty, isDirty, }: Props) { - const { isPageVisible } = usePage() + const isPageVisible = useIsPageVisible() const handleChange = React.useCallback< FormElementValueChangeHandler diff --git a/src/hooks/useIsPageVisible.tsx b/src/hooks/useIsPageVisible.tsx new file mode 100644 index 00000000..6d6fdfb3 --- /dev/null +++ b/src/hooks/useIsPageVisible.tsx @@ -0,0 +1,23 @@ +import * as React from 'react' + +type IsPageVisibleContextValue = boolean + +type Props = { + isPageVisible: IsPageVisibleContextValue + children: React.ReactNode +} + +const IsPageVisibleContext = + React.createContext(false) + +export function IsPageVisibleProvider({ isPageVisible, children }: Props) { + return ( + + {children} + + ) +} + +export default function useIsPageVisible() { + return React.useContext(IsPageVisibleContext) +} diff --git a/src/hooks/usePage.tsx b/src/hooks/usePage.tsx deleted file mode 100644 index b1bd25c9..00000000 --- a/src/hooks/usePage.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' - -type PageContextValue = { - isPageVisible: boolean - pageId: string -} - -type Props = { - isPageVisible: PageContextValue['isPageVisible'] - pageId: PageContextValue['pageId'] - children: React.ReactNode -} - -const PageContext = React.createContext({ - isPageVisible: false, - pageId: '', -}) - -export function PageProvider({ isPageVisible, pageId, children }: Props) { - const value = React.useMemo( - () => ({ - isPageVisible, - pageId, - }), - [isPageVisible, pageId], - ) - - return {children} -} - -export default function usePage() { - return React.useContext(PageContext) -}