diff --git a/.changeset/silver-beds-refuse.md b/.changeset/silver-beds-refuse.md new file mode 100644 index 00000000..f384ac50 --- /dev/null +++ b/.changeset/silver-beds-refuse.md @@ -0,0 +1,10 @@ +--- +"@open-pioneer/map-navigation": minor +"@open-pioneer/geolocation": minor +--- + +Add `ButtonProps` to `ToolButton` in `@open-pioneer/geolocation` and `@open-pioneer/map-navigation` + +Example: + +`` diff --git a/src/packages/geolocation/Geolocation.tsx b/src/packages/geolocation/Geolocation.tsx index 033f62f7..5197704f 100644 --- a/src/packages/geolocation/Geolocation.tsx +++ b/src/packages/geolocation/Geolocation.tsx @@ -10,6 +10,7 @@ import { useIntl, useService } from "open-pioneer:react-hooks"; import { FC, ForwardedRef, RefAttributes, forwardRef, useEffect, useState } from "react"; import { MdMyLocation } from "react-icons/md"; import { GeolocationController, OnErrorCallback } from "./GeolocationController"; +import { ButtonProps } from "@open-pioneer/chakra-integration"; /** * These are properties supported by the {@link Geolocation} component. @@ -18,6 +19,12 @@ export interface GeolocationProps extends CommonComponentProps, RefAttributes, MapModelProps { + /** + * Additional properties for the `Button` element. + * + * Note that the ToolButton also defines some of these props. + */ + buttonProps?: Partial; /** * The default maximal zoom level */ @@ -61,7 +68,7 @@ const GeolocationImpl = forwardRef(function GeolocationImpl( props: GeolocationProps & { controller: GeolocationController }, ref: ForwardedRef ) { - const { controller } = props; + const { controller, buttonProps } = props; const { containerProps } = useCommonComponentProps("geolocation", props); const { isLoading, isActive } = useReactiveSnapshot(() => { return { @@ -94,6 +101,7 @@ const GeolocationImpl = forwardRef(function GeolocationImpl( return ( } onClick={() => toggleActiveState()} diff --git a/src/packages/map-navigation/History.tsx b/src/packages/map-navigation/History.tsx index 80ae92e0..1dcf7b09 100644 --- a/src/packages/map-navigation/History.tsx +++ b/src/packages/map-navigation/History.tsx @@ -10,6 +10,7 @@ import { useIntl } from "open-pioneer:react-hooks"; import { FC, ForwardedRef, forwardRef, RefAttributes } from "react"; import { FiCornerUpLeft, FiCornerUpRight } from "react-icons/fi"; import { useHistoryViewModel } from "./ViewHistoryModel"; +import { ButtonProps } from "@open-pioneer/chakra-integration"; export type HistoryForwardProps = Omit; @@ -43,6 +44,13 @@ export interface HistoryProps extends CommonComponentProps, RefAttributes, MapModelProps { + /** + * Additional properties for the `Button` element. + * + * Note that the ToolButton also defines some of these props. + */ + buttonProps?: Partial; + /** * The view direction. * @@ -59,7 +67,7 @@ export const History: FC = forwardRef(function History( ref: ForwardedRef ) { const intl = useIntl(); - const { viewDirection } = props; + const { buttonProps, viewDirection } = props; const { map } = useMapModel(props); const viewModel = useHistoryViewModel(map); const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, viewDirection); @@ -93,6 +101,7 @@ export const History: FC = forwardRef(function History( , - MapModelProps {} + MapModelProps { + /** + * Additional properties for the `Button` element. + * + * Note that the ToolButton also defines some of these props. + */ + buttonProps?: Partial; +} /** * Provides a simple button that switches the view to its initial viewpoint. @@ -23,6 +31,7 @@ export const InitialExtent: FC = forwardRef(function Initial const { containerProps } = useCommonComponentProps("initial-extent", props); const { map } = useMapModel(props); const intl = useIntl(); + const { buttonProps } = props; function setInitExtent() { const initialExtent = map?.initialExtent; @@ -41,6 +50,7 @@ export const InitialExtent: FC = forwardRef(function Initial return ( } onClick={setInitExtent} diff --git a/src/packages/map-navigation/Zoom.tsx b/src/packages/map-navigation/Zoom.tsx index a9b2976e..0bf44d96 100644 --- a/src/packages/map-navigation/Zoom.tsx +++ b/src/packages/map-navigation/Zoom.tsx @@ -1,5 +1,6 @@ // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer) // SPDX-License-Identifier: Apache-2.0 +import { ButtonProps } from "@open-pioneer/chakra-integration"; import { MapModelProps, useMapModel } from "@open-pioneer/map"; import { ToolButton } from "@open-pioneer/map-ui-components"; import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils"; @@ -35,6 +36,13 @@ export interface ZoomProps extends CommonComponentProps, RefAttributes, MapModelProps { + /** + * Additional properties for the `Button` element. + * + * Note that the ToolButton also defines some of these props. + */ + buttonProps?: Partial; + /** * The zoom direction. * @@ -50,7 +58,7 @@ export const Zoom: FC = forwardRef(function Zoom( props: ZoomProps, ref: ForwardedRef ) { - const { zoomDirection } = props; + const { buttonProps, zoomDirection } = props; const { map } = useMapModel(props); const intl = useIntl(); const [disabled, setDisabled] = useState(false); @@ -82,6 +90,7 @@ export const Zoom: FC = forwardRef(function Zoom( return (