@aks-dev/easyui 1.0.163 → 1.1.5

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",
+    },
+});

package/dist/components/Hud/AlertSheetView/AlertSheetView.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+type RefAttributes = {
+    show: (options: Partial<AlertSheetViewOptions>) => void;
+    hide: () => void;
+};
+type ActionSheet = {
+    text: string;
+    color?: ColorValue | undefined;
+    onClick?: () => void;
+};
+export type AlertSheetViewOptions = {
+    actions: ActionSheet[];
+};
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<RefAttributes>>;
+export default _default;
+export declare const alertSheetViewRef: React.RefObject<RefAttributes | null>;
+export declare const showAlertSheetModal: (props: Partial<AlertSheetViewOptions>) => void;
+//# sourceMappingURL=AlertSheetView.d.ts.map

package/dist/components/Hud/AlertSheetView/AlertSheetView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertSheetView.d.ts","sourceRoot":"","sources":["../../../../src/components/Hud/AlertSheetView/AlertSheetView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAQL,UAAU,EACX,MAAM,cAAc,CAAC;AAKtB,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IACxD,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;;AAKF,wBAuFG;AAEH,eAAO,MAAM,iBAAiB,uCAAmC,CAAC;AAElE,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,CAAC,qBAAqB,CAAC,SAExE,CAAC"}

package/dist/components/Hud/AlertSheetView/AlertSheetView.js

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Dimensions, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+import Modal from "react-native-modal";
+import { px2dp } from "../../../screen/px2dp";
+import { px2sp } from "../../../screen/px2sp";
+export default React.forwardRef((_, ref) => {
+    const defaultState = {
+        visible: false,
+        actions: [],
+    };
+    const [state, setState] = React.useState(defaultState);
+    React.useImperativeHandle(ref, () => ({
+        show: async (options) => {
+            setState(Object.assign({}, defaultState, { visible: true }, options));
+        },
+        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} deviceHeight={Dimensions.get("screen").height} style={{ margin: 0 }}>
+      <View style={styles.container}>
+        <View style={[styles.wrapper]}>
+          <View style={styles.itemContainer}>
+            {state.actions?.map((i, idx) => (<TouchableOpacity key={`sg-action-${idx}`} style={[styles.item]} activeOpacity={1} onPress={() => {
+                hide();
+                i.onClick && i.onClick();
+            }}>
+                <Text style={[styles.itemText, { color: i.color }]} numberOfLines={2}>
+                  {i.text}
+                </Text>
+              </TouchableOpacity>))}
+          </View>
+
+          <TouchableOpacity style={[styles.cancel]} activeOpacity={1} onPress={() => {
+            hide();
+        }}>
+            <Text style={[styles.cancelText]}>取消</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>);
+});
+export const alertSheetViewRef = React.createRef();
+export const showAlertSheetModal = (props) => {
+    alertSheetViewRef.current?.show(props);
+};
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        justifyContent: "flex-end",
+        alignItems: "center",
+    },
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: "100%",
+        // backgroundColor: 'pink',
+        overflow: "hidden",
+        borderTopLeftRadius: px2dp(10),
+        borderTopRightRadius: px2dp(10),
+        display: "flex",
+        padding: px2dp(15),
+    },
+    cancel: {
+        height: px2dp(50),
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: px2dp(10),
+        backgroundColor: "white",
+        marginTop: px2dp(15),
+    },
+    cancelText: {
+        fontSize: px2sp(15),
+        color: "#2763FF",
+    },
+    itemContainer: {
+        display: "flex",
+        borderRadius: px2dp(10),
+        overflow: "hidden",
+        backgroundColor: "#f1f1f1",
+    },
+    item: {
+        height: px2dp(50),
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "white",
+        marginTop: px2dp(0.75),
+    },
+    itemText: {
+        fontSize: px2sp(12),
+        color: "#666666",
+    },
+});

package/dist/components/Hud/AlertView/AlertView.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+export type AlertViewOptions = {
+    title: string;
+    content: string | React.ReactElement;
+    wrapperStyle: StyleProp<ViewStyle>;
+    cancelText: string;
+    cancelContainerStyle: StyleProp<ViewStyle>;
+    cancelTextStyle: StyleProp<TextStyle>;
+    cancel: () => void;
+    cancelDisabled: boolean;
+    confirmText: string;
+    confirmContainerStyle: StyleProp<ViewStyle>;
+    confirmTextStyle: StyleProp<TextStyle>;
+    confirm: () => void;
+};
+type RefAttributes = {
+    show: (options: Partial<AlertViewOptions>) => void;
+    hide: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<RefAttributes>>;
+export default _default;
+export declare const alertViewRef: React.RefObject<RefAttributes | null>;
+export declare const showAlertModal: (props: Partial<AlertViewOptions>) => void;
+//# sourceMappingURL=AlertView.d.ts.map

package/dist/components/Hud/AlertView/AlertView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertView.d.ts","sourceRoot":"","sources":["../../../../src/components/Hud/AlertView/AlertView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAUL,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;;AAKF,wBA+HG;AAEH,eAAO,MAAM,YAAY,uCAAmC,CAAC;AAE7D,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,CAAC,gBAAgB,CAAC,SAE9D,CAAC"}

package/dist/components/Hud/AlertView/AlertView.js

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { View, Text, StyleSheet, Platform, Modal, StatusBar, TouchableOpacity, Animated, Easing, } from "react-native";
+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;
+            // await sleep(50)
+            startAnimate(1);
+        },
+        hide,
+    }), []);
+    const hide = async () => {
+        startAnimate(0.3);
+        // await sleep(50)
+        setState(defaultState);
+    };
+    let scale_anim = React.useRef(new Animated.Value(0.3)).current;
+    const startAnimate = (x) => {
+        Animated.timing(scale_anim, {
+            toValue: x,
+            useNativeDriver: true,
+            duration: 150,
+            easing: Easing.ease,
+        }).start();
+    };
+    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 visible={state.visible} transparent animationType="fade" onRequestClose={() => {
+            // hide()
+        }}>
+      <View style={styles.container}>
+        <Animated.View style={[
+            styles.wrapper,
+            state.wrapperStyle,
+            { transform: [{ scale: scale_anim }] },
+        ]}>
+          {state.title && <Text style={styles.titleText}>{state.title}</Text>}
+          {(() => {
+            if (typeof state.content == "string")
+                return <Text style={styles.contentText}>{state.content}</Text>;
+            if (React.isValidElement(state.content))
+                return state.content;
+            return <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} disabled={state.cancelDisabled} 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>)}
+        </Animated.View>
+      </View>
+    </Modal>);
+});
+export const alertViewRef = React.createRef();
+export const showAlertModal = (props) => {
+    alertViewRef.current?.show(props);
+};
+// const sleep = (msec?: number) => {
+//     return new Promise(resolve => {
+//         setTimeout(resolve, msec || 350);
+//     });
+// }
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        backgroundColor: "#00000088",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        // minWidth: '70%',
+        minWidth: deviceWidth - px2dp(60),
+        backgroundColor: "white",
+        overflow: "hidden",
+        borderRadius: px2dp(10),
+        display: "flex",
+        padding: px2dp(15),
+    },
+    titleText: {
+        maxWidth: deviceWidth - px2dp(90),
+        fontSize: px2sp(18),
+        marginBottom: px2dp(20),
+        // backgroundColor: 'red',
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "#1A1A1A",
+    },
+    contentText: {
+        maxWidth: deviceWidth - px2dp(90),
+        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",
+    },
+});

package/dist/components/Hud/Hud.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { showAlertModal } from './AlertView/AlertView';
+import { showAlertBottomModal } from './AlertBottomView/AlertBottomView';
+import { showAlertSheetModal } from './AlertSheetView/AlertSheetView';
+import { hideLoading, showLoading } from './Loading/Loading';
+import { showToast } from './Toast/Toast';
+import { showPopoverView, hidePopoverView } from './PopoverView/PopoverView';
+import { showScanner, hideScanner } from './Scanner/Scanner';
+export declare const Hud: React.FC<{}>;
+export { showAlertModal, showToast, showLoading, hideLoading, showAlertBottomModal, showAlertSheetModal, showPopoverView, hidePopoverView, showScanner, hideScanner, };
+//# sourceMappingURL=Hud.d.ts.map

package/dist/components/Hud/Hud.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hud.d.ts","sourceRoot":"","sources":["../../../src/components/Hud/Hud.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACiC,cAAc,EACrD,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAC6C,oBAAoB,EACvE,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAC2C,mBAAmB,EACpE,MAAM,iCAAiC,CAAA;AAExC,OAAO,EACH,WAAW,EAAuB,WAAW,EAChD,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EACH,SAAS,EACZ,MAAM,eAAe,CAAA;AAGtB,OAAO,EAAE,eAAe,EAAE,eAAe,EAA+B,MAAM,2BAA2B,CAAA;AAGzG,OAAO,EACH,WAAW,EAAE,WAAW,EAC3B,MAAM,mBAAmB,CAAA;AAK1B,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAe5B,CAAA;AAGD,OAAO,EACH,cAAc,EACd,SAAS,EACT,WAAW,EAAE,WAAW,EACxB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAC,WAAW,GAC1B,CAAA"}

package/dist/components/Hud/Hud.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:10:04
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-03-23 11:13:55
+ * @FilePath: /aks-fire-app/node_modules/@aks-dev/easyui/lib/Hud/Hud.tsx
+ */
+import * as React from 'react';
+// import { StyleSheet } from 'react-native'
+import { alertViewRef, default as AlertView, showAlertModal } from './AlertView/AlertView';
+import { alertBottomViewRef, default as AlertBottomView, showAlertBottomModal } from './AlertBottomView/AlertBottomView';
+import { alertSheetViewRef, default as AlertSheetView, showAlertSheetModal } from './AlertSheetView/AlertSheetView';
+import { hideLoading, Loading, loadingRef, showLoading } from './Loading/Loading';
+import { showToast, Toast, toastRef } from './Toast/Toast';
+import { showPopoverView, hidePopoverView, popoverViewRef, PopoverView } from './PopoverView/PopoverView';
+import { showScanner, hideScanner, scannerRef, Scanner } from './Scanner/Scanner';
+export const Hud = () => React.cloneElement(<></>, {
+// ...StyleSheet.absoluteFillObject,
+// display: 'flex',
+}, [
+    <Loading key="hud-0" ref={loadingRef}/>,
+    <Toast key="hud-1" ref={toastRef}/>,
+    <AlertView key="hud-2" ref={alertViewRef}/>,
+    <AlertBottomView key="hud-3-0" ref={alertBottomViewRef}/>,
+    <AlertSheetView key="hud-3-1" ref={alertSheetViewRef}/>,
+    <PopoverView key="hud-4" ref={popoverViewRef}/>,
+    <Scanner key="hud-5" ref={scannerRef}/>,
+]);
+export { showAlertModal, showToast, showLoading, hideLoading, showAlertBottomModal, showAlertSheetModal, showPopoverView, hidePopoverView, showScanner, hideScanner, };

package/dist/components/Hud/Loading/Loading.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type RefAttributes = {
+    showLoading: (content?: string) => void;
+    hideLoading: () => void;
+};
+export declare const Loading: React.ForwardRefExoticComponent<React.RefAttributes<RefAttributes>>;
+export declare const loadingRef: React.RefObject<RefAttributes | null>;
+export declare const showLoading: (content?: string) => void | undefined;
+export declare const hideLoading: () => void | undefined;
+export {};
+//# sourceMappingURL=Loading.d.ts.map

package/dist/components/Hud/Loading/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/components/Hud/Loading/Loading.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,OAAO,qEAoClB,CAAC;AAEH,eAAO,MAAM,UAAU,uCAAmC,CAAC;AAC3D,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,qBACF,CAAC;AAC3C,eAAO,MAAM,WAAW,wBAA0C,CAAC"}

package/dist/components/Hud/Loading/Loading.js

@@ -0,0 +1,66 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-09-09 10:55:48
+ * @FilePath: /@aks-dev/easyui/lib/Hud/Loading/Loading.tsx
+ */
+import React, { useImperativeHandle, useState } from "react";
+import { View, ActivityIndicator, StyleSheet, Text, Dimensions, TouchableOpacity, BackHandler, } from "react-native";
+export const Loading = React.forwardRef((_, ref) => {
+    const [show, setShow] = useState(false);
+    const [tipText, setTipText] = useState("加载中");
+    React.useEffect(() => {
+        const onBackPress = () => show;
+        BackHandler.addEventListener("hardwareBackPress", onBackPress);
+        // return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [show]);
+    useImperativeHandle(ref, () => ({
+        showLoading: (content) => {
+            setShow(true);
+            setTipText(content || "加载中");
+        },
+        hideLoading: () => {
+            setShow(false);
+        },
+    }), [show]);
+    if (!show)
+        return null;
+    return (<TouchableOpacity disabled style={styles.container}>
+      <View style={styles.warpper}>
+        <ActivityIndicator color="white" size="large"/>
+        <Text numberOfLines={5} style={styles.title}>
+          {tipText}
+        </Text>
+      </View>
+    </TouchableOpacity>);
+});
+export const loadingRef = React.createRef();
+export const showLoading = (content) => loadingRef.current?.showLoading(content);
+export const hideLoading = () => loadingRef.current?.hideLoading();
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFill,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        // backgroundColor:'red'
+    },
+    warpper: {
+        backgroundColor: "#00000088",
+        padding: 40,
+        paddingVertical: 20,
+        borderRadius: 10,
+        justifyContent: "center",
+        alignItems: "center",
+        minWidth: 90,
+    },
+    title: {
+        marginTop: 5,
+        fontSize: 13,
+        lineHeight: 16,
+        color: "white",
+        maxWidth: SCREEN_WIDTH * 0.5,
+    },
+});

package/dist/components/Hud/PopoverView/PopoverView.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ViewStyle, StyleProp } from "react-native";
+type RefAttributes = {
+    showPopoverView: (options: Partial<PopoverViewOptions>) => void;
+    hidePopoverView: () => void;
+};
+export type PopoverViewOptions = {
+    content: React.ReactNode;
+    style: StyleProp<ViewStyle>;
+    disabled: boolean;
+};
+export declare const PopoverView: React.ForwardRefExoticComponent<React.RefAttributes<RefAttributes>>;
+export declare const popoverViewRef: React.RefObject<RefAttributes | null>;
+export declare const showPopoverView: (options: Partial<PopoverViewOptions>) => void | undefined;
+export declare const hidePopoverView: () => void | undefined;
+export {};
+//# sourceMappingURL=PopoverView.d.ts.map