@canmou/react-tmap-map - npm Package Compare versions

Comparing version 1.0.4 to 1.0.6

cjs/index.d.ts

@@ -0,6 +1,19 @@
+/// <reference types="@canmou/react-tmap-types" />
 /// <reference types="react" />
-export interface MapProps {
+export * from './useMap';
+export interface MapProps extends TMap.MapEvents, TMap.MapOptions {
     className?: React.HTMLAttributes<HTMLDivElement>['className'];
     style?: React.HTMLAttributes<HTMLDivElement>['style'];
 }
-export declare const Map: import("react").ForwardRefExoticComponent<MapProps & import("react").RefAttributes<MapProps>>;
+declare type RenderProps = {
+    children: (data: {
+        TMap: typeof TMap;
+        map: TMap.Map;
+        container?: HTMLDivElement | null;
+    }) => void;
+} | {
+    children: React.ReactNode;
+};
+export declare const Map: import("react").ForwardRefExoticComponent<(MapProps & RenderProps) & import("react").RefAttributes<MapProps & {
+    map?: TMap.Map | undefined;
+}>>;

cjs/index.js

@@ -1,9 +0,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, Fragment, useEffect, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, Fragment, isValidElement, useEffect, useImperativeHandle, useRef } from "react";
 import { useMap } from "./useMap";
+export * from './useMap';
 export const Map = forwardRef(({ className, style, children, ...props }, ref) => {
     const elmRef = useRef(null);
-    const { setContainer } = useMap({ container: elmRef.current, ...props });
+    const { setContainer, container, map } = useMap({ container: elmRef.current, ...props });
     useEffect(() => setContainer(elmRef.current), [elmRef.current]);
-    return (_jsx(Fragment, { children: _jsx("div", { ref: elmRef, className: className, style: { fontSize: 1, height: '100%', ...style } }, void 0) }, void 0));
+    // ddd
+    useImperativeHandle(ref, () => ({ ...props, map, TMap, container: elmRef.current }), [map]);
+    const childs = Children.toArray(children);
+    return (_jsxs(Fragment, { children: [_jsx("div", { ref: elmRef, className: className, style: { fontSize: 1, height: '100%', ...style } }, void 0), TMap && map && typeof children === 'function' && children({ TMap, map, container }), TMap && map && childs.map((child, key) => {
+                if (typeof child === 'string') {
+                    return cloneElement(_jsx(Fragment, { children: child }, void 0), { key });
+                }
+                if (!isValidElement(child))
+                    return null;
+                if (child.type && typeof child.type === 'string') {
+                    return cloneElement(child, { key });
+                }
+                return cloneElement(child, {
+                    ...child.props,
+                    TMap,
+                    map,
+                    container,
+                    key
+                });
+            })] }, void 0));
 });

cjs/useMap.d.ts

@@ -6,13 +6,16 @@ /// <reference types="@canmou/react-tmap-types" />
 }
-export interface MapProps {
-    zoom: any;
+export interface OverlayProps extends MapChildProps {
 }
+export interface MapProps extends TMap.MapEvents, TMap.MapOptions {
+    className?: React.HTMLAttributes<HTMLDivElement>['className'];
+    style?: React.HTMLAttributes<HTMLDivElement>['style'];
+}
 export interface UseMap extends MapProps, MapChildProps {
-    container: HTMLDivElement | null;
+    container?: HTMLDivElement | null;
 }
 export declare const useMap: (props?: Partial<UseMap>) => {
-    map: any;
-    setMap: import("react").Dispatch<any>;
+    map: TMap.Map | undefined;
+    setMap: import("react").Dispatch<import("react").SetStateAction<TMap.Map | undefined>>;
     container: HTMLDivElement | null | undefined;
     setContainer: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
 };

cjs/useMap.js

 /// <reference types="@canmou/react-tmap-types" />
 import { useEffect, useMemo, useState } from "react";
+import { useSettingProperties, useEventProperties } from '@canmou/react-tmap-utils';
 export const useMap = (props = {}) => {
@@ -10,5 +11,14 @@ const [zoom, setZoom] = useState(props.zoom || 15);
         let instance;
-        // const center = [113.23, 23.16];
-        // var center2 = new TMap.LatLng(center[1], center[0]);
         if (container && !map && window.TMap) {
+            delete other.container;
+            console.log({
+                zoom,
+                ...other,
+            });
+            instance = new TMap.Map(container, {
+                zoom,
+                ...other,
+            });
+            // const center = [113.23, 23.16];
+            // var center2 = new TMap.LatLng(center[1], center[0]);
             // instance = new TMap.Map(container, {
@@ -32,6 +42,2 @@ //     zoom,//设置地图缩放级别
             // });
-            instance = new TMap.Map(container, {
-                zoom,
-                ...other,
-            });
             // instance.setViewMode('2D');
@@ -64,2 +70,51 @@ // if (!instance.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)) { // 如果map上不存在该控件则直接返回
     }, [zoom, props.zoom]);
+    useSettingProperties(map, props, [
+        'Zoom',
+        'Layers',
+        // 'Center',
+        'City',
+        'Rotation',
+        'Pitch',
+        'Scale',
+        'Offset',
+        'Draggable',
+        'Scrollable',
+        'MaxZoom',
+        'MinZoom',
+        'Pitchable',
+        'Rotatable',
+        'DoubleClickZoom',
+        'Boundary',
+        'ViewMode',
+        'BaseMap',
+        'MapStyleId',
+    ]);
+    useEventProperties(map, props, [
+        'onMouseMove',
+        'onZoomChange',
+        'onMapMove',
+        'onMouseWheel',
+        'onZoomStart',
+        'onMouseOver',
+        'onMouseOut',
+        'onDblClick',
+        'onClick',
+        'onZoomEnd',
+        'onMoveEnd',
+        'onMouseUp',
+        'onMouseDown',
+        'onRightClick',
+        'onMoveStart',
+        'onDragStart',
+        'onDragging',
+        'onDragEnd',
+        'onHotspotOut',
+        'onHotspotOver',
+        'onTouchStart',
+        'onComplete',
+        'onHotspotClick',
+        'onTouchMove',
+        'onTouchEnd',
+        'onResize',
+    ]);
     return {
@@ -66,0 +121,0 @@ map,

package.json

 {
   "name": "@canmou/react-tmap-map",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "用于加载腾讯地图SDK依赖，加载完成，全局将会有**`window.TMap`**对象。",
@@ -18,6 +18,6 @@ "main": "cjs/index.js",
   "dependencies": {
-    "@canmou/react-tmap-types": "^1.0.4",
-    "@canmou/react-tmap-utils": "^1.0.4"
+    "@canmou/react-tmap-types": "^1.0.6",
+    "@canmou/react-tmap-utils": "^1.0.6"
   },
-  "gitHead": "1ba95f6040a81315f7cc1692bbcd046fee1eeb61"
+  "gitHead": "873340f37f37bfa1e648231e25808869a4cd40f9"
 }

src/index.tsx

@@ -1,6 +0,9 @@
-import { forwardRef, Fragment, useEffect, useRef } from "react";
+/// <reference types="@canmou/react-tmap-types" />
+import { Children, cloneElement, forwardRef, Fragment, isValidElement, useEffect, useImperativeHandle, useRef } from "react";
 import { useMap } from "./useMap";
 
+export * from './useMap';
+
 // 简化react-amap，react for 腾讯地图
-export interface MapProps {
+export interface MapProps extends TMap.MapEvents, TMap.MapOptions {
     className?: React.HTMLAttributes<HTMLDivElement>['className'];
@@ -10,11 +13,36 @@ style?: React.HTMLAttributes<HTMLDivElement>['style'];
 
-export const Map = forwardRef<MapProps, MapProps>(({ className, style, children, ...props }, ref) => {
+type RenderProps =
+  | { children: (data: { TMap: typeof TMap; map: TMap.Map; container?: HTMLDivElement | null }) => void }
+  | { children: React.ReactNode };
+
+
+export const Map = forwardRef<MapProps & { map?: TMap.Map }, MapProps & RenderProps>(({ className, style, children, ...props }, ref) => {
     const elmRef = useRef<HTMLDivElement>(null);
-    const { setContainer } = useMap({ container: elmRef.current, ...props });
+    const { setContainer, container, map } = useMap({ container: elmRef.current, ...props });
     useEffect(() => setContainer(elmRef.current), [elmRef.current]);
+    // ddd
+    useImperativeHandle(ref, () => ({ ...props, map, TMap, container: elmRef.current }), [map]);
+    const childs = Children.toArray(children);
     return (
         <Fragment>
             <div ref={elmRef} className={className} style={{ fontSize: 1, height: '100%', ...style }} />
+            {TMap && map && typeof children === 'function' && children({ TMap, map, container})}
+            {TMap && map && childs.map((child, key) => {
+                if (typeof child === 'string') {
+                    return cloneElement(<Fragment>{child}</Fragment>, { key })
+                }
+                if (!isValidElement(child)) return null;
+                if (child.type && typeof child.type === 'string') {
+                    return cloneElement(child, { key });
+                }
+                return cloneElement(child, {
+                    ...child.props,
+                    TMap,
+                    map,
+                    container,
+                    key
+                });
+            })}
         </Fragment>
     )
 });

src/useMap.tsx

 /// <reference types="@canmou/react-tmap-types" />
 import { useEffect, useMemo, useState } from "react";
 import { useSettingProperties, useEventProperties } from '@canmou/react-tmap-utils';
-// import { Dobound } from "../../util/common";
+import { MapProps } from '.';
 
+
+export interface OverlayProps extends MapChildProps { }
 export interface MapChildProps {
     TMap?: typeof TMap;
-}
 
-export interface MapProps {
-    zoom: any;
+    map?: TMap.Map;
 }
 
+
 export interface UseMap extends MapProps, MapChildProps {
-    container: HTMLDivElement | null;
+    container?: HTMLDivElement | null;
 }
 
 export const useMap = (props: Partial<UseMap> = {}) => {
+    const { ...other } = props;
+    const [map, setMap] = useState<TMap.Map>();
     const [zoom, setZoom] = useState(props.zoom || 15);
     const [container, setContainer] = useState(props.container);
-    const [map, setMap] = useState<any>();
-    const { ...other } = props;
-
     useEffect(() => {
         let instance: any;
         if (container && !map && window.TMap) {
-            instance = new TMap.Map(container, {
+            delete other.container;
+            console.log({
                 zoom,
                 ...other,
-            })
+            });
+            instance = new TMap.Map(container, { zoom, ...other })
             // const center = [113.23, 23.16];
@@ -32,0 +34,0 @@ // var center2 = new TMap.LatLng(center[1], center[0]);

No alert changes

Improved metrics

Total package byte prevSize

26150

19.67%

Lines of code

370

46.25%

Dependency changes

• Updated

  @canmou/react-tmap-types@^1.0.6

• Updated

  @canmou/react-tmap-utils@^1.0.6