@aks-dev/easyui 1.0.10

package/lib/Echarts/EchartsView.tsx

@@ -0,0 +1,151 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-05 14:52:53
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-10 18:10:15
+ * @FilePath: /@aks/easyui/lib/Echarts/EchartsView.tsx
+ */
+import * as React from 'react'
+import { MeasureOnSuccessCallback, StyleSheet, View, ViewStyle } from 'react-native'
+import { WebView } from 'react-native-webview'
+import { EchartsViewProps } from '.'
+import { getHtml, toString } from './helper'
+
+type State = {
+    width: number;
+    height: number;
+    isLoaded: boolean;
+}
+
+
+type Reducer = (prevState: State, action: Partial<State>) => State
+
+
+const EchartsView: React.FC<EchartsViewProps> = (props) => {
+    const [state, dispatch] = React.useReducer<Reducer>(
+        (prevState, action) => Object.assign({}, prevState, action),
+        {
+            width: 0,
+            height: 0,
+            isLoaded: false
+        }
+    )
+    const WebViewRef: React.MutableRefObject<{ injectJavaScript: Function }> = React.useRef() as any
+    const containerRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>()
+
+    React.useEffect(() => {
+        containerRef.current?.measure((...args) => {
+            dispatch({
+                width: args[2],
+                height: args[3]
+            })
+        })
+
+    }, [props.style])
+
+
+
+
+
+
+    React.useEffect(() => {
+        if (state.isLoaded) {
+            const run = `
+                        ;(function() {
+                            var myChart = echarts.init(document.getElementById('main'));
+                            myChart.setOption(${toString(props.option)});
+                        })();
+                        `
+            WebViewRef.current?.injectJavaScript(run);
+
+            return () => {
+                const run = `
+                            ;(function() {
+                                var myChart = echarts.init(document.getElementById('main'));
+                                myChart.clear();
+                            })();
+                            `
+                WebViewRef.current?.injectJavaScript(run);
+            }
+        }
+
+        return undefined
+
+    }, [props.option, state.isLoaded])
+
+
+
+
+    const injectedJavaScript = (): string => {
+        let height = state.height ? `${state.height}px` : 'auto'
+        let width = state.width ? `${state.width}px` : 'auto'
+        return `
+                ;(function() {
+                    document.getElementById('main').style.height = "${height}";
+                    document.getElementById('main').style.width = "${width}";
+                    var myChart = echarts.init(document.getElementById('main'));
+                    myChart.setOption(${toString(props.option)});
+                    myChart.on('click', function(params) {
+                        var seen = [];
+                        var paramsString = JSON.stringify(params, function(key, val) {
+                        if (val != null && typeof val == "object") {
+                            if (seen.indexOf(val) >= 0) {
+                            return;
+                            }
+                            seen.push(val);
+                        }
+                        return val;
+                        });
+                        window.ReactNativeWebView.postMessage(JSON.stringify({"types":"ON_PRESS","payload": paramsString}));
+                    });
+                })();
+                `
+    }
+
+
+
+    return (
+        <View style={[styles.container, props.style]} ref={containerRef as any}>
+            <WebView
+                ref={WebViewRef as any}
+                originWhitelist={['*']}
+                useWebKit={true}  // ios使用最新webkit内核渲染
+                allowUniversalAccessFromFileURLs={true}
+                geolocationEnabled={true}
+                mixedContentMode={'always'}
+                renderLoading={() => {
+                    if (props.renderLoading) return props.renderLoading()
+                    return <View style={{ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' }} />
+                }} // 设置空View，修复ioswebview闪白
+                style={{ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' }} // 设置背景色透明，修复android闪白
+                scrollEnabled={false}
+                // onMessage={onMessage}
+                javaScriptEnabled={true}
+                injectedJavaScript={injectedJavaScript()}
+                startInLoadingState={false}
+                onLoadEnd={(_) => {
+                    dispatch({ isLoaded: true })
+                }}
+                source={{
+                    baseUrl: '',
+                    html: getHtml({ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' })
+                }}
+            />
+        </View>
+    )
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexGrow: 0,
+        backgroundColor: 'white'
+    }
+})
+
+
+
+
+
+export default React.memo(EchartsView)

package/lib/Echarts/demo.tsx

@@ -0,0 +1,235 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-06 12:05:42
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-06 12:07:58
+ * @FilePath: /@aks/easyui/lib/Echarts/demo.tsx
+ */
+
+
+
+import * as React from 'react'
+import { View, StyleSheet, } from 'react-native';
+
+import EchartsView from './EchartsView'
+import {echarts} from '.'
+
+
+
+export default () => {
+
+
+
+  let option = {
+    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+    title: {
+      text: 'Gradient Stacked Area Chart'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'Line 1',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(128, 255, 165)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(1, 191, 236)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [140, 232, 101, 264, 90, 340, 250]
+      },
+      {
+        name: 'Line 2',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(0, 221, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(77, 119, 255)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [120, 282, 111, 234, 220, 340, 310]
+      },
+      {
+        name: 'Line 3',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(55, 162, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(116, 21, 219)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [320, 132, 201, 334, 190, 130, 220]
+      },
+      {
+        name: 'Line 4',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 0, 135)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(135, 0, 157)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 402, 231, 134, 190, 230, 120]
+      },
+      {
+        name: 'Line 5',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 191, 0)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(224, 62, 76)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 302, 181, 234, 210, 290, 150]
+      }
+    ]
+  };
+
+
+
+
+
+  return (
+    <View style={styles.container}>
+
+      <View style={{ width: 100, height: 100, backgroundColor: 'pink' }} />
+      <EchartsView
+        option={option}
+        style={{
+          marginTop: 100,
+          marginHorizontal: 20,
+          height: 200,
+          // backgroundColor: 'red'
+        }}
+      />
+
+    </View>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    display: 'flex',
+  },
+
+})

package/lib/Echarts/helper.tsx

@@ -0,0 +1,63 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-05 15:56:21
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-06 11:40:51
+ * @FilePath: /@aks/easyui/lib/Echarts/helper.tsx
+ */
+
+
+export const getHtml = (props: { backgroundColor: any }) => {
+    return `
+      <!DOCTYPE html>
+        <html>
+    
+        <head>
+          <title>echarts</title>
+          <meta http-equiv="content-type" content="text/html; charset=utf-8">
+          <!-- webView ios适配 start -->
+          <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
+          <!-- webView ios适配 end -->
+          <style type="text/css">
+            html,
+            body {
+              height: 100%;
+              width: 100%;
+              margin: 0;
+              padding: 0;
+              background-color: rgba(0, 0, 0, 0);
+            }
+    
+            #main {
+              height: 100%;
+              background-color: rgba(0, 0, 0, 0);
+            }
+    
+          </style>
+          <script type="text/javascript" src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>
+        </head>
+    
+        <body style="background-color:${props.backgroundColor}">
+          <div id="main"></div>
+        </body>
+    
+      </html>
+      `
+  }
+  
+  export const toString = (obj: object) => {
+    let result = JSON.stringify(obj, function (key, val) {
+      // 对function进行特殊处理
+      if (typeof val === 'function') {
+        return `~ha~${val}~ha~`;
+      }
+      return val;
+    });
+    // 再进行还原
+    do {
+      result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\n/g, '').replace(/\\\"/g, "\"");//最后一个replace将release模式中莫名生成的\"转换成"
+    } while (result.indexOf('~ha~') >= 0);
+  
+    return result;
+  }
+  

package/lib/Echarts/index.ts

@@ -0,0 +1,29 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-05 14:52:22
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-06 10:10:43
+ * @FilePath: /@aks/easyui/lib/Echarts/index.ts
+ */
+
+import * as React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+
+export type EchartsViewProps = {
+    option: any;
+    style?: StyleProp<ViewStyle>;
+    renderLoading?: () => React.ReactElement;
+}
+
+
+
+export declare const EchartsView: React.FC<EchartsViewProps>;
+
+
+
+import * as echarts from 'echarts/core'
+
+
+export {
+    echarts
+}

package/lib/Modal/Modal.tsx

@@ -0,0 +1,12 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-26 11:30:34
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:34:52
+ * @FilePath: /@aks/easy/lib/Modal/Modal.tsx
+ */
+
+
+
+
+export { default as Modal, ModalProps } from 'react-native-modal'

package/lib/Modal/index.ts

@@ -0,0 +1,10 @@
+/*
+* @Author: shiguo
+* @Date: 2022-04-22 14:29:32
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:34:45
+ * @FilePath: /@aks/easy/lib/Modal/index.ts
+*/
+
+
+export { default as Modal, ModalProps } from 'react-native-modal'