feat(marker): 解决渲染报错

src/hooks/usePropsReactive.ts

@@ -0,0 +1,66 @@
+import { isEqual } from 'lodash-es';
+import { isFunction } from '@pansy/shared';
+import { useDeepCompareEffect, useUnmount, usePrevious } from '@pansy/react-hooks';
+import { toCapitalString } from '@/utils';
+
+interface Options {
+  setterMap?: Record<string, Function>;
+  converterMap?: Record<string, Function>;
+}
+
+export function usePropsReactive<
+  Ins extends Record<string, any> = any,
+  P extends Record<string, any> = {},
+>(props: P, ins: Ins, { setterMap = {}, converterMap = {} }: Options = {}) {
+  const prevProps = usePrevious(props) as P;
+
+  const onInstanceCreated = (instance: Ins) => {
+    reactivePropChange(props, false);
+  };
+
+  /**
+   * 对参数变化进行处理
+   * @param nextProps
+   * @param shouldDetectChange
+   * @returns
+   */
+  const reactivePropChange = (nextProps: P, shouldDetectChange: boolean = true) => {
+    if (!ins) return;
+
+    try {
+      Object.keys(nextProps).forEach((key) => {
+        /** 忽略事件绑定处理 */
+        if (isFunction(props[key]) && /^on[A-Z]/.test(key)) return;
+
+        let willReactive = true;
+        if (shouldDetectChange) {
+          willReactive = !isEqual(nextProps[key], prevProps?.[key]);
+        }
+        if (!willReactive) return;
+
+        let setterParam = nextProps[key];
+        // 对值进行转换
+        if (key in converterMap) {
+          setterParam = converterMap[key](nextProps[key]);
+        }
+
+        // 设置值
+        if (key in setterMap) {
+          setterMap[key](setterParam, ins);
+        } else {
+          const trySetterName = `set${toCapitalString(key)}`;
+
+          if (trySetterName in ins) {
+            ins[trySetterName](setterParam);
+          }
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return {
+    onInstanceCreated,
+  };
+}

src/marker/config.ts

@@ -1,7 +1,6 @@
 import { toLngLat } from '../utils/toLngLat';
 
-import type { LngLatLike, Marker } from 'mapbox-gl';
-import type { EventMapping, PropKey } from './types';
+import type { EventMapping, PropKeys } from './types';
 
 export const mapEventMap: EventMapping = {
   onDragStart: 'dragstart',
@@ -10,10 +9,10 @@ export const mapEventMap: EventMapping = {
 };
 
 /** 静态属性 */
-export const StaticProps: PropKey[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
+export const StaticProps: PropKeys[] = ['anchor', 'clickTolerance', 'color', 'onClick'];
 
 /** 动态属性 */
-export const NativeDynamicProps: PropKey[] = [
+export const NativeDynamicProps: PropKeys[] = [
   'draggable',
   'offset',
   'rotation',
@@ -25,13 +24,8 @@ export const NativeDynamicProps: PropKey[] = [
 
 export const allProps = NativeDynamicProps.concat(StaticProps);
 
-export const setterMap = {
-  lnglat(value: LngLatLike, marker: Marker) {
-    if (!marker) return;
-    const lnglat = toLngLat(value);
+export const setterMap = {};
 
-    lnglat && marker.setLngLat(lnglat);
-  },
+export const converterMap: Partial<Record<PropKeys, (...value: any[]) => any>> = {
+  lnglat: toLngLat,
 };
-
-export const converterMap = {};

src/marker/marker.tsx

@@ -6,13 +6,22 @@ import { useReact } from '@/hooks/useReact';
 import { allProps, setterMap, converterMap } from './config';
 
 import type { Marker as MapboxMarker, MarkerOptions } from 'mapbox-gl';
-import type { MarkerProps, EventMapping } from './types';
+import type { MarkerProps, EventMapping, PropKeys } 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 { onInstanceCreated } = usePropsReactive(
+  //   props,
+  //   marker!,
+  //   {
+  //     setterMap,
+  //     converterMap
+  //   }
+  // );
+
   const { onInstanceCreated } = useReact<MarkerProps, MapboxMarker, EventMapping>(props, {
     ins: marker,
     setterMap,
@@ -45,24 +54,44 @@ export const Marker = forwardRef<MapboxMarker, MarkerProps>((props, ref) => {
 
   const createInstance = () => {
     const options = getCreateOptions(props);
-    const marker = new Mapbox.Marker(container, options);
 
-    return Promise.resolve(marker);
+    if (options.lnglat) {
+      const marker = new Mapbox.Marker(container, options);
+      marker.setLngLat(options.lnglat);
+
+      return Promise.resolve(marker);
+    } else {
+      return Promise.reject();
+    }
   };
 
   /** 获取创建参数 */
   const getCreateOptions = (props: MarkerProps) => {
-    const options: MarkerOptions = {};
+    const options: MarkerOptions & {
+      lnglat?: MarkerProps['lnglat'];
+    } = {};
 
     allProps.forEach((key) => {
       if (key in props) {
         // @ts-ignore
-        options[key] = props[key];
+        options[key] = getSetterValue(key, props);
       }
     });
 
     return options;
   };
 
+  const getSetterValue = (key: PropKeys, props: MarkerProps) => {
+    let value = props[key];
+
+    if (key in converterMap) {
+      try {
+        value = converterMap[key]?.(props[key]);
+      } catch (error) {}
+    }
+
+    return value;
+  };
+
   return <>{marker && <Portal>{props.children}</Portal>}</>;
 });

src/marker/types.ts

@@ -30,4 +30,4 @@ export interface MarkerProps
   children?: React.ReactNode;
 }
 
-export type PropKey = KeysOfUnion<MarkerProps>;
+export type PropKeys = KeysOfUnion<MarkerProps>;