@uiw/react-amap-marker - npm Package Compare versions

Comparing version 2.6.2 to 2.7.0

cjs/index.d.ts

@@ -9,2 +9,3 @@ /// <reference types="@uiw/react-amap-types" />
     className?: string;
+    children?: JSX.Element;
 }
@@ -11,0 +12,0 @@ export declare const Marker: import("react").ForwardRefExoticComponent<MarkerProps & import("react").RefAttributes<MarkerProps & {

cjs/index.js

@@ -15,6 +15,2 @@ "use strict";
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _reactDom = require("react-dom");
-
 var _react = require("react");
@@ -35,24 +31,4 @@
 });
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _excluded = ["children", "className", "content"];
-var Marker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      content = _ref.content,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var container = (0, _react.useMemo)(function () {
-    return document.createElement('div');
-  }, []);
-  container.className = className || '';
-  (0, _react.useEffect)(function () {
-    return (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-      children: children
-    }), container);
-  }, [children]);
-
-  var _useMarker = (0, _useMarker2.useMarker)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
-    content: children ? container : content
-  })),
+var Marker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useMarker = (0, _useMarker2.useMarker)(props),
       marker = _useMarker.marker;
@@ -59,0 +35,0 @@

cjs/useMarker.js

@@ -22,3 +22,3 @@ "use strict";
 
-var _excluded = ["visiable"];
+var _excluded = ["visiable", "children"];
 
@@ -28,6 +28,7 @@ var useMarker = function useMarker() {
   var visiable = props.visiable,
+      children = props.children,
       other = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useMapContext = (0, _reactAmapMap.useMapContext)(),
-      state = _useMapContext.state;
+      map = _useMapContext.map;
 
@@ -39,6 +40,15 @@ var _useState = (0, _react.useState)(),
 
+  var _useRenderDom = (0, _reactAmapUtils.useRenderDom)({
+    children: props.children
+  }),
+      container = _useRenderDom.container;
+
   (0, _react.useEffect)(function () {
-    if (!marker && state.map) {
+    if (!marker && map) {
+      if (props.children) {
+        other.content = container;
+      }
+
       var instance = new AMap.Marker((0, _objectSpread2["default"])({}, other));
-      state.map.add(instance);
+      map.add(instance);
       setMarker(instance);
@@ -53,3 +63,8 @@ }
     };
-  }, [state.map, marker]);
+  }, [map, marker]);
+  (0, _react.useEffect)(function () {
+    if (marker) {
+      marker.setContent(props.children ? container : props.content || '');
+    }
+  }, [props.children, container, props.content, marker]);
   (0, _reactAmapUtils.useVisiable)(marker, visiable);
@@ -56,0 +71,0 @@ (0, _reactAmapUtils.useSettingProperties)(marker, props, ['Path', 'Anchor', 'Offset', 'Animation', 'Clickable', 'Position', 'Angle', 'Label', 'zIndex', 'Icon', 'Draggable', 'Cursor', 'Content', 'Map', 'Title', 'Top', 'Shadow', 'Shape', 'ExtData']);

esm/index.d.ts

@@ -9,2 +9,3 @@ /// <reference types="@uiw/react-amap-types" />
     className?: string;
+    children?: JSX.Element;
 }
@@ -11,0 +12,0 @@ export declare const Marker: import("react").ForwardRefExoticComponent<MarkerProps & import("react").RefAttributes<MarkerProps & {

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "className", "content"];
-import { render } from 'react-dom';
-import { useImperativeHandle, useMemo, useEffect, Fragment, forwardRef } from 'react';
+import { useImperativeHandle, forwardRef } from 'react';
 import { useMarker } from './useMarker';
-import { jsx as _jsx } from "react/jsx-runtime";
 export * from './useMarker';
-export var Marker = /*#__PURE__*/forwardRef((_ref, ref) => {
+export var Marker = /*#__PURE__*/forwardRef((props, ref) => {
   var {
-    children,
-    className,
-    content
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var container = useMemo(() => document.createElement('div'), []);
-  container.className = className || '';
-  useEffect(() => render( /*#__PURE__*/_jsx(Fragment, {
-    children: children
-  }), container), [children]);
-  var {
     marker
-  } = useMarker(_extends({}, props, {
-    content: children ? container : content
-  }));
+  } = useMarker(props);
   useImperativeHandle(ref, () => _extends({}, props, {
@@ -28,0 +10,0 @@ marker

esm/useMarker.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["visiable"];
+var _excluded = ["visiable", "children"];
 import { useState, useEffect } from 'react';
-import { useVisiable, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
+import { useVisiable, useEventProperties, useSettingProperties, useRenderDom } from '@uiw/react-amap-utils';
 import { useMapContext } from '@uiw/react-amap-map';
@@ -18,9 +18,18 @@ export var useMarker = function useMarker(props) {
   var {
-    state
+    map
   } = useMapContext();
   var [marker, setMarker] = useState();
+  var {
+    container
+  } = useRenderDom({
+    children: props.children
+  });
   useEffect(() => {
-    if (!marker && state.map) {
+    if (!marker && map) {
+      if (props.children) {
+        other.content = container;
+      }
+
       var instance = new AMap.Marker(_extends({}, other));
-      state.map.add(instance);
+      map.add(instance);
       setMarker(instance);
@@ -35,3 +44,8 @@ }
     };
-  }, [state.map, marker]);
+  }, [map, marker]);
+  useEffect(() => {
+    if (marker) {
+      marker.setContent(props.children ? container : props.content || '');
+    }
+  }, [props.children, container, props.content, marker]);
   useVisiable(marker, visiable);
@@ -38,0 +52,0 @@ useSettingProperties(marker, props, ['Path', 'Anchor', 'Offset', 'Animation', 'Clickable', 'Position', 'Angle', 'Label', 'zIndex', 'Icon', 'Draggable', 'Cursor', 'Content', 'Map', 'Title', 'Top', 'Shadow', 'Shape', 'ExtData']);

package.json

 {
   "name": "@uiw/react-amap-marker",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记。",
@@ -37,4 +37,4 @@ "homepage": "https://uiwjs.github.io/react-amap/#/marker",
   "dependencies": {
-    "@uiw/react-amap-map": "2.6.2",
-    "@uiw/react-amap-utils": "2.6.2"
+    "@uiw/react-amap-map": "2.7.0",
+    "@uiw/react-amap-utils": "2.7.0"
   },
@@ -41,0 +41,0 @@ "devDependencies": {

README.md

@@ -86,2 +86,3 @@ Marker 点标记组件
   const [show, setShow] = useState(true);
+  const [count, setCount] = useState(1);
   return (
@@ -113,3 +114,3 @@ <>
               // 设置文本标注内容
-              content: "<div class='info'>我是 marker 的 label 标签</div>",
+              content: "<div class='info'>我是 marker 222的 label 标签</div>",
               // 设置文本标注方位
@@ -133,3 +134,8 @@ direction: 'right'
             />
-            <div>我是 marker 的 label 标签</div>
+            <div>
+              我是 marker 的 {count} label 标签
+              <button onClick={() => setCount(count + 1)}>
+                {count} 点击 + 1
+              </button>
+            </div>
           </Marker>
@@ -136,0 +142,0 @@ </Map>

No alert changes

Improved metrics

Number of lines in readme file

260

increased by2.36%

Worsened metrics

Total package byte prevSize

33750

decreased by-2.41%

Lines of code

295

decreased by-1.34%

Dependency changes

• + Added@uiw/react-amap-map@2.7.0(transitive)

• + Added@uiw/react-amap-types@2.7.0(transitive)

• + Added@uiw/react-amap-utils@2.7.0(transitive)

• - Removed@uiw/react-amap-map@2.6.2(transitive)

• - Removed@uiw/react-amap-types@2.6.2(transitive)

• - Removed@uiw/react-amap-utils@2.6.2(transitive)

• Updated@uiw/react-amap-map@2.7.0

• Updated@uiw/react-amap-utils@2.7.0