Skip to content

Commit 5898dbf

Browse files
jaywcjlovejaywcjlove
committed
feat: Support React 18.
1 parent 077979c commit 5898dbf

File tree

104 files changed

+560
-908
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+560
-908
lines changed

‎package.json

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,15 @@
8080
"website"
8181
],
8282
"devDependencies": {
83-
"@kkt/ncc": "~1.0.8",
84-
"compile-less-cli": "~1.8.11",
85-
"cross-env": "~7.0.3",
86-
"husky": "~7.0.4",
87-
"lerna": "~4.0.0",
88-
"lint-staged": "~12.3.4",
89-
"prettier": "~2.6.0",
90-
"tsbb": "~3.7.0"
83+
"@babel/runtime": "^7.18.9",
84+
"@kkt/ncc": "~1.0.14",
85+
"compile-less-cli": "~1.8.13",
86+
"cross-env": "^7.0.3",
87+
"husky": "^8.0.1",
88+
"lerna": "^5.4.3",
89+
"lint-staged": "^13.0.3",
90+
"prettier": "^2.7.1",
91+
"tsbb": "^3.7.6"
9192
},
9293
"eslintConfig": {
9394
"extends": [

‎packages/api-loader/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@ Map 的父组件必须具有宽度和高度；
2727
```
2828

2929

30-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
31-
```jsx
32-
import ReactDOM from 'react-dom';
30+
```jsx mdx:preview
31+
import React from 'react';
3332
import { Map, APILoader } from '@uiw/react-baidu-map';
3433

3534
const Demo = () => (
@@ -39,7 +38,8 @@ const Demo = () => (
3938
</APILoader>
4039
</div>
4140
);
42-
ReactDOM.render(<Demo />, _mount_);
41+
42+
export default Demo;
4343
```
4444

4545
### Props

‎packages/api-loader/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"react-dom": ">=16.14.0"
4040
},
4141
"dependencies": {
42-
"@babel/runtime": "~7.18.0",
42+
"@babel/runtime": "^7.18.0",
4343
"@uiw/react-baidu-map-utils": "2.4.0"
4444
}
4545
}

‎packages/api-loader/src/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ const DEFAULT_RETRY_TIME = 3;
6767
/**
6868
* APILoader 用于加载百度地图依赖
6969
*/
70-
export default class APILoader extends React.Component<APILoaderProps, State> {
70+
export default class APILoader extends React.Component<React.PropsWithChildren<APILoaderProps>, State> {
7171
public static defaultProps = {
7272
akay: '',
7373
hostAndPath: 'api.map.baidu.com/api',
74-
version: '3.0',
74+
version: '2.0',
7575
callbackName: 'load_bmap_sdk',
7676
type: '',
7777
};
@@ -135,6 +135,9 @@ export default class APILoader extends React.Component<APILoaderProps, State> {
135135
}
136136

137137
public render() {
138+
if (window && window.BMapGL && this.props.type === 'webgl') {
139+
window.BMap = window.BMapGL as any;
140+
}
138141
return this.state.loaded ? (
139142
this.props.children
140143
) : this.props.fallback ? (

‎packages/baidu-map/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,12 @@ npm install @uiw/react-baidu-map --save
5050

5151
## 使用
5252

53-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
54-
```jsx
55-
import ReactDOM from 'react-dom';
53+
```jsx mdx:preview
54+
import React from 'react';
5655
import { Map, APILoader } from '@uiw/react-baidu-map';
5756

5857
const Demo = () => (
59-
<div style={{ width: '100%', height: '300px' }}>
58+
<div style={{ width: '100%', height: '300px', overflow: 'auto' }}>
6059
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
6160
<Map center="杭州"/>
6261
<Map center="上海">
@@ -67,7 +66,8 @@ const Demo = () => (
6766
</APILoader>
6867
</div>
6968
);
70-
ReactDOM.render(<Demo />, _mount_);
69+
70+
export default Demo;
7171
```
7272

7373
## 容器组件

‎packages/baidu-map/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"react-dom": ">=16.14.0"
3939
},
4040
"dependencies": {
41-
"@babel/runtime": "~7.18.0",
41+
"@babel/runtime": "^7.18.0",
4242
"@uiw/react-baidu-map-api-loader": "2.4.0",
4343
"@uiw/react-baidu-map-canvas-layer": "2.4.0",
4444
"@uiw/react-baidu-map-circle": "2.4.0",

‎packages/canvas-layer/README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
CanvasLayer 自定义Canvas
22
===
33

4+
⚠️ `BMap.CanvasLayer` API 不知道为何没有了
5+
46
用于在地图上绘制自定义的canvas2D或WebGL图形，[百度 CanvasLayer 文档](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b28)。
57

68
```jsx
@@ -11,9 +13,7 @@ import CanvasLayer, { useCanvasLayer } from '@uiw/react-baidu-map-canvas-layer';
1113

1214
### 基本用法
1315

14-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
1516
```jsx
16-
import ReactDOM from 'react-dom';
1717
import React, { useState } from 'react';
1818
import { Map, CanvasLayer, APILoader } from '@uiw/react-baidu-map';
1919

@@ -60,24 +60,23 @@ const Example = () => {
6060

6161
const Demo = () => (
6262
<div style={{ width: '100%' }}>
63-
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
63+
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f" version="2.0">
6464
<Example />
6565
</APILoader>
6666
</div>
6767
);
68-
ReactDOM.render(<Demo />, _mount_);
68+
export default Demo;
6969
```
7070

7171

7272
### 使用 hooks
7373

7474
`canvasLayer`, `setCanvasLayer`
7575

76-
<!--rehype:bgWhite=true-->
7776
```jsx
78-
import ReactDOM from 'react-dom';
77+
import React from 'react';
7978
import { useRef, useEffect, useState } from 'react';
80-
import { Map, APILoader, useMap, useCanvasLayer } from '@uiw/react-baidu-map';
79+
import { Map, APILoader, Provider, useMap, useCanvasLayer } from '@uiw/react-baidu-map';
8180

8281
const Example = () => {
8382
const divElm = useRef(null);
@@ -126,12 +125,14 @@ const Example = () => {
126125

127126
const Demo = () => (
128127
<div style={{ width: '100%' }}>
129-
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
130-
<Example />
128+
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f" version="2.0">
129+
<Provider>
130+
<Example />
131+
</Provider>
131132
</APILoader>
132133
</div>
133134
);
134-
ReactDOM.render(<Demo />, _mount_);
135+
export default Demo;
135136
```
136137

137138
### Props

‎packages/canvas-layer/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "@uiw/react-baidu-map-canvas-layer",
33
"version": "2.4.0",
4+
"private": true,
45
"description": "Baidu Map canvas-layer Components for React.",
56
"homepage": "https://uiwjs.github.io/react-baidu-map/#/canvas-layer",
67
"main": "cjs/index.js",
@@ -39,7 +40,7 @@
3940
"react-dom": ">=16.14.0"
4041
},
4142
"dependencies": {
42-
"@babel/runtime": "~7.18.0",
43+
"@babel/runtime": "^7.18.0",
4344
"@uiw/react-baidu-map-map": "2.4.0",
4445
"@uiw/react-baidu-map-utils": "2.4.0"
4546
}

‎packages/circle/README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import Circle, { useCircle } from '@uiw/react-baidu-map-circle';
1111

1212
### 基本用法
1313

14-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
15-
```jsx
16-
import ReactDOM from 'react-dom';
14+
```jsx mdx:preview
1715
import React, { useState } from 'react';
1816
import { Map, Circle, APILoader } from '@uiw/react-baidu-map';
1917

@@ -61,19 +59,19 @@ const Demo = () => (
6159
</APILoader>
6260
</div>
6361
);
64-
ReactDOM.render(<Demo />, _mount_);
62+
63+
export default Demo;
6564
```
6665

6766

6867
### 使用 hooks
6968

7069
`circle`, `setCircle`
7170

72-
<!--rehype:bgWhite=true-->
73-
```jsx
74-
import ReactDOM from 'react-dom';
71+
```jsx mdx:preview
72+
import React from 'react';
7573
import { useRef, useEffect, useState } from 'react';
76-
import { Map, APILoader, useMap, useCircle } from '@uiw/react-baidu-map';
74+
import { Map, Provider, APILoader, useMap, useCircle } from '@uiw/react-baidu-map';
7775

7876
const Example = () => {
7977
const [enableEditing, setEnableEditing] = useState(false);
@@ -131,11 +129,14 @@ const Example = () => {
131129
const Demo = () => (
132130
<div style={{ width: '100%', height: '300px' }}>
133131
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
134-
<Example />
132+
<Provider>
133+
<Example />
134+
</Provider>
135135
</APILoader>
136136
</div>
137137
);
138-
ReactDOM.render(<Demo />, _mount_);
138+
139+
export default Demo;
139140
```
140141

141142
### Props

‎packages/circle/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"react-dom": ">=16.14.0"
4040
},
4141
"dependencies": {
42-
"@babel/runtime": "~7.18.0",
42+
"@babel/runtime": "^7.18.0",
4343
"@uiw/react-baidu-map-map": "2.4.0",
4444
"@uiw/react-baidu-map-utils": "2.4.0"
4545
}

‎packages/control/README.md

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import Control, { useControl } from '@uiw/react-baidu-map-control';
1111

1212
### 基本用法
1313

14-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
15-
```jsx
16-
import ReactDOM from 'react-dom';
14+
```jsx mdx:preview
1715
import React, { useState, useRef } from 'react';
1816
import { Map, Control, APILoader } from '@uiw/react-baidu-map';
1917

@@ -71,58 +69,72 @@ const Demo = () => (
7169
</APILoader>
7270
</div>
7371
);
74-
ReactDOM.render(<Demo />, _mount_);
72+
73+
export default Demo;
7574
```
7675

7776
### 使用 hooks
7877

7978
`control`, `setControl`
8079

81-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
82-
```jsx
83-
import ReactDOM from 'react-dom';
80+
```jsx mdx:preview
81+
import React from 'react';
8482
import { useMemo, useRef, useEffect, useState } from 'react';
85-
import { Map, APILoader, useMap, useControl, useMapContext } from '@uiw/react-baidu-map';
83+
import { Map, Provider, APILoader, useMap, useControl, useMapContext } from '@uiw/react-baidu-map';
8684

8785
const Example = () => {
8886
const divElm = useRef(null);
8987
const [count, setCount] = useState(4);
9088
const { map } = useMapContext();
91-
const children = (
92-
<div style={{ background: 'gray', padding: '10px' }}>
93-
<button
94-
onClick={() => {
95-
setCount(count + 1);
96-
map.setZoom(map.getZoom() + 1);
97-
}}
98-
>
99-
放大1级 {count}
100-
</button>
101-
<button
102-
onClick={() => {
103-
setCount(count - 1);
104-
map.setZoom(map.getZoom() - 2);
105-
}}
106-
>
107-
缩小1级 {count}
108-
</button>
109-
</div>
110-
);
111-
useControl({ children, anchor: BMAP_ANCHOR_TOP_RIGHT });
112-
useControl({ children, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
113-
return null
89+
const { ControlPortal } = useControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
90+
const { ControlPortal: ControlPortal2 } = useControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
91+
return (
92+
<>
93+
<ControlPortal>
94+
<div style={{ background: 'gray', padding: '10px' }}>
95+
<button
96+
onClick={() => {
97+
setCount(count + 1);
98+
map.setZoom(map.getZoom() + 1);
99+
}}
100+
>
101+
放大1级 {count}
102+
</button>
103+
<button
104+
onClick={() => {
105+
setCount(count - 1);
106+
map.setZoom(map.getZoom() - 2);
107+
}}
108+
>
109+
缩小1级 {count}
110+
</button>
111+
</div>
112+
</ControlPortal>
113+
<ControlPortal2>
114+
<div
115+
style={{ background: 'gray', padding: '10px', fontSize: 12 }}
116+
onClick={() => setCount(count + 1)}
117+
>
118+
Current Count: {count}
119+
</div>
120+
</ControlPortal2>
121+
</>
122+
)
114123
}
115124

116125
const Demo = () => (
117126
<div style={{ width: '100%' }}>
118127
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
119-
<Map zoom={13} widget={['NavigationControl']} style={{ height: 350 }}>
120-
<Example />
121-
</Map>
128+
<Provider>
129+
<Map zoom={13} widget={['NavigationControl']} style={{ height: 350 }}>
130+
<Example />
131+
</Map>
132+
</Provider>
122133
</APILoader>
123134
</div>
124135
);
125-
ReactDOM.render(<Demo />, _mount_);
136+
137+
export default Demo;
126138
```
127139

128140
### Props

‎packages/control/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"react-dom": ">=16.14.0"
4040
},
4141
"dependencies": {
42-
"@babel/runtime": "~7.18.0",
42+
"@babel/runtime": "^7.18.0",
4343
"@uiw/react-baidu-map-map": "2.4.0",
4444
"@uiw/react-baidu-map-utils": "2.4.0"
4545
}

‎packages/control/src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface ControlProps extends OverlayProps {
1919
}
2020

2121
export default React.forwardRef<ControlProps & { control?: BMap.Control }, ControlProps>((props, ref) => {
22-
const { control } = useControl(props);
23-
useImperativeHandle(ref, () => ({ ...props, control }), [control]);
24-
return null;
22+
const { control, ControlPortal } = useControl(props);
23+
useImperativeHandle(ref, () => ({ ...props, control }), [control, props]);
24+
return <ControlPortal>{props.children}</ControlPortal>;
2525
});

0 commit comments

Comments
 (0)