@aks-dev/easyui 1.0.163 → 1.1.2

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.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.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.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.js

@@ -0,0 +1,47 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-12-21 15:36:06
+ * @FilePath: /@aks-dev/easyui/lib/Hud/PopoverView/PopoverView.tsx
+ */
+import React, { useImperativeHandle, useState } from "react";
+import { StyleSheet, TouchableOpacity, BackHandler, } from "react-native";
+export const PopoverView = React.forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [options, setOptions] = useState();
+    React.useEffect(() => {
+        const onBackPress = () => visible;
+        BackHandler.addEventListener("hardwareBackPress", onBackPress);
+        // return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [visible]);
+    useImperativeHandle(ref, () => ({
+        showPopoverView: (options) => {
+            setVisible(true);
+            setOptions(options);
+        },
+        hidePopoverView: () => {
+            setVisible(false);
+            setOptions(undefined);
+        },
+    }), [visible]);
+    if (!visible)
+        return null;
+    return (<TouchableOpacity activeOpacity={1} style={[styles.container, options?.style]} disabled={options?.disabled} onPress={(e) => {
+            setVisible(false);
+            setOptions(undefined);
+            // e.stopPropagation()
+        }}>
+      {React.isValidElement(options?.content) && options?.content}
+    </TouchableOpacity>);
+});
+export const popoverViewRef = React.createRef();
+export const showPopoverView = (options) => popoverViewRef.current?.showPopoverView(options);
+export const hidePopoverView = () => popoverViewRef.current?.hidePopoverView();
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFill,
+        display: "flex",
+        // backgroundColor:'red'
+    },
+});