@aks-dev/easyui 1.0.163 → 1.1.2

package/dist/components/AnimationModal/AnimationModal.js

@@ -0,0 +1,151 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-17 15:22:06
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-09-27 15:17:15
+ * @FilePath: /@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
+ */
+import * as React from "react";
+import { View, Animated, Easing, PanResponder, StyleSheet, useWindowDimensions, BackHandler, } from "react-native";
+import * as utils from "../../utils/lazy";
+// type State = {
+//     display: 'flex' | 'none';
+// }
+// type StateReducerProps = (state: State, action: Partial<State>) => State
+export const AnimationModal = React.forwardRef((props, ref) => {
+    const { animationType = "from-bottom", mask = false } = props || {};
+    const { height } = useWindowDimensions();
+    // const [state, dispatch] = React.useReducer<StateReducerProps>(
+    //     (state, action) => ({ ...state, ...action }),
+    //     {
+    //         display: 'none'
+    //     })
+    const [display, setDisplay] = useCallbackState("none");
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+    const timing = (value) => {
+        Animated.timing(animatedValue, {
+            toValue: value,
+            duration: 350,
+            useNativeDriver: true,
+            easing: Easing.ease,
+        }).start(({ finished }) => {
+            /* 动画完成的回调函数 */
+        });
+    };
+    const viewRef = React.useRef(null);
+    const layoutRef = React.useRef({ h0: 0, h1: 0 });
+    const getLayoutPromise = () => {
+        return new Promise((resovle, reject) => {
+            viewRef.current?.measure((...args) => {
+                if (args.length == 6) {
+                    layoutRef.current.h1 = args[3];
+                }
+                resovle(args);
+            });
+        });
+    };
+    const init = React.useCallback(() => ({ show, hide, setData, getData }), []);
+    React.useImperativeHandle(ref, init, []);
+    const dataRef = React.useRef(null);
+    const setData = (data) => {
+        dataRef.current = data;
+        return init();
+    };
+    const getData = () => dataRef.current;
+    const show = () => {
+        setDisplay("flex", async () => {
+            await utils.sleep(50);
+            await getLayoutPromise();
+            timing(-layoutRef.current?.h1);
+        });
+        return init();
+    };
+    const hide = () => {
+        timing(0);
+        setTimeout(() => {
+            setDisplay("none");
+        }, 300);
+        return init();
+    };
+    React.useEffect(() => {
+        let addEventListener = BackHandler.addEventListener("hardwareBackPress", () => {
+            return display == "flex";
+        });
+        return () => {
+            addEventListener.remove();
+        };
+    }, [display]);
+    return (<View style={Object.assign({
+            display: display,
+        }, styles.container, props.style)} {...PanResponder.create({
+        onStartShouldSetPanResponder: (e, gestureState) => {
+            let pageY = e.nativeEvent.pageY;
+            let topY = height - layoutRef.current.h1;
+            if (pageY <= topY && !mask) {
+                return true;
+            }
+            return false;
+        },
+        onPanResponderGrant: (e, gestureState) => {
+            // console.log({e})
+            let pageY = e.nativeEvent.pageY;
+            let topY = height - layoutRef.current.h1;
+            if (pageY <= topY && !mask) {
+                e.stopPropagation();
+                hide();
+            }
+        },
+    }).panHandlers}>
+      <Animated.View style={Object.assign({}, styles.wrapper, {
+            transform: [{ translateY: animatedValue }],
+        })} 
+    // onLayout={e => {
+    //     let target: LayoutRectangle = e.nativeEvent.layout
+    //     layoutRef.current.h1 = target.height
+    // }}
+    ref={viewRef}>
+        {props.children}
+      </Animated.View>
+    </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 999,
+        // display: 'flex',
+        flexDirection: "column",
+        backgroundColor: "#00000055",
+        overflow: "hidden",
+    },
+    wrapper: {
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        // backgroundColor: 'pink',
+        width: "100%",
+        top: "100%",
+    },
+    empty: {
+        flex: 1,
+        position: "relative",
+        //  backgroundColor: 'cyan'
+    },
+});
+const useCallbackState = (od) => {
+    const cbRef = React.useRef(undefined);
+    const [data, setData] = React.useState(od);
+    React.useEffect(() => {
+        cbRef.current && cbRef.current(data);
+    }, [data]);
+    return [
+        data,
+        (d, callback) => {
+            cbRef.current = callback;
+            setData(d);
+        },
+    ];
+};

package/dist/components/DottedLine/DottedLine.js

@@ -0,0 +1,50 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-07-12 15:30:19
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-12 15:33:06
+ * @FilePath: /@aks-dev/easyui/lib/DottedLine/DottedLine.tsx
+ */
+import React from "react";
+import { StyleSheet, View } from "react-native";
+export default (props) => {
+    const { vertical = false, dottedColor, dottedCount = 200, ...rest } = props;
+    const arrs = Array.from({ length: dottedCount }, (k, v) => v);
+    return (<View style={{
+            ...styles.container,
+            flexDirection: vertical ? "column" : "row",
+            ...rest.style,
+        }}>
+      {arrs.map((item, index) => {
+            return (<View key={`dotted-${index}`} style={{
+                    ...(vertical ? styles.dotted_vertical : styles.dotted_horizontal),
+                    ...(dottedColor && { backgroundColor: dottedColor }),
+                }}/>);
+        })}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        overflow: "hidden",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+    },
+    dotted_horizontal: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: 2,
+        height: 1,
+        marginRight: 2,
+        backgroundColor: "#cccccc",
+    },
+    dotted_vertical: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: 1,
+        height: 2,
+        marginBottom: 2,
+        backgroundColor: "#cccccc",
+    },
+});

package/{lib/Echarts/EchartsView.tsx → dist/components/EchartsView/EchartsView.js}

@@ -5,39 +5,20 @@
  * @LastEditTime: 2023-01-03 17:50:43
  * @FilePath: /@aks-dev/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 }>()
-    const rootView = React.useRef<{
-        pageX: number;
-        pageY: number;
-        height: number;
-        width: number;
-    }>({ pageX: 0, pageY: 0, width: 0, height: 0 })
+import * as React from "react";
+import { StyleSheet, View, } from "react-native";
+import { WebView } from "react-native-webview";
+import { getHtml, toString } from "./helper";
+// type Reducer = (prevState: State, action: Partial<State>) => State;
+const EchartsView = (props) => {
+    const [state, dispatch] = React.useReducer((prevState, ...args) => Object.assign({}, prevState, ...args), {
+        width: 0,
+        height: 0,
+        isLoaded: false,
+    });
+    const WebViewRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const rootView = React.useRef({ pageX: 0, pageY: 0, width: 0, height: 0 });
     const getRootViewlayoutPromise = () => {
         return new Promise((resovle, reject) => {
             containerRef.current?.measure((...args) => {
@@ -47,21 +28,23 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
                         height: args[3],
                         pageX: args[4],
                         pageY: args[5],
-                    }
+                    };
                 }
                 // console.log('RootView', rootView.current)
-                resovle(args)
-            })
-        })
-    }
-
-
+                resovle(args);
+            });
+        });
+    };
     React.useLayoutEffect(() => {
-        ; (async () => {
+        (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'
+                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'));
@@ -73,9 +56,8 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
                     instance.clear();
                     instance.setOption(${toString(props.option)});
                 })();
-                `
+                `;
                 WebViewRef.current?.injectJavaScript(run);
-
                 return () => {
                     const run = `
                     ;(function() {
@@ -85,21 +67,15 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
                             instance.dispose();
                         }
                     })();
-                    `
-
+                    `;
                     WebViewRef.current?.injectJavaScript(run);
-                }
+                };
             }
-            return undefined
-        })().catch(err => {
-            console.log(err)
-        })
-
-
-    }, [props.option, state.isLoaded])
-
-
-
+            return undefined;
+        })().catch((err) => {
+            console.log(err);
+        });
+    }, [props.option, state.isLoaded]);
     // const injectedJavaScript = (): string => {
     //     console.log('injectedJavaScript', props.option.xAxis.data)
     //     let height = state.height ? `${state.height}px` : 'auto'
@@ -130,61 +106,46 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
     //             })();
     //             `
     // }
-
-
-
-    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',
-                    opacity: 0.99,//解决闪退的办法
-                }} // 设置背景色透明，修复android闪白
-                scrollEnabled={false}
-                // onMessage={e=>{
-                //     console.log(e)
-                // }}
-                javaScriptEnabled={true}
-                // injectedJavaScript={injectedJavaScript()}
-                startInLoadingState={false}
-                onLoadEnd={(_) => {
-                    dispatch({ isLoaded: true })
-                    // console.log('onLoadEnd')
-                }}
-                onError={e => {
-                    console.log('onError', e)
-                }}
-                source={{
-                    baseUrl: '',
-                    html: getHtml({ backgroundColor: (props.style as ViewStyle)?.backgroundColor || 'transparent' })
-                }}
-            />
-        </View>
-    )
-
-}
-
+    return (<View style={[styles.container, props.style]} ref={containerRef}>
+      <WebView ref={WebViewRef} originWhitelist={["*"]} useWebKit={true} // ios使用最新webkit内核渲染
+     allowUniversalAccessFromFileURLs={true} geolocationEnabled={true} mixedContentMode={"always"} renderLoading={() => {
+            if (props.renderLoading)
+                return props.renderLoading();
+            return (<View style={{
+                    backgroundColor: props.style?.backgroundColor || "transparent",
+                }}/>);
+        }} // 设置空View，修复ioswebview闪白
+     style={{
+            backgroundColor: props.style?.backgroundColor || "transparent",
+            opacity: 0.99, //解决闪退的办法
+        }} // 设置背景色透明，修复android闪白
+     scrollEnabled={false} 
+    // onMessage={e=>{
+    //     console.log(e)
+    // }}
+    javaScriptEnabled={true} 
+    // injectedJavaScript={injectedJavaScript()}
+    startInLoadingState={false} onLoadEnd={(_) => {
+            dispatch({ isLoaded: true });
+            // console.log('onLoadEnd')
+        }} onError={(e) => {
+            console.log("onError", e);
+        }} source={{
+            baseUrl: "",
+            html: getHtml({
+                backgroundColor: props.style?.backgroundColor || "transparent",
+            }),
+        }}/>
+    </View>);
+};
 const styles = StyleSheet.create({
     container: {
-        display: 'flex',
+        display: "flex",
         flexGrow: 0,
-        backgroundColor: 'white'
-    }
-})
-
-
-
-
-
-export default EchartsView
+        backgroundColor: "white",
+    },
+});
+export default EchartsView;
 // React.memo(EchartsView)
+// import * as echarts from "echarts/core";
+// export { echarts };

package/{lib/Echarts/helper.tsx → dist/components/EchartsView/helper.js}

@@ -5,9 +5,7 @@
  * @LastEditTime: 2023-01-03 17:02:57
  * @FilePath: /@aks-dev/easyui/lib/Echarts/helper.tsx
  */
-
-
-export const getHtml = (props: { backgroundColor: any }) => {
+export const getHtml = (props) => {
     return `
       <!DOCTYPE html>
         <html>
@@ -42,30 +40,25 @@ export const getHtml = (props: { backgroundColor: any }) => {
         </body>
     
       </html>
-      `
-  }
-
-  /**
-   * https://res.actiiot.com/echarts/5.0.2/echarts.min.js
-   * 
-   * https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js
-   */
-  
-  export const toString = (obj: object) => {
+      `;
+};
+/**
+ * https://res.actiiot.com/echarts/5.0.2/echarts.min.js
+ *
+ * https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js
+ */
+export const toString = (obj) => {
     let result = JSON.stringify(obj, function (key, val) {
-      // 对function进行特殊处理
-      if (typeof val === 'function') {
-        return `~ha~${val}~ha~`;
-      }
-      return val;
+        // 对function进行特殊处理
+        if (typeof val === 'function') {
+            return `~ha~${val}~ha~`;
+        }
+        return val;
     });
     // 再进行还原
     do {
-      result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\"");//最后一个replace将release模式中莫名生成的\"转换成"
+        result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\""); //最后一个replace将release模式中莫名生成的\"转换成"
     } while (result.indexOf('~ha~') >= 0);
-  
     return result;
-  }
-  
-
-  ///.replace(/\\n/g, '')
+};
+///.replace(/\\n/g, '')

package/dist/components/Hud/AlertBottomView/AlertBottomView.js

@@ -0,0 +1,174 @@
+import * as React from "react";
+import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity, Dimensions, } from "react-native";
+import Modal from "react-native-modal";
+import { px2dp, deviceWidth } from "../../../screen/px2dp";
+import { px2sp } from "../../../screen/px2sp";
+export default React.forwardRef((_, ref) => {
+    const defaultState = {
+        visible: false,
+        cancelText: "取消",
+        confirmText: "确定",
+    };
+    const [state, setState] = React.useState(defaultState);
+    const cancelCallbackRef = React.useRef(undefined);
+    const confirmCallbackRef = React.useRef(undefined);
+    React.useImperativeHandle(ref, () => ({
+        show: async (options) => {
+            setState(Object.assign({}, defaultState, { visible: true }, options));
+            cancelCallbackRef.current = options.cancel;
+            confirmCallbackRef.current = options.confirm;
+        },
+        hide,
+    }), []);
+    const hide = async () => {
+        setState(defaultState);
+    };
+    React.useEffect(() => {
+        if (Platform.OS == "android") {
+            if (state.visible) {
+                StatusBar.setBackgroundColor("black");
+                StatusBar.setBarStyle("light-content");
+            }
+            else {
+                StatusBar.setBackgroundColor("transparent");
+                StatusBar.setBarStyle("dark-content");
+            }
+        }
+    }, [state.visible]);
+    return (<Modal hideModalContentWhileAnimating={true} //通过隐藏模态内容直到动画完成来增强性能
+     useNativeDriver={true} //定义动画是否应使用本机驱动程序
+     animationIn="slideInUp" animationOut="slideOutDown" onBackButtonPress={() => {
+            //按下Android后退按钮时调用
+            hide();
+        }} onBackdropPress={() => {
+            //按下背景时调用
+            hide();
+        }} isVisible={state.visible} style={{ margin: 0 }} deviceHeight={Dimensions.get("screen").height}>
+      <View style={styles.container}>
+        <View style={[styles.wrapper, state.wrapperStyle]}>
+          {state.title && <Text style={styles.titleText}>{state.title}</Text>}
+          <View style={[state.contentContainerStyle]}>
+            {(() => {
+            if (typeof state.content == "string")
+                return <Text style={styles.contentText}>{state.content}</Text>;
+            if (React.isValidElement(state.content))
+                return state.content;
+            return <View />;
+        })()}
+          </View>
+          {(state.cancelText || state.confirmText) && (<View style={styles.action}>
+              {state.cancelText && (<TouchableOpacity style={[
+                    styles.cancel,
+                    { marginRight: state.confirmText ? px2dp(15) : 0 },
+                    state.cancelContainerStyle,
+                ]} activeOpacity={0.8} onPress={() => {
+                    hide();
+                    cancelCallbackRef.current && cancelCallbackRef.current();
+                    cancelCallbackRef.current = undefined;
+                }}>
+                  <Text style={[styles.cancelText, state.cancelTextStyle]}>
+                    {state.cancelText}
+                  </Text>
+                </TouchableOpacity>)}
+
+              {state.confirmText && (<TouchableOpacity style={[
+                    styles.confirm,
+                    { marginLeft: state.cancelText ? px2dp(15) : 0 },
+                    state.confirmContainerStyle,
+                ]} activeOpacity={0.8} onPress={() => {
+                    hide();
+                    confirmCallbackRef.current && confirmCallbackRef.current();
+                    confirmCallbackRef.current = undefined;
+                }}>
+                  <Text style={[styles.confirmText, state.confirmTextStyle]}>
+                    {state.confirmText}
+                  </Text>
+                </TouchableOpacity>)}
+            </View>)}
+        </View>
+      </View>
+    </Modal>);
+});
+export const alertBottomViewRef = React.createRef();
+export const showAlertBottomModal = (props) => {
+    alertBottomViewRef.current?.show(props);
+};
+// const sleep = (msec?: number) => {
+//     return new Promise(resolve => {
+//         setTimeout(resolve, msec || 350);
+//     });
+// }
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        justifyContent: "flex-end",
+        alignItems: "center",
+    },
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: "100%",
+        backgroundColor: "white",
+        overflow: "hidden",
+        borderTopLeftRadius: px2dp(10),
+        borderTopRightRadius: px2dp(10),
+        display: "flex",
+        padding: px2dp(15),
+    },
+    titleText: {
+        maxWidth: deviceWidth - px2dp(30),
+        fontSize: px2sp(18),
+        marginBottom: px2dp(20),
+        // backgroundColor: 'red',
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "#1A1A1A",
+    },
+    contentText: {
+        maxWidth: deviceWidth - px2dp(30),
+        marginBottom: px2dp(20),
+        minHeight: px2dp(40),
+        flexGrow: 0,
+        flexShrink: 1,
+        width: undefined,
+        fontSize: px2sp(15),
+        // backgroundColor: 'red',
+        color: "#1A1A1A",
+        textAlign: "center",
+    },
+    action: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        // backgroundColor:"red"
+    },
+    cancel: {
+        width: "40%",
+        height: px2dp(44),
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: px2dp(10),
+        borderWidth: px2dp(1),
+        borderColor: "#A3A9CC",
+    },
+    confirm: {
+        width: "40%",
+        height: px2dp(44),
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#2763FF",
+        borderRadius: px2dp(10),
+    },
+    cancelText: {
+        fontSize: px2sp(15),
+        color: "#A3A9CC",
+    },
+    confirmText: {
+        fontSize: px2sp(15),
+        color: "white",
+    },
+});