@aks-dev/easyui 1.0.142 → 1.0.144

package/lib/Echarts/EchartsView.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-05-05 14:52:53
  * @LastEditors: shiguo
- * @LastEditTime: 2022-09-14 11:31:56
+ * @LastEditTime: 2022-12-30 09:36:45
  * @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
  */
 import * as React from 'react'
@@ -32,97 +32,73 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
     )
     const WebViewRef: React.MutableRefObject<{ injectJavaScript: Function }> = React.useRef() as any
     const containerRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>()
-
-    React.useEffect(() => {
-        containerRef.current?.measure((...args) => {
-            if (args.length > 3) {
-                dispatch({
-                    width: args[2],
-                    height: args[3]
-                })
-            } else {
-                console.warn('[sg] EchartsView measure error')
-            }
+    const rootView = React.useRef<{
+        pageX: number;
+        pageY: number;
+        height: number;
+        width: number;
+    }>({ pageX: 0, pageY: 0, width: 0, height: 0 })
+    const getRootViewlayoutPromise = () => {
+        return new Promise((resovle, reject) => {
+            containerRef.current?.measure((...args) => {
+                if (args.length == 6) {
+                    rootView.current = {
+                        width: args[2],
+                        height: args[3],
+                        pageX: args[4],
+                        pageY: args[5],
+                    }
+                }
+                // console.log('RootView', rootView.current)
+                resovle(args)
+            })
         })
-
-    }, [props.style])
+    }
 
 
     React.useLayoutEffect(() => {
-        if (state.isLoaded) {
-            let height = state.height ? `${state.height}px` : 'auto'
-            let width = state.width ? `${state.width}px` : 'auto'
-            const run = `
-            ;(function() {
-                var instance = echarts.getInstanceByDom(document.getElementById('main'));
-                if(instance == null){
-                    document.getElementById('main').style.height = "${height}";
-                    document.getElementById('main').style.width = "${width}";
-                    instance = echarts.init(document.getElementById('main'));
-                }
-                instance.clear();
-                instance.setOption(${toString(props.option)});
-            })();
-            `
-            WebViewRef.current?.injectJavaScript(run);
-
-            return () => {
-                // console.log('useEffect relase')
+        ; (async () => {
+            if (state.isLoaded) {
+                await getRootViewlayoutPromise()
+                let height = rootView.current.height ? `${rootView.current.height}px` : 'auto'
+                let width = rootView.current.width ? `${rootView.current.width}px` : 'auto'
                 const run = `
                 ;(function() {
                     var instance = echarts.getInstanceByDom(document.getElementById('main'));
-                    instance.clear();
-                    if(!instance.isDisposed()){
-                        instance.dispose();
+                    if(instance == null){
+                        document.getElementById('main').style.height = "${height}";
+                        document.getElementById('main').style.width = "${width}";
+                        instance = echarts.init(document.getElementById('main'));
                     }
+                    instance.clear();
+                    instance.setOption(${toString(props.option)});
                 })();
                 `
                 WebViewRef.current?.injectJavaScript(run);
+
+                return () => {
+                    const run = `
+                    ;(function() {
+                        var instance = echarts.getInstanceByDom(document.getElementById('main'));
+                        instance.clear();
+                        if(!instance.isDisposed()){
+                            instance.dispose();
+                        }
+                    })();
+                    `
+
+                    WebViewRef.current?.injectJavaScript(run);
+                }
             }
-        }
+            return undefined
+        })().catch(err => {
+            console.log(err)
+        })
 
 
-        return undefined
     }, [props.option, state.isLoaded])
 
 
-    // React.useEffect(() => {
-    //     console.log('useEffect', state.isLoaded)
-
-    //     if (state.isLoaded) {
-    //         const run = `
-    //                     ;(function() {
-    //                         var instance = echarts.getInstanceByDom(document.getElementById('main'));
-    //                         if(instance == null){
-    //                              instance = echarts.init(document.getElementById('main'));
-    //                         }
-    //                         instance.clear();
-    //                         instance.setOption(${toString(props.option)});
-    //                     })();
-    //                     `
-    //         WebViewRef.current?.injectJavaScript(run);
-
-    //         return () => {
-    //             console.log('useEffect relase')
-    //             const run = `
-    //                         ;(function() {
-    //                             var instance = echarts.getInstanceByDom(document.getElementById('main'));
-    //                             instance.clear();
-    //                             if(!instance.isDisposed()){
-    //                                 instance.dispose();
-    //                             }
-    //                         })();
-    //                         `
-    //             WebViewRef.current?.injectJavaScript(run);
-    //         }
-    //     }
-
-    //     return undefined
-
-    // }, [props.option, state.isLoaded])
-
-
-
 
     // const injectedJavaScript = (): string => {
     //     console.log('injectedJavaScript', props.option.xAxis.data)
@@ -182,6 +158,9 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
                     dispatch({ isLoaded: true })
                     // console.log('onLoadEnd')
                 }}
+                onError={e => {
+                    console.log('onError', e)
+                }}
                 source={{
                     baseUrl: '',
                     html: getHtml({ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' })

package/lib/RefreshList/RefreshList.tsx

@@ -62,29 +62,34 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
 
     switch (mode) {
         case 'FlatList':
-            props = props as FlatListRefreshProps;
+            let flatListProps: FlatListRefreshProps = props as FlatListRefreshProps
             return (
                 <Animated.FlatList
                     {...rest as FlatListRefreshProps}
                     ref={ref}
                     refreshing={refreshState == RefreshState.HeaderRefreshing}
                     keyExtractor={(_, index) => { return `sg-index-FlatList-${seed}-${index}` }}
-                    contentContainerStyle={props.data?.length ? {} : { height: "100%" }}
+                    contentContainerStyle={flatListProps.data?.length ? {} : { height: "100%" }}
                     onRefresh={onRefresh}
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {flatListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(_) => <ListFooterComponent {...flatListProps} />}
 
                 />
             )
 
         case 'SectionList':
-            props = props as SectionListRefreshProps;
+           let sectionListProps:SectionListRefreshProps = props as SectionListRefreshProps;
             const { ItemSeparatorComponent = (_) => (
                 <View style={{ height: 1 }} />
-            ) } = props
+            ) } = sectionListProps
             return (
                 <Animated.SectionList
                     {...rest as SectionListRefreshProps}
@@ -92,26 +97,32 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
                     refreshing={refreshState == RefreshState.HeaderRefreshing}
                     onRefresh={onRefresh}
                     keyExtractor={(_, index) => { return `sg-index-SectionList-${seed}-${index}` }}
-                    contentContainerStyle={props.sections?.length > 0 ? {} : { height: "100%" }}
+                    contentContainerStyle={sectionListProps.sections?.length > 0 ? {} : { height: "100%" }}
                     ItemSeparatorComponent={ItemSeparatorComponent}
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
-                    renderSectionHeader={props.renderSectionHeader}
+                    // ListHeaderComponent={(_) => <ListHeaderComponent {...sectionListProps} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {sectionListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(_) => <ListFooterComponent {...sectionListProps} />}
+                    renderSectionHeader={sectionListProps.renderSectionHeader}
                 />
             )
 
         case 'SwipeList':
+            let swipeListProps:SwipeListViewRefreshProps = props as SwipeListViewRefreshProps
             const { renderHiddenItem = (data, rowMap) => (
                 <View style={{ backgroundColor: 'red', height: '100%', alignItems: 'flex-end', justifyContent: "center" }}>
                     <Text>Right </Text>
                 </View>
-            ) } = props as SwipeListViewRefreshProps
+            ) } = swipeListProps 
             return (
                 <SwipeListView
-
                     {...rest as SwipeListViewRefreshProps}
                     rightOpenValue={-100}
                     leftOpenValue={0}
@@ -124,8 +135,13 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(args) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(args) => <ListFooterComponent {...props} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {swipeListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(args) => <ListFooterComponent {...swipeListProps} />}
                     renderHiddenItem={renderHiddenItem}
                 />
 
@@ -170,7 +186,7 @@ const ListFooterComponent = React.memo((props: RefreshListProps) => {
                 </View>
             )
         case RefreshState.EmptyData:
-            if (props.ListEmptyComponent) return props.ListEmptyComponent()
+            if (props.renderListEmptyComponent) return props.renderListEmptyComponent()
             return (
                 <View style={{
                     width: '100%', height: '100%',

package/lib/RefreshList/index.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-04-20 14:56:05
- * @LastEditTime: 2022-11-03 10:34:30
+ * @LastEditTime: 2022-12-29 10:46:57
  * @LastEditors: shiguo
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /@aks-dev/easyui/lib/RefreshList/index.ts
@@ -29,7 +29,7 @@ type CommonProps = {
     onFooterRefresh: (info: any) => void;
     reload: () => void;
     refreshState: RefreshState;
-    ListEmptyComponent: () => React.ReactElement;
+    renderListEmptyComponent: () => React.ReactElement;
 }
 
 
@@ -52,7 +52,7 @@ export type SectionListRefreshProps = {
 export type SwipeListViewRefreshProps = {
     mode: 'SwipeList';
     data: ItemT[];
-} & IPropsSwipeListView<ItemT> & Partial<CommonProps>;
+} & IPropsSwipeListView<ItemT> & Partial<CommonProps> &  FlatListProps<ItemT> ;
 
 export type RefreshListProps = FlatListRefreshProps | SwipeListViewRefreshProps | SectionListRefreshProps
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.142",
+  "version": "1.0.144",
   "description": "工具箱",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",