fix(PolygonEditor): fix Polygon editing failure. (#329)

packages/polygon-editor/README.md

@@ -59,8 +59,9 @@ const Example = () => {
             <PolygonEditor
               active={active}
               onEnd={(e) => {
-                console.log('onEnd:>>',e.target.getPath());
-                setPolygonPath(e.target.getPath())
+                if (e.target) {
+                  setPolygonPath(e.target.getPath())
+                }
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')

packages/polygon-editor/src/index.tsx

@@ -1,16 +1,17 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useState, useContext } from 'react';
 import { useEventProperties } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
+import { PolygonContext } from '@uiw/react-amap-polygon';
 
 export interface PolygonEditorProps extends Partial<AMap.PolygonEditor>, AMap.PolygonEditorEvents {
   /** 是否开启编辑功能 */
   active?: boolean;
-  polygon?: AMap.Polygon;
 }
 
 export const PolygonEditor = forwardRef<PolygonEditorProps, PolygonEditorProps>((props, ref) => {
-  const { active, polygon } = props;
+  const { active } = props;
   const { map } = useMapContext();
+  const polygon = useContext(PolygonContext);
   const [visiable, setVisiable] = useState<boolean>(true);
   const [polyEditor, setPolyEditor] = useState<AMap.PolygonEditor>();
   useImperativeHandle(ref, () => ({ ...props, polyEditor }));

packages/polygon/src/index.tsx

@@ -1,8 +1,11 @@
-import { useImperativeHandle, forwardRef, isValidElement, cloneElement } from 'react';
+import { useImperativeHandle, forwardRef, createContext } from 'react';
 import { OverlayProps } from '@uiw/react-amap-map';
 import { usePolygon } from './usePolygon';
 
 export * from './usePolygon';
+
+export const PolygonContext = createContext<AMap.Polygon | undefined>(undefined);
+
 export interface PolygonProps extends OverlayProps, AMap.PolygonEvents, AMap.PolygonOptions {
   /** 覆盖物是否可见 */
   visiable?: boolean;
@@ -12,9 +15,5 @@ export const Polygon = forwardRef<PolygonProps, PolygonProps>((props, ref) => {
   const { children } = props;
   const { polygon } = usePolygon(props);
   useImperativeHandle(ref, () => ({ ...props, polygon }), [polygon]);
-  if (children && isValidElement(children) && polygon) {
-    const oProps = { polygon, polyElement: polygon };
-    return cloneElement(children, { ...props, ...oProps });
-  }
-  return null;
+  return <PolygonContext.Provider value={polygon}>{children}</PolygonContext.Provider>;
 });

packages/polygon/src/usePolygon.tsx

@@ -29,10 +29,11 @@ export const usePolygon = (props = {} as UsePolygon) => {
       }
       setPolygon(undefined);
     };
-  }, [map, polygon]);
+  }, [map]);
 
   useEffect(() => {
     if (polygon) {
+      console.log(':::@111');
       polygon.setOptions(other);
     }
   }, [polygon, other]);