diff --git a/MIGRATION.md b/MIGRATION.md index 40850cb..7e7ade5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,5 +1,12 @@ ## Migrating from v0.x to v1.0 +### azure-maps-control dependency +`azure-maps-control` is installed as a peerDependencies package, you will need to add it to your package.json. +``` +npm install --save azure-maps-control@next +``` +This will install `azure-maps-control` v3 to your application. You may upgrade it independently in the future. See [AzureMaps WebSDK release notes](https://learn.microsoft.com/azure/azure-maps/release-notes-map-control) for a list of new features and bug fixes. + ### Styling v1.0 removes the internal css import from `azure-maps-control` to accommodate usage in Next.js. You will need to add the following stylesheet to your application manually. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly. ```javascript diff --git a/__mocks__/azure-maps-control.js b/__mocks__/azure-maps-control.js index cc0955c..1c93dd7 100644 --- a/__mocks__/azure-maps-control.js +++ b/__mocks__/azure-maps-control.js @@ -67,6 +67,7 @@ module.exports = { isOpen: jest.fn(() => true), open: jest.fn(() => false), togglePopup: jest.fn(), + setOptions: jest.fn(), close: jest.fn() } })) diff --git a/package.json b/package.json index c26fd63..2184526 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-azure-maps", - "version": "1.0.0-beta.1", + "version": "1.0.0-beta.2", "description": "React Wrapper for Azure Maps", "keywords": [ "react", @@ -94,6 +94,7 @@ "@types/jest": "^26.0.15", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "azure-maps-control": "^3.0.0-preview.7", "babel-preset-env": "^1.7.0", "concurrently": "^5.3.0", "cross-env": "^7.0.2", @@ -118,13 +119,11 @@ "typescript": "^4.1.2" }, "peerDependencies": { - "azure-maps-control": "^3.0.0-preview.6", - "guid-typescript": "^1.0.9", + "azure-maps-control": "^3.0.0-preview.7", "react": "^17.0.2 || ^18.0.0", "react-dom": "^17.0.2 || ^18.0.0" }, "dependencies": { - "azure-maps-control": "^3.0.0-preview.6", "guid-typescript": "^1.0.9" } } diff --git a/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx b/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx index ad2ebfb..851c8c2 100644 --- a/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx +++ b/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx @@ -2,7 +2,7 @@ import { render } from '@testing-library/react' import { Map, Popup } from 'azure-maps-control' import React from 'react' import { AzureMapsContext } from '../../../contexts/AzureMapContext' -import AzureMaphtmlMarker from './AzureMapHtmlMarker' +import AzureMapHtmlMarker from './AzureMapHtmlMarker' import { IAzureMapHtmlMarker } from '../../../types' import atlas from 'azure-maps-control' @@ -23,7 +23,7 @@ const wrapWithAzureMapContext = (props: IAzureMapHtmlMarker) => { mapRef }} > - + ) } @@ -81,13 +81,13 @@ describe('AzureMaphtmlMarker tests', () => { expect(markerRef.setOptions).toHaveBeenCalledWith({ htmlContent: '
' }) }) - it('should close marker popup', () => { + it('should open marker popup', () => { render(wrapWithAzureMapContext({ isPopupVisible: true, markerContent:
})) // Currently we only check if getOptions get called @TODO expect(markerRef.getOptions).toHaveBeenCalled() }) - it('should open marker popup', () => { + it('should close marker popup', () => { render(wrapWithAzureMapContext({ isPopupVisible: false, markerContent:
})) // Currently we only check if getOptions get called @TODO expect(markerRef.getOptions).toHaveBeenCalled() diff --git a/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx b/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx index bdd8ae2..2aae52c 100644 --- a/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx +++ b/src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx @@ -16,7 +16,7 @@ const AzureMapHtmlMarker = memo( ) const { mapRef } = useContext(AzureMapsContext) - useCheckRefMount(mapRef, true, mref => { + useCheckRefMount(mapRef, true, (mref) => { mref.markers.add(markerRef) events && events.forEach(({ eventName, callback }) => { @@ -38,13 +38,14 @@ const AzureMapHtmlMarker = memo( useEffect(() => { if (markerRef && markerRef.getOptions().popup && mapRef) { - const isMarkerPopupOpen = markerRef.getOptions().popup?.isOpen() - if (isMarkerPopupOpen && isPopupVisible) { - markerRef.getOptions().popup?.close() - } else if (isMarkerPopupOpen !== undefined) { - markerRef.getOptions().popup?.open() - } else if ((isPopupVisible && isMarkerPopupOpen) || isPopupVisible) { - markerRef.togglePopup() + const popupRef = markerRef.getOptions().popup + if (isPopupVisible) { + popupRef?.setOptions({ + position: markerRef.getOptions().position + }) + popupRef?.open(mapRef) + } else { + popupRef?.close() } } }, [isPopupVisible, options, mapRef]) diff --git a/yarn.lock b/yarn.lock index 5b8740b..81510c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3,16 +3,16 @@ "@azure/msal-browser@^2.32.1": - version "2.36.0" - resolved "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.36.0.tgz#a95af979da1dd8572b6b3cb9fc86d51713d8ad91" - integrity sha512-OrVDZ9ftO7ExqZVHripAt+doKg6G14YbP2LoSygiWQoSqoO4CejoXLRLqANc/HGg18N0p/oaRETw4IHZvwsxZw== + version "2.37.0" + resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-2.37.0.tgz#32d7af74eef53f2692f8a9d6bd6818c78faf4c1b" + integrity sha512-YNGD/W/tw/5wDWlXOfmrVILaxVsorVLxYU2ovmL1PDvxkdudbQRyGk/76l4emqgDAl/kPQeqyivxjOU6w1YfvQ== dependencies: - "@azure/msal-common" "^12.1.0" + "@azure/msal-common" "13.0.0" -"@azure/msal-common@^12.1.0": - version "12.1.0" - resolved "https://registry.npmjs.org/@azure/msal-common/-/msal-common-12.1.0.tgz#e253a4912a359193c52c570a1e2585cfd0213bff" - integrity sha512-9RUiv0evSHvYtvF7r9ksShw9FgCeT6Rf6JB/SOMbMzI0VySZDUBSE+0b9e7DgL2Ph8wSARIh3m8c5pCK9TRY3w== +"@azure/msal-common@13.0.0": + version "13.0.0" + resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-13.0.0.tgz#9c39184903b5d0fd6e643ccc12193fae220e912b" + integrity sha512-GqCOg5H5bouvLij9NFXFkh+asRRxsPBRwnTDsfK7o0KcxYHJbuidKw8/VXpycahGXNxgtuhqtK/n5he+5NhyEA== "@babel/code-frame@7.10.4": version "7.10.4" @@ -3103,10 +3103,10 @@ axobject-query@^2.2.0: resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz" integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA== -azure-maps-control@^3.0.0-preview.6: - version "3.0.0-preview.6" - resolved "https://registry.yarnpkg.com/azure-maps-control/-/azure-maps-control-3.0.0-preview.6.tgz#e10591cfe7845f195b8884df210e96ca80b8d34c" - integrity sha512-+iQhVzdalQrXqFcUi3sSP2qD/Hj1ilg29/V1ajGqN3QzGjwgUr9yCNcr4VHdbXGnYJ2+thHk/TUlmXV8F09u0Q== +azure-maps-control@^3.0.0-preview.7: + version "3.0.0-preview.7" + resolved "https://registry.yarnpkg.com/azure-maps-control/-/azure-maps-control-3.0.0-preview.7.tgz#7e96a5adb8f537a19a214c5e3ace433ddae62c89" + integrity sha512-PedAjZ8rUQcMXktT1ylnq+Rx+mIsRXVcxmcP9204sjPzH09tl8JC+EDPwt0y2XQ5y1jKussjv8aoteA/bLNrzw== dependencies: "@azure/msal-browser" "^2.32.1"