@aks-dev/easyui 1.0.163 → 1.1.2

package/dist/components/Hud/Scanner/Scanner.js

@@ -0,0 +1,301 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2023-03-23 15:04:18
+ * @FilePath: /@aks-dev/easyui/lib/Hud/Scanner/Scanner.tsx
+ */
+import React, { useImperativeHandle, useState } from "react";
+import { Animated, BackHandler, Easing, Image, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+import { Camera, useCameraDevice, useCameraPermission, useCodeScanner, } from "react-native-vision-camera";
+import { PERMISSIONS, requestMultiple } from "react-native-permissions";
+import { navigationBarHeight, px2dp, statusBarHeight, } from "../../../screen/px2dp";
+import { px2sp } from "../../../screen/px2sp";
+import * as utils from "../../../utils/lazy";
+import { showToast } from "../Toast/Toast";
+// enum SCANNER_TYPE {
+//     DENIED = -1,//没有开始权限
+//     START = 0,//没有扫描结果，继续扫描
+//     SUCCESS = 1,//已有扫描结果，停止扫描
+// }
+export const Scanner = React.forwardRef((_, ref) => {
+    const [show, setShow] = useState(false);
+    const moveAnim = React.useRef(new Animated.Value(0)).current;
+    const [pointStyle, setPointStyle] = React.useState();
+    const cameraRef = React.useRef(null);
+    const _cbRef = React.useRef(null);
+    const _scanerResultRef = React.useRef(null);
+    const device = useCameraDevice("back");
+    const { hasPermission } = useCameraPermission();
+    React.useEffect(() => {
+        const onBackPress = () => {
+            if (show) {
+                _hideScanner();
+            }
+            return true;
+        };
+        BackHandler.addEventListener("hardwareBackPress", onBackPress);
+        // return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [show]);
+    useImperativeHandle(ref, () => ({
+        showScanner: _showScanner,
+        hideScanner: _hideScanner,
+    }), [show]);
+    const _showScanner = async (cb) => {
+        let res = await requestMultiple([
+            PERMISSIONS.IOS.CAMERA,
+            PERMISSIONS.ANDROID.CAMERA,
+        ]);
+        if (res[PERMISSIONS.ANDROID.CAMERA] == "granted" ||
+            res[PERMISSIONS.IOS.CAMERA] == "granted") {
+            _scanerResultRef.current = null;
+            setShow(true);
+            setPointStyle({});
+            await utils.sleep();
+            animationStart();
+            _cbRef.current = cb;
+        }
+        else {
+            _hideScanner();
+            showToast("您未开启相机权限，暂不能使用此功能");
+        }
+    };
+    const _hideScanner = async () => {
+        animationStop();
+        await utils.sleep();
+        setShow(false);
+    };
+    const animation = Animated.loop(Animated.sequence([
+        Animated.timing(moveAnim, {
+            toValue: px2dp(222),
+            duration: 3000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        }),
+        Animated.timing(moveAnim, {
+            toValue: 0,
+            duration: 3000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        }),
+    ]));
+    const animationStart = async () => {
+        cameraRef.current?.resumePreview();
+        animation.start(({ finished }) => {
+            // console.log('animationStart finished', finished)
+            if (finished) {
+                animation.reset();
+                animation.start();
+            }
+        });
+    };
+    const animationStop = (result) => {
+        cameraRef.current?.pausePreview();
+        animation.stop();
+    };
+    const codeScanner = useCodeScanner({
+        codeTypes: ["qr", "ean-13"],
+        onCodeScanned: (codes) => {
+            console.log(`Scanned ${codes.length} codes!`);
+            let code = codes.find((i) => i.value);
+            if (code?.value && _scanerResultRef.current == undefined) {
+                _scanerResultRef.current = code.value;
+                _cbRef.current(code.value);
+                _hideScanner();
+            }
+        },
+    });
+    if (!show)
+        return null;
+    if (!hasPermission)
+        return <Text>PermissionsPage</Text>;
+    if (device == null)
+        return <Text>NoCameraDeviceError</Text>;
+    return (<TouchableOpacity disabled style={StyleSheet.absoluteFillObject}>
+      <Camera ref={cameraRef} style={styles.camera} device={device} codeScanner={codeScanner} isActive={true}>
+        {/* 导航栏 */}
+        <View style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: navigationBarHeight,
+            marginTop: statusBarHeight,
+            position: "relative",
+        }}>
+          <TouchableOpacity onPress={() => _hideScanner()} style={{
+            height: navigationBarHeight,
+            width: px2dp(50),
+            paddingLeft: px2dp(15),
+            position: "absolute",
+            left: 0,
+            display: "flex",
+            justifyContent: "center",
+        }}>
+            <Image source={require("./assets/icon_back_white.png")} style={{ width: px2dp(20), height: px2dp(20) }} resizeMode="contain"/>
+          </TouchableOpacity>
+          <Text style={{
+            fontSize: px2sp(16),
+            color: "white",
+            fontWeight: "bold",
+        }}>
+            扫一扫
+          </Text>
+        </View>
+
+        {/* 动画框 */}
+        <View style={styles.scanContainer}>
+          <View style={styles.rectangle}>
+            <View style={styles.rectangleLeft}/>
+            <View style={styles.cameraBackground}>
+              <Animated.View style={[
+            styles.scanLine,
+            { transform: [{ translateY: moveAnim }] },
+        ]}/>
+              <View style={styles.reactLineTopLeftX}/>
+              <View style={styles.reactLineTopLeftY}/>
+              <View style={styles.reactLineTopRightX}/>
+              <View style={styles.reactLineTopRightY}/>
+              <View style={styles.reactLineBottomLeftX}/>
+              <View style={styles.reactLineBottomLeftY}/>
+              <View style={styles.reactLineBottomRightX}/>
+              <View style={styles.reactLineBottomRightY}/>
+            </View>
+            <View style={styles.rectangleRight}/>
+          </View>
+
+          {/* <TouchableOpacity onPress={() => setTorchOn(!torchOn)}>
+            <Image
+              source={
+                torchOn
+                  ? require("./assets/flashlight-blue.png")
+                  : require("./assets/flashlight-white.png")
+              }
+              style={styles.flashlight}
+            />
+          </TouchableOpacity> */}
+          <Text style={styles.rectangleText}>
+            将二维码/条码放入框内，即可自动扫描
+          </Text>
+        </View>
+        <View style={pointStyle}/>
+      </Camera>
+    </TouchableOpacity>);
+});
+const transparent = "#00000000";
+const lineColor = "#6ab3ff";
+const scanW = 225;
+const scanCornerLineLength = 15;
+const scanCornerLineHeight = 3;
+const styles = StyleSheet.create({
+    camera: {
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        backgroundColor: "red",
+    },
+    cameraBackground: {
+        width: px2dp(scanW),
+        height: px2dp(scanW),
+        backgroundColor: transparent,
+    },
+    scanContainer: {
+        display: "flex",
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    rectangle: { flexDirection: "row", overflow: "hidden" },
+    rectangleLeft: {
+        backgroundColor: transparent,
+        height: px2dp(scanW),
+        width: px2dp(scanW),
+    },
+    rectangleRight: {
+        backgroundColor: transparent,
+        height: px2dp(scanW),
+        width: px2dp(scanW),
+    },
+    rectangleText: { color: "#fff", lineHeight: px2dp(15) },
+    scanLine: {
+        width: px2dp(scanW),
+        height: px2dp(scanCornerLineHeight),
+        borderRadius: px2dp(25),
+        backgroundColor: lineColor,
+    },
+    reactLineTopLeftX: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: px2dp(scanCornerLineLength),
+        height: px2dp(scanCornerLineHeight),
+        backgroundColor: lineColor,
+    },
+    reactLineTopLeftY: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: px2dp(scanCornerLineHeight),
+        height: px2dp(scanCornerLineLength),
+        backgroundColor: lineColor,
+    },
+    reactLineTopRightX: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: px2dp(scanCornerLineLength),
+        height: px2dp(scanCornerLineHeight),
+        backgroundColor: lineColor,
+    },
+    reactLineTopRightY: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: px2dp(scanCornerLineHeight),
+        height: px2dp(scanCornerLineLength),
+        backgroundColor: lineColor,
+    },
+    reactLineBottomLeftX: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: px2dp(scanCornerLineLength),
+        height: px2dp(scanCornerLineHeight),
+        backgroundColor: lineColor,
+    },
+    reactLineBottomLeftY: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: px2dp(scanCornerLineHeight),
+        height: px2dp(scanCornerLineLength),
+        backgroundColor: lineColor,
+    },
+    reactLineBottomRightX: {
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+        width: px2dp(scanCornerLineLength),
+        height: px2dp(scanCornerLineHeight),
+        backgroundColor: lineColor,
+    },
+    reactLineBottomRightY: {
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+        width: px2dp(scanCornerLineHeight),
+        height: px2dp(scanCornerLineLength),
+        backgroundColor: lineColor,
+    },
+    flashlight: {
+        width: px2dp(30),
+        height: px2dp(30),
+        resizeMode: "contain",
+        marginTop: px2dp(50),
+        marginBottom: px2dp(15),
+        marginHorizontal: px2dp(15),
+    },
+    grantedText: { lineHeight: px2dp(30), color: lineColor, fontWeight: "bold" },
+});
+export const scannerRef = React.createRef();
+export const showScanner = (cb) => scannerRef.current?.showScanner(cb);
+export const hideScanner = () => scannerRef.current?.hideScanner();

package/dist/components/Hud/Toast/Toast.js

@@ -0,0 +1,71 @@
+/*
+ * @Author: shiguo
+ * @Date: 2021-04-27 10:38:04
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-09-09 10:58:34
+ * @FilePath: /@aks-dev/easyui/lib/Hud/Toast/Toast.tsx
+ */
+import React, { useImperativeHandle, useState, useRef } from "react";
+import { View, StyleSheet, Text, Dimensions, Animated, Easing, } from "react-native";
+const errorMsg = "(^_^)∠※ 送你一束小花";
+export const Toast = React.forwardRef((_, ref) => {
+    const [tipText, setTipText] = useState(errorMsg);
+    const fade = useRef(new Animated.Value(0)).current;
+    const fadeAnimation = Animated.sequence([
+        Animated.timing(fade, {
+            toValue: 1,
+            duration: 750,
+            useNativeDriver: true,
+            easing: Easing.linear,
+        }),
+        Animated.delay(3000),
+        Animated.timing(fade, {
+            toValue: 0,
+            duration: 750,
+            useNativeDriver: true,
+            easing: Easing.linear,
+        }),
+    ]);
+    useImperativeHandle(ref, () => ({
+        showToast: (content) => {
+            setTipText(content || errorMsg);
+            fadeAnimation.reset();
+            fadeAnimation.start();
+        },
+    }));
+    return (<Animated.View style={{ ...styles.toastContainer, opacity: fade }}>
+      <View style={styles.toastTipsContainer}>
+        <Text numberOfLines={5} style={{ ...styles.toastTitle }}>
+          {tipText}{" "}
+        </Text>
+      </View>
+    </Animated.View>);
+});
+export const toastRef = React.createRef();
+export const showToast = (content) => toastRef.current?.showToast(content);
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const styles = StyleSheet.create({
+    toastContainer: {
+        position: "absolute",
+        bottom: 100,
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    toastTipsContainer: {
+        position: "absolute",
+        backgroundColor: "#00000088",
+        padding: 10,
+        // paddingVertical: 4,
+        borderRadius: 2,
+        justifyContent: "center",
+        alignItems: "center",
+        minWidth: 120,
+    },
+    toastTitle: {
+        fontSize: 13,
+        lineHeight: 20,
+        color: "white",
+        maxWidth: SCREEN_WIDTH * 0.8,
+    },
+});

package/dist/components/MenuView/MenuView.js

@@ -0,0 +1,184 @@
+import React from "react";
+import { Image, ScrollView, Text, TouchableOpacity, View, } from "react-native";
+import { deviceHeight, deviceWidth } from "../../screen/px2dp";
+// import * as utils from '../../utils/lazy';
+import { hidePopoverView, showPopoverView } from "../Hud/Hud";
+// type Reducer = (prevState: State, action: Partial<State>) => State
+export default (props) => {
+    const { defaultAlignHorizontal = "left", defaultAlignVertical = "bottom" } = props;
+    const [state, dispatch] = React.useReducer((prevState, action) => Object.assign({}, prevState, action), {});
+    // const containerRef = React.useRef<{ measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => void }>()
+    const containerRef = React.useRef(null);
+    const rootView = React.useRef({ pageX: 0, pageY: 0, width: 0, height: 0 });
+    const sc = React.useRef({ x: 0, y: 0, width: 0, height: 0 });
+    // React.useEffect(() => {
+    //     ; (async () => {
+    //         await utils.sleep()
+    //         containerRef.current?.measure((...args) => {
+    //             console.log('containerRef', args)
+    //             if (args.length == 6) {
+    //                 _container.current = {
+    //                     x: args[4],
+    //                     y: args[5],
+    //                     width: args[2],
+    //                     height: args[3],
+    //                 }
+    //             }
+    //         })
+    //     })()
+    // })
+    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);
+            });
+        });
+    };
+    const getLayoutInfos = () => {
+        let alignVertical = defaultAlignVertical;
+        let alignHorizontal = defaultAlignHorizontal;
+        let width = rootView.current.width;
+        let height = rootView.current.height;
+        let x = rootView.current.pageX;
+        // let y = (StatusBar.currentHeight || 0) + _container.current.y + height
+        let y = rootView.current.pageY + height;
+        if (x > Math.abs(deviceWidth - width - x)) {
+            alignHorizontal = "right";
+        }
+        if (y > deviceHeight * 0.5) {
+            alignVertical = "top";
+        }
+        /**todo: target_width的获取是延迟的，所以这里又问题 */
+        const target_width = sc.current.width;
+        const target_height = CELL_HEIGHT * (Math.min(props.data?.length || 0, 5) || 0);
+        return {
+            alignVertical,
+            alignHorizontal,
+            width,
+            height,
+            x,
+            y,
+            target_width,
+            target_height,
+        };
+    };
+    const reLayout = () => {
+        let { alignVertical, alignHorizontal, width, height, x, y, target_width, target_height, } = getLayoutInfos();
+        // console.log({ getLayoutInfos: getLayoutInfos() })
+        const layout = () => {
+            if (alignHorizontal == "left") {
+                if (target_width + x > deviceWidth) {
+                    return {
+                        left: Math.abs(deviceWidth - target_width) * 0.7,
+                        top: y,
+                    };
+                }
+                return {
+                    left: Math.max(x, 15),
+                    top: y,
+                };
+            }
+            else {
+                let _x = deviceWidth - x - width;
+                if (target_width + _x > deviceWidth) {
+                    return {
+                        right: Math.abs(deviceWidth - target_width) * 0.7,
+                        top: y,
+                    };
+                }
+                return {
+                    right: Math.max(_x, 15),
+                    top: y,
+                };
+            }
+        };
+        if (alignVertical == "bottom") {
+            y = y + PADDING;
+            return layout();
+        }
+        else {
+            y = rootView.current.pageY - target_height - PADDING * 2 - ARROW_HEIGHT;
+            return layout();
+        }
+    };
+    const PADDING = 10;
+    const ARROW_HEIGHT = 12;
+    const CELL_HEIGHT = 36;
+    const show = async () => {
+        props.onContainerClick && props.onContainerClick();
+        if (props.data == undefined || props.data?.length == 0)
+            return;
+        /**重新获取rootview的定位 */
+        await getRootViewlayoutPromise();
+        /**重新获取rootview的定位 */
+        showPopoverView({
+            content: (<TouchableOpacity activeOpacity={1} style={{
+                    position: "absolute",
+                    minWidth: deviceWidth * 0.36,
+                    maxWidth: deviceWidth * 0.8,
+                    minHeight: CELL_HEIGHT + PADDING * 2,
+                    maxHeight: CELL_HEIGHT * 5 + PADDING * 2,
+                    borderRadius: 6,
+                    backgroundColor: "#000000ee",
+                    // overflow: 'hidden' ,
+                    padding: PADDING,
+                    ...reLayout(),
+                }}>
+          <View style={{
+                    width: ARROW_HEIGHT,
+                    height: ARROW_HEIGHT,
+                    backgroundColor: "#000000ee",
+                    position: "absolute",
+                    zIndex: 1,
+                    transform: [{ rotateZ: "45deg" }],
+                    ...(() => {
+                        const { alignVertical, alignHorizontal } = getLayoutInfos();
+                        if (alignVertical == "bottom" && alignHorizontal == "left")
+                            return { left: "20%", top: -5 };
+                        if (alignVertical == "bottom" && alignHorizontal == "right")
+                            return { right: "20%", top: -5 };
+                        if (alignVertical == "top" && alignHorizontal == "left")
+                            return { left: "20%", bottom: -5 };
+                        if (alignVertical == "top" && alignHorizontal == "right")
+                            return { right: "20%", bottom: -5 };
+                        return {};
+                    })(),
+                }}/>
+
+          <ScrollView onLayout={(e) => {
+                    // console.log('target onLayout', e.nativeEvent.layout)
+                    let _sc = e.nativeEvent.layout;
+                    sc.current = _sc;
+                }}>
+            {props.data?.map((i, idx) => {
+                    return (<TouchableOpacity activeOpacity={0.7} key={`sg-memnu-${idx}`} style={{
+                            height: CELL_HEIGHT,
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            // ,backgroundColor:utils.randomcolor()
+                        }} onPress={(e) => {
+                            props.onItemClick && props.onItemClick(idx, i.extra);
+                            hidePopoverView();
+                        }}>
+                  {i.icon && (<Image style={{ width: 18, height: 18, marginRight: 4 }} source={i.icon}/>)}
+                  <Text style={{ flexShrink: 1, fontSize: 14, color: "white" }}>
+                    {i.text}
+                  </Text>
+                </TouchableOpacity>);
+                })}
+          </ScrollView>
+        </TouchableOpacity>),
+        });
+    };
+    return (<TouchableOpacity ref={containerRef} onPress={(e) => show()} {...props}/>);
+};

package/{lib/Modal/Modal.tsx → dist/components/Modal/Modal.js}

@@ -5,7 +5,4 @@
  * @LastEditTime: 2022-10-27 16:37:32
  * @FilePath: /@aks-dev/easyui/lib/Modal/Modal.tsx
  */
-
-
-
-export { default as Modal, ModalProps } from 'react-native-modal'
+export { default as Modal } from 'react-native-modal';