feat(MarkerCluster): 支持传入泛型

pansyjs · Jan 19, 2024 · e1cca4e · e1cca4e
1 parent 31d9c48
commit e1cca4e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/src/components/MarkerCluster/MarkerCluster.tsx b/src/components/MarkerCluster/MarkerCluster.tsx
@@ -9,10 +9,13 @@ import { defaultSuperclusterOptions } from './config';
 import { Marker } from '../Marker';
 import { useMap } from '../../hooks/useMap';
 
-import type { MarkerClusterProps } from './types';
+import type { MarkerClusterProps, AnyObject, RefMarkerCluster } from './types';
 
-export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props, ref) => {
-  const { cluster, render, renderCluster, zoomOnClickPadding = 20 } = props;
+const InternalMarkerCluster = <D extends AnyObject = AnyObject>(
+  props: MarkerClusterProps<D>,
+  ref: React.Ref<Supercluster>,
+) => {
+  const { cluster, render, renderCluster, data = [], zoomOnClick, zoomOnClickPadding = 20 } = props;
   const { map } = useMap();
   const [list, setList] = useState<any[]>([]);
 
@@ -102,8 +105,10 @@ export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props
             <Marker
               key={item.id}
               lngLat={geometry.coordinates}
-              onClick={(e) => {
-                handleClusterMarkerClick(JSON.parse(JSON.stringify(item)));
+              onClick={() => {
+                if (zoomOnClick) {
+                  handleClusterMarkerClick(JSON.parse(JSON.stringify(item)));
+                }
               }}
             >
               {isFunction(renderCluster) ? renderCluster(point_count, cluster_id) : renderCluster}
@@ -119,4 +124,6 @@ export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props
       })}
     </>
   );
-});
+};
+
+export const MarkerCluster = forwardRef(InternalMarkerCluster) as RefMarkerCluster;
diff --git a/src/components/MarkerCluster/types.ts b/src/components/MarkerCluster/types.ts
@@ -1,19 +1,39 @@
 import type Supercluster from 'supercluster';
+import type { GeoJsonProperties, GeoJsonObject, Point } from 'geojson';
 import type { PaddingOptions } from 'mapbox-gl';
 
+export type AnyObject = Record<PropertyKey, any>;
 export type RenderMarkerFun = (data: any) => React.ReactNode;
 export type RenderClusterMarkerFun = (count: number, clusterId: string) => React.ReactNode;
 
 export type { Supercluster };
 
-export interface MarkerClusterProps {
+export interface Feature<P = GeoJsonProperties> extends GeoJsonObject {
+  type: 'Feature';
+  /**
+   * The feature's geometry
+   */
+  geometry: Point;
+  /**
+   * A value that uniquely identifies this feature in a
+   * https://tools.ietf.org/html/rfc7946#section-3.2.
+   */
+  id?: string | number | undefined;
+  /**
+   * Properties associated with this feature.
+   */
+  properties: P;
+}
+
+export interface MarkerClusterProps<D extends object = any> {
+  data?: Feature<D>[];
   /**
    * 聚合参数设置
    */
   cluster?: Supercluster.Options<any, any>;
   /**
    * 点击聚合点时，是否散开。
-   * @default true
+   * @default false
    */
   zoomOnClick?: boolean;
   /**
@@ -32,3 +52,7 @@ export interface MarkerClusterProps {
   onClick?: any;
   onClusterClick?: any;
 }
+
+export type RefMarkerCluster = <D extends AnyObject = AnyObject>(
+  props: React.PropsWithChildren<MarkerClusterProps<D>> & React.RefAttributes<Supercluster>,
+) => React.ReactElement;
diff --git a/stories/examples/ClusterPro.stories.tsx b/stories/examples/ClusterPro.stories.tsx
@@ -21,6 +21,7 @@ const meta = {
           <MarkerCluster
             cluster={{ radius: 50 }}
             ref={clusterRef}
+            zoomOnClick
             render={<Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>}
             renderCluster={(count) => {
               return (