@aks-dev/easyui 1.0.143 → 1.0.144

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/Echarts/EchartsView.tsx +54 -75
  2. package/package.json +1 -1
package/lib/Echarts/EchartsView.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * @Author: shiguo
3
3
  * @Date: 2022-05-05 14:52:53
4
4
  * @LastEditors: shiguo
5
- * @LastEditTime: 2022-09-14 11:31:56
5
+ * @LastEditTime: 2022-12-30 09:36:45
6
6
  * @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
7
7
  */
8
8
  import * as React from 'react'
@@ -32,97 +32,73 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
32
32
  )
33
33
  const WebViewRef: React.MutableRefObject<{ injectJavaScript: Function }> = React.useRef() as any
34
34
  const containerRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>()
35
-
36
- React.useEffect(() => {
37
- containerRef.current?.measure((...args) => {
38
- if (args.length > 3) {
39
- dispatch({
40
- width: args[2],
41
- height: args[3]
42
- })
43
- } else {
44
- console.warn('[sg] EchartsView measure error')
45
- }
35
+ const rootView = React.useRef<{
36
+ pageX: number;
37
+ pageY: number;
38
+ height: number;
39
+ width: number;
40
+ }>({ pageX: 0, pageY: 0, width: 0, height: 0 })
41
+ const getRootViewlayoutPromise = () => {
42
+ return new Promise((resovle, reject) => {
43
+ containerRef.current?.measure((...args) => {
44
+ if (args.length == 6) {
45
+ rootView.current = {
46
+ width: args[2],
47
+ height: args[3],
48
+ pageX: args[4],
49
+ pageY: args[5],
50
+ }
51
+ }
52
+ // console.log('RootView', rootView.current)
53
+ resovle(args)
54
+ })
46
55
  })
47
-
48
- }, [props.style])
56
+ }
49
57
 
50
58
 
51
59
  React.useLayoutEffect(() => {
52
- if (state.isLoaded) {
53
- let height = state.height ? `${state.height}px` : 'auto'
54
- let width = state.width ? `${state.width}px` : 'auto'
55
- const run = `
56
- ;(function() {
57
- var instance = echarts.getInstanceByDom(document.getElementById('main'));
58
- if(instance == null){
59
- document.getElementById('main').style.height = "${height}";
60
- document.getElementById('main').style.width = "${width}";
61
- instance = echarts.init(document.getElementById('main'));
62
- }
63
- instance.clear();
64
- instance.setOption(${toString(props.option)});
65
- })();
66
- `
67
- WebViewRef.current?.injectJavaScript(run);
68
-
69
- return () => {
70
- // console.log('useEffect relase')
60
+ ; (async () => {
61
+ if (state.isLoaded) {
62
+ await getRootViewlayoutPromise()
63
+ let height = rootView.current.height ? `${rootView.current.height}px` : 'auto'
64
+ let width = rootView.current.width ? `${rootView.current.width}px` : 'auto'
71
65
  const run = `
72
66
  ;(function() {
73
67
  var instance = echarts.getInstanceByDom(document.getElementById('main'));
74
- instance.clear();
75
- if(!instance.isDisposed()){
76
- instance.dispose();
68
+ if(instance == null){
69
+ document.getElementById('main').style.height = "${height}";
70
+ document.getElementById('main').style.width = "${width}";
71
+ instance = echarts.init(document.getElementById('main'));
77
72
  }
73
+ instance.clear();
74
+ instance.setOption(${toString(props.option)});
78
75
  })();
79
76
  `
80
77
  WebViewRef.current?.injectJavaScript(run);
78
+
79
+ return () => {
80
+ const run = `
81
+ ;(function() {
82
+ var instance = echarts.getInstanceByDom(document.getElementById('main'));
83
+ instance.clear();
84
+ if(!instance.isDisposed()){
85
+ instance.dispose();
86
+ }
87
+ })();
88
+ `
89
+
90
+ WebViewRef.current?.injectJavaScript(run);
91
+ }
81
92
  }
82
- }
93
+ return undefined
94
+ })().catch(err => {
95
+ console.log(err)
96
+ })
83
97
 
84
98
 
85
- return undefined
86
99
  }, [props.option, state.isLoaded])
87
100
 
88
101
 
89
- // React.useEffect(() => {
90
- // console.log('useEffect', state.isLoaded)
91
-
92
- // if (state.isLoaded) {
93
- // const run = `
94
- // ;(function() {
95
- // var instance = echarts.getInstanceByDom(document.getElementById('main'));
96
- // if(instance == null){
97
- // instance = echarts.init(document.getElementById('main'));
98
- // }
99
- // instance.clear();
100
- // instance.setOption(${toString(props.option)});
101
- // })();
102
- // `
103
- // WebViewRef.current?.injectJavaScript(run);
104
-
105
- // return () => {
106
- // console.log('useEffect relase')
107
- // const run = `
108
- // ;(function() {
109
- // var instance = echarts.getInstanceByDom(document.getElementById('main'));
110
- // instance.clear();
111
- // if(!instance.isDisposed()){
112
- // instance.dispose();
113
- // }
114
- // })();
115
- // `
116
- // WebViewRef.current?.injectJavaScript(run);
117
- // }
118
- // }
119
-
120
- // return undefined
121
-
122
- // }, [props.option, state.isLoaded])
123
-
124
-
125
-
126
102
 
127
103
  // const injectedJavaScript = (): string => {
128
104
  // console.log('injectedJavaScript', props.option.xAxis.data)
@@ -182,6 +158,9 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
182
158
  dispatch({ isLoaded: true })
183
159
  // console.log('onLoadEnd')
184
160
  }}
161
+ onError={e => {
162
+ console.log('onError', e)
163
+ }}
185
164
  source={{
186
165
  baseUrl: '',
187
166
  html: getHtml({ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aks-dev/easyui",
3
- "version": "1.0.143",
3
+ "version": "1.0.144",
4
4
  "description": "工具箱",
5
5
  "main": "./src/index.ts",
6
6
  "typings": "./src/index.d.ts",