feat(marker): lngLat replace lnglat

src/marker/config.ts

@@ -1,31 +1,25 @@
 import { toLngLat } from '../utils/toLngLat';
 
-import type { EventMapping, PropKeys } from './types';
-
-export const mapEventMap: EventMapping = {
-  onDragStart: 'dragstart',
-  onDrag: 'drag',
-  onDragEnd: 'dragend',
-};
+import type { PropKey } from './types';
 
 /** 静态属性 */
-export const StaticProps: PropKeys[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
+export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
 
 /** 动态属性 */
-export const NativeDynamicProps: PropKeys[] = [
+export const NativeDynamicProps: PropKey[] = [
   'draggable',
   'offset',
   'rotation',
   'rotationAlignment',
   'pitchAlignment',
   'scale',
-  'lnglat',
+  'lngLat',
 ];
 
 export const allProps = NativeDynamicProps.concat(StaticProps);
 
 export const setterMap = {};
 
-export const converterMap: Partial<Record<PropKeys, (...value: any[]) => any>> = {
-  lnglat: toLngLat,
+export const converterMap: Partial<Record<PropKey, (...value: any[]) => any>> = {
+  lngLat: toLngLat,
 };

src/marker/constant.ts

@@ -0,0 +1,9 @@
+import type { EventMapping, KeysOfUnion } from './types';
+
+export const MarkerEventMap: EventMapping = {
+  onDragStart: 'dragstart',
+  onDrag: 'drag',
+  onDragEnd: 'dragend',
+};
+
+export const MarkerEventList = Object.keys(MarkerEventMap) as KeysOfUnion<EventMapping>[];

src/marker/marker.tsx

@@ -3,15 +3,17 @@ import { useGetState, usePortal } from '@pansy/react-hooks';
 import { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { useMap } from '@/hooks/useMap';
 import { useReact } from '@/hooks/useReact';
+import { useEvents } from '../hooks/useEvents';
 import { allProps, setterMap, converterMap } from './config';
+import { MarkerEventMap, MarkerEventList } from './constant';
 
 import type { Marker as MapboxMarker, MarkerOptions } from 'mapbox-gl';
-import type { MarkerProps, EventMapping, PropKeys } from './types';
+import type { MarkerProps, EventMapping, PropKey } from './types';
 
 export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
   const { map } = useMap();
   const { Portal, container } = usePortal();
-  const [marker, setMarker, getMarker] = useGetState<MapboxMarker | undefined>(undefined);
+  const [marker, setMarker, getMarker] = useGetState<MapboxMarker>();
 
   // const { onInstanceCreated } = usePropsReactive(
   //   props,
@@ -28,6 +30,11 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
     converterMap,
   });
 
+  useEvents<MapboxMarker, MarkerProps>(marker!, props, {
+    eventMap: MarkerEventMap,
+    eventList: MarkerEventList,
+  });
+
   useImperativeHandle(ref, () => marker as MapboxMarker, [marker]);
 
   const handleClick = (e: MouseEvent) => {
@@ -68,7 +75,7 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
   /** 获取创建参数 */
   const getCreateOptions = (props: MarkerProps) => {
     const options: MarkerOptions & {
-      lnglat?: MarkerProps['lnglat'];
+      lnglat?: MarkerProps['lngLat'];
     } = {};
 
     allProps.forEach((key) => {
@@ -81,7 +88,7 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
     return options;
   };
 
-  const getSetterValue = (key: PropKeys, props: MarkerProps) => {
+  const getSetterValue = (key: PropKey, props: MarkerProps) => {
     let value = props[key];
 
     if (key in converterMap) {

src/marker/types.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import type { Marker, MarkerOptions, LngLatLike } from 'mapbox-gl';
 import type { KeysOfUnion } from '../types';
 
+export type { KeysOfUnion } from '../types';
+
 export interface MarkerEvent<TOrig = undefined> {
   type: string;
   target: Marker;
@@ -26,8 +28,8 @@ export interface MarkerProps
     Partial<CustomizeMarkerEvents> {
   className?: string;
   /** 经纬度坐标 */
-  lnglat?: LngLatLike;
+  lngLat?: LngLatLike;
   children?: React.ReactNode;
 }
 
-export type PropKeys = KeysOfUnion<MarkerProps>;
+export type PropKey = KeysOfUnion<MarkerProps>;

stories/Marker.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {},
   args: {
-    lnglat: [-122.414, 37.776],
+    lngLat: [-122.414, 37.776],
   },
 } satisfies Meta<typeof Marker>;