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

Comparing version 2.4.1 to 2.5.0

cjs/index.d.ts

 /// <reference types="@uiw/react-amap-types" />
 /// <reference types="react" />
 export * from './useMap';
+export * from './context';
 declare type RenderProps = {
@@ -5,0 +6,0 @@ children: (data: {

cjs/index.js

@@ -15,2 +15,4 @@ "use strict";
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -34,2 +36,16 @@
 
+var _context = require("./context");
+
+Object.keys(_context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _context[key];
+    }
+  });
+});
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,2 +59,8 @@
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useReducer = (0, _react.useReducer)(_context.reducer, _context.initialState),
+      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
   var elmRef = (0, _react.useRef)(null);
@@ -66,3 +88,16 @@
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+  (0, _react.useEffect)(function () {
+    if (map) {
+      dispatch({
+        map: map,
+        container: elmRef.current,
+        AMap: AMap
+      });
+    }
+  }, [map]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.Context.Provider, {
+    value: {
+      state: state,
+      dispatch: dispatch
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -69,0 +104,0 @@ ref: elmRef,

cjs/useMap.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _context = require("./context");
+
 var useMap = function useMap() {
@@ -40,2 +42,5 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
+  var _useContext = (0, _react.useContext)(_context.Context),
+      dispatch = _useContext.dispatch;
+
   (0, _react.useEffect)(function () {
@@ -53,6 +58,23 @@ var instance;
       if (instance) {
-        setMap(undefined); // instance.destroy();
+        setMap(undefined);
       }
     };
   }, [container]);
+  (0, _react.useEffect)(function () {
+    if (map && container) {
+      dispatch({
+        map: map,
+        container: container,
+        AMap: AMap
+      });
+    }
+
+    return function () {
+      dispatch({
+        map: undefined,
+        container: undefined,
+        AMap: undefined
+      });
+    };
+  }, [map, container]);
   (0, _react.useMemo)(function () {
@@ -59,0 +81,0 @@ if (map && typeof props.zoom === 'number' && zoom !== props.zoom && props.zoom >= 2 && props.zoom <= 20) {

esm/index.d.ts

 /// <reference types="@uiw/react-amap-types" />
 /// <reference types="react" />
 export * from './useMap';
+export * from './context';
 declare type RenderProps = {
@@ -5,0 +6,0 @@ children: (data: {

esm/index.js

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /// <reference types="@uiw/react-amap-types" />
-import { useRef, useEffect, useImperativeHandle, Fragment, Children, cloneElement, isValidElement, forwardRef } from 'react';
+import { useRef, useEffect, useImperativeHandle, Fragment, Children, cloneElement, isValidElement, forwardRef, useReducer } from 'react';
 import { useMap } from './useMap';
+import { Context, reducer, initialState } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from './useMap';
+export * from './context';
 export var Map = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -19,2 +21,3 @@ var {
 
+  var [state, dispatch] = useReducer(reducer, initialState);
   var elmRef = useRef(null);
@@ -35,3 +38,16 @@ var {
   var childs = Children.toArray(children);
-  return /*#__PURE__*/_jsxs(Fragment, {
+  useEffect(() => {
+    if (map) {
+      dispatch({
+        map,
+        container: elmRef.current,
+        AMap
+      });
+    }
+  }, [map]);
+  return /*#__PURE__*/_jsxs(Context.Provider, {
+    value: {
+      state,
+      dispatch
+    },
     children: [/*#__PURE__*/_jsx("div", {
@@ -38,0 +54,0 @@ ref: elmRef,

esm/useMap.js

 import _extends from "@babel/runtime/helpers/extends";
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useContext } from 'react';
 import { useSetStatus, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
+import { Context } from './context';
 export var useMap = function useMap(props) {
@@ -14,2 +15,5 @@ if (props === void 0) {
   var [container, setContainer] = useState(props.container);
+  var {
+    dispatch
+  } = useContext(Context);
   useEffect(() => {
@@ -27,6 +31,23 @@ var instance;
       if (instance) {
-        setMap(undefined); // instance.destroy();
+        setMap(undefined);
       }
     };
   }, [container]);
+  useEffect(() => {
+    if (map && container) {
+      dispatch({
+        map,
+        container,
+        AMap
+      });
+    }
+
+    return () => {
+      dispatch({
+        map: undefined,
+        container: undefined,
+        AMap: undefined
+      });
+    };
+  }, [map, container]);
   useMemo(() => {
@@ -33,0 +54,0 @@ if (map && typeof props.zoom === 'number' && zoom !== props.zoom && props.zoom >= 2 && props.zoom <= 20) {

package.json

 {
   "name": "@uiw/react-amap-map",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "基于 React 封装的高德地图组件。AMap Component Based On React.",
@@ -34,4 +34,4 @@ "homepage": "https://uiwjs.github.io/react-amap/#/map",
   "dependencies": {
-    "@uiw/react-amap-types": "2.4.1",
-    "@uiw/react-amap-utils": "2.4.1"
+    "@uiw/react-amap-types": "2.5.0",
+    "@uiw/react-amap-utils": "2.5.0"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

README.md

@@ -37,2 +37,54 @@ Map 组件
 
+### Context
+
+通过 React 的 Context 提供了一个`无需`为每层组件手动注入 ~~`map`~~，~~`container`~~ 和 ~~`AMap`~~ 三个属性 `props`，就能在组件树间进行传递。
+
+<!--rehype:bgWhite=true&codeSandbox=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Map, useMapContext, APILoader } from '@uiw/react-amap';
+
+const Marker = () => {
+  const { state } = useMapContext();
+  useEffect(() => {
+    if (state.map) {
+      const marker = new AMap.Marker({
+        icon: new AMap.Icon({
+          imageSize: new AMap.Size(25, 34),
+          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
+        }),
+        position: [116.405285,39.904989],
+        offset: new AMap.Pixel(-13, -30)
+      });
+      marker.setMap(state.map);
+    }
+  }, [state.map]);
+
+  return null;
+}
+
+const Demo = () => (
+  <div style={{ width: '100%', height: '300px' }}>
+    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
+      <Map center={[116.397428, 39.90923]} zoom={12}>
+        <div>
+          <Marker />
+        </div>
+      </Map>
+    </APILoader>
+  </div>
+);
+ReactDOM.render(<Demo />, _mount_);
+```
+
+```jsx
+import { useMapContext } from '@uiw/react-amap';
+
+const { state } = useMapContext();
+// => state.AMaps
+// => state.map
+// => state.container
+```
+
 ### 参数设置
@@ -39,0 +91,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59978

increased by32.64%

Number of package files

23

increased by43.75%

Lines of code

752

increased by47.45%

Number of lines in readme file

314

increased by19.85%

Dependency changes

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

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

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

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

• Updated@uiw/react-amap-types@2.5.0

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