Skip to content

[react-simple-maps] Add missing hook types #69920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
typescript-bot merged 6 commits into from
Jul 17, 2024
Merged

[react-simple-maps] Add missing hook types #69920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
539822b
[react-simple-maps] add hook types
piercemorris Jun 27, 2024
6725d2d
add as maintainer
piercemorris Jul 1, 2024
d4de9e9
modify tests
piercemorris Jul 1, 2024
9124ced
fix GeoPath type expect
piercemorris Jul 1, 2024
7542972
format tests file
piercemorris Jul 1, 2024
c998bda
rename interface
piercemorris Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 73 additions & 1 deletion types/react-simple-maps/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface ProjectionConfig {
parallels?: [number, number] | undefined;
rotate?: [number, number, number] | undefined;
}

export type ProjectionFunction = (width: number, height: number, config: ProjectionConfig) => GeoProjection;

export interface ComposableMapProps extends React.SVGAttributes<SVGSVGElement> {
Expand Down Expand Up @@ -88,6 +89,38 @@ export interface ZoomableGroupProps extends React.SVGAttributes<SVGGElement> {
translateExtent?: [[number, number], [number, number]] | undefined;
}

interface ZoomPanProps {
/**
* @default [0, 0]
*/
center?: Point | undefined;
/**
* @default 1
*/
zoom?: number | undefined;
/**
* @default 1
*/
scaleExtent?: Point | undefined;
/**
* @default [1, 8]
*/
onMoveStart?:
| ((position: { coordinates: [number, number]; zoom: number }, event: D3ZoomEvent<SVGElement, any>) => void)
| undefined;
onMove?:
| ((
position: { x: number; y: number; zoom: number; dragging: WheelEvent },
event: D3ZoomEvent<SVGElement, any>,
) => void)
| undefined;
onMoveEnd?:
| ((position: { coordinates: [number, number]; zoom: number }, event: D3ZoomEvent<SVGElement, any>) => void)
| undefined;
filterZoomEvent?: ((element: SVGElement) => boolean) | undefined;
translateExtent?: [[number, number], [number, number]] | undefined;
}

interface GeographiesChildrenArgument {
geographies: any[];
path: GeoPath;
Expand Down Expand Up @@ -216,6 +249,31 @@ interface SphereProps extends React.SVGProps<SVGPathElement> {
strokeWidth: number;
}

declare function useGeographies(args?: Omit<GeographiesProps, "children">): {
geographies: any[];
path: GeoPath;
projection: GeoProjection;
};
declare function useZoomPan(args?: ZoomPanProps): {
mapRef: React.RefObject<SVGSVGElement>;
position: Position;
transformString: string;
};

declare function useZoomPanContext(): {
x: number;
y: number;
k: number;
transformString: string;
};

declare function useMapContext(): {
width: number;
height: number;
path: GeoPath;
projection: GeoProjection;
};

declare const ComposableMap: React.FunctionComponent<ComposableMapProps>;
declare const ZoomableGroup: React.FunctionComponent<ZoomableGroupProps>;
declare const Geographies: React.FunctionComponent<GeographiesProps>;
Expand All @@ -226,4 +284,18 @@ declare const Graticule: React.FunctionComponent<GraticuleProps>;
declare const Line: React.FunctionComponent<LineProps>;
declare const Sphere: React.FunctionComponent<SphereProps>;

export { Annotation, ComposableMap, Geographies, Geography, Graticule, Line, Marker, Sphere, ZoomableGroup };
export {
Annotation,
ComposableMap,
Geographies,
Geography,
Graticule,
Line,
Marker,
Sphere,
useGeographies,
useMapContext,
useZoomPan,
useZoomPanContext,
ZoomableGroup,
};
4 changes: 4 additions & 0 deletions types/react-simple-maps/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
{
"name": "Kouame Komenan ",
"githubUsername": "komenank"
},
{
"name": "Pierce Morris",
"githubUsername": "piercejmorris"
}
]
}
151 changes: 87 additions & 64 deletions types/react-simple-maps/react-simple-maps-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,90 @@
import * as React from "react";
import { ComposableMap, Geographies, Geography, Marker, ZoomableGroup } from "react-simple-maps";
import {
ComposableMap,
Geographies,
Geography,
Marker,
useGeographies,
useZoomPanContext,
ZoomableGroup,
} from "react-simple-maps";

const Map = () => (
<ComposableMap
projectionConfig={{ rotate: [-11, 0, 0], scale: 205 }}
height={551}
style={{ height: "auto", width: "100%" }}
width={980}
>
<ZoomableGroup
center={[0, 20]}
disablePanning={true}
filterZoomEvent={(event: any) => event.type === "wheel"}
onMoveStart={({ coordinates, zoom }, event) => {
coordinates; // $ExpectType [number, number]
zoom; // $ExpectType number
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
onMove={({ x, y, zoom, dragging }, event) => {
x; // $ExpectType number
y; // $ExpectType number
zoom; // $ExpectType number
dragging; // $ExpectType WheelEvent
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
onMoveEnd={({ coordinates, zoom }, event) => {
coordinates; // $ExpectType [number, number]
zoom; // $ExpectType number
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
const Map = () => {
const {
geographies, // $ExpectType any[]
path, // $ExpectType GeoPath <any, GeoPermissibleObjects>
projection, // $ExpectType GeoProjection
} = useGeographies({ geography: "/worldmap.json" });

const {
x, // $ExpectType number
y, // $ExpectType number
k, // $ExpectType number
transformString, // $ExpectType string
} = useZoomPanContext();

return (
<ComposableMap
projectionConfig={{ rotate: [-11, 0, 0], scale: 205 }}
height={551}
style={{ height: "auto", width: "100%" }}
width={980}
>
<Geographies geography="/worldmap.json">
{({ geographies }) =>
geographies.map((geography, index) => (
<Geography
key={index}
geography={geography}
style={{
default: {
fill: "#ECEFF1",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
hover: {
fill: "#607D8B",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
pressed: {
fill: "#607D8B",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
}}
/>
))}
</Geographies>
<Marker coordinates={[1, 1]}>
<circle cx={0} cy={0} r={5} style={{ fill: "#D13913" }} />
</Marker>
</ZoomableGroup>
</ComposableMap>
);
<ZoomableGroup
center={[0, 20]}
disablePanning={true}
filterZoomEvent={(event: any) => event.type === "wheel"}
onMoveStart={({ coordinates, zoom }, event) => {
coordinates; // $ExpectType [number, number]
zoom; // $ExpectType number
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
onMove={({ x, y, zoom, dragging }, event) => {
x; // $ExpectType number
y; // $ExpectType number
zoom; // $ExpectType number
dragging; // $ExpectType WheelEvent
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
onMoveEnd={({ coordinates, zoom }, event) => {
coordinates; // $ExpectType [number, number]
zoom; // $ExpectType number
event; // $ExpectType D3ZoomEvent<SVGElement, any>
}}
>
<Geographies geography="/worldmap.json">
{({ geographies }) =>
geographies.map((geography, index) => (
<Geography
key={index}
geography={geography}
style={{
default: {
fill: "#ECEFF1",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
hover: {
fill: "#607D8B",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
pressed: {
fill: "#607D8B",
outline: "none",
stroke: "#607D8B",
strokeWidth: 0.75,
},
}}
/>
))}
</Geographies>
<Marker coordinates={[1, 1]}>
<circle cx={0} cy={0} r={5} style={{ fill: "#D13913" }} />
</Marker>
</ZoomableGroup>
</ComposableMap>
);
};